394 lines
10 KiB
Vue
394 lines
10 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-Inofr">
|
||
<!-- 商品图片 -->
|
||
<view class="commodity-sku-Inofr-cover">
|
||
<image class="img" :src="skuinfor['product_img']" mode="widthFix"></image>
|
||
</view>
|
||
<view class="commodity-sku-Inofr-commodity">
|
||
<view class="commodity-sku-Inofr-commodity-title">
|
||
{{skuinfor['product_name']}}
|
||
</view>
|
||
<view class="commodity-sku-Inofr-commodity-sku" v-if="skuinfor['sku']">
|
||
<view class="commodity-sku-Inofr-commodity-sku-text">
|
||
{{skuinfor['sku']}}
|
||
</view>
|
||
<view class="commodity-sku-Inofr-commodity-sku-Price">
|
||
<text class="text1">￥</text>
|
||
<!-- <text class="text2">{{RetainDecimalPoint(skuinfor['adj_pay'] * skuinfor['num'])}}</text> -->
|
||
<text class="text2">{{skuinfor['adj_pay'] * skuinfor['num']}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 规格 -->
|
||
<view class="commodity-sku-option" v-if="skuinfor['details']">
|
||
<template v-for="(item,index) in skuinfor['details']['optional']">
|
||
<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['sku_infos']">
|
||
<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-cart">
|
||
<image class="img" :src="qnyurl('reduce.png','xbk')" mode="" @tap="reducequantity()"></image>
|
||
<view class="num">
|
||
{{skuinfor['num']}}
|
||
</view>
|
||
<image class="img" :src="qnyurl('add.png','xbk')" mode="" @tap="Addquantity()"></image>
|
||
</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));
|
||
console.log(this['skuinfor'],'skuinfor')
|
||
this.skuInit();
|
||
// 设置默认规格
|
||
// var cmr = this.screensku_xbk();
|
||
// // this['skuinfor']['sku_code'] = cmr['sku_code'];
|
||
// this['skuinfor']['sku'] = cmr['sku'];
|
||
// this['skuinfor']['pay'] = cmr['pay'];
|
||
// // this['skuinfor']['adj_pay'] = this['skuinfor']['pay_price'];
|
||
// this['skuinfor']['add_price'] = cmr['add_price'];
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
* @添加数量
|
||
* */
|
||
Addquantity(num = 1) {
|
||
this['skuinfor']['num'] += num;
|
||
},
|
||
/**
|
||
* @选择规格数量减
|
||
* */
|
||
reducequantity(num = 1) {
|
||
if (this['skuinfor']['num'] == 1) return;
|
||
this['skuinfor']['num'] -= num;
|
||
},
|
||
|
||
/**
|
||
* @加入购物车
|
||
* */
|
||
Addcommodity() {
|
||
uni.$u.debounce(() => {
|
||
console.log(this['skuinfor'],'加入购物车商品');
|
||
this.ADD_CART({
|
||
commodity: this['skuinfor'],
|
||
quantity: this['skuinfor']['num']
|
||
}).then(() => {
|
||
this['show'] = false;
|
||
});
|
||
}, 800, true)
|
||
},
|
||
|
||
skuInit(){
|
||
let add_price = 0;
|
||
let r = [];
|
||
let sku_code = [];
|
||
// JSON.parse与JSON.stringify方法深拷贝，将双向数据解除
|
||
// RetainDecimalPoint方法转为正常价格（后台返回的是按照 分 划分的）
|
||
// let pay = +this.RetainDecimalPoint(JSON.parse(JSON.stringify(this['skuinfor']['pay_price'])));
|
||
// let pay = +JSON.parse(JSON.stringify(this['skuinfor']['pay_price']));
|
||
let pay = +JSON.parse(JSON.stringify(this['skuinfor']['product_price'])); //Jin
|
||
// let t = this['skuinfor']['details']['optional'];
|
||
let t = this['skuinfor']['details']['optional'];
|
||
for (let i = 0; i < t['length']; i++) {
|
||
let item = t[i];
|
||
r.push(...item['sku_infos']);
|
||
};
|
||
let newarr = r.filter(item => {
|
||
if (item['checked']) {
|
||
if (item?.price) {
|
||
// add_price = item['price'] * 100;
|
||
add_price = item['price']; // jin
|
||
// 商品的原价与配料价格相加
|
||
pay += add_price
|
||
};
|
||
return item;
|
||
}
|
||
}).map(item => item['name']);
|
||
// console.log(newarr,'newarr');
|
||
let str = [];
|
||
for (let i = 0; i < this['skuinfor']['details']['optional']['length']; i++) {
|
||
let t = this['skuinfor']['details']['optional'];
|
||
str.push(`${t[i]['id']}_${t[i]['sku_infos'].find(item=>item['checked'])['id']}`)
|
||
};
|
||
console.log(newarr,str);
|
||
// 设置展示规格文字
|
||
this['skuinfor']['sku'] = newarr.join('/');
|
||
// 设置规格code
|
||
this['skuinfor']['sku_code'] = str.join(',');
|
||
this['skuinfor']['add_price'] = add_price;
|
||
console.log(add_price, 'xxxxxxxxxxxxx')
|
||
// this['skuinfor']['adj_pay'] = (+this['skuinfor']['pay_price']) + (+add_price);
|
||
this['skuinfor']['adj_pay'] = (+this['skuinfor']['product_price']) + (+add_price); //Jin
|
||
console.log(this['skuinfor'],'星巴克筛选');
|
||
},
|
||
|
||
/**
|
||
* @规格选择
|
||
* */
|
||
skuClick(index1, index2) {
|
||
// 将当前点击的类型规格高亮状态改变,其他的设置为不高亮
|
||
this['skuinfor']['details']['optional'][index1]['sku_infos'].map((item, index) => {
|
||
if (index2 == index) {
|
||
item['checked'] = true;
|
||
} else {
|
||
item['checked'] = false;
|
||
}
|
||
});
|
||
this.skuInit();
|
||
// var cmr = this.screensku_xbk();
|
||
// console.log(cmr,'cmr');
|
||
// // this['skuinfor']['sku_code'] = cmr['sku_code'];
|
||
// this['skuinfor']['sku'] = cmr['sku'];
|
||
// this['skuinfor']['pay'] = cmr['pay'];
|
||
// // this['skuinfor']['adj_pay'] = this['skuinfor']['pay_price'];
|
||
// this['skuinfor']['add_price'] = cmr['add_price'];
|
||
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 规格弹框样式
|
||
.commodity-sku {
|
||
&-Inofr {
|
||
border-bottom: 1rpx dashed #cccccc;
|
||
padding: 32rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
&-cover {
|
||
width: 176rpx;
|
||
height: 176rpx;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-commodity {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
&-title {
|
||
line-height: 70rpx;
|
||
}
|
||
|
||
&-sku {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
&-text {
|
||
color: #666666;
|
||
font-size: 25rpx;
|
||
}
|
||
|
||
&-Price {
|
||
color: #DE302D;
|
||
|
||
.text1 {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.text2 {
|
||
font-size: 35rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// &-cover {
|
||
// // height: 560rpx;
|
||
// height: auto;
|
||
// position: relative;
|
||
|
||
|
||
|
||
// // &-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;
|
||
// // }
|
||
|
||
// // .img {
|
||
// // width: 42rpx;
|
||
// // height: 42rpx;
|
||
// // }
|
||
// // }
|
||
// // }
|
||
// }
|
||
|
||
&-option {
|
||
padding: 32rpx;
|
||
|
||
&-item {
|
||
width: 100%;
|
||
font-size: 26rpx;
|
||
margin-bottom: 15rpx;
|
||
|
||
&-label {
|
||
font-weight: 800;
|
||
min-width: 112rpx;
|
||
height: 100%;
|
||
color: #333333;
|
||
line-height: 100rpx;
|
||
}
|
||
|
||
&-values {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
&-activation {
|
||
background: #ececec !important;
|
||
border: 1rpx solid #F7F8FA;
|
||
}
|
||
|
||
&-item {
|
||
min-width: 112rpx;
|
||
height: 100%;
|
||
line-height: 70rpx;
|
||
border-radius: 6rpx;
|
||
margin-bottom: 20rpx;
|
||
background: #ffffff;
|
||
text-align: center;
|
||
margin-right: 15rpx;
|
||
border: 1rpx solid transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&-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 {
|
||
&-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;
|
||
}
|
||
|
||
.img {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-right {
|
||
width: 254rpx;
|
||
height: 86rpx;
|
||
background: #00AF66;
|
||
box-shadow: 0 6rpx 8rpx 0 rgba(74, 111, 231, 0.2300);
|
||
border-radius: 43rpx;
|
||
text-align: center;
|
||
line-height: 86rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|