277 lines
9.9 KiB
Vue
277 lines
9.9 KiB
Vue
|
<template>
|
|||
|
|
<u-popup v-model="showPop" height="70vh" mode="bottom" border-radius="14" :closeable="true" @close="onClose"
|
|||
|
|
:safe-area-inset-bottom="true">
|
|||
|
|
<view class="bg-white spec-contain">
|
|||
|
|
<view class="spec-header flex">
|
|||
|
|
<u-image class="m-r-20" width="180rpx" height="180rpx" border-radius="10rpx" @tap="previewImage(checkedGoods.image)"
|
|||
|
|
:src="checkedGoods.image"></u-image>
|
|||
|
|
<view class="goods-info">
|
|||
|
|
<view class="primary flex">
|
|||
|
|
<price :content="checkedGoods.price" main-size="46rpx" minor-size="38rpx" color="#FF2C3C">
|
|||
|
|
</price>
|
|||
|
|
</view>
|
|||
|
|
<view class="sm m-t-120">
|
|||
|
|
库存：{{stock}}件
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 规格 -->
|
|||
|
|
<view class="spec-main">
|
|||
|
|
<scroll-view style="min-height: 600rpx;" scroll-y="true">
|
|||
|
|
<view class="spec-list">
|
|||
|
|
<view v-for="(item, index) in specList" :key="index" class="spec">
|
|||
|
|
<view class="flex row-between">
|
|||
|
|
<view class="name m-b-30">{{ item.name }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex wrap">
|
|||
|
|
<view v-for="(specitem, index2) in item.spec_value" :key="index2"
|
|||
|
|
:class="'spec-item sm ' + ( specitem.checked ? 'checked' : '' )"
|
|||
|
|
@tap="choseSpecItem(item.id, specitem.id)">
|
|||
|
|
{{ specitem.value }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
stock: 0,//库存
|
|||
|
|
checkedGoods: {},
|
|||
|
|
specList: [],
|
|||
|
|
showPop: false,
|
|||
|
|
isSelectedAll: true, //是否全选
|
|||
|
|
selectStr: '', // 已选规格
|
|||
|
|
specListAll: [], // 是否全选
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
components: {},
|
|||
|
|
props: {
|
|||
|
|
show: {
|
|||
|
|
type: Boolean
|
|||
|
|
},
|
|||
|
|
goods: {
|
|||
|
|
type: Object
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {},
|
|||
|
|
watch: {
|
|||
|
|
// 监听商品
|
|||
|
|
goods(value) {
|
|||
|
|
this.stock = value.stock
|
|||
|
|
let specList = value.goods_spec || [];
|
|||
|
|
let goodsItem = value.goods_item || [];
|
|||
|
|
specList.forEach(item => {
|
|||
|
|
if (item.spec_value) {
|
|||
|
|
item.spec_value.forEach((specitem, specindex) => {
|
|||
|
|
specitem.checked = 1;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.specListAll[item.id] = true
|
|||
|
|
});
|
|||
|
|
this.specList = specList
|
|||
|
|
this.checkedGoods = goodsItem.length ? goodsItem[0] : {};
|
|||
|
|
},
|
|||
|
|
// 监听规格
|
|||
|
|
specList(value) {
|
|||
|
|
const {
|
|||
|
|
goods_item
|
|||
|
|
} = this.goods;
|
|||
|
|
let keyArr = [];
|
|||
|
|
let specArr = [];
|
|||
|
|
let specArrCM = []; // 个规格选中的id
|
|||
|
|
value.forEach(item => {
|
|||
|
|
if (item.spec_value) {
|
|||
|
|
item.spec_value.forEach((specitem, indexS) => {
|
|||
|
|
if (specitem.checked) {
|
|||
|
|
keyArr.push(specitem.id);
|
|||
|
|
specArr.push(specitem.value)
|
|||
|
|
specArrCM.push(specitem.id)
|
|||
|
|
}
|
|||
|
|
if (indexS == item.spec_value.length - 1) {
|
|||
|
|
if (specArrCM.length == item.spec_value.length) {
|
|||
|
|
this.specListAll[item.id] = true
|
|||
|
|
} else {
|
|||
|
|
this.specListAll[item.id] = false
|
|||
|
|
}
|
|||
|
|
specArrCM = []
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.selectStr = specArr.join('、')
|
|||
|
|
// hsz
|
|||
|
|
if (!keyArr.length) return;
|
|||
|
|
let key = keyArr[0];
|
|||
|
|
let index = goods_item.findIndex(item => {
|
|||
|
|
return item.spec_value_ids == key;
|
|||
|
|
});
|
|||
|
|
if (index == -1) return;
|
|||
|
|
this.checkedGoods = goods_item[index]
|
|||
|
|
this.$emit('change', {
|
|||
|
|
detail: goods_item[index]
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
show(val) {
|
|||
|
|
this.showPop = val
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onClose() {
|
|||
|
|
this.$emit('close')
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 点击选中规格。
|
|||
|
|
choseSpecItem(id, specid) {
|
|||
|
|
this.specList.forEach(item => {
|
|||
|
|
if (item.spec_value && item.id == id) {
|
|||
|
|
item.spec_value.forEach(specitem => {
|
|||
|
|
if (specitem.id == specid) {
|
|||
|
|
if (specitem.checked == 1) {
|
|||
|
|
specitem.checked = 0;
|
|||
|
|
} else {
|
|||
|
|
specitem.checked = 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.specList = [...this.specList]
|
|||
|
|
this.getStock();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getStock() {
|
|||
|
|
let sku = [];
|
|||
|
|
// 遍历得到sku = [[1],[157，158]]数组
|
|||
|
|
this.specList.forEach((item, index) => {
|
|||
|
|
sku.push([])
|
|||
|
|
item.spec_value.forEach(specitem => {
|
|||
|
|
if (specitem.checked) {
|
|||
|
|
sku[index].push(specitem.id)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 算出数组多种规格组合
|
|||
|
|
let keyArr = this.dkej(sku)
|
|||
|
|
let stock = 0
|
|||
|
|
keyArr.forEach((item) => {
|
|||
|
|
const a = item.join(',')
|
|||
|
|
let index = this.goods.goods_item.findIndex(item => {
|
|||
|
|
return item.spec_value_ids == a;
|
|||
|
|
});
|
|||
|
|
if (index == -1) return;
|
|||
|
|
stock += this.goods.goods_item[index].stock
|
|||
|
|
})
|
|||
|
|
this.stock = stock
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
dkej(arr) {
|
|||
|
|
let accArr = []
|
|||
|
|
for (var arrar in arr) {
|
|||
|
|
arrar = arr[arrar]
|
|||
|
|
let result = []
|
|||
|
|
for (var i in arrar) {
|
|||
|
|
if (accArr.length) {
|
|||
|
|
for (var x in accArr) {
|
|||
|
|
result.push(accArr[x].concat(arrar[i]))
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
result.push([arrar[i]])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
accArr = result
|
|||
|
|
}
|
|||
|
|
return accArr
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
previewImage(current) {
|
|||
|
|
uni.previewImage({
|
|||
|
|
current,
|
|||
|
|
// 当前显示图片的http链接
|
|||
|
|
urls: [current] // 需要预览的图片http链接列表
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.spec-contain {
|
|||
|
|
border-radius: 10rpx 10rpx 0 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.close {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10rpx;
|
|||
|
|
top: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spec-header {
|
|||
|
|
padding: 30rpx;
|
|||
|
|
padding-right: 70rpx;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
border: $-solid-border;
|
|||
|
|
|
|||
|
|
.vip-price {
|
|||
|
|
margin: 0 24rpx;
|
|||
|
|
background-color: #FFE9BA;
|
|||
|
|
line-height: 36rpx;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.price-name {
|
|||
|
|
background-color: #101010;
|
|||
|
|
padding: 3rpx 12rpx;
|
|||
|
|
color: #FFD4B7;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
display: block;
|
|||
|
|
width: 20rpx;
|
|||
|
|
height: 20rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
right: -15rpx;
|
|||
|
|
background-color: #FFE9BA;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spec-main {
|
|||
|
|
.spec-list {
|
|||
|
|
padding: 30rpx 20rpx;
|
|||
|
|
|
|||
|
|
.spec-item {
|
|||
|
|
line-height: 52rpx;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
background-color: #F6F6F6;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
margin: 0 20rpx 20rpx 0;
|
|||
|
|
border: 1rpx solid #F6F6F6;
|
|||
|
|
|
|||
|
|
&.checked {
|
|||
|
|
font-weight: 500;
|
|||
|
|
border: 1rpx solid $-color-primary;
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: $-color-primary;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|