2023-10-19

components/input-password/input-password.vue

@@ -90,6 +90,7 @@
 			border: 2rpx solid $base;
 
 			.list {
+				color: #555555;
 				display: flex;
 				align-items: center;
 				justify-content: center;

pages/user/money/recharge.vue

@@ -1,34 +1,23 @@
 <template>
-	<view class="all">
+	<view class="all padding-c-30 padding-v-30">
 		<view class="top">
 			<view class="topO"> {{$t('userinfo.u4')}} </view>
-			<view class="topT">
+			<view class="topT flex-start padding-t-30">
 				<view class="tt">USDT-TRC20</view>
 			</view>
-			<view class="topS">
+			<view class="topS flex-start">
 				<view class="S">{{$t('userinfo.u1')}}</view>
-				<view
-					class="SS"
-					>{{ address }}</view
-				>
-				<image
-					class="SSS"
-					src="/static/icon/cz.png"
-					mode=""
-					@click="copy(address)">
+				<view class="SS clamp padding-c-10">{{ address }}</view>
+				<image class="SSS" src="/static/icon/cz.png" mode="" @click="copy(address)">
 				</image>
 			</view>
 			<!-- 根据地址生成二维码 -->
-			<view class="topF">
-				<view class="qr">
-					<canvas
-						id="qrcode"
-						canvas-id="qrcode"
-						style="width: 120px; height: 120px"></canvas>
-				</view>
+			<view class="qr flex-center">
+				<uqrcode h5DownloadName='myqrcode' ref="qrcode" canvas-id="qrcode" :value="address" size="240" sizeUnit='rpx'>
+				</uqrcode>
 			</view>
-			
-			<view class="last">
+
+			<view class="last flex">
 				<view class="le" @click="savePic">
 					<view class="lef">{{$t('userinfo.u2')}}</view>
 				</view>
@@ -46,31 +35,19 @@
 </template>
 
 <script>
-	import {qianBao} from "@/api/wallet.js"
-	import UQRCode from "@/components/uqrcodejs/uqrcode.js"; // npm install uqrcodejs
+	import {
+		qianBao
+	} from "@/api/wallet.js"
+	// import UQRCode from "@/components/uqrcodejs/uqrcode.js"; // npm install uqrcodejs
 	export default {
 		data() {
 			return {
 				address: '',
+				qr:''
 			};
 		},
 		mounted() {},
-		onReady() {
-			// 获取uQRCode实例
-			var qr = new UQRCode();
-			// 设置二维码内容
-			qr.data = this.address;
-			// 设置二维码大小，必须与canvas设置的宽高一致
-			qr.size = 120;
-			// 调用制作二维码方法
-			qr.make();
-			// 获取canvas上下文
-			var canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件，this必须传入
-			// 设置uQRCode实例的canvas上下文
-			qr.canvasContext = canvasContext;
-			// 调用绘制方法将二维码图案绘制到canvas上
-			qr.drawCanvas();
-		},
+		onReady() {},
 		onLoad() {
 			uni.setNavigationBarTitle({
 				title: this.$t("tab.a3"),
@@ -81,166 +58,110 @@
 			// 二维码地址
 			async qianBao() {
 				const res = await qianBao()
-				console.log('qian', res);
-				this.address = res.data.back.USDT.address
+				this.address = res.data.back.USDT.address;
 			},
 			// 复制地址
 			copy(value) {
 				uni.setClipboardData({
 					data: value,
-					success: function () {
+					success: function() {
 						//调用方法成功
 						console.log("success");
 					},
 				});
 			},
-			savePic(Url){
-					Url = this.address //图片路径，也可以传值进来
-					var triggerEvent = "touchstart"; //指定下载方式
-				    var blob=new Blob([''], {type:'application/octet-stream'}); //二进制大型对象blob
-				    var url = URL.createObjectURL(blob); //创建一个字符串路径空位
-				    var a = document.createElement('a'); //创建一个 a 标签
-				    a.href = Url;  //把路径赋到a标签的href上
-				    //正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
-				    a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0]; 
-				    
-					var e = new MouseEvent('click', ( true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));  
-					//派遣后，它将不再执行任何操作。执行保存到本地
-				    a.dispatchEvent(e); 
-				    //释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
-				    URL.revokeObjectURL(url);  
-				},
+			savePic(Url) {
+				this.$refs.qrcode.save({});
+			},
 		},
 	};
 </script>
 
 <style lang="scss">
 	.all {
-		width: 750rpx;
-		height: 1416rpx;
-		background-color: $page-color-base;
-	}
-	.top {
-		margin-left: 28rpx;
-		padding-top: 50rpx;
-		width: 690rpx;
-		height: 720rpx;
-		background: #191a1f;
-		border-radius: 20rpx;
-		display: flex;
-		flex-direction: column;
-	}
-	.topO {
-		height: 31rpx;
-		font-size: 32rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
+		line-height: 1;
 		color: #ffffff;
-		line-height: 24rpx;
-		margin-left: 21rpx;
-		margin-top: 37rpx;
-	}
-	.topT {
-		margin-left: 20rpx;
-		margin-top: 30rpx;
-		width: 218rpx;
-		height: 68rpx;
-		border: 2px solid #ddba82;
-		border-radius: 10rpx;
-	}
-	.tt {
-		width: 168rpx;
-		height: 20rpx;
-		font-size: 26rpx;
-		font-weight: bold;
-		color: #feb041;
-		line-height: 24rpx;
-		margin-top: 20rpx;
-		margin-left: 23rpx;
-	}
-	.topS {
-		display: flex;
-		justify-content: start;
-	}
-	.S {
-		height: 31rpx;
-		font-size: 32rpx;
-		font-weight: bold;
-		color: #ffffff;
-		line-height: 24rpx;
-		margin-left: 23rpx;
-		margin-top: 26rpx;
-	}
-	.SS {
-		height: 20rpx;
-		font-size: 26rpx;
-		font-weight: 500;
-		color: #ffffff;
-		line-height: 24rpx;
-		margin-left: 23rpx;
-		margin-top: 26rpx;
-	}
-	.SSS {
-		width: 29rpx;
-		height: 29rpx;
-		margin-left: 23rpx;
-		margin-top: 24rpx;
 	}
 
-	.buttom {
-		margin-left: 30rpx;
-		margin-top: 30rpx;
-		width: 690rpx;
-		// height: 100vh;
+	.top {
+		padding: 40rpx 30rpx;
 		background: #191a1f;
 		border-radius: 20rpx;
+
+		.topO {
+			font-size: $font-lg;
+			font-weight: bold;
+		}
+
+		.topT {
+			.tt {
+				padding: 20rpx 24rpx;
+				border-radius: 10rpx;
+				border: 2px solid #ddba82;
+				font-size: 26rpx;
+				font-weight: bold;
+				color: #feb041;
+			}
+		}
+
+		.topS {
+			padding-top: 30rpx;
+
+			.S {
+				font-size: $font-lg;
+				font-weight: bold;
+				flex-shrink: 0;
+			}
+
+			.SS {
+				font-size: $font-sm;
+				flex-grow: 1;
+			}
+
+			.SSS {
+				flex-shrink: 0;
+				width: 29rpx;
+				height: 29rpx;
+			}
+		}
 	}
-	.but {
-		margin-left: 27rpx;
-		padding-top: 50rpx;
-		padding-bottom: 50rpx;
-		width: 625rpx;
-		// height: 114rpx;
-		font-size: 26rpx;
-		font-weight: 500;
-		color: #ffffff;
-		line-height: 45rpx;
-	}
-	.topF {
-		// flex: 1;
+
+	.qr {
+		margin: 0 auto;
 		margin-top: 34rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-	.qr{
 		width: 275rpx;
 		height: 275rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
 		background-color: #fff;
 	}
-	
+
 	.last {
-		display: flex;
-		justify-content: center;
-	}
-	.le {
-		margin-top: 43rpx;
-		width: 201rpx;
-		height: 59rpx;
-		border: 2px solid #DDBA82;
-		border-radius: 10rpx;
-	}
-	.lef {
-		margin-top: 12rpx;
-		margin-left: 49rpx;
-		height: 25rpx;
-		font-size: 26rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #FEB041;
-		line-height: 24rpx;
+		margin-top: 50rpx;
+		padding: 0 30rpx;
+
+		.le {
+			padding: 20rpx 0;
+			width: 250rpx;
+			border: 2px solid #DDBA82;
+			text-align: center;
+			border-radius: 10rpx;
+
+			.lef {
+				font-size: 26rpx;
+				font-weight: bold;
+				color: #FEB041;
+			}
+		}
 	}
-</style>
+
+	.buttom {
+		background: #191a1f;
+		border-radius: 20rpx;
+		margin-top: 30rpx;
+		padding: 30rpx;
+		.but {
+			font-size: 26rpx;
+			font-weight: 500;
+			line-height: 45rpx;
+		}
+	}
+</style>

pages/user/money/withdrawal.vue

@@ -4,168 +4,242 @@
 			<view class="topO">
 				{{$t('userinfo.u6')}}
 			</view>
-			<view class="topT">
+			<view class="topT flex-start padding-b-30">
 				<view class="TT">USDT-TRC20</view>
 			</view>
-			<view class="topS">
+			<view class="topO">
 				{{$t('userinfo.u7')}}
 			</view>
-			<view class="topF">
-				<input class="FF" type="text" v-model="withdrawal" placeholder="请输入提现地址" placeholder-class="placeholder" />
+			<view class="topF margin-b-30">
+				<input class="FF" type="text" placeholder="请输入提币地址" v-model="address"
+					placeholder-class="placeholder-input" />
+			</view>
+			<view class="topO ">
+				{{$t('userinfo.u8')}} <text class="font-color-gray font-size-sm">(余额：{{userWallet}})</text>
 			</view>
-			<view class="topS">
-				{{$t('userinfo.u8')}}
+			<view class="topF flex margin-b-30">
+				<input class="FF" type="number" v-model="withdrawal" placeholder="请输入提现数量"
+					placeholder-class="placeholder-input" />
+				<view class="btn" @click="withdrawal=userWallet">USDT 全部</view>
 			</view>
-			<view class="topF">
-				<input class="FF" type="text" v-model="withdrawal" placeholder="请输入提现数量" placeholder-class="placeholder" />
-			    <view class="btn">全部</view>
+			<view class="topO ">
+				手续费
+			</view>
+			<view class="topF flex">
+				<text v-if="type==1">{{charge}}</text>
+				<text v-else>{{num}}</text>
 			</view>
 		</view>
-		<view class="center">
+		<view class="center margin-t-30">
 			<view class="tx">{{$t('userinfo.u9')}}</view>
-			<view class="buzhou">
+			<view class="buzhou margin-t-20">
 				<view class="">1.{{$t('userinfo.u10')}} </view>
 				<view class="">① {{$t('userinfo.u11')}}</view>
-				 <view class="">② {{$t('userinfo.u12')}} </view>
-				 <view class="">2.{{$t('userinfo.u13')}}</view>
-				 <view class="">3.{{$t('userinfo.u14')}}</view>
-				 <view class="">4.{{$t('userinfo.u15')}}</view>
+				<view class="">② {{$t('userinfo.u12')}} </view>
+				<view class="">2.{{$t('userinfo.u13')}}</view>
+				<view class="">3.{{$t('userinfo.u14')}}</view>
+				<view class="">4.{{$t('userinfo.u15')}}</view>
 			</view>
 		</view>
-		<view class="last">
-			<view class="la">{{$t('userinfo.u16')}}</view>
+		<view class="last margin-t-30" @click="openPayPassword">
+			<view class="la" :class="{action:loding}">{{$t('userinfo.u16')}}</view>
 		</view>
+		<uni-popup type="bottom" ref="popup">
+			<inputPassword @commit='KeyInfo'></inputPassword>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
+	import {
+		gameWallet
+	} from "@/api/game.js";
+	import {
+		extractCash
+	} from "@/api/wallet.js";
+	import inputPassword from "@/components/input-password/input-password.vue";
 	export default {
+		components: {
+			inputPassword
+		},
 		data() {
 			return {
-				withdrawal: '', //提现地址
+				address: '', //提现地址
+				withdrawal: '', //提现金额
+				userWallet: '',
+				loding: false,
+				password: '',
+				// 手续费信息
+				type: 0,
+				num: 0
 			};
 		},
+		computed: {
+			charge() {
+				return Number( (this.withdrawal*this.num/100).toFixed(8))
+			}
+		},
 		onLoad() {
 			uni.setNavigationBarTitle({
 				title: this.$t("tab.a8"),
 			});
+			this.gameWallet();
+		},
+		methods: {
+			// 支付弹窗
+			openPayPassword() {
+				if (this.userWallet < this.withdrawal) {
+					uni.showToast({
+						title: '余额不足！',
+						icon: 'error'
+					});
+					return
+				};
+				this.$refs.popup.open();
+			},
+			// 关闭支付弹窗
+			colsePayPassword() {
+				this.$refs.popup.close();
+			},
+			// 密码输入完成
+			KeyInfo(val) {
+				this.password = val;
+				this.colsePayPassword();
+				this.submit();
+			},
+			// 获取用户信息
+			gameWallet() {
+				const that = this;
+				gameWallet().then((res) => {
+					that.userWallet = +res.data.back.USDT.money.money;
+					that.type = +res.data.back.USDT.cash_commission_count_type;
+					that.num = +res.data.back.USDT.cash_commission_ratio;
+				})
+			},
+			// 提交
+			submit() {
+				const that = this;
+				uni.showLoading({
+					title: '提交中。。。',
+					mask: true
+				});
+				that.loding = true;
+				extractCash({
+					money: that.withdrawal,
+					money_type: "USDT",
+					address: that.address,
+					trade_password: that.password,
+				}).then((res) => {
+					that.loding = false;
+					uni.hideLoading()
+					uni.showToast({
+						title: '申请提币成功!'
+					});
+					this.address = '';
+					this.withdrawal = ''; //提现金额
+					this.password = '';
+				}).catch((res) => {
+					uni.showToast({
+						title: '申请提币失败!，请联系客服',
+						icon: 'error'
+					});
+					that.loding = false;
+					uni.hideLoading()
+				})
+
+
+			}
 		}
 	}
 </script>
 
-<style lang="scss">
-.all {
-	width: 750rpx;
-	height: 1334rpx;
-}
-.top {
-	width: 690rpx;
-	height: 560rpx;
-	background: #191A1F;
-	border-radius: 20rpx;
-	margin-left: 30rpx;
-}
-.topO {
-	height: 31rpx;
-	font-size: 32rpx;
-	color: #FFFFFF;
-	margin-left: 21rpx;
-	padding-top: 37rpx;
-}
-.topT {
-	width: 222rpx;
-	height: 68rpx;
-	border: 2px solid #DDBA82;
-	border-radius: 10rpx;
-	margin-left: 20rpx;
-	margin-top: 60rpx;
-}
-.TT {
-	width: 168rpx;
-	height: 20rpx;
-	font-size: 26rpx;
-	color: #FEB041;
-	margin-left: 23rpx;
-	margin-top: 20rpx;
-}
-.topS {
-	margin-top: 29rpx;
-	margin-left: 20rpx;
-	height: 31rpx;
-	font-size: 32rpx;
-	color: #FFFFFF;
-}
-.topF {
-	width: 648rpx;
-	height: 73rpx;
-	background-color: #FEB041;
-	opacity: 0.09;
-	border-radius: 20rpx;
-	margin-left: 20rpx;
-	margin-top: 39rpx;
-	.FF {
-		height: 25rpx;
-		font-size: 32rpx;
+<style lang="scss" scoped>
+	.all {
 		color: #FFFFFF;
-		padding: 35rpx;
+		padding: 0 30rpx;
+		line-height: 1;
+		padding-bottom: 150rpx;
 	}
-	.btn {
-		font-size: 30rpx;
-		color: #FFFFFF;
+
+	.placeholder-input {
+		color: $font-color-light;
+	}
+
+	.top {
+		background: #191A1F;
+		border-radius: 20rpx;
+		padding: 40rpx 30rpx;
+
+		.topO {
+			font-size: $font-lg;
+			padding-bottom: 30rpx;
+		}
+
+		.topT {
+			.TT {
+				border: 2px solid #DDBA82;
+				border-radius: 10rpx;
+				font-size: 26rpx;
+				color: #FEB041;
+				padding: 20rpx 24rpx;
+			}
+
+		}
+
+		.topF {
+			background-color: rgba(254, 176, 65, 0.09);
+			border-radius: 20rpx;
+			padding: 20rpx 30rpx;
+
+			.FF {
+				font-size: $font-base;
+				flex-grow: 1;
+			}
+
+			.btn {
+				font-size: $font-base;
+			}
+		}
+	}
+
+	.center {
+		background: #191A1F;
+		border-radius: 20rpx;
+		font-weight: 500;
+		padding: 30rpx;
+
+		.tx {
+			font-size: 29rpx;
+			line-height: 30rpx;
+		}
+
+		.buzhou {
+			font-size: 24rpx;
+			color: #999999;
+			line-height: 40rpx;
+		}
+	}
+
+
+	.last {
+		background: #feb041;
+		border-radius: 10rpx;
+		overflow: hidden;
+		position: fixed;
+		bottom: 30rpx;
+		left: 30rpx;
+		right:30rpx;
+		.la {
+			font-size: $font-lg;
+			font-weight: bold;
+			color: #040404;
+			text-align: center;
+			padding: 30rpx;
+
+			&.action {
+				color: #FFF;
+				background-color: $font-color-light;
+			}
+		}
 	}
-}
-
-
-
-
-.center {
-	width: 690rpx;
-	// height: 460rpx;
-	background: #191A1F;
-	border-radius: 20rpx;
-	margin-top: 20rpx;
-	margin-left: 30rpx;
-	padding-bottom: 12rpx;
-} 
-.tx {
-	height: 27rpx;
-	font-size: 29rpx;
-	font-family: PingFang SC;
-	font-weight: 500;
-	color: #FFFFFF;
-	line-height: 30rpx;
-	margin-left: 34rpx;
-	padding-top: 36rpx;
-}
-.buzhou {
-	width: 624rpx;
-	// height: 280rpx;
-	font-size: 24rpx;
-	font-family: PingFang SC;
-	font-weight: 500;
-	color: #999999;
-	line-height: 41rpx;
-	margin-left: 33rpx;
-	margin-top: 50rpx;
-}
-
-.last {
-	width: 690rpx;
-	height: 90rpx;
-	background: #feb041;
-	border-radius: 10rpx;
-	margin-left: 30rpx;
-	margin-top: 30rpx;
-}
-.la {
-	// width: 126rpx;
-	height: 31rpx;
-	font-size: 32rpx;
-	font-family: PingFang SC;
-	font-weight: bold;
-	color: #040404;
-	line-height: 55rpx;
-	margin-left: 282rpx;
-	padding-top: 20rpx;
-}
-</style>
+</style>