shuzi/pages/user/greenChange.vue

<template>
	<view class="content">
		<view class="tab flex">
			<view class="tab-name">可用于兑换的水滴：</view>
			<view class="tab-val">{{ userInfo.green_integral || '0' }}</view>
		</view>
		<view class="tab flex">
			<view class="tab-name">兑换比例：</view>
			<view class="tab-val">{{ bl }}:1</view>
		</view>
		<view class="tab flex">
			<view class="tab-name">可兑换洒水壶数量：</view>
			<view class="tab-val">{{ could }}</view>
		</view>
		<view class="tab flex">
			<view class="tab-name">申请兑换洒水壶数量：</view>
			<input type="number" class="tab-val" placeholder="请输入兑换洒水壶数量" placeholder-style="font-size:28rpx;" v-model="changeNum" />
			<!-- <view class="tab-val">
				{{sqss}}
			</view> -->
		</view>
		<view class="sub" :class="{ loading: load }" @click="exchangeGreen">立即兑换</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { getGreenBl, getUserInfo, exchangeGreen } from '@/api/user.js';
export default {
	data() {
		return {
			bl: 0,
			load: true,
			changeNum: ''
		};
	},
	onLoad() {},
	onShow() {
		this.getGreenBl();
	},
	onReachBottom() {},
	onReady() {},
	computed: {
		...mapState('user', ['userInfo']),
		could() {
			if (this.userInfo.green_integral == 0) {
				return 0;
			} else {
				return Math.floor(this.userInfo.green_integral / this.bl);
			}
		}
	},
	methods: {
		...mapMutations('user', ['setUserInfo']),
		getGreenBl() {
			getGreenBl().then(res => {
				console.log(res);
				this.bl = res.data.bl;
				this.getUserInfo();
			});
		},
		getUserInfo() {
			let obj = this;
			getUserInfo().then(res => {
				obj.setUserInfo(res.data);
				obj.load = false;
			});
		},
		exchangeGreen() {
			let obj = this;
			if (obj.load) {
				return;
			}
			if (obj.changeNum == '') {
				return obj.$api.msg('请输入兑换绿卡数量');
			}
			if (obj.userInfo.green_integral == 0) {
				return obj.$api.msg('您的绿积分不足');
			}
			if (obj.changeNum * 1 > obj.could) {
				return obj.$api.msg('您的绿积分不足');
			}
			obj.load = true;
			exchangeGreen({
				num: obj.changeNum
			})
				.then(({ data }) => {
					console.log(data);
					uni.showToast({
						title: '提交成功',
						duration: 2000,
						position: 'top'
					});
					obj.getGreenBl();
					// obj.load = false
				})
				.catch(err => {
					obj.load = false;
				});
		}
	}
};
</script>

<style lang="scss">
.tab {
	font-size: 32rpx;
	font-weight: 500;
	color: #333333;
	line-height: 110rpx;
	border-bottom: 1px solid #eee;
	width: 710rpx;
	margin: auto;

	.tab-name {
		flex-shrink: 0;
	}

	.tab-val {
		flex-grow: 1;
		text-align: right;
		font-size: 48rpx;
		font-weight: bold;
	}
}

.sub {
	width: 670rpx;
	line-height: 88rpx;
	background: #ff4c4c;
	border-radius: 10rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	margin: 60rpx auto 0;
}

.loading {
	background: #999;
}
</style>