You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/goods/detail/SkuPopup.vue

253 lines
5.8 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
* @Author: ch
* @Date: 2022-03-24 11:30:55
* @LastEditors: ch
* @LastEditTime: 2022-04-06 14:24:05
* @Description: file content
-->
<template>
<u-popup :show="visible" round="24rpx">
<view class="sku-popup">
<view class="product-info">
<image class="product-img" src="https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/test/1.png"/>
<view>
<view>{{curSku.sellPrice}}</view>
<text>{{curSku.name}}</text>
<view>库存{{curSku.stock}}</view>
</view>
</view>
<view class="attr-group" v-for="(item, index) in attributeGroupList" :key="item.id">
<text class="attr-name">{{item.name}}</text>
<view class="attr-items">
<text class="attr-item" :class="{'attr-item__active' : i.active, 'attr-item__disabled' : i.disabled}"
v-for="i in item.attributes" :key="i.symbol"
@click="handleAttrItem(i, index)"
>{{i.name}}</text>
</view>
</view>
<view class="sku-num">
<view>
<text>数量</text>
<text>有货</text>
</view>
<u-number-box :min="1" :max="maxBuyNum" button-size="40rpx" bgColor="#F5F6FA"
v-model="curBuyNum" >
<text slot="minus" class="cart-item--stepper-icon">-</text>
<text slot="plus" class="cart-item--stepper-icon">+</text>
</u-number-box>
</view>
<view class="footer">
<UiButton @click="addCart"></UiButton>
<UiButton>立即购买</UiButton>
<UiButton>确认</UiButton>
</view>
</view>
</u-popup>
</template>
<script>
import UiButton from '../../../components/UiButton.vue';
import {ApiPutAddCart} from '@/common/api/cart';
export default {
components: { UiButton },
props: {
// true 组件显示 false 组件隐藏
visible : {
type : Boolean,
default : false
},
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
mode: {
type: Number,
default: 1,
},
// 商品详情信息
goodsInfo: {
type: Object,
default: {},
},
// 商品sku信息
skuInfo : {
type : Array,
default : []
}
},
data() {
return {
// 属性组数据因为会修改数据不能直接操作props中传入的数据
attributeGroupList : [],
// 数量
curBuyNum : 1,
};
},
watch : {
goodsInfo(newData){
if(newData.attributeGroupList){
this.attributeGroupList = newData.attributeGroupList;
// 请求数据返回后设置默认选中规格
if(this.skuInfo.length){
this.setDefaultAttr();
}
}
},
skuInfo(newData){
// 请求数据返回后设置默认选中规格
if(newData.length){
this.setDefaultAttr();
}
}
},
computed : {
/**
* 当前选中SKU根据选中规格计算
*/
curSku(){
const skuSymbolList = this.attributeGroupList.map(item => {
const activeAttr = item.attributes.find(i => i.active);
return activeAttr ? activeAttr.symbol : ''
}).filter(i => i);
return this.skuInfo.find(i => i.attributeSymbolList === skuSymbolList.join(',')) || {};
},
/**
* 最大可购买数量
* 1、有限购则对比限购跟库存取最小值
* 2、没限购取库存
*/
maxBuyNum(){
const singleBuyLimit = this.goodsInfo.singleBuyLimit;
const stock = this.curSku.stock;
return singleBuyLimit ? Math.min(singleBuyLimit, stock || 1) : stock;
}
},
methods: {
/**
* 设置默认选中规格
*/
setDefaultAttr(){
const curSku = this.skuInfo.find(i => i.stock > 0);
this.attributeGroupList.forEach(item => {
for(let i of item.attributes){
if(curSku.attributeSymbolList.includes(i.symbol)){
this.$set(i,'active', true);
break;
}
}
})
},
/**
* 点击属性项,设置选中和禁用项
*/
handleAttrItem(item, groupIndex){
// 禁用选项
if(item.disabled){
return false;
}
// 每次重选规格购买数量都置为1
this.curBuyNum = 1;
// 把当前选项组的装先置为未选状态
this.attributeGroupList[groupIndex].attributes.forEach(item =>{
this.$set(item,'active', false);
});
// 设置当前点击选项选中
this.$set(item,'active', true);
// 找到有效SKU的symbol 有效定义:包含当前选项属性,且库存大于0的所有SKU
const symbols = this.skuInfo.filter(i => i.attributeSymbolList.includes(item.symbol) && i.stock > 0)
.map(i => i.attributeSymbolList).join(',');
this.attributeGroupList.forEach((group, index) => {
if(groupIndex === index){
return false;
}
// 遍历其他选项组的所有属性项对比是否在有效SKU的symbos中在则启用不再则禁用
group.attributes.forEach(item =>{
if(!symbols.includes(item.symbol)){
this.$set(item,'disabled', true);
}else{
this.$set(item,'disabled', false);
}
})
})
},
/**
* 加入购物车
*/
async addCart(){
const {error, result} = await ApiPutAddCart({
productSkuId : this.curSku.skuId,
productId : this.goodsInfo.id,
number : this.curBuyNum
});
if(error){
uni.$u.toast(error.message);
return false;
}
this.$Router.push('/cart');
},
/**
* 立即购买
*/
buyNow(){
}
}
};
</script>
<style lang="scss" scoped>
.sku-popup{
padding: 30rpx;
}
.product-info{
display: flex;
}
.product-img{
width: 200rpx;
height: 200rpx;
}
.attr-group{
margin-top: 40rpx;
font-size: 30rpx;
}
.attr-items{
display: flex;
flex-wrap: wrap;
padding: 10rpx 0;
}
.attr-item{
background: #F8F8F8;
line-height: 70rpx;
border-radius: 100rpx;
border: 1px solid #F8F8F8;
color: #666;
display: block;
min-width: 158rpx;
max-width: 630rpx;
text-align: center;
margin: 20rpx 28rpx 0 0;
padding: 0 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&__active{
background: #FFF3EE;
border-color: #FF512B;
color: #FF875B;
}
&__disabled{
color: #ccc;
}
}
.sku-num{
display: flex;
justify-content: space-between;
margin: 40rpx 0;
}
.footer{
display: flex;
justify-content: space-between;
}
</style>