<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