tabs选项卡和checkbox多项选择的问题
选择第一个分类内衬，再选择第一个和第二个商品，如下图。
当我再点击第三个分类裙类的时候，我并没有选择任何商品，但是它也是会自动选择第一个和第二个商品，如下图。
我想要的效果是，比如选择内衬后选择第一个和第二个商品，然后再选择裙类不选择商品，需手动选择
代码如下：
<template>
<view>
<view class="continue">
<view class="btnbox" @click="OpenCate()">+</view>
<!-- 内容为空 -->
<u-empty v-if="shopList.length == 0" marginTop="300" iconSize="200" text="无数据! 请添加数据" textSize="30"
mode="data" />
<view class="shopBox" v-else>
<view class="shopItem" v-for="(item,index) in shopList" :key="index">
<view class="Dt">
<image class="logo" :src="item.logo" mode="aspectFill"></image>
<view class="shopName">{{item.title}}</view>
</view>
<view class="Dt">
<view class="title">价格：<text class="Ttext">{{item.price}}</text></view>
<!-- <view class="title">数量：<text class="Ttext">{{item.num}}</text></view> -->
</view>
<view class="Dt">
<u-number-box integer min="0" :value="item.num" @change="toNum($event,index)" buttonSize="50">
</u-number-box>
</view>
<view class="operation">
<view class="cancel" @click="detele(index)">取消</view>
</view>
</view>
<view class="submit" @click="submit()">提交订单</view>
</view>
</view>
<!-- 分类弹窗 -->
<uni-popup ref="popup" :mask-click="false">
<view class="popuoBox">
<view class="">
<u-tabs keyName="title" :list="cartList" @click="click()" lineWidth="50"></u-tabs>
</view>
<scroll-view scroll-y="true" class="popuoBoxTop">
<checkbox-group @change="checkboxChange($event)">
<label class="popuoBoxItem" v-for="(item,index) in towCartList" :key="index">
<view class="Bt">
<image class="shopImg" :src="item.logo" mode=""></image>
<view class="shopName">{{item.title}}</view>
</view>
<view class="Bt">
<view class="priceTitle">价格:<text class="price">{{item.price}}</text></view>
</view>
<checkbox :value="item.id" :checked="seleceArr" />
</label>
</checkbox-group>
</scroll-view>
<view class="popuoBoxButom">
<view class="close" @click="close()">取消</view>
<view class="yes" @click="OKclose()">确定</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
seleceArr: '',
shopList: [],
cartList: [],
towCartList: [],
checkedArr: [],
goodsArr: []
}
},
onLoad() {
},
onShow() {
},
methods: {
OpenCate() {
this.getCate()
this.$refs.popup.open('center')
},
// 获取一级分类
getCate() {
this.$ajaxRequest.get(this.baseUrl + 'shop/goods/cate', {}, true).then(res => {
if (res.data.code == 200) {
this.cartList = res.data.data
this.click(res.data.data[0])
} else {
uni.showToast({
title: res.data.info,
icon: 'none'
})
}
})
},
// tabs点击
click(item) {
this.getYyList(item.id)
},
// 获取二级分类
getYyList(cate_id) {
let url = ''
if (uni.getStorageSync('token')) {
url = 'shop/goods/goodlist'
} else {
url = 'shop/goods/list'
}
this.$ajaxRequest.get(this.baseUrl + url, {
cate_id: cate_id,
store_id: uni.getStorageSync('UserInfo').store_id
}, true).then(res => {
if (res.data.code == 200) {
this.towCartList = res.data.data
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
}
})
},
checkboxChange(e) {
this.checkedArr = e.detail.value
console.log(e);
},
close() {
this.seleceArr = false
this.$refs.popup.close()
},
OKclose() {
this.seleceArr = false
this.$refs.popup.close()
// console.log(typeof(this.goodsArr));
// return
if (this.goodsArr.length > 0) {
// let checkedStr = this.checkedArr.toString()
for (var i = 0; i < this.checkedArr.length; i++) {
var is_Xt = 0
for (var j = 0; j < this.goodsArr.length; j++) {
if (this.checkedArr[i] == this.goodsArr[j]) {
is_Xt = 1
}
}
if (is_Xt == 1) {
continue
}
this.goodsArr.push(this.checkedArr[i])
}
} else {
this.goodsArr = this.checkedArr
}
let arrGoodsList = this.goodsArr.toString()
this.$ajaxRequest.get(this.baseUrl + 'store/offLine/offLineGoods', {
ids: arrGoodsList,
store_id: uni.getStorageSync('UserInfo').store_id
}, true).then(res => {
if (res.data.code == 200) {
res.data.data.forEach((item, index) => {
item['num'] = 1,
item['logo'] = this.baseDomian + item.logo
})
this.shopList = res.data.data
console.log('this.shopList', this.shopList);
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
}
})
},
toNum(e, index) {
this.shopList[index].num = e.value
},
detele(index) {
this.shopList.splice(index, 1)
console.log(this.shopList);
},
submit() {
let listNum = []
this.shopList.forEach((item,index)=>{
listNum.push(item.num)
})
let arrGoodsList = this.goodsArr.toString()
this.$ajaxRequest.post(this.baseUrl + 'store/offLine/offLineOrder',{
store_id: uni.getStorageSync('UserInfo').store_id,
shop_ids: arrGoodsList,
list_num: listNum
}).then(res => {
console.log(res.data.code);
if(res.data.code == 200){
uni.showToast({
title:'提交成功',
icon:'success',
})
this.shopList = []
}
})
}
}
}
</script>
<style lang="scss">
page {
position: relative;
}
.continue {
.btnbox {
border-radius: 50%;
wvip_priceth: 100rpx;
height: 100rpx;
width: 100rpx;
background-color: $uni-theme;
display: flex;
justify-content: center;
align-items: center;
font-size: 60rpx;
color: #fff;
position: fixed;
bottom: 80rpx;
right: 50rpx;
}
.shopBox {
padding-bottom: 150rpx;
.shopItem {
display: flex;
justify-content: space-between;
padding: 1.5%;
background-color: $uni-bg-color;
margin-bottom: 5rpx;
.Dt {
display: grid;
align-items: center;
.logo {
width: 130rpx;
height: 130rpx;
border-radius: 10rpx;
}
.shopName {
text-align: center;
}
.title {
.Ttext {}
}
}
.operation {
display: flex;
align-items: center;
.cancel {
width: 100rpx;
height: 50rpx;
text-align: center;
line-height: 50rpx;
border: 1px solid red;
background-color: $uni-color-error;
border-radius: 5rpx;
color: #fff;
}
}
}
.submit {
margin-top: 30rpx;
background-color: $uni-theme;
width: 70%;
height: 70rpx;
border-radius: 30rpx;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
margin: 50rpx auto;
}
}
}
.popuoBox {
width: 700rpx;
height: 1100rpx;
background-color: #fff;
border-radius: 30rpx;
.popuoBoxTop {
height: 920rpx;
.popuoBoxItem {
display: flex;
justify-content: space-between;
border-top: 1rpx solid #f0f0f0;
width: 97%;
padding: 1.5%;
.Bt {
display: grid;
align-items: center;
.shopImg {
width: 120rpx;
height: 120rpx;
}
.shopName {
text-align: center;
}
.priceTitle {
.price {}
}
}
}
}
.popuoBoxButom {
height: 100rpx;
display: flex;
font-size: 36rpx;
font-weight: bold;
text-align: center;
// border: 1rpx solid red;
.close {
border-top: 1rpx solid #f0f0f0;
border-right: 1rpx solid #f0f0f0;
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.yes {
border-top: 1rpx solid #f0f0f0;
border-left: 1rpx solid #f0f0f0;
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #61749B;
}
}
}
</style>
