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>
|