321 lines
7.7 KiB
Vue
321 lines
7.7 KiB
Vue
<template>
|
||
<view class="attr-content">
|
||
<view class="a-t">
|
||
<image class="image" mode="widthFix" :src="picture || product.sku.url"></image>
|
||
<view class="right">
|
||
<text class="title in2line">{{ skuName }}</text>
|
||
<view class="sku-info-wrapper">
|
||
<view class="price-wrapper">
|
||
<text :class="'text-' + themeColor.name" v-if="currentProductPrice">{{ moneySymbol }}{{ currentProductPrice }}</text>
|
||
</view>
|
||
<text class="stock" v-if="stock">库存：{{ stock }}{{ product.unit || '件' }}</text>
|
||
<view class="selected in2line" v-if="specSelected.length > 0">
|
||
已选：
|
||
<text
|
||
class="selected-text"
|
||
v-for="(sItem, sIndex) in specSelected"
|
||
:key="sIndex"
|
||
>
|
||
{{ sItem.name }}
|
||
</text>
|
||
<text v-if="specSelected.length > 0"> * {{ cartCount }} </text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view class="attr-content-scroll-view" scroll-y>
|
||
<view v-for="(item, index) in specList" :key="index" class="attr-list">
|
||
<text>{{ item.name }}</text>
|
||
<view class="item-list">
|
||
<view
|
||
v-for="(childItem, childIndex) in specChildList"
|
||
:key="childIndex"
|
||
@tap="
|
||
selectSpec(childIndex, childItem.specId, item.show_type)
|
||
"
|
||
>
|
||
<view
|
||
v-if="childItem.specId === item.id"
|
||
:class="[childItem.selected ? 'bg-' + themeColor.name : 'tit-normal', childItem.disabled ? 'disabled' : '']"
|
||
:style="
|
||
childItem.selected && parseInt(item.show_type) === 2
|
||
? styleObject
|
||
: ''
|
||
"
|
||
class="tit"
|
||
>
|
||
<text >
|
||
{{ childItem.name }}
|
||
</text>
|
||
<text v-if="parseInt(item.show_type) === 2">
|
||
{{ childItem.name }}
|
||
</text>
|
||
<view v-if="parseInt(item.show_type) === 3">
|
||
<image
|
||
class="img"
|
||
:src="childItem.data || product.picture"
|
||
mode="aspectFill"
|
||
></image>
|
||
{{ childItem.title }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="select-count" v-if="isSelectedNum">
|
||
<text>购买数量</text>
|
||
<rf-number-box
|
||
class="step"
|
||
:min="parseInt(product.min_buy, 1) || minNum"
|
||
:max="parseInt(product.max_buy, 10) || (maxNum === 0 ? parseInt(stock, 10) : maxNum)"
|
||
:value="cartCount"
|
||
@eventChange="numberChange"
|
||
></rf-number-box>
|
||
|
||
</view>
|
||
</scroll-view>
|
||
<button v-if="!showBuyBtn" class="btn" :class="'bg-' + themeColor.name" @tap="toggleSpec">完成</button>
|
||
<view class="btn-group" v-else>
|
||
<button class="btn" :class="'bg-' + themeColor.name" @tap="toggleSpec(1)" >加入购物车</button>
|
||
<button class="btn" :class="'bg-' + themeColor.name" @tap="toggleSpec(2)" >立即购买</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
/**
|
||
*@des 商品规范组件
|
||
*@author 237524947@qq.com
|
||
*@blog https://gitee.com/zscat/mallplus/wikis/pages/preview?sort_id=1703736&doc_id=326093
|
||
*@date 2020/05/03 19:17:15
|
||
*/
|
||
import rfNumberBox from '@/components/rf-number-box';
|
||
export default {
|
||
name: 'rfAttrContent',
|
||
components: { rfNumberBox },
|
||
props: {
|
||
showBuyBtn: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
isSelectedNum: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: 'buy_now'
|
||
},
|
||
product: {
|
||
type: Object,
|
||
default() {
|
||
return {};
|
||
}
|
||
},
|
||
minNum: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
maxNum: {
|
||
type: Number,
|
||
default: 100
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
styleObject: null,
|
||
specList: [],
|
||
specChildList: [],
|
||
skuId: this.product && this.product.sku.id,
|
||
price: null,
|
||
stock: null,
|
||
cartCount: parseInt(this.product.min_buy, 10) || this.minNum || 1,
|
||
picture: null,
|
||
specSelected: [],
|
||
vipPrice: this.$mAssetsPath.vipPrice,
|
||
moneySymbol: this.moneySymbol,
|
||
skuName: null
|
||
};
|
||
},
|
||
computed: {
|
||
currentDiscountPrice() {
|
||
const decimal = 1;
|
||
const discount = 2;
|
||
const price = this.price;
|
||
switch (parseInt(decimal, 10)) {
|
||
case -1:
|
||
return (price * discount / 100).toFixed(2);
|
||
case 0:
|
||
return (price * discount / 100).toFixed(0);
|
||
case 1:
|
||
return (price * discount / 100).toFixed(1);
|
||
default:
|
||
return (price * discount / 100).toFixed(2);
|
||
}
|
||
},
|
||
currentProductPrice () {
|
||
let price = this.price;
|
||
if (this.type === 'discount') {
|
||
price = this.currentSkuPrice || this.currentDiscountPrice;
|
||
}
|
||
if (this.type === 'group_buy') {
|
||
price = this.currentSkuPrice || this.product.marketing.ladder.price;
|
||
}
|
||
if (this.product.memberDiscount && this.product.memberDiscount.length !== 0) {
|
||
price = price * (1 - this.product.memberDiscount.discount / 100);
|
||
}
|
||
return parseFloat(price || '0').toFixed(2);
|
||
}
|
||
},
|
||
async mounted() {
|
||
await this.initData();
|
||
},
|
||
methods: {
|
||
initData() {
|
||
|
||
this.product.skuSpecValues.forEach(item => {
|
||
this.specList.push(item.spec)
|
||
});
|
||
|
||
this.specList.forEach(item => {
|
||
this.specChildList = [...this.specChildList, ...item.goodsSpecValues];
|
||
|
||
});
|
||
|
||
this.specChildList.forEach(item => {
|
||
|
||
if (this.product.sku.subtitle.indexOf(item.name) !== -1) {
|
||
item.selected = true;
|
||
|
||
this.specSelected.push(item);
|
||
}
|
||
});
|
||
|
||
let skuStrArr = [];
|
||
this.specSelected.forEach(item => {
|
||
skuStrArr.push(item.name);
|
||
});
|
||
|
||
this.product.skuList.forEach(item => {
|
||
|
||
if (item.subtitle === skuStrArr.join('-')) {
|
||
|
||
this.stock = item.stock;
|
||
if (this.type === 'buy_now') {
|
||
this.price = item.price;
|
||
} else {
|
||
// this.price = this.product.marketing_type === 'wholesale' ? item.wholesale_price : item.price;
|
||
}
|
||
this.skuName = item.name;
|
||
this.skuId = item.id;
|
||
}
|
||
});
|
||
|
||
},
|
||
numberChange(data) {
|
||
|
||
if(data==1){
|
||
this.cartCount =1
|
||
}else{
|
||
this.cartCount = parseInt(data.number, 10);
|
||
}
|
||
|
||
},
|
||
// 选择规格
|
||
selectSpec(index, pid, type) {
|
||
let list = this.specChildList;
|
||
|
||
|
||
list.forEach(item => {
|
||
if (item.specId === pid) {
|
||
this.$set(item, 'selected', false);
|
||
}
|
||
});
|
||
if (parseInt(type, 10) === 3) {
|
||
this.picture = list[index].data;
|
||
}
|
||
if (parseInt(type, 10) === 2) {
|
||
this.styleObject = {
|
||
color: list[index].data,
|
||
border: `1px solid ${list[index].data}`
|
||
};
|
||
}
|
||
this.$set(list[index], 'selected', true);
|
||
// 存储已选择
|
||
/**
|
||
* 修复选择规格存储错误
|
||
* 将这几行代码替换即可
|
||
* 选择的规格存放在specSelected中
|
||
*/
|
||
this.specSelected = [];
|
||
list.forEach(item => {
|
||
if (item.selected === true) {
|
||
this.specSelected.push(item);
|
||
}
|
||
});
|
||
let skuStr = [];
|
||
this.specSelected.forEach(item => {
|
||
skuStr.push(item.name);
|
||
});
|
||
// console.log(this.specSelected)
|
||
this.product.skuList.forEach(item => {
|
||
|
||
if (item.subtitle === skuStr.join('-')) {
|
||
|
||
this.picture = item.picture;
|
||
this.stock = item.stock;
|
||
this.price = this.product.marketing_type === 'wholesale' ? item.wholesale_price : item.price;
|
||
this.skuId = item.id;
|
||
this.skuName = item.name;
|
||
}
|
||
|
||
});
|
||
},
|
||
toggleSpec(type) {
|
||
if (!this.skuId) {
|
||
this.$mHelper.toast('请选择规格');
|
||
return;
|
||
}
|
||
if (this.stock < 1) {
|
||
this.$mHelper.toast('库存不足');
|
||
return;
|
||
}
|
||
this.$emit('toggle', {
|
||
stock: this.stock,
|
||
skuInfo:this.skuId + ',' + this.cartCount,
|
||
skuId: this.skuId,
|
||
cartCount: this.cartCount,
|
||
skuName: this.skuName || this.singleSkuText,
|
||
price: this.price,
|
||
type: type
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.sku-info-wrapper {
|
||
width: 100%;
|
||
padding-bottom: $spacing-sm;
|
||
}
|
||
.price-wrapper {
|
||
height: 38upx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin: $spacing-sm 0;
|
||
.image {
|
||
width: 120upx;
|
||
height: 38upx;
|
||
}
|
||
.base-color {
|
||
margin-top: 2upx;
|
||
}
|
||
}
|
||
.btn-group {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.btn {
|
||
width: 40vw;
|
||
}
|
||
}
|
||
</style>
|