这里整理一下思路，首先布局一下图片，其次去写按钮的样式，并把获取到的价格以及名称放在图片又边的位置 最后计算购买数量以及限购条件
这里主要说一下按钮部分怎么去写，效果大概如下
首先需要准备一个数组里面包含俩对象
selects代表一个数组里面包含selectdd用来判断颜色，list列表中放两个按钮名称
selects: [
{
title: "颜色",
selected: 0,
list: [
{
name: "黄色",
},
{
name: "黑色",
},
],
},
{
title: "套餐",
selected: 0,
list: [
{
name: "标配",
},
{
name: "套餐1",
},
],
},
],
以下是两种写法
第一种：不用组件的写法,这种比较简单
<div v-for="(item, index) in selects" :key="index">
<p>{{ item.title }}</p>
<!-- 12/27 -->
<van-button
v-for="(i, ind) in item.list"
:key="ind"
@click="vanBtn(ind,index)"
:class="item.selected === ind?'active':''"
size="mini"
type="info"
plain
>{{ i.name }}</van-button
>
</div>
js部分
vanBtn(ind,index) {
this.selects[index].selected = ind
},
css样式：
.active {
background-color: red;
color: #fff;
}
第二种写法，使用组件去写
要能获取以下坐标：
父组件：
<div v-for="(item, index) in selects" :key="index">
<p>{{ item.title }}</p>
<!-- 12/27 -->
<debtns
:label="item"
:num="index"
@btnClick="itemClick(arguments)"
></debtns>
</div>
这里传多个参数需要在点击事件中添加arguments来接收多个参数
import debtns from '../components/debtns.vue'
components: { debtns},
子组件：
<template>
<div>
<van-button
v-for="(i, ind) in label.list"
:key="ind"
@click="vanBtn(ind)"
:class="label.selected === ind ? 'active' : ''"
size="mini"
type="info"
plain>
{{ i.name }}
</van-button>
</div>
</template>
<script>
export default {
name: "VantDebtns",
data() {
return {};
},
mounted() {},
props:{
label:{
type:Object
},
num:{
type:Number
}
},
methods: {
vanBtn(ind){
this.$emit('btnClick',ind,this.num)
}
},
};
</script>
<style scoped>
.active {
background-color: red;
color: #fff;
}
</style>
点击切换事件
itemClick(e) {
console.log(e);
var ind = e[0];
var num = e[1];
console.log(ind);
console.log(num);
this.selects[num].selected = ind;
console.log(this.selects[num].selected);
},
这里传过来的e有个数组，这时候需要把他们分离开
写好之后点击事件功能就实现了！
接下来就进行绑定真实数据，方法（可以把写好的数组的格式匹配到请求的数据位置中）
获取每一项中用红色部分框起来的部分，并且把遍历好的goodsSkusCardValue数组放在对应的list列表中，当然这里需要新生成之前数组中没有的id和selected值
之前的数组：
selects: [
/* {
title: "颜色",
selected: 0,
list: [
{
name: "黄色",
},
{
name: "黑色",
},
],
},
{
title: "套餐",
selected: 0,
list: [
{
name: "标配",
},
{
name: "套餐1",
},
],
}, */
],
this.selects = v.data.data.goodsSkusCard.map((res) => {
var list = res.goodsSkusCardValue.map((item) => {
return {
id: item.id,
name: item.value,
};
});
console.log(list);
return {
id: res.id,
selected: 0,
title: res.name,
list: list,
};
});
这样把旧数组删除替换成新的就可以把真数据传进来
下面就是将按钮中的数字放到图片旁边，并生成一个字符串显示在页面上 ，而在数据中并没有想要的这种字符串格式，所以这里要自己去写
computed: {
checkgoodsSkus(){
var checkgoodsSkus2 = this.selects.map(v=>{
console.log(v.list[v.selected].name);
})
}
}
这里我需要获取按钮点击后的对应的值是什么，就让他以字符串的形式显示在页面中
下面解释一下这段代码的意思
var checkgoodsSkus2 = this.selects.map(v=>{
console.log(v.list[v.selected].name);
})
看之前的旧数组，通过v.list获取list数组，因为每次点击要获取他的selected的索引值，所以要在list中v.selected获取name值
{
title: "套餐",
selected: 0,
list: [
{
name: "标配",
},
{
name: "套餐1",
},
],
},
之后用字符串拼接起来即可：
computed: {
// 获取对应的按钮值用join拼接起来
checkgoodsSkus() {
var checkgoodsSkus2 = this.selects.map((v) => {
return v.list[v.selected].name;
// console.log(v.list[v.selected].name);
});
return checkgoodsSkus2.join(",");
},
},
渲染在对应的页面上即可：
<p>{{ checkgoodsSkus }}</p>
获取对应的价格：
下面是将每个skusText中的四种价格进行联动
// 查找到的索引值
checkgoodsSkusIndex() {
if (this.detail.goodsSkus) {
var index = this.detail.goodsSkus.findIndex((v) => {
return this.checkgoodsSkus === v.skusText;
});
return index;
} else {
return -1;
}
},
// 获取价格
showPrice() {
var index = this.checkgoodsSkusIndex;
if (this.detail.goodsSkus) {
console.log(this.detail.goodsSkus[index].pprice);
return this.detail.goodsSkus[index].pprice;
} else {
console.log(this.detail.min_price);
return this.detail.min_price;
}
},
渲染showPrice即可
最后添加一个商品的按钮来绑定对应套餐中的最大数量,可以用到vant中的自带的步进器stepper
<div>
<span>
购买数量
<van-stepper
style="float: right; display: inline-block; width: 100px"
v-model="value"
:max='stock'
/>
</span>
</div>
// 获取最大值
stock() {
var index = this.checkgoodsSkusIndex;
// console.log(index);
if (this.detail.goodsSkus) {
return this.detail.goodsSkus[index].stock;
} else {
return;
}
},
