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.
595 lines
18 KiB
595 lines
18 KiB
<template>
|
|
<view :style="viewColor">
|
|
<view class="container" :class="popup.show==true?'on':''">
|
|
<view class="header">
|
|
<text class="title">优惠套餐({{discountsTotal}})</text>
|
|
<text class="iconfont icon-guanbi5" @tap.stop="closePopup"></text>
|
|
</view>
|
|
<view class="main_count">
|
|
<scroll-view scroll-y="true">
|
|
<view v-for="(item, index) in discountsData" :key="index" class="list">
|
|
<view class="acea-row list_title">
|
|
<view class="combo_list_name">
|
|
<image class="title_icon" src="/static/images/combo_title.png"></image>
|
|
<view class="name line1">套餐{{index+1}}: {{item.title}}</view>
|
|
</view>
|
|
<view class="combo_list_money">￥{{item.total_price}}</view>
|
|
</view>
|
|
<block v-for="(itemn, indexn) in item.discountsProduct" :key="indexn">
|
|
<view class="pro_list">
|
|
<view v-if="item.type == 1 && indexn!=0" class="checkbox" @tap.stop="checkedChange(item,itemn)">
|
|
<text v-if="itemn.checked" class="iconfont icon-xuanzhong1"></text>
|
|
<text v-else class="iconfont icon-weixuanzhong"></text>
|
|
</view>
|
|
<view v-if="item.type == 1 && indexn ==0" class="checkbox">
|
|
<text class="iconfont icon-xuanzhong3"></text>
|
|
</view>
|
|
<view class="picture">
|
|
<image :src="itemn.image" class="image"></image>
|
|
<text v-if="itemn.product_id == id" class="current_pro">当前商品</text>
|
|
</view>
|
|
<view class="info">
|
|
<view class="name line2">{{itemn.store_name}}</view>
|
|
<view class="list_attr" @click="selecAttr(index,indexn)">
|
|
<text class="line1">
|
|
{{itemn.attr || '默认'}}
|
|
</text>
|
|
<text class="iconfont icon-xiangxia"></text>
|
|
</view>
|
|
<view class="price">
|
|
<text>
|
|
￥{{itemn.product.price}}
|
|
</text>
|
|
<text class="ot_price">
|
|
￥{{itemn.product.ot_price}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view class="save_money">省: ¥ {{item.checked_save_money}}</view>
|
|
<view v-if="item.is_limit == 0 || (item.is_limit == 1 && item.limit_num > 0)" class="btn" @click="subData(index)">
|
|
购买此套餐{{item.checked_num}}件商品
|
|
</view>
|
|
<view v-else-if="item.is_limit == 1 && item.limit_num <= 0" class="btn disabled">
|
|
套餐已售罄
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class='mask' catchtouchmove="true" :hidden='popup.show==false' @tap="closePopup"></view>
|
|
<productWindow :attr="attr" :isShow="1" :title="selectTitle" :iSplus="1" @myevent="onMyEvent"
|
|
@ChangeAttr="ChangeAttr" @attrVal="attrVal" @iptCartNum="iptCartNum" id="product-window" @goCat="goOrder()">
|
|
</productWindow>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
// +----------------------------------------------------------------------
|
|
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
|
// +----------------------------------------------------------------------
|
|
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
|
// +----------------------------------------------------------------------
|
|
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
|
// +----------------------------------------------------------------------
|
|
// | Author: CRMEB Team <admin@crmeb.com>
|
|
// +----------------------------------------------------------------------
|
|
import { goShopDetail } from '@/libs/order.js'
|
|
import { discountsCartAdd, getDiscountsLst } from '@/api/store.js';
|
|
import productWindow from './productWindow.vue'
|
|
import { mapGetters } from "vuex";
|
|
export default {
|
|
components: {
|
|
productWindow
|
|
},
|
|
props:{
|
|
uid: {
|
|
type: Number,
|
|
},
|
|
id: {
|
|
type: String|| Number,
|
|
}
|
|
},
|
|
computed: mapGetters(['viewColor']),
|
|
data() {
|
|
return {
|
|
discountsData: [],
|
|
discountsTotal: 0,
|
|
popup: {
|
|
show: false
|
|
},
|
|
attr: {
|
|
cartAttr: false,
|
|
productAttr: [],
|
|
productSelect: {},
|
|
},
|
|
productValue: [], //系统属性
|
|
isOpen: false, //是否打开属性组件
|
|
attrValue: [],
|
|
attrTxt: "",
|
|
selectAttr: [],
|
|
selectValue: [], //选中的ID
|
|
proNum: 0,
|
|
images: [],
|
|
selectCountPrice: [],
|
|
selectTitle: "",
|
|
seleNum: 0,
|
|
isFirst: true,
|
|
seleIndexn: -1,
|
|
seleIndex: -1,
|
|
unique: "0"
|
|
};
|
|
},
|
|
mounted(){
|
|
this.$nextTick(function() {
|
|
|
|
})
|
|
|
|
},
|
|
methods: {
|
|
// 点击关闭按钮
|
|
closePopup() {
|
|
this.$set(this.popup, 'show', false);
|
|
},
|
|
showPopup(id) {
|
|
this.id = id
|
|
this.$set(this.popup, 'show', true);
|
|
this.getList();
|
|
},
|
|
initAttr(){
|
|
this.discountsData.map((v, i) => {
|
|
this.getData(i)
|
|
})
|
|
},
|
|
getData(index){
|
|
this.discountsData[index].discountsProduct.forEach((item, i) => {
|
|
this.attr.productAttr = item.product.attr;
|
|
this.productValue = item.product.sku
|
|
this.DefaultSelect(index,i)
|
|
this.getPrice(this.discountsData[index])
|
|
})
|
|
},
|
|
/*获取套餐列表数据*/
|
|
getList(){
|
|
getDiscountsLst({product_id: this.id}).then(res => {
|
|
res.data.list.forEach((item, index) => {
|
|
item.total_price = 0;
|
|
item.checked_num = item.count;
|
|
item.checked_save_money = 0;
|
|
item.discountsProduct.forEach((v, i) => {
|
|
this.$set(v,'checked',true)
|
|
this.$set(v,'attr','')
|
|
this.$set(v,'unique','')
|
|
item.total_price += parseFloat(v.product.price)
|
|
item.checked_save_money += (parseFloat(v.product.ot_price) - parseFloat(v.product.price)).toFixed(2)
|
|
})
|
|
})
|
|
this.discountsTotal = res.data.count;
|
|
this.discountsData = res.data.list;
|
|
this.initAttr()
|
|
}).catch(err => {
|
|
|
|
});
|
|
},
|
|
/**
|
|
* 购物车手动填写
|
|
*
|
|
*/
|
|
iptCartNum: function(e) {
|
|
this.$set(this.attr.productSelect, 'cart_num', e);
|
|
},
|
|
/**
|
|
* 打开属性插件
|
|
*/
|
|
selecAttr: function(index, n) {
|
|
this.proNum = index
|
|
this.seleNum = n
|
|
this.selectTitle = this.discountsData[index].discountsProduct[n].product.store_name
|
|
this.attr.productAttr = this.discountsData[index].discountsProduct[n].product.attr
|
|
this.productValue = this.discountsData[index].discountsProduct[n].product.sku
|
|
if(this.isFirst || (!this.isFirst &&
|
|
(this.seleIndex != index && this.seleIndexn != n || this.seleIndex == index && this.seleIndexn != n || this.seleIndex != index && this.seleIndexn == n) || this.unique != this.attr.productSelect.unique)){
|
|
this.DefaultSelect(index,n)
|
|
}
|
|
this.seleIndex = index;this.seleIndexn = n
|
|
this.isFirst = false
|
|
|
|
this.$nextTick((e) => {
|
|
this.$set(this.attr, 'cartAttr', true);
|
|
this.$set(this, 'isOpen', true);
|
|
})
|
|
},
|
|
attrVal(val) {
|
|
this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw]
|
|
.attr_values[val.indexn]);
|
|
},
|
|
/**
|
|
* 属性变动赋值
|
|
*
|
|
*/
|
|
ChangeAttr: function(res) {
|
|
let productSelect = this.productValue[res];
|
|
if (productSelect && productSelect.stock > 0) {
|
|
this.$set(this.attr.productSelect, 'image', productSelect.image);
|
|
this.$set(this.attr.productSelect, 'price', productSelect.price);
|
|
this.$set(this.attr.productSelect, 'stock', productSelect.stock);
|
|
this.$set(this.attr.productSelect, 'product_stock', productSelect.stock);
|
|
this.$set(this.attr.productSelect, 'unique', productSelect.unique);
|
|
this.$set(this, 'unique', productSelect.unique);
|
|
this.$set(this.attr.productSelect, 'cart_num', 1);
|
|
this.$set(this.discountsData[this.proNum].discountsProduct[this.seleNum], 'attr', res || "");
|
|
this.$set(this.discountsData[this.proNum].discountsProduct[this.seleNum]['product'], 'price', productSelect.price || 0);
|
|
this.$set(this.discountsData[this.proNum].discountsProduct[this.seleNum]['product'], 'ot_price', productSelect.ot_price || 0);
|
|
|
|
this.$set(this.discountsData[this.proNum].discountsProduct[this.seleNum], 'unique', productSelect.unique || "");
|
|
} else {
|
|
this.$set(this.attr.productSelect,"store_name",this.discountsData[0].discountsProduct[0].product.store_name
|
|
);
|
|
this.$set(this.attr.productSelect, "image", this.discountsData[0].discountsProduct[0].product.image);
|
|
this.$set(this.attr.productSelect, "price", this.discountsData[0].discountsProduct[0].product.price);
|
|
this.$set(this.attr.productSelect, "ot_price", this.discountsData[0].discountsProduct[0].product.ot_price);
|
|
this.$set(this.attr.productSelect, "product_stock", 0);
|
|
this.$set(this.attr.productSelect,"unique", "");
|
|
return;
|
|
}
|
|
this.getPrice(this.discountsData[this.proNum])
|
|
},
|
|
|
|
/**
|
|
* 默认选中属性
|
|
*
|
|
*/
|
|
DefaultSelect: function(index,indexn) {
|
|
let productAttr = this.attr.productAttr;
|
|
let value = [];
|
|
for (var key in this.productValue) {
|
|
if (this.productValue[key].stock > 0) {
|
|
value = this.attr.productAttr.length ? key.split(',') : [];
|
|
break;
|
|
}
|
|
}
|
|
for (let i = 0; i < productAttr.length; i++) {
|
|
this.$set(productAttr[i], 'index', value[i]);
|
|
}
|
|
//sort();排序函数:数字-英文-汉字；
|
|
let productSelect = this.productValue[value.join(',')];
|
|
if (productSelect && productAttr.length) {
|
|
this.$set(this.attr.productSelect, 'store_name', productSelect.store_name);
|
|
this.$set(this.attr.productSelect, 'image', productSelect.image);
|
|
this.$set(this.attr.productSelect, 'price', productSelect.price);
|
|
this.$set(this.attr.productSelect, 'ot_price', productSelect.ot_price);
|
|
this.$set(this.attr.productSelect, 'stock', productSelect.stock);
|
|
this.$set(this.attr.productSelect, 'product_stock', productSelect.stock);
|
|
this.$set(this.attr.productSelect, 'unique', productSelect.unique);
|
|
this.$set(this, 'unique', productSelect.unique);
|
|
this.$set(this.attr.productSelect, 'cart_num', 1);
|
|
this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
|
|
this.$set(this.discountsData[index].discountsProduct[indexn], 'unique', productSelect.unique || "");
|
|
this.$set(this.discountsData[index].discountsProduct[indexn], 'attr', value.join(','));
|
|
this.$set(this.discountsData[index].discountsProduct[indexn]['product'], 'price', productSelect.price);
|
|
this.$set(this.discountsData[index].discountsProduct[indexn]['product'], 'ot_price', productSelect.ot_price);
|
|
this.$set(this.discountsData[index].discountsProduct[indexn]['product'], 'ot_price', productSelect.ot_price);
|
|
} else if (productSelect && !productAttr.length) {
|
|
this.$set(this.attr.productSelect, 'store_name', productSelect.store_name);
|
|
this.$set(this.attr.productSelect, 'image', productSelect.image);
|
|
this.$set(this.attr.productSelect, 'price', productSelect.price);
|
|
this.$set(this.attr.productSelect, 'ot_price', productSelect.ot_price);
|
|
this.$set(this.attr.productSelect, 'stock', productSelect.stock);
|
|
this.$set(this.attr.productSelect, 'product_stock', productSelect.stock);
|
|
this.$set(this.attr.productSelect, 'unique', productSelect.unique || '');
|
|
this.$set(this, 'unique', productSelect.unique);
|
|
this.$set(this.attr.productSelect, 'cart_num', 1);
|
|
this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
|
|
this.$set(this.discountsData[index].discountsProduct[indexn]['product'], 'price', productSelect.price);
|
|
this.$set(this.discountsData[index].discountsProduct[indexn]['product'], 'ot_price', productSelect.ot_price);
|
|
this.$set(this.discountsData[index].discountsProduct[indexn], 'attr', '')
|
|
this.$set(this.discountsData[index].discountsProduct[indexn], 'unique', productSelect.unique || "");
|
|
}else if (!productSelect && !productAttr.length || !productSelect && productAttr.length) {
|
|
this.$set(this.attr.productSelect,"store_name",this.discountsData[0].discountsProduct[0].product.store_name
|
|
);
|
|
this.$set(this.attr.productSelect, "image", this.discountsData[0].discountsProduct[0].product.image);
|
|
this.$set(this.attr.productSelect, "price", this.discountsData[0].discountsProduct[0].product.price);
|
|
this.$set(this.attr.productSelect, "ot_price", this.discountsData[0].discountsProduct[0].product.ot_price);
|
|
this.$set(this.attr.productSelect, "product_stock", 0);
|
|
this.$set(this.attr.productSelect,"unique", "");
|
|
this.$set(this, 'unique', "");
|
|
}
|
|
},
|
|
onMyEvent: function() {
|
|
this.$set(this.attr, 'cartAttr', false);
|
|
this.$set(this, 'isOpen', false);
|
|
},
|
|
checkedChange(item,itemn) {
|
|
itemn.checked = !itemn.checked
|
|
if(itemn.checked){
|
|
item.checked_num++
|
|
}else{
|
|
item.checked_num--;
|
|
}
|
|
this.getPrice(item)
|
|
},
|
|
/*计算此套餐总价及节省价*/
|
|
getPrice(item){
|
|
let checked_save_money = 0;
|
|
let total_price = 0;
|
|
item.discountsProduct.forEach((v, i) => {
|
|
if(v.checked){
|
|
checked_save_money += (parseFloat(v.product.ot_price) - parseFloat(v.product.price));
|
|
total_price += parseFloat(v.product.price);
|
|
}
|
|
})
|
|
this.$set(item, 'checked_save_money', checked_save_money);
|
|
this.$set(item, 'total_price', total_price);
|
|
},
|
|
subData(index) {
|
|
let data = []
|
|
let reqData = {
|
|
is_new: 1,
|
|
discount_id: this.discountsData[index].discount_id,
|
|
data: [],
|
|
}
|
|
if (this.discountsData[index].type == 0) {
|
|
this.selectValue = []
|
|
this.discountsData[index].discountsProduct.map(v => {
|
|
this.selectValue.push(v.discount_product_id + '')
|
|
})
|
|
} else {
|
|
if (this.discountsData[index].checked_num < 2) {
|
|
return this.$util.Tips({
|
|
title: '请先选择套餐商品'
|
|
});
|
|
}
|
|
this.selectValue = []
|
|
this.discountsData[index].discountsProduct.map(v => {
|
|
if(v.checked){
|
|
this.selectValue.push(v.discount_product_id + '')
|
|
}
|
|
})
|
|
}
|
|
for (let i = 0; i < this.discountsData[index].discountsProduct.length; i++) {
|
|
for (let j = 0; j < this.selectValue.length; j++) {
|
|
if (this.discountsData[index].discountsProduct[i].discount_product_id == this.selectValue[j]) {
|
|
reqData.data.push({
|
|
cart_num: 1,
|
|
product_attr_unique: this.discountsData[index].discountsProduct[i].unique,
|
|
product_id: this.discountsData[index].discountsProduct[i].product_id
|
|
})
|
|
}
|
|
}
|
|
}
|
|
discountsCartAdd(reqData)
|
|
.then(function(res) {
|
|
uni.navigateTo({
|
|
url: '/pages/users/order_confirm/index?cartId=' + res
|
|
.data
|
|
.cart_id
|
|
.join(',')
|
|
});
|
|
})
|
|
.catch(err => {
|
|
this.selectValue = []
|
|
return this.$util.Tips({
|
|
title: err
|
|
});
|
|
});
|
|
},
|
|
goOrder() {
|
|
this.$set(this, 'isOpen', false);
|
|
this.$set(this.attr, 'cartAttr', false);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container{
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
left: 0;
|
|
background-color: #f5f5f5;
|
|
z-index: 300;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
transform: translate3d(0, 100%, 0);
|
|
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
|
max-height: 1000rpx;
|
|
&.on {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
.header{
|
|
position: relative;
|
|
padding: 36rpx 30rpx;
|
|
text-align: center;
|
|
|
|
.title{
|
|
color: #282828;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
.iconfont{
|
|
color: #8A8A8A;
|
|
font-size: 28rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
.icon-guanbi5 {
|
|
right: 20rpx;
|
|
color: #8a8a8a;
|
|
font-size: 30rpx;
|
|
line-height: 30rpx;
|
|
top: 40rpx;
|
|
background-color: transparent;
|
|
font-weight: normal;
|
|
}
|
|
|
|
}
|
|
scroll-view{
|
|
max-height: 1000rpx;
|
|
}
|
|
.main_count{
|
|
padding: 0 20rpx 30rpx;
|
|
max-height: 800rpx;
|
|
overflow-y: scroll;
|
|
.list{
|
|
margin-bottom: 20rpx;
|
|
background: #ffffff;
|
|
padding: 30rpx 20rpx;
|
|
.list_title{
|
|
color: #282828;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.combo_list_name{
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.name{
|
|
max-width: 500rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.title_icon,uni-image,image{
|
|
width: 26rpx;
|
|
height:26rpx;
|
|
}
|
|
}
|
|
.combo_list_money{
|
|
color: var(--view-priceColor);
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
.btn{
|
|
width: 670rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background-image: linear-gradient(270deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
|
|
border-radius: 43px;
|
|
margin: 21rpx auto 0;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
&.disabled{
|
|
cursor: not-allowed;
|
|
background:#bbb
|
|
}
|
|
}
|
|
.save_money{
|
|
color: var(--view-priceColor);
|
|
font-size: 22rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
.pro_list{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
&:last-child{
|
|
border-bottom: none;
|
|
}
|
|
.checkbox{
|
|
margin-right: 30rpx;
|
|
|
|
}
|
|
.icon-xuanzhong1{
|
|
color: var(--view-theme);
|
|
}
|
|
.icon-xuanzhong1,.icon-weixuanzhong{
|
|
font-size: 40rpx;
|
|
}
|
|
.icon-xuanzhong3{
|
|
color: var(--view-theme);
|
|
font-size: 18rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 100%;
|
|
background: var(--view-minorColor);
|
|
line-height: 40rpx;
|
|
}
|
|
.picture,.image,uni-image{
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 12rpx;
|
|
position: relative;
|
|
}
|
|
.current_pro{
|
|
background: linear-gradient(270deg, #F67A38 0%, #F11B09 100%);
|
|
border-radius: 12rpx 0px 12rpx 12rpx;
|
|
color: #fff;
|
|
line-height: 34rpx;
|
|
height: 34rpx;
|
|
font-size: 16rpx;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100rpx;
|
|
}
|
|
.info{
|
|
margin-left: 30rpx;
|
|
position: relative;
|
|
.name{
|
|
color: #282828;
|
|
font-size: 24rpx;
|
|
line-height: 36rpx;
|
|
}
|
|
.price{
|
|
color: #282828;
|
|
font-weight: bold;
|
|
margin-top: 15rpx;
|
|
font-size: 20rpx;
|
|
font-weight: bold;
|
|
text{
|
|
font-size: 26rpx;
|
|
|
|
}
|
|
.ot_price{
|
|
font-weight: normal;
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
text-decoration: line-through;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.list_attr{
|
|
max-width:390rpx;
|
|
height: 34rpx;
|
|
line-height: 34rpx;
|
|
font-size: 20rpx;
|
|
color: #666666;
|
|
border-radius: 18rpx;
|
|
background-color: #f5f5f5;
|
|
padding: 0 60rpx 0 20rpx;
|
|
margin-top: 15rpx;
|
|
position: relative;
|
|
.iconfont{
|
|
font-size: 12rpx;
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 4rpx;
|
|
}
|
|
text{
|
|
display: inline-block;
|
|
max-width: 300rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
/deep/uni-checkbox .uni-checkbox-input{
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
border-radius: 100%;
|
|
margin-right: 30rpx;
|
|
}
|
|
</style>
|
|
|