cqcarbonwxapp/pages/index/modal/quickBuy.vue

<template>
	<uni-popup ref="randomPop" type="bottom" class="randomPop">
		<view class="popup-content">
			<view class="popup-head">
				线下认购
				<text class="close iconfont icon-shense" @click="closePop"></text>
			</view>
			<view class="popup-body">
				<view class="conditions-item input-number">
					<view class="conditions-item-til">请输入您想认购的碳汇数：</view>
					<view class="num">
						 <input class="input" type="number" v-model="shoppingNum" placeholder="单次购买不超过1000株" placeholder-style="font-size:20rpx"/>
					</view>
				</view>
				<view class="conditions-item remark-wrap" >
					<view class="conditions-item-til">备注说明：</view>
					<view class="remark">
						<textarea class="remark-textarea" maxlength="240" v-model="remark" placeholder="请输入您对认购的碳汇产品要求" />
					</view>
				</view>
				<view class="amount-wrap">
					<view class="amount-flex-wrap">
						<view class="amount-til">预估金额：</view>
						<view class="amount">
							<text class="rmb">¥</text>
							<text class="num">{{totalMoney}}</text>
						</view>						
					</view>					
					<view class="amount-btn"  @click="goCart">提交认购申请</view>
				</view>
				<view class="tip">
					购买{{shoppingNum}}kg，预估金额{{totalMoney}}元，认购期3年
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		debounce
	} from '@/utils/util.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		name: 'quickBuy',
		components: {
			uniPopup,
		},
		created() {
			let self = this;
			this.shoppingNum = 1;
			uni.getStorage({
				key:'userInfo',
				success: function (res) {
					self.customerType = res.data.customerType;
				   // console.log('userInfo',res);
				}
			});
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				customerType:null,
				shoppingNum:'',
				remark:'',
				totalMoney:0,
				price:3,
				helpPeople:[],
				// goodsId:'',
				// carbonVal:''
			}
		},
		methods: {
			...mapMutations(['addCart']),
			getHelpPeople:debounce(function(num){
				this.helpPeople = []
				this.loading = true
				this.$api.http.get(this.config.apiBaseurl + '/carbon-h5/wap/goodsManage/getGoodsInfoByCarbonNum?carbonNum='+this.shoppingNum,{
					header: {
					Accept:'application/json',
					Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
				},
				}).then(res =>{
					// this.loading = false
					console.log('getHelpPeople',res);
					this.helpPeople = res.data.retBody;
				})
			},200),
			refreshfarmer(){
				this.getHelpPeople(this.shoppingNum);
			},
			goCart(){
				console.log('customerType',this.customerType);
				if(this.customerType!=1){
					this.$api.href('/pages/offlineBuy/offlineBuy');
					return;
				};
				if(this.helpPeople === undefined || this.helpPeople.length == 0){
					this.$api.msg("请等待农户数据加载完毕!")
					return 
				}else{
					this.$refs.randomPop.close()
					this.$emit('closeModal',true)
					this.addCart(this.helpPeople);
					this.$api.href('/pages/confirmOrder/confirmOrder')
				}
			},
			openPop() {
				this.$refs.randomPop.open();
				if(this.customerType!=1){					
					return;
				};
				this.getHelpPeople(this.shoppingNum);
			},
			closePop() {
				Object.assign(this.$data, this.$options.data.call(this))
				this.$refs.randomPop.close()
				this.$emit('closeModal', true)
			},
		},
		watch: {
			//碳汇购入量计算
			shoppingNum(n, o) {
				if (n > 1000) {
					this.$api.msg("单次购买不得超过1000KG!")
					setTimeout(res => {
						this.shoppingNum = 1000
					}, 200)
				}
				this.getHelpPeople(n)
				this.totalMoney = this.price * n;
			}
		}
	}
</script>

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