cqcarbonwxapp/pages/index/modal/quickBuy.vue

<template>
	<uni-popup ref="randomPop" type="bottom" class="randomPop">
		<view class="popup-content">
			<view class="popup-head">				
				<text v-if="customerType==1">购买碳汇</text>
				<text v-else>线下认购</text>
				<!-- <text class="close" @click="closePop">X</text> -->
				<image :src="$getimg+'icon-close.png'" class="close-img" @click="closePop" mode="scaleToFill"></image>
			</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" v-if="productType == 'all'">
					<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() {
			this.thetoken = 'Bearer' + ' ' + this.$store.state.token;			
			let self = this;
			this.shoppingNum = 1;
			uni.getStorage({
				key:'userInfo',
				success: function (res) {
					self.customerType = res.data.customerType;
					if(!res.data){this.goLogin();};
				   console.log('userInfo',res);
				},
				fail:function(err){
					this.goLogin();
				}
			});
			console.log('prohelpPeople',this.prohelpPeople);
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			productType:{
				type: String,
				default: 'all'
			},
			prohelpPeople:{
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				thetoken:'',
				$getimg:this.config.$getimg,
				customerType:null,
				shoppingNum:'',
				remark:'',
				totalMoney:0,
				price:3,
				helpPeople:[],
				// goodsId:'',
				// carbonVal:''
			}
		},
		methods: {
			...mapMutations(['addCart']),
			getHelpPeople:debounce(function(num){
				if(this.productType=='self'){
					console.log('this.prohelpPeople',this.prohelpPeople);
					this.helpPeople = this.prohelpPeople;
					this.helpPeople[0].carbonSkin = this.shoppingNum;
					return ;
				};
				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: this.thetoken, //注意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.$emit('closeModal',true);
					this.offlineBuy();
					// this.$api.href('/pages/offlineBuy/offlineBuy');
					return;
				};
				if(this.helpPeople === undefined || this.helpPeople.length == 0){
					this.$api.msg("请等待农户数据加载完毕!")
					return 
				}else{
					this.helpPeople.remark = this.remark;
					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)
			},
			offlineBuy(){
				let self = this;
				let offlineparams = {amount:this.shoppingNum,remark:this.remark};
				self.$api.http.post(this.config.apiBaseurl + "/carbon-h5/wap/apply",offlineparams,{
					header: {
					Accept:'application/json',
					Authorization: this.thetoken, //注意Bearer后面有一空格
				},
				}).then(res=>{
					self.$api.href('/pages/usercenter/subscribe/subscribe')
				}).catch( err =>{
					console.log('err',err)
				})
			},
			goLogin(){
				uni.showToast({
				 	title:"没有获取登录信息即将跳转到登录页",
				 	icon:"none",
				 	duration:2000
				});
				setTimeout(i=>{
					uni.navigateTo({
						url: '/pages/login/loginType',
						fail:function(err){
							console.log(err)
						}
					});
				},2000);
			}
		},
		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>