From 7e657d31df9458f1cb36196117799b8b538f966a Mon Sep 17 00:00:00 2001
From: longjieli <1060695654@qq.com>
Date: Sat, 24 Aug 2024 17:55:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=85=85=E5=80=BC=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/purse/purse.vue | 266 ++++++++++++++++++--------------------------------
 1 file changed, 97 insertions(+), 169 deletions(-)

diff --git a/pages/purse/purse.vue b/pages/purse/purse.vue
index 197857d..6191a59 100644
--- a/pages/purse/purse.vue
+++ b/pages/purse/purse.vue
@@ -1,42 +1,31 @@
 <!-- 充值界面 -->
 <template>
 	<view class="purse bx">
-		<navbar :leftClick="leftClick" :title="$t('page.purse.recharge')"></navbar>
+		<!-- <navbar :leftClick="leftClick" :title="$t('page.purse.recharge')"></navbar> -->
 
 		<!-- 用户余额信息 -->
 		<view class="user-money content">
-			<view class="title">{{ $t('page.purse.account') }}</view>
+			<view class="title">Balance</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 v-model="form.no" class="input content" type="text" disabled :placeholder="$t('page.purse.orderId')" />
+		<view class="purse-input content">
+			<view class="title">Recharge address</view>
+			<view class="text">TMzqKBCtFdjzCk293hLS4MgMJbppxUEhp8</view>
+			<view @click="copy('TMzqKBCtFdjzCk293hLS4MgMJbppxUEhp8')" class="btn">copy</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">
-			<view class="address-info" style="margin-top: 20rpx;">
-				{{ userInfo.moneyAddress }}
-			</view>
-			<view @click="copy(userInfo.moneyAddress)" class="btn content">{{ $t('page.purse.copyAddress') }}</view>
+		
+		<view class="purse-input content">
+			<view class="title">Recharge amount</view>
+			<input type="text" placeholder="Please enter recharge amout" />
 		</view>
 		
-		<view class="input content" style="display: flex;">
-			
-			<image :src="form.image" 
+		<view class="purse-input content">
+			<view class="title">Upload payment screenshot</view>
+			<image :src="form.image"
 			v-if="form.image" mode=""
 			@click="uploadImage"></image>
 			
@@ -47,10 +36,23 @@
 		</view>
 		
 		<!-- 按钮 -->
-		<view @click="recharge" class="btn content">{{ $t('page.purse.deposit-now') }}</view>
+		<view class="submit-btn content">I have completed the recharge</view>
+		
+		<view class="steps content">
+			<view class="steps-title">The steps</view>
+			<view class="steps-content">
+				<view>1. Please copy the TRC-20 wallet address for payment in this mall.</view>
+				<view>2. Make the transfer after verification. If I make a mistake, this mall will not bear your loss.</view>
+				<view>3. When your payment is successful, please upload the payment voucher.</view>
+				<view>4. When you are done with this, click: I have completed the payment.</view>
+				<view>5. When you encounter any problems, be sure to contact our online customer service in time to help you solve them.</view>
+			</view>
+		</view>
 		
 		<!-- 客服列表 -->
 		<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>
+		
+		<sTabbar select="100" />
 
 	</view>
 </template>
@@ -58,46 +60,43 @@
 <script>
 	import navbar from '@/components/base/m-navbar.vue'
 	import serviceList from '@/components/serviceList/serviceList.vue';
+	import sTabbar from '@/components/base/tabBar.vue'
 	
 	export default {
 		components: {
 			navbar,
-			serviceList
+			serviceList,
+			sTabbar
 		},
 		data() {
 			return {
-				rechargeList : [],
 				active : 0,
 				money : '',
 				form : {
-					money : '',
 					id : '',
-					no : Date.now(),
 					image : '',
 					address : ''
 				},
 				serverList : [],
-				showService : false,
-				userInfo: {}
+				showService : false
 			}
 		},
 		onShow() {
 			this.getUserInfo()
-			this.getTopUpScheme()
 			this.forgetPass()
 		},
 		methods: {
-			leftClick() {
-				if(this.$route.query.type){
-					return uni.navigateTo({
-						url: '/pages/home/home'
-					})
-				}else{
-					uni.navigateTo({
-						url: '/pages/center/center'
-					})
-				}
-			},
+			// leftClick() {
+			// 	if(this.$route.query.type){
+			// 		return uni.navigateTo({
+			// 			url: '/pages/home/home'
+			// 		})
+			// 	}else{
+			// 		uni.navigateTo({
+			// 			url: '/pages/center/center'
+			// 		})
+			// 	}
+			// },
 			
 			uploadImage(){
 				let self = this
@@ -108,14 +107,6 @@
 				})
 			},
 			
-			//选择充值方案
-			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 => {
@@ -126,36 +117,9 @@
 				})
 			},
 			
-			//获取充值方案
-			getTopUpScheme(){
-				this.request('shopNo').then(res => {
-					if(res.code == 200){
-						this.rechargeList = res.result
-						this.form.money = res.result[0].price;		//默认选中第一个
-					}
-				})
-			},
-			
 			//充值
 			recharge(){
 				this.$play()
-				this.form.address = this.userInfo.moneyAddress
-				let { money  , no , address , image } = this.form
-				if(!no){
-					return uni.$u.toast(this.$t('page.purse.orderNumberEmpty'))
-				}
-				if(!money){
-					return uni.$u.toast(this.$t('page.purse.moneyEmpty'))
-				}
-				if(money <= 0){
-					return uni.$u.toast(this.$t('page.purse.AmountThan0'))
-				}
-				if(address.trim() == ''){
-					return uni.$u.toast(this.$t('page.purse.addressEmpty'))
-				}
-				if(image.trim() == ''){
-					return uni.$u.toast(this.$t('page.purse.imgEmpty'))
-				}
 				this.request('recharge2',{},this.form).then(res => {
 					if(res.code == 200){
 						uni.$u.toast(this.$t('page.purse.success'))
@@ -166,17 +130,6 @@
 				})
 			},
 			
-			//用户手动填写充值金额
-			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()
@@ -200,11 +153,7 @@
 			//清空表单数据
 			cleanForm(){
 				this.form = {
-					money : '100',
-					id : '',
-					no : Date.now(),
-					image : '',
-					address : ''
+					
 				}
 			},
 			
@@ -232,11 +181,10 @@
 	.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;
+		background: #f6f6f6;
 
 		.content {
 			width: 96%;
@@ -245,86 +193,64 @@
 
 		.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;
+			border-top-right-radius: 60rpx;
+			
 			.title,
 			.money {
 				display: flex;
-				justify-content: center;
-				align-items: center;
+				align-items: flex-end;
 				height: 60rpx;
-
+				font-size: 28rpx;
+				color: hsla(0, 0%, 100%, .8);
+				box-sizing: border-box;
+				padding-left: 30rpx;
+				
 				.money-unit {
 					margin-right: 15rpx;
 					font-size: 28rpx;
 					font-weight: bold;
+					color: white;
 				}
 				
 				.money-detail{
 					font-size: 50rpx;
 					font-weight: bold;
+					color: white;
 				}
 			}
 		}
-
-		.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;
-				}
+		
+		.purse-input{
+			background: white;
+			border-radius: 20rpx;
+			padding: 30rpx;
+			margin-bottom: 15rpx;
+			box-sizing: border-box;
+			
+			.title{
+				padding-bottom: 30rpx;
 			}
 			
-			.selectRecharge{
+			.text{}
+			
+			.btn{
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				background: black;
 				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;
+				height: 60rpx;
+				border-radius: 100rpx;
+				font-size: 30rpx;
+				margin-top: 30rpx;
 			}
 			
-			image{
-				width: 150rpx;
-				height: 150rpx;
-				border-radius: 10rpx;
-				margin-left: 10rpx;
-				border: 1px solid #333;
-			}
 			.image{
 				width: 150rpx;
 				height: 150rpx;
@@ -335,31 +261,33 @@
 				align-items: center;
 				margin-left: 10rpx;
 			}
-			
-			.address-info{
-				display: flex;
-				align-items: center;
-				box-sizing: border-box;
-				padding-left: 20rpx;
-				height: 80rpx;
-				border-radius: 10rpx;
-				background: #e9ecef;
-				font-size: 34rpx;
-				width: 96%;
-				margin: 0rpx auto 20rpx auto;
-			}
 		}
 		
-		.btn{
-			height: 90rpx;
+		.submit-btn{
+			background: rgb(0, 208, 234);
+			height: 80rpx;
+			border-radius: 20rpx;
 			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;
+			color: white;
+			font-size: 30rpx;
+		}
+		
+		.steps {
+			width: 90%;
+			margin: 0rpx auto;
+			padding-top: 30rpx;
+		
+			.steps-title {
+				font-size: 30rpx;
+			}
+		
+			.steps-content {
+				color: #8e8e98;
+				font-size: 30rpx;
+				margin-top: 20rpx;
+			}
 		}
 	}
 </style>
\ No newline at end of file