martial-arts/components/buy-popu.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);
						}
					})
				}
			},
			// 删除对象中某个字段
			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>