uav-uniapp-demo-24-8-18/pages/purse/purse.vue

<!-- 充值界面 -->
<template>
	<view class="purse bx">
		<navbar :leftClick="leftClick" :title="$t('page.purse.recharge')"></navbar>

		<!-- 用户余额信息 -->
		<view class="user-money content">
			<view class="title">{{ $t('page.purse.account') }}</view>
			<view class="money">
				<view class="money-unit">{{ $t('page.purse.unit') }}</view>
				<view class="money-detail">{{ money }}</view>
			</view>
		</view>

		<!-- 充值方案列表 -->
		<view class="recharge-list content">
			<view @click="selectRecharge(index)" v-for="(item,index) in rechargeList" :key="item.id" class="recharge-item" :class="{ selectRecharge : index === active}">
				<view class="money">{{ item.price }}</view>
				<view class="unit">{{ $t('page.purse.unit') }}</view>
			</view>
		</view>
		
		<!-- 输入框 -->
		<view class="input content">
			<input @input="moneyChange" v-model="form.money" class="input content" type="number" :placeholder="$t('page.purse.deposit-now')" />
		</view>
		<view class="input content">
			<input v-model="form.payPass" class="input content" type="text" :placeholder="$t('page.purse.security-pin')" />
		</view>
		
		<!-- 按钮 -->
		<view @click="recharge" class="btn content">{{ $t('page.purse.deposit-now') }}</view>
		
		<!-- 客服列表 -->
		<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>

	</view>
</template>

<script>
	import navbar from '@/components/base/m-navbar.vue'
	import serviceList from '@/components/serviceList/serviceList.vue';
	
	export default {
		components: {
			navbar,
			serviceList
		},
		data() {
			return {
				rechargeList : [],
				active : 0,
				money : '',
				form : {
					money : '',
					payPass : '',
					id : ''
				},
				serverList : [],
				showService : false
			}
		},
		onShow() {
			this.getUserInfo()
			this.getTopUpScheme()
			this.forgetPass()
		},
		methods: {
			leftClick() {
				uni.navigateTo({
					url: '/pages/home/home'
				})
			},
			
			//选择充值方案
			selectRecharge(index){
				this.$play()
				this.active = index
				this.form.money = this.rechargeList[index].price
				this.form.id = this.rechargeList[index].id
			},
			
			//获取用户信息
			getUserInfo(){
				this.request('userInfo').then(res => {
					if(res.code == 200){
						this.money = res.result.userInfo.money
					}
				})
			},
			
			//获取充值方案
			getTopUpScheme(){
				this.request('shopNo').then(res => {
					if(res.code == 200){
						this.rechargeList = res.result
						this.form.money = res.result[0].price;		//默认选中第一个
					}
				})
			},
			
			//充值
			recharge(){
				this.$play()
				let { money , payPass } = this.form
				if(!money){
					return uni.$u.toast(this.$t('page.purse.moneyEmpty'))
				}
				if(money <= 0){
					return uni.$u.toast(this.$t('page.purse.AmountThan0'))
				}
				if(payPass.trim() == ''){
					return uni.$u.toast(this.$t('page.purse.payPassEmpty'))
				}
				this.request('recharge',{},this.form).then(res => {
					if(res.code == 200){
						uni.$u.toast(this.$t('page.purse.success'))
						this.cleanForm()
						this.revealServiceList()
						this.getUserInfo()		//刷新用户信息(更新用户余额)
					}
				})
			},
			
			//用户手动填写充值金额
			moneyChange(e){
				this.active = ''
				let inputValue= e.detail.value;
				this.rechargeList.forEach((recharge,index) => {
					if(parseInt(recharge.price) == inputValue){
						this.active = index
					}
				})
			},
			
			//显示客服列表
			revealServiceList(){
				this.$play()
				this.showService = true;
			},
			
			//关闭客服列表
			closeServiceList(){
				this.showService = false;
			},
			
			//忘记密码(获取客服列表)
			forgetPass(){
				this.request('forgetPass').then(res => {
					if(res.code == 200){
						this.serverList = res.result
					}
				})
			},
			
			//清空表单数据
			cleanForm(){
				this.form = {}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.purse {
		width: 750rpx;
		min-height: 100vh;
		// background-color: black;
		margin: 0 auto;
		// background-image: url('@/static/pruse/bg.png');
		background-size: 100%;
		background-repeat: no-repeat;

		.content {
			width: 96%;
			margin: 0 auto;
		}

		.user-money {
			background: $uni-bg-color-app;
			// background: rgba(176, 199, 59, .8);
			margin: 20rpx auto 30rpx auto;
			border: 4rpx solid #D3EA5E;
			border: 4rpx solid $uni-bg-color-app;
			padding: 60rpx 0rpx;
			font-size: 36rpx;
			color: $uni-bg-color;
			.title,
			.money {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 60rpx;

				.money-unit {
					margin-right: 15rpx;
					font-size: 28rpx;
					font-weight: bold;
				}
				
				.money-detail{
					font-size: 50rpx;
					font-weight: bold;
				}
			}
		}

		.recharge-list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			color: $uni-bg-color-app;

			.recharge-item {
				box-sizing: border-box;
				width: calc(50% - 7rpx);
				border: 1px solid #636363;
				text-align: center;
				margin-bottom: 20rpx;
				
				.money , .unit{
					height: 60rpx;
					line-height: 60rpx;
				}
				
				.money{
					font-size: 44rpx;
				}
				
				.unit{
					font-size: 28rpx;
				}
			}
			
			.selectRecharge{
				color: white;
				// border: 1px solid #D3EA5E;
				background: $uni-bg-color-app;
				// background: rgba(176, 199, 59, .8);
			}
		}
		
		.input{
			margin: 30rpx auto;
			
			input{
				border: 1px solid $uni-bg-color-app;
				height: 80rpx;
				font-size: 34rpx;
				color: $uni-bg-color-app;
				text-indent: 15rpx;
				border-radius: 10rpx;
			}
		}
		
		.btn{
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $uni-bg-color-app;
			border-radius: 10rpx;
			color: $uni-bg-color;
			font-size: 40rpx;
			font-weight: bold;
		}
	}
</style>