312 lines
8.8 KiB
Vue
312 lines
8.8 KiB
Vue
<template>
|
||
<view class="skuBox" v-if="showSku">
|
||
<view class="item" v-for="(items, idx) in specsList" :key="idx">
|
||
<view class="title" v-if="specsNum > 1">第{{idx + 1}}件商品</view>
|
||
<view class="col" v-for="(item, index) in items" :key="index">
|
||
<view class="name">{{item.spec_name}}</view>
|
||
<view class="tagBox">
|
||
<view class="tag" v-for="(it, i) in item.value" :key="it.id"
|
||
@click="!it.show ? chooseSku(it, index, i, idx, items) :''"
|
||
:class="pickSkuList[idx]['v'+ (index + 1) +'_id'] === it.id ? 'choose' : it.show ? 'dis' : '' ">
|
||
<image :src="it.img" v-if="it.img" class="tag_img"></image>
|
||
<text>{{it.value}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, reactive, toRefs, watch } from 'vue'
|
||
import { showToast, goodsItem } from '../common.js'
|
||
import { get, post } from '@/api/request.js'
|
||
import { Style } from '@/utils/list.js'
|
||
|
||
export default {
|
||
props: {
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
specsNum: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
goodId: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
},
|
||
setup(props, context) {
|
||
const data = reactive({
|
||
showSku: false,
|
||
goodId: 0,
|
||
Color: uni.getStorageSync('theme_color'),
|
||
bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
|
||
choose: [],
|
||
skuName: '',
|
||
skuInfo: {},
|
||
mainImg: [],
|
||
images: [],
|
||
chooseItem: {},
|
||
sku_skuInfo: {},
|
||
chooseIndex: [],
|
||
pickSkuList: [],
|
||
curIndex: 0,
|
||
specsList: [],
|
||
action: false,
|
||
specsNum: 0
|
||
})
|
||
|
||
function chooseSku(e, index, i_index, idx, items) {
|
||
data.action = true
|
||
if (e.img || e.img_800) {
|
||
data.viewImg = e.img_800 || e.img
|
||
}
|
||
data.curIndex = idx
|
||
|
||
data.pickSkuList[idx]['v' + (index + 1) + '_id'] = items[index].value[i_index].id
|
||
data.pickSkuList[idx]['v' + (index + 1)] = items[index].value[i_index].value
|
||
data.chooseIndex[idx].push(index)
|
||
data.chooseIndex[idx] = Array.from(new Set(data.chooseIndex[idx]))
|
||
data.choose[idx]['v' + (index + 1) + '_id'] = items[index].value[i_index].id
|
||
}
|
||
|
||
watch(props, (newProps) => {
|
||
if(newProps.show) {
|
||
data.showSku = true
|
||
data.goodId = newProps.goodId
|
||
data.chooseItem = {}
|
||
data.chooseItem.num = 1
|
||
data.specsNum = newProps.specsNum
|
||
data.images = []
|
||
data.specsList = []
|
||
data.pickSkuList = []
|
||
data.choose = []
|
||
data.chooseIndex = []
|
||
|
||
get(`/api/v1/goods/spec/${data.goodId}`).then((res) => {
|
||
data.skuInfo = res.data
|
||
data.viewImg = res.data.face_img
|
||
data.mainImg = res.data.gallery || []
|
||
|
||
if(res.data.specs) {
|
||
res.data.specs[0].value.forEach((it) => {
|
||
if(it.img_800){
|
||
data.images.push(it.img_800)
|
||
}
|
||
})
|
||
for (let index = 0; index < data.specsNum; index++) {
|
||
data.pickSkuList[index] = {}
|
||
for (let i = 0; i < res.data.specs.length; i++) {
|
||
data.pickSkuList[index]['v' + (i + 1) + '_id'] = 0
|
||
}
|
||
data.specsList.push(JSON.parse(JSON.stringify(res.data.specs)))
|
||
data.choose.push({})
|
||
data.chooseIndex.push([])
|
||
}
|
||
}
|
||
data.sku_skuInfo = res.data.skus
|
||
|
||
data.viewImg = res.data.specs[0].value[0].img_800 || res.data.specs[0].value[0].img || res.data.face_img
|
||
|
||
setTimeout(() => {
|
||
|
||
if(res.data.skus[0].stock > 0) {
|
||
// 如果第一个sku有库存，则选中第一个
|
||
|
||
data.curIndex = data.specsNum
|
||
for (let m = 0; m < data.specsNum; m++) {
|
||
res.data.specs.forEach((it, n) => {
|
||
data.choose[m]['v' + (n + 1) + '_id'] = data.sku_skuInfo[0]['v' + (n + 1) + '_id']
|
||
data.pickSkuList[m]['v' + (n + 1) + '_id'] = data.sku_skuInfo[0]['v' + (n + 1) + '_id']
|
||
data.pickSkuList[m]['v' + (n + 1)] = data.sku_skuInfo[0]['v' + (n + 1)]
|
||
})
|
||
data.chooseIndex.push(m)
|
||
}
|
||
data.chooseItem = data.sku_skuInfo[0]
|
||
|
||
context.emit('back', data.pickSkuList, data.viewImg, data.chooseItem)
|
||
} else {
|
||
// 第一个sku没有库存，如果规格只有一个去判断规格的样式，即是否选中 大于一个不做判断
|
||
if(res.data.specs.length == 1) { // 仅有一个规格
|
||
// 如果第一个规格有库存，则选中第一个，否则判断规格的样式，即是否选中
|
||
data.specsList.forEach((item) => {
|
||
item.forEach((itm) => {
|
||
itm.value.forEach((it, i) => {
|
||
it.show = res.data.skus[i].stock <= 0 || res.data.skus[i].price * 1 == 0 ? true : false
|
||
})
|
||
})
|
||
})
|
||
}
|
||
}
|
||
|
||
}, 1000)
|
||
})
|
||
}
|
||
})
|
||
|
||
watch(
|
||
() => data.choose,
|
||
(newChoose) => {
|
||
if(!data.action) {
|
||
return
|
||
}
|
||
if (data.specsList[data.curIndex].length - Object.keys(data.choose[data.curIndex]).length == 1) {
|
||
// 如果只有一个规格类未选中，则去判断未选中的这一项是否可选
|
||
data.specsList[data.curIndex].forEach((req, i) => {
|
||
if (data.chooseIndex[data.curIndex].indexOf(i) == -1) {
|
||
req.value.forEach((rej, j) => {
|
||
data.sku_skuInfo.forEach((ress, m) => {
|
||
let flag = [rej.id === ress['v' + (i + 1) + '_id']]
|
||
for (const key in data.choose[data.curIndex]) {
|
||
flag.push(ress[key] == data.choose[data.curIndex][key])
|
||
}
|
||
if (flag.findIndex(target => target === false) == -1) {
|
||
if (ress.stock <= 0 || ress.price == 0) {
|
||
rej.show = true
|
||
} else {
|
||
rej.show = false
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
})
|
||
} else if (data.specsList[data.curIndex].length == Object.keys(data.choose[data.curIndex]).length) {
|
||
for (const key in data.choose[data.curIndex]) {
|
||
let i = parseInt(key.substr(1, 1))
|
||
data.specsList[data.curIndex][i - 1].value.forEach((req) => {
|
||
data.sku_skuInfo.forEach((ress, m) => {
|
||
let flag = [req.id == ress['v' + i + '_id']]
|
||
for (const k in data.choose[data.curIndex]) {
|
||
let j = parseInt(k.substr(1, 1))
|
||
if (i != j) {
|
||
flag.push(ress[k] == data.choose[data.curIndex][k])
|
||
}
|
||
}
|
||
if (flag.findIndex(target => target === false) == -1) {
|
||
if ((ress.stock <= 0 || ress.price == 0)) {
|
||
req.show = true
|
||
} else {
|
||
req.show = false
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
}
|
||
// 判断选择规格值是否完整
|
||
for (let i = data.specsList[data.curIndex].length; i >= 1; i--) {
|
||
if (!newChoose[data.curIndex]['v' + i + '_id']) {
|
||
return
|
||
}
|
||
}
|
||
// 对比选中项
|
||
data.sku_skuInfo.forEach((sku, s_index) => {
|
||
let num = data.chooseItem.num
|
||
if (
|
||
sku.v1_id === newChoose[data.curIndex].v1_id &&
|
||
sku.v2_id === newChoose[data.curIndex].v2_id &&
|
||
sku.v3_id === newChoose[data.curIndex].v3_id &&
|
||
sku.v4_id === newChoose[data.curIndex].v4_id
|
||
) {
|
||
data.chooseItem = {
|
||
...sku
|
||
}
|
||
if (num > 0) {
|
||
data.chooseItem.num = num < sku.stock ? num : (sku.stock > 0 ? sku.stock : 0)
|
||
} else if (sku.stock > 0) {
|
||
data.chooseItem.num = data.skuInfo.limit_type == 0 ? 1 : data.skuInfo.limit_type == 1 ? parseInt(data.skuInfo.start_sale_num) : 1
|
||
} else {
|
||
data.chooseItem.num = 0
|
||
}
|
||
}
|
||
})
|
||
|
||
context.emit('back', data.pickSkuList, data.viewImg, data.chooseItem)
|
||
|
||
}, {
|
||
deep: true
|
||
}
|
||
)
|
||
|
||
watch(() => data.pickSkuList, (newPickList) => {
|
||
data.skuName = ''
|
||
newPickList.forEach((item) => {
|
||
let name = []
|
||
for (let i = 0; i < data.specsNum; i++) {
|
||
if(item['v' + (i + 1)]) {
|
||
name.push(item['v' + (i + 1)])
|
||
}
|
||
}
|
||
if(name.length) {
|
||
data.skuName += '【' + name.join('-') + '】'
|
||
}
|
||
})
|
||
}, {
|
||
deep: true
|
||
})
|
||
|
||
return {
|
||
...toRefs(data),
|
||
chooseSku,
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.skuBox{
|
||
margin-bottom: 20rpx;
|
||
background-color: #fff;
|
||
.item{
|
||
padding: 10rpx 30rpx 30rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
position: relative;
|
||
.title{
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
margin-top: 10rpx;
|
||
}
|
||
.col{
|
||
.name{
|
||
font-size: 30rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.tagBox{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
font-size: 28rpx;
|
||
.tag{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #000;
|
||
background-color: #f4f4f4;
|
||
margin-right: 22rpx;
|
||
margin-top: 20rpx;
|
||
padding: 10rpx 18rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 6rpx;
|
||
.tag_img{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
}
|
||
.dis{
|
||
opacity: 0.35;
|
||
}
|
||
.choose {
|
||
background-color: v-bind('bgColor');
|
||
color: v-bind('Color');
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |