172 lines
5.7 KiB
Vue
172 lines
5.7 KiB
Vue
<template>
|
||
<view class="posAll bac5" v-if="ifMask" @tap="executeEv" @touchmove.stop.prevent="moveHandle">
|
||
<view @tap.stop="ifMask=true" class="animated width100 " :class="ifAnimated?'slideInUp':'slideOutDown'" style="position: absolute;bottom: 0;">
|
||
<view class="bacf fon24 col26 pad-zy40 pad-s30 posir pad-x160" v-if="isLoading" style="border-radius: 20rpx 20rpx 0 0;">
|
||
<view class="mar-s20 bbot" v-for="(item,index) in specList" :key="index">
|
||
<view class="">{{item.title}}</view>
|
||
<view class="disac pad-x20 pad-s10 fw">
|
||
<view @tap="chooseSpec(index,item1.id)" class="pad-sx6 pad-zy30 radius4 borbot-df mar-s10 mar-y10" style="min-width: 86rpx;" :class="moSpecList[index]==item1.id?'specActive':''" v-for="(item1,index1) in item.children" :key="index1">{{item1.title}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="pad-sx20 disjbac">
|
||
<view class="">数量</view>
|
||
<!-- 商品数量 -->
|
||
<view class="disac overflow" style="height: 50rpx;">
|
||
<!-- 减数量 -->
|
||
<view class="borbot-df disjcac radius4" @tap="addCutEv(0)" style="color: #d1d1d1;width: 50rpx;height: 50rpx;">
|
||
<i class="icon icon-cut fon20" :style="{backgroundColor: '#FFFFFF'}"></i>
|
||
</view>
|
||
<!-- 实际数量 -->
|
||
<input type="digit" @blur="blurEv" @focus="focusEv(count)" class="fon24 tcenter countInput" v-model="count">
|
||
<!-- 加数量 -->
|
||
<view class="borbot-df disjcac radius4" @tap="addCutEv(1)" style="color: #d1d1d1;width: 50rpx;height: 50rpx;">
|
||
<i class="icon icon-add fon20" :style="{backgroundColor: '#FFFFFF'}"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 立即购买 -->
|
||
<view @tap.stop="goConfirmOrder" class="width100 disjcac colf fon30 posia" style="height: 98rpx;background-color: #f37617;left: 0;right: 0;bottom: 0;">去购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name:"buy-popu",
|
||
data() {
|
||
return {
|
||
ifMask:false,//控制蒙层
|
||
ifAnimated:false,//控制白色弹框内容
|
||
isLoading:false,
|
||
specList:[],
|
||
moSpecList:[],
|
||
haveSpecList:[],
|
||
shopList:[],
|
||
count:1,
|
||
originalNum:0,
|
||
haveIndex:0
|
||
};
|
||
},
|
||
methods:{
|
||
// 前往确认订单页
|
||
goConfirmOrder(){
|
||
if(this.haveSpecList[this.haveIndex].stock){
|
||
let params = {
|
||
sku_list:[
|
||
this.objField('sku_id')
|
||
],
|
||
score_deduct:1
|
||
};
|
||
this.$requst.post('/api/order/prepare-info',params).then(res=>{
|
||
if(res.code==0){
|
||
uni.navigateTo({
|
||
url:'/pagesB/confirm-order/confirm-order'
|
||
})
|
||
this.executeEv();
|
||
uni.setStorageSync('orderInfo',res.data);
|
||
uni.setStorageSync('skuList',params.sku_list);
|
||
}
|
||
})
|
||
} else {
|
||
this.$toolAll.tools.showToast('库存不足');
|
||
}
|
||
},
|
||
// 删除对象中某个字段
|
||
objField(field){
|
||
let newObj = JSON.parse(JSON.stringify(this.shopList[0].sku_list[0]));
|
||
delete newObj[field];
|
||
return newObj;
|
||
},
|
||
// 获取产品详情
|
||
getSpec(shopId){
|
||
// 商品规格
|
||
this.$requst.get('/api/spu/spec',{id:shopId}).then(resspec=>{
|
||
if(resspec.code==0){
|
||
// 所有规格列表
|
||
this.specList = resspec.data.spec;
|
||
// 默认规格
|
||
this.moSpecList = resspec.data.sku.indexes.split('-');
|
||
// 存在规格
|
||
this.haveSpecList = resspec.data.sku_list;
|
||
this.shopList.push({
|
||
sku_list:[
|
||
{
|
||
sku_coding:resspec.data.sku.coding,
|
||
num:this.count
|
||
}
|
||
]
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 规格选择
|
||
chooseSpec(index,id1){
|
||
this.count = 1;
|
||
this.shopList[0].sku_list[0].num = this.count;
|
||
let tempList = JSON.parse(JSON.stringify(this.moSpecList));
|
||
tempList.splice(index,1,id1);
|
||
let exit = this.haveSpecList.findIndex(item=>item.indexes==tempList.join('-'));
|
||
if(exit!=-1){
|
||
if(this.haveSpecList[exit].stock){
|
||
this.haveIndex = exit;
|
||
this.isLoading = false;
|
||
this.moSpecList[index] = id1;
|
||
this.isLoading = true;
|
||
this.shopList[0].sku_list[0].sku_coding = this.haveSpecList[exit].coding;
|
||
this.shopList[0].sku_list[0].sku_id = this.haveSpecList[exit].id;
|
||
} else {
|
||
this.$toolAll.tools.showToast('库存不足');
|
||
}
|
||
} else {
|
||
this.$toolAll.tools.showToast('暂无该规格');
|
||
}
|
||
},
|
||
// 数量加减事件
|
||
addCutEv(num) {
|
||
if(num) {
|
||
// 加 ，如果当前商品数量不等于最大值
|
||
if(this.count != this.haveSpecList[this.haveIndex].stock) {
|
||
this.count++;
|
||
this.shopList[0].sku_list[0].num = this.count;
|
||
} else {
|
||
this.$toolAll.tools.showToast('库存不足');
|
||
}
|
||
} else {
|
||
// 减 ，如果当前商品数量大于最小值
|
||
if(this.count > 1) {
|
||
this.count--;
|
||
this.shopList[0].sku_list[0].num = this.count;
|
||
}
|
||
}
|
||
},
|
||
// 输入框获取焦点事件
|
||
focusEv(num) {
|
||
// 储存当前商品的原始数值
|
||
this.originalNum = num;
|
||
},
|
||
// 输入框失去焦点事件
|
||
blurEv(e) {
|
||
// 失去焦点时，获取当前输入框里的数值
|
||
let currentNum = e.detail.value*1;
|
||
// 如果当前输入框的值不等于0或空，并且当前输入框的值大于最大值，当前商品的数量 = 最大值， 否则为当前输入框输入的值
|
||
this.count = currentNum ? currentNum > this.haveSpecList[this.haveIndex].stock ? this.haveSpecList[this.haveIndex].stock : currentNum : this.originalNum;
|
||
this.shopList[0].sku_list[0].num = this.count;
|
||
},
|
||
moveHandle(){
|
||
return false;
|
||
},
|
||
// 执行动画
|
||
executeEv(){
|
||
this.ifAnimated=false;
|
||
setTimeout(()=>{
|
||
this.ifMask = false;
|
||
},200)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.countInput{width: 68rpx;border-top: 2rpx solid #DFDFDF;border-bottom: 2rpx solid #DFDFDF;border-radius: 4rpx;height: 50rpx;box-sizing: border-box;}
|
||
</style> |