<template> <view class="body"> <view class="tablist" v-if="isShow"> <view class="tab" v-for="(Aitem,Aindex) in tablist" :key="Aindex"> <view class="tab-title"> <view class="ch"> <checkbox :checked="Aitem.aistrue" style="transform: scale(0.7)" @click="changea(Aindex)"> </checkbox> </view> <text>{{Aitem.name}}</text> </view> <view class="tab-body" v-for="(item,index) in Aitem.data" :key="index"> <view class="body-left"> <view class="ch"> <checkbox :checked="item.bistrue" style="transform: scale(0.7)" @click="changeb(Aindex,index)"></checkbox> </view> <image :src="item.img" /> </view> <view class="body-right"> <view class="right-title"> <text>{{item.title}}</text> <text @click="remove(Aindex,index)">删除</text> </view> <view class="right-tab" @click="xuanze=1"> <text v-for="(ia,ib) in item.tab" :key="ib">{{ia}}</text> </view> <view class="right-price"> <text class="price">¥{{item.price}}元</text> <view class="right-num"> <text @click="sub(Aindex,index)">-</text> <text>{{item.num}}</text> <text @click="add(Aindex,index)">+</text> </view> </view> </view> </view> </view> <view class="tabsum"> <view> <text>合计</text> <text class="jg">¥{{sum}}</text> </view> <text class="js" @click="goto">结算</text> </view> </view> <view class="none" v-if="!isShow"> <view class="none-img"> <image src="../../static/img.png" /> <text>暂无商品加入购物车</text> <text>快去选购吧</text> </view> <view class="none-button">去逛逛</view> </view> <view class="xuanze-bg" v-if="xuanze"> <view class="xuanze"> <view class="xuanze-img"> <view class="img-left"> <image src="../../static/img.png" /> <text>¥20</text> </view> <text class="cls" @click="xuanze=0">×</text> </view> <view class="xuanze-body"> <view class="xuanze-tab" v-for="(item,index) in datalist" :key="index"> <text class="tx">{{item.k}}</text> <view class="tab-list"> <text v-for="(ia,ib) in item.v" :key="ib" :class="[ia.disabled?'tb':ia.selected?'tc':'ta']" @click="changetab(index,ib)">{{ia.name}}</text> </view> </view> </view> <view class="shuliang"> <text class="sl">数量</text> <view class="right-num"> <text>-</text> <text>2</text> <text>+</text> </view> </view> <view class="sl-btn"> <text class="btn" @click="xuanze=0">确定</text> </view> </view> </view> </view> </template> <script> export default { data() { return { title: 'Hello', aistrue: 0, bistrue: 0, sum: 0, isShow: 1, xuanze: 1, ia: 0, is: 0, flag: 0, a: 0, b: 0, c: '', arrB: [], chooselist: [], treelist: [], datalist: [], tablist: [{ name: 'A公司', data: [{ title: 'A商品', tab: ['默认:默认', '默认:默认'], price: 219, img: require('@/static/img.png') }] }, { name: 'A公司', data: [{ title: '测试商品1', tab: ['尺寸:大', '性质:新装'], price: 0.01, img: require('@/static/img.png') }, { title: '测试商品2', tab: ['颜色:蓝色'], price: 1, img: require('@/static/img.png') } ] }, { name: 'sku五行行规格测试', data: [{ title: 'C商品', tab: ['默认:默认'], price: 20, img: require('@/static/img.png') }] }, ], } }, onl oad() { this.tablist.forEach((item) => { item.aistrue = 0 item.data.forEach((i) => { i.bistrue = 0 i.num = 1 }) this.$forceUpdate() }) this.pricesum() uni.request({ url: '', //请求的地址,类型为String method: 'post', //get、post、delete success: res => { //console.log(res,'----') this.treelist = res.data.data.list this.datalist = res.data.data.tree let arrC = [] this.treelist.forEach((i) => { if (i.stock_num != 0) { arrC.push(i) } }) this.datalist.forEach((item) => { item.v.forEach((i) => { this.ia = 0 arrC.forEach((a) => { //console.log(a.skuValue) a.skuValue.forEach((b) => { if (b == i.id) { this.ia = 1 } }) }) if (!this.ia) { i.disabled = true } }) }) this.$forceUpdate() } }) }, methods: { // 总 goto() { uni.navigateTo({ url: '/pages/sku/sku' }) }, changetab(index, i) { if (this.datalist[index].v[i].disabled) { return } this.datalist[index].v.forEach((i) => { i.selected = false }) this.datalist[index].v[i].selected = true this.chooselist = [] this.datalist.forEach((item) => { item.v.forEach((i) => { if (i.selected) { this.chooselist.push({ keyname: item.k_s, key: i.id }) } }) }) this.arrB = [] this.treelist.forEach((item) => { this.flag = 0 this.chooselist.forEach((i) => { let keyname = i.keyname let key = i.key if (item[keyname] != key) { this.flag = 1 } }) if (!this.flag && item.stock_num) { this.arrB.push(item) } }) this.is = 0 let arrC = [] this.treelist.forEach((i) => { if (i.stock_num != 0) { arrC.push(i) } }) this.datalist.forEach((item) => { item.v.forEach((i) => { this.ia = 0 arrC.forEach((a) => { a.skuValue.forEach((b) => { if (b == i.id) { this.ia = 1 } }) }) if (!this.ia) { i.disabled = true } else { i.disabled = false } }) }) if (this.chooselist.length < 5) { this.datalist.forEach((item) => { let a = this.chooselist.findIndex(c => c.keyname == item.k_s) if (a == -1) { item.v.forEach((i) => { this.ia = 0 this.arrB.forEach((a) => { a.skuValue.forEach((b) => { if (b == i.id) { this.ia = 1 } }) }) if (!this.ia) { i.disabled = true } }) } }) } else { this.treelist.forEach((item) => { this.a = 0 this.b = 0 if (item.stock_num == 0) { item.skuValue.forEach((ia) => { this.arrB[0].skuValue.forEach((ib) => { if (ia == ib) { this.a = this.a + 1 } }) }) if (this.a == 4) { this.c=item.skuValue.filter(x=> !this.arrB[0].skuValue.some(y=>y==x)) this.datalist.forEach((n)=>{ n.v.forEach((m)=>{ if(m.id==this.c){ m.disabled=true } }) }) } } }) } this.$forceUpdate() }, pricesum() { this.sum = 0 this.tablist.forEach((item) => { item.data.forEach((i) => { if (i.bistrue) { this.sum = i.price * i.num + this.sum console.log(this.sum, '---') } }) }) this.$forceUpdate() }, changea(i) { this.tablist[i].aistrue = !this.tablist[i].aistrue this.tablist[i].data.forEach((item) => { item.bistrue = this.tablist[i].aistrue }) this.$forceUpdate() this.pricesum() }, // tab changeb(index, i) { let flag = 1 this.tablist[index].data[i].bistrue = !this.tablist[index].data[i].bistrue this.tablist[index].data.forEach((item) => { if (!item.bistrue) { flag = 0 } }) if (flag) { this.tablist[index].aistrue = 1 } else { this.tablist[index].aistrue = 0 } this.$forceUpdate() this.pricesum() }, sub(index, i) { if (this.tablist[index].data[i].num > 1) { this.tablist[index].data[i].num-- this.pricesum() } else { return } }, add(index, i) { this.tablist[index].data[i].num++ this.pricesum() }, remove(index, i) { this.tablist[index].data.splice(i, 1) if (!this.tablist[index].data.length) { this.tablist.splice(index, 1) } if (!this.tablist.length) { this.isShow = 0 } this.pricesum() } } } </script> <style lang="scss"> .body { min-width: 100%; min-height: 100%; top: 0; left: 0; right: 0; bottom: 0; position: absolute; background-color: #eee; font-size: 13px; checkbox .wx-checkbox-input { border-radius: 50% !important; color: #ffffff !important; } .wx-checkbox-input.wx-checkbox-input-checked { border: none !important; } .tablist { background-color: #fff; .tab { width: 100%; border-bottom: 1px #eee solid; padding: 10px 10px; box-sizing: border-box; .tab-title { display: flex; align-items: center; .ch { width: 40px; height: 20px; display: flex; align-items: center; justify-content: center; checkbox .wx-checkbox-input.wx-checkbox-input-checked { color: #fff; background: red; } } } .tab-body { margin-top: 10px; display: flex; .body-left { display: flex; align-items: center; .ch { width: 40px; height: 20px; display: flex; align-items: center; justify-content: center; checkbox .wx-checkbox-input.wx-checkbox-input-checked { color: #fff; background: coral; } } image { width: 90px; height: 90px; border: 1px #eee solid; } } .body-right { margin-left: 10px; .right-title { width: 400rpx; display: flex; justify-content: space-between; text:nth-child(1) { display: block; width: 300rpx; font-weight: 600; } text:nth-child(2) { background-color: #eee; color: #999; font-size: 10px; width: 40px; height: 20px; line-height: 20px; display: block; text-align: center; } } .right-tab { width: 400rpx; text { color: #999; font-size: 10px; margin-right: 10px; } } .right-price { width: 400rpx; display: flex; justify-content: space-between; .price { color: coral; font-weight: 600; font-size: 14px; } .right-num { text { background-color: #eee; color: #000; font-size: 10px; height: 20px; display: inline-block; line-height: 20px; margin: 1px; text-align: center; width: 20px; } text:nth-child(2) { width: 40px; } } } } } } .tabsum { box-sizing: border-box; position: fixed; z-index: 1; box-shadow: 5px 5px 10px #999; bottom: 0; width: 100%; height: 100rpx; background-color: #fff; display: flex; align-items: center; padding: 10px; justify-content: space-between; .jg { color: coral; font-weight: 600; font-size: 16px; } .js { color: #fff; background-color: #000; display: block; width: 80px; line-height: 30px; border-radius: 20px; text-align: center; } } } .none { display: flex; justify-content: center; .none-img { display: flex; flex-direction: column; align-items: center; justify-content: center; image { width: 300rpx; height: 300rpx; margin-top: 300rpx; } text { font-size: 14px; line-height: 25px; } } .none-button { position: absolute; bottom: 20px; color: #fff; background-color: #000; display: block; width: 600rpx; line-height: 80rpx; border-radius: 20px; font-size: 16px; font-weight: 500; text-align: center; } } .xuanze-bg { background-color: rgba(0, 0, 0, 0.4); position: fixed; z-index: 2; bottom: 0; top: 0; left: 0; right: 0; .xuanze { border-radius: 10px 10px 0 0; position: absolute; bottom: 0; width: 100%; height: 800rpx; background-color: #fff; padding: 40rpx; box-sizing: border-box; .xuanze-img { display: flex; justify-content: space-between; .img-left { image { width: 140rpx; height: 140rpx; border: 1px #eee solid; margin-right: 10px; } text { font-size: 16px; font-weight: 600; } } .cls { background-color: #eee; display: block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; font-size: 15px; font-weight: 600; color: #888; } } .xuanze-body { margin-top: 10px; height: 400rpx; overflow: scroll; .xuanze-tab { border-top: 1px #eee solid; border-bottom: 1px #eee solid; box-sizing: border-box; .tx { color: #888; display: block; margin-top: 10px; } .tab-list { padding: 20px 0; .ta { font-size: 10px; border-radius: 4px; border: 1px #000 solid; padding: 4px; display: inline-block; margin: 4px; } .tb { color: #fff; font-size: 10px; border-radius: 4px; background-color: #999; padding: 5px; display: inline-block; margin: 4px; } .tc { font-size: 10px; border-radius: 4px; color: coral; border: 1px coral solid; padding: 4px; display: inline-block; margin: 4px; } } } } .shuliang { display: flex; justify-content: space-between; .sl { display: block; margin: 10px; } .right-num { margin: 10px; text { background-color: #eee; color: #000; font-size: 10px; height: 20px; display: inline-block; line-height: 20px; margin: 1px; text-align: center; width: 20px; } text:nth-child(2) { width: 40px; } } } .sl-btn { display: flex; align-items: center; justify-content: center; .btn { color: #fff; background-color: #000; display: block; width: 600rpx; line-height: 80rpx; border-radius: 20px; font-size: 16px; font-weight: 500; text-align: center; } } } } } </style>
标签:SKU,uniapp,width,color,item,规格,forEach,font,display From: https://www.cnblogs.com/Yeziiii/p/17794178.html