xwc/pages/user/energy-transfer.vue

<template>
	<view>
		<hua-page-head :pageTitle="pageTitle"></hua-page-head>

		<view class="container">
			<view class="" v-if="type == 1">
				<view class="int-item">
					<view class="tips">请输入您转让的用户ID</view>

					<view class="input d-flex align-items-center"><input type="text" placeholder="请输入ID"
							v-model="userId" @blur="fxname()" /></view>
				</view>
				<view class="int-item" v-if="nickname != ''">
					<view class="tips">该用户的昵称为</view>

					<view class="input d-flex align-items-center">{{ nickname }}</view>
				</view>
				<view class="int-item">
					<view class="tips">请输入您的密码</view>
					<view class="input d-flex align-items-center"><input type="password" placeholder="请输入密码"
							v-model="pwd" /></view>
				</view>
				<view class="int-item">
					<view class="input d-flex align-items-center">
						<image src="../../static/nl.png" mode="heightFix"></image>
						<input type="text" placeholder="请输入抵用券数量" v-model="number" />
					</view>
				</view>

				<button class="btn" @tap="transfer"><text>转出</text></button>
			</view>

			<view class="" v-else>
				<view class="number-bar">
					<view class="price item">
						<view class="num">{{ appConfig.energyprice }}</view>
						<view class="tit">抵用券价格</view>
					</view>
					<view class="power item">
						<view class="num">{{ userInfo.energy }}</view>
						<view class="tit">抵用券余额</view>
					</view>
				</view>

				<view class="int-item">
					<view class="tips">请输入您转让的用户ID</view>

					<view class="input d-flex align-items-center"><input type="text" placeholder="请输入ID"
							v-model="userId" @blur="fxname()" /></view>
				</view>
				<view class="int-item" v-if="nickname != ''">
					<view class="tips">该用户的昵称为</view>

					<view class="input d-flex align-items-center">{{ nickname }}</view>
				</view>
				<view class="int-item">
					<view class="tips">请输入您的密码</view>
					<view class="input d-flex align-items-center"><input type="password" placeholder="请输入密码"
							v-model="pwd" /></view>
				</view>
				<view class="int-item">
					<view class="tips">请输入让利金额</view>

					<view class="input d-flex align-items-center"><input type="text" placeholder="请输入让利金额"
							v-model="price" @input="changeInt" /></view>
					<view class="price-tips">
						折合抵用券：
						<text class="num">{{ eNumber ? eNumber.toFixed(6) : 0 }}</text>
					</view>
				</view>
				<button class="btn" @tap="kTransfer"><text>馈赠</text></button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		transferEnergy,
		giftEnergy
	} from '@/api/shop.js';
	import {
		nickname
	} from '@/api/user.js';
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				pageTitle: '抵用券转让',
				userId: '',
				number: '',
				type: null,
				price: '',
				eNumber: '',
				pwd: '',
				nickname: ''
			};
		},
		onLoad(option) {
			console.log(option);
			this.type = option.type;
			if (this.type == 1) {
				this.pageTitle = '抵用券转让';
			} else {
				this.pageTitle = '抵用券馈赠';
			}
		},
		methods: {
			async transfer() {
				const obj = this;
				let num = this.number;
				if (this.userId == '') {
					uni.showToast({
						title: '请输入用户ID',
						icon: 'none'
					});
					return;
				}
				if (this.pwd == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				if (num == '') {
					uni.showToast({
						title: '请输入抵用券数量',
						icon: 'none'
					});
					return;
				}
				// if (this.userInfo.is_energy == 0) {
				// 	uni.showToast({
				// 		title: '请先激活抵用券',
				// 		icon: 'none'
				// 	});
				// } else {
				uni.showModal({
					title: '提示',
					cancelText: '取消',
					confirmText: '确定',
					content: '确定要将' + num + '个抵用券转出？',
					success: res => {
						if (res.confirm) {
							transferEnergy({
								uid: this.userId,
								num: num,
								password: obj.password
							}).then(res => {
								console.log(res);
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// }
			},
			changeInt(e) {
				console.log(e.detail.value);
				this.eNumber = e.detail.value / this.appConfig.energyprice;
			},
			fxname() {
				nickname({
					sn: this.userId
				}).then(e => {
					console.log(e.data.nickname);
					this.nickname = e.data.nickname;
				});
			},
			async kTransfer() {
				const obj = this;
				let num = this.eNumber.toFixed(6);
				let total = parseFloat(this.userInfo.energy);
				console.log(num, total);
				if (this.userId == '') {
					uni.showToast({
						title: '请输入用户ID',
						icon: 'none'
					});
					return;
				}
				if (this.pwd == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				if (this.price == '') {
					uni.showToast({
						title: '请输入让利金额',
						icon: 'none'
					});
					return;
				}
				if (this.userInfo.is_energy == 0) {
					uni.showToast({
						title: '请先激活抵用券',
						icon: 'none'
					});
					return;
				}
				if (num > total) {
					uni.showToast({
						title: '抵用券余额不足',
						icon: 'none'
					});
					return;
				}
				uni.showModal({
					title: '提示',
					cancelText: '取消',
					confirmText: '确定',
					content: '确定要将' + num + '个抵用券馈赠？',
					success: res => {
						if (res.confirm) {
							console.log(obj.pwd, '密码');
							giftEnergy({
								gift_user_sn: this.userId,
								gift_energy_number: num,
								password: obj.pwd
							}).then(res => {
								console.log(res);
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		computed: {
			...mapGetters(['userInfo', 'appConfig'])
		}
	};
</script>

<style lang="scss">
	.container {
		padding: 0 24rpx;
		height: calc(100vh - var(--status-bar-height));
	}

	.int-item {
		box-sizing: border-box;
		margin: 40rpx auto;

		.tips {
			font-size: 24rpx;
			color: #616161;
			margin-bottom: 10rpx;
		}

		.input {
			padding: 0 24rpx;
			height: 80rpx;
			background-color: #fff;
			border-radius: 20rpx;

			image {
				height: 32rpx;
				margin-right: 20rpx;
			}

			input {
				flex: 1;
			}
		}
	}

	.btn {
		background: #f73e33;
		border-radius: 50rpx;
		color: #fff;
	}

	.number-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.item {
			flex-basis: 100%;
			text-align: center;

			.num {
				font-weight: bold;
				font-size: 36rpx;
				line-height: 60rpx;
			}

			.tit {
				color: #999;
			}
		}
	}

	.price-tips {
		line-height: 60rpx;

		text {
			color: #f73e33;
			font-weight: bold;
		}
	}
</style>