forest-H5/pages/product/modal/quickBuy.vue

<template>
	<uni-popup ref="randomPop" type="bottom" class="randomPop">
		<view class="popup-content">
			<view class="product">
				<view class="product-img-wrap">
					<image :src="pData.product.pic|miniImg(50)+'/thumbnail/286x286'" class="product-img" mode="widthFix"></image>
				</view>
				<view class="product-info">
					<view class="product-info-name">
						{{pData.product.name}}
					</view>
					<view class="product-info-price-wrap">
						¥<text class="product-info-price">{{pData.product.price}}</text>
						<text class="product-info-unit" v-if="pData.product.unit">/{{pData.product.unit}}</text>
					</view>
				</view>
			</view>
			<view class="nums">
				<view class="nums-til">数量</view>
				 <view class="countNum">
					 <view class="countNum-action reduce" @click="calcValue('reduce',total)">-</view>
					 <view class="countNum-input">
						 <input class="uni-input" v-model="total" type="number" @blur="onInput(total)"/>
					 </view>
					 <view class="countNum-action add" @click="calcValue('add',total)">+</view>
				 </view>
			</view>
			<view class="buy-btn" @click="submit">立即购买</view>
		</view>
	</uni-popup>
</template>

<script>
	// import { mapMutations } from 'vuex';
	import { debounce } from '@/utils/util.js'
	// import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import { bus } from '../../../utils/bus.js';
	export default{
		name:'quickBuy',
		components:{
			uniPopup,
		},
		created(){
			console.log('this.pData',JSON.parse(JSON.stringify(this.pData)));
			if(this.pData.product.stock>0){this.total = 1};
		},
		props:{
			visible: {
				type: Boolean,
				default: false
			},
			pData: {
				type: Object,
				default: []
			}
		},	
		data(){
			return{
				loading:false,
				loadStatus:'loading',
				min:1,
				total:0,

			}
		},
		methods:{
			openPop(){
				this.$refs.randomPop.open();
			},
			closePop(){
				Object.assign(this.$data, this.$options.data.call(this))
				this.$refs.randomPop.close()
				this.$emit('closeModal',true)
			},
			onInput(total){
				console.log(this.total)
				if(!(/(^[1-9]\d*$)/.test(this.total))){
					this.total = 1
					if(this.total < this.min){
						this.total = 1
					}
				}
				if(this.total>=this.pData.product.stock){
					this.$api.msg('超出最大库存');
					this.total = this.pData.product.stock;
				}
			},
			//数量计算
			calcValue(type,total){
				if (type === "reduce") {
					this.total-- 
					if (total <= this.min) {
						this.total = 1
					}
				} else if (type === "add") {
					// console.log('total',total);
					if(total>=this.pData.product.stock){
						this.$api.msg('超出最大库存');
						return;
					}
					this.total++;
				}
			},
			submit(){
				if(this.total<=0){
					this.$api.msg('商品数量不能小于1');
					return;
				};
				this.$emit('closeModal',true)
				bus.$emit('toDetailPage', {
					data: {
						productId:this.pData.product.id,
						bayNum:this.total,
						productName:this.pData.product.name,
						productPrice:this.pData.product.price,
						productImg:this.pData.product.pic,
						productUnit:this.pData.product.unit,
					}
				});				
				uni.navigateTo({
					url: '/pages/confirmorder/confirmorder',
				});
			}
		},
	}
</script>

<style scoped>
	@import url("./quickBuy.css");
</style>