332 lines
8.0 KiB
Vue
332 lines
8.0 KiB
Vue
<template>
|
|
<view class="b-rx-sku-popup">
|
|
<u-popup :show="show" @close="show = false" round="20" closeable zIndex="20080">
|
|
<view class="commodity-sku">
|
|
<!-- 商品图 -->
|
|
<view class="commodity-sku-cover">
|
|
<!-- 封面 -->
|
|
<image class="img" :src="skuinfor['product_img']" mode="widthFix"></image>
|
|
<!-- 名称-数量 -->
|
|
<view class="commodity-sku-cover-name">
|
|
<view class="commodity-sku-cover-name-title" :style="{color:Brand()['ThemeColor']}">
|
|
{{skuinfor['product_name']}}
|
|
</view>
|
|
<view class="commodity-sku-cover-name-cart">
|
|
<image class="img" :src="qnyurl('reduce.png','rx')" mode="" @tap="reducequantity()"></image>
|
|
<view class="num">
|
|
{{skuinfor['num']}}
|
|
</view>
|
|
<image class="img" :src="qnyurl('add.png','rx')" mode="" @tap="Addquantity()"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 规格 -->
|
|
<view class="commodity-sku-option" v-if="skuinfor['details']">
|
|
<template v-for="(item,index) in skuinfor['details']['specifications']">
|
|
<view class="commodity-sku-option-item" :key="index">
|
|
<view class="commodity-sku-option-item-label">
|
|
{{item['name']}}
|
|
</view>
|
|
<view class="commodity-sku-option-item-values">
|
|
<template v-for="(item2,index2) in item['ingredients']">
|
|
<view @tap="skuClick(index,index2)"
|
|
:class="{'commodity-sku-option-item-values-activation':item2['checked']}"
|
|
class="commodity-sku-option-item-values-item" :key="index2">
|
|
{{item2['name']}}
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<view class="commodity-sku-Infor">
|
|
<view class="commodity-sku-Infor-left">
|
|
<view class="commodity-sku-Infor-left-Price">
|
|
<text class="text1">￥</text>
|
|
<text class="text2">{{_amount(skuinfor['adj_pay'] * skuinfor['num'])}}</text>
|
|
<view>{{skuinfor['sku']}}</view>
|
|
</view>
|
|
<view class="commodity-sku-Infor-left-sku">
|
|
{{skutext}}
|
|
</view>
|
|
</view>
|
|
<!-- Addcommodity方法中不可设置形参,因为点击事件默认第一个参数就是点击事件的各种参数并不是形参中所设置的默认值 -->
|
|
<!-- 所以在点击时手动传入skuinfor参数 -->
|
|
<view class="commodity-sku-Infor-right" @tap="Addcommodity">
|
|
加入购物车
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapGetters
|
|
} from 'vuex';
|
|
import mixin from '@/static/js/mixin/mixin.js'
|
|
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js'
|
|
export default {
|
|
mixins: [mixin, restaurantmixins],
|
|
name: "b-rx-sku-popup",
|
|
data() {
|
|
return {
|
|
// 弹框显示/隐藏
|
|
show: false,
|
|
// 弹框商品详情
|
|
skuinfor: {},
|
|
// 规格文字
|
|
skutext: '',
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
GetcommodityInfor: 'shopping/GetcommodityInfor'
|
|
}),
|
|
|
|
},
|
|
watch: {
|
|
// 计算属性获取到的弹框详情数据不可直接修改,所以重新赋值便于修改数量
|
|
GetcommodityInfor(value) {
|
|
this['skuinfor'] = JSON.parse(JSON.stringify(value));
|
|
this.skuInit();
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* @添加数量
|
|
* */
|
|
Addquantity(num = 1) {
|
|
this['skuinfor']['num'] += num;
|
|
},
|
|
/**
|
|
* @选择规格数量减
|
|
* */
|
|
reducequantity(num = 1) {
|
|
if (this['skuinfor']['num'] == 1) return;
|
|
this['skuinfor']['num'] -= num;
|
|
},
|
|
|
|
/**
|
|
* @加入购物车
|
|
* */
|
|
Addcommodity() {
|
|
let self = this;
|
|
uni.$u.debounce(() => {
|
|
self.ADD_CART({
|
|
commodity: self['skuinfor'],
|
|
quantity: self['skuinfor']['num']
|
|
}).then(() => {
|
|
console.log('加入成功');
|
|
self['show'] = false;
|
|
console.log(self['show'], 'show');
|
|
});
|
|
}, 800, true)
|
|
},
|
|
|
|
/**
|
|
* @筛选出当前选择的高亮规格
|
|
* */
|
|
skuInit() {
|
|
let r = [];
|
|
let t = this['skuinfor']['details']['specifications'];
|
|
let pay = 0;
|
|
for (let i = 0; i < t['length']; i++) {
|
|
let item = t[i];
|
|
r.push(...item['ingredients']);
|
|
};
|
|
// 规格文字
|
|
let newarr = r.filter(item => item['checked']).map(item => item['name']);
|
|
this['skuinfor']['sku'] = newarr.join('/');
|
|
// 计算加料价格
|
|
pay + r.filter(item => item['checked']).map(item => item['price']).reduce(function(previousValue, currentValue) {
|
|
return previousValue + currentValue;
|
|
});
|
|
this['skuinfor']['add_price'] = pay;
|
|
|
|
// 实际价格
|
|
this['skuinfor']['adj_pay'] = (+this['skuinfor']['pay_price']) + (pay * 100);
|
|
// 查找code
|
|
let index = -1;
|
|
let code = '';
|
|
outer: for (let j = 0; j < this['skuinfor']['details']['sku_infos']['length']; j++) {
|
|
let item1 = this['skuinfor']['details']['sku_infos'][j];
|
|
index = 0;
|
|
code = item1['code'];
|
|
for (let k = 0; k < item1['values']['length']; k++) {
|
|
let item2 = item1['values'][k];
|
|
if (newarr.indexOf(item2['spec_name']) != -1) {
|
|
index += 1;
|
|
} else {
|
|
continue;
|
|
}
|
|
if (index >= newarr['length']) {
|
|
this['skuinfor']['sku_code'] = code;
|
|
break outer;
|
|
}
|
|
}
|
|
};
|
|
if (!code) this['skuinfor']['sku_code'] = this['skuinfor']['details']['sku_infos'][0]['code'];
|
|
// this['skuinfor']['add_price'] = _newSupItemArr.flatMap(item => item)
|
|
console.log(this['skuinfor'],'瑞幸筛选的CODE');
|
|
},
|
|
|
|
/**
|
|
* @规格选择
|
|
* */
|
|
skuClick(index1, index2) {
|
|
let pay = 0;
|
|
// 将当前点击的类型规格高亮状态改变,其他的设置为不高亮
|
|
this['skuinfor']['details']['specifications'][index1]['ingredients'].map((item, index) => {
|
|
if (index2 == index) {
|
|
item['checked'] = true;
|
|
} else {
|
|
item['checked'] = false;
|
|
}
|
|
});
|
|
this.skuInit();
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 规格弹框样式
|
|
.commodity-sku {
|
|
&-cover {
|
|
// height: 560rpx;
|
|
height: auto;
|
|
position: relative;
|
|
|
|
.img {
|
|
width: 100%;
|
|
}
|
|
|
|
&-title {
|
|
color: #333333;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
&-name {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #ffffff;
|
|
padding: 10rpx 32rpx;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
|
|
&-cart {
|
|
flex: 1;
|
|
height: 60rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 36rpx;
|
|
align-items: center;
|
|
|
|
.num {
|
|
max-width: 100rpx;
|
|
min-width: 100rpx;
|
|
text-align: center;
|
|
color: #000000;
|
|
}
|
|
|
|
.img {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-option {
|
|
padding: 32rpx;
|
|
|
|
&-item {
|
|
width: 100%;
|
|
height: 70rpx;
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-bottom: 15rpx;
|
|
|
|
&-label {
|
|
min-width: 112rpx;
|
|
height: 100%;
|
|
color: #999999;
|
|
line-height: 70rpx;
|
|
}
|
|
|
|
&-values {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
|
|
&-activation {
|
|
background: rgba(131, 172, 255, 0.3) !important;
|
|
border: 1rpx solid #83ACFF !important;
|
|
color: #4A6FE7 !important;
|
|
}
|
|
|
|
&-item {
|
|
min-width: 112rpx;
|
|
height: 100%;
|
|
line-height: 70rpx;
|
|
background: #F7F8FA;
|
|
border-radius: 6rpx;
|
|
margin-bottom: 20rpx;
|
|
text-align: center;
|
|
margin-right: 15rpx;
|
|
border: 1rpx solid #F7F8FA;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-Infor {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 32rpx;
|
|
border-top: 1rpx solid rgba(102, 102, 102, 0.1);
|
|
|
|
&-left {
|
|
&-Price {
|
|
color: #FF780F;
|
|
|
|
.text1 {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.text2 {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
|
|
&-sku {
|
|
color: #666666;
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
|
|
&-right {
|
|
width: 254rpx;
|
|
height: 86rpx;
|
|
background: linear-gradient(-77deg, #4A6FE7, #83ACFF);
|
|
box-shadow: 0 6rpx 8rpx 0 rgba(74, 111, 231, 0.2300);
|
|
border-radius: 43rpx;
|
|
text-align: center;
|
|
line-height: 86rpx;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|