PKR/pages/myPledge/zyXingqing.vue

<template>
	<view class="all">
		<view class="shang padding-v-30 padding-c-30 position-relative">
			<image class="img" src="../../static/img/xq6.png" mode="scaleToFill"></image>
			<view class="tz padding-b-30">{{base.name}}</view>
			<view class="sy flex-start padding-b-10">
				<view class="syl">{{$t('zy.m0')}}：{{base.day_get}}%</view>
			</view>
			<view class="sj flex margin-t-30 position-relative">
				<view class="sj1">
					<view class="sz">{{base.single_time_max*1}}</view>
					<view class="wz">{{$t('zy.m1')}}</view>
				</view>
				<view class="sj1">
					<view class="sz">{{base.single_time_max*1}}</view>
					<view class="wz">{{$t('zy.m3')}}</view>
				</view>
				<view class="sj1">
					<view class="sz">{{base.day}}</view>
					<view class="wz">{{$t('zy.m2')}}</view>
				</view>
				<view class="sj1">
					<view class="sz">{{base.single_time_min*1}}</view>
					<view class="wz">{{$t('zy.m4')}}</view>
				</view>
			</view>
		</view>

		<view class="sygc margin-t-20 padding-v-30 padding-c-30">
			<view class="gc padding-b-30">{{$t('zy.m5')}}</view>
			<view class="an flex padding-c-30">
				<view class="an1"></view>
				<view class="xian"></view>
				<view class="an1"></view>
				<view class="xian"></view>
				<view class="an1"></view>
			</view>
			<view class="wenben padding-t-30 flex padding-c-30">
				<view class="wb">
					<view class="wen">{{$t('zy.m6')}}</view>
					<view class="wen padding-t-10">{{$t('zy.m7')}}</view>
				</view>
				<view class="wb">
					<view class="wen text-center">{{$t('zy.m8')}}</view>
					<view class="wen padding-t-10 text-center">{{$t('zy.m9')}}</view>
				</view>
				<view class="wb">
					<view class="wen text-right">{{$t('zy.m10')}}</view>
					<view class="wen padding-t-10 text-right">{{$t('zy.m11')}}</view>
				</view>
			</view>
			<view class="icon-box padding-t-30">
				<view class="icon flex-start">
					<image class="ic" src="../../static/img/xq1.png" mode=""></image>
					<view class="jiaru">{{$t('zy.m12')}}</view>
				</view>

				<view class="icon flex-start">
					<image class="ic" src="../../static/img/xq4.png" mode=""></image>
					<view class="jiaru">{{$t('zy.m13')}}</view>
				</view>

				<view class="icon flex-start">
					<image class="ic" src="../../static/img/xq3.png" mode=""></image>
					<view class="jiaru">
						{{$t('zy.m14')}}：{{base.single_time_max*1}}*{{base.day_get}}%*{{base.day}}
					</view>
				</view>

				<view class="icon flex-start">
					<image class="ic" src="../../static/img/xq2.png" mode=""></image>
					<view class="jiaru">{{$t('zy.m15')}}：{{allMoney}}</view>
				</view>
			</view>
		</view>
		<view class="yue flex margin-t-20">
			<view class="flex">
				<image class="qianbao" src="../../static/img/xq5.png" mode=""></image>
				<view class="ye padding-l-20">{{$t('zy.m17')}}</view>
			</view>
			<view class="flex">
				<view class="dangqian">{{$t('zy.m18')}}：</view>
				<view class="dqs">{{userWallet}} USDT</view>
			</view>
		</view>
		<view class="aaa"></view>

		<view class="liji">
			<view class="jr" @click="joinNumOpen">
				<view class="jia">{{$t('zy.m19')}}</view>
			</view>
		</view>
		<uni-popup type="bottom" ref="popup">
			<inputPassword @commit='KeyInfo' @colse='colsePayPassword'></inputPassword>
		</uni-popup>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" :title="$t('zy.b1')" :value="num" :placeholder="$t('zy.b2')"
				@confirm="joinNum" :confirmText="$t('zy.b3')" :cancelText="$t('zy.b4')"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		lockDetail,
		lockJoin
	} from "@/api/mypledge.js"
	import {
		gameWallet
	} from "@/api/game.js";
	import inputPassword from "@/components/input-password/input-password.vue";
	export default {
		components: {
			inputPassword
		},
		data() {
			return {
				id: '',
				base: {},
				userWallet: '',
				allMoney: '',
				// 保存支付密码
				password: '',
				//购买的数量
				num: '',
			};
		},
		
		onLoad(option) {
			this.id = option.id;
			uni.setNavigationBarTitle({
				title: this.$t("tab.b5"),
			});
			// 加载数据
			this.lockDetail();
			this.gameWallet();
		},
		methods: {
			// 关闭支付弹窗
			colsePayPassword() {
				this.$refs.popup.close();
			},
			KeyInfo(val) {
				this.password = val;
				this.colsePayPassword();
				this.joinLock();
			},
			// 打开输入弹窗
			joinNumOpen() {
				this.$refs.inputDialog.open();
			},
			// 输入的金额
			joinNum(e) {
				if (isNaN(Number(e))) {
					uni.showToast({
						title: this.$t("zy.b5"),
						icon: "error"
					})
					return
				}
				this.num = e;
				this.$refs.popup.open();
				console.log(e, '233');
			},
			// 购买质押
			joinLock() {
				const that = this;
				const data = {
					id: that.id,
					number: that.num,
					trade_password: that.password
				}
				// 初始化数量
				that.num = '';
				lockJoin(data).then(
					(res) => {
						uni.showToast({
							title: this.$t("zy.b6"),
						})
						that.gameWallet();
					}
				).then((err) => {
					console.log(err);
				})
			},
			gameWallet() {
				gameWallet().then((res) => {

					this.userWallet = +res.data.back.USDT.money.money
				})
			},
			lockDetail() {
				const that = this;
				lockDetail({
					id: that.id
				}).then(
					(res) => {
						that.base = res.data.data;
						that.allMoney = that.base.single_time_max * (that.base.day_get * 1) * that.base.day /
							100;
						that.allMoney = that.allMoney+' PKR';
					}
				).catch(
					(res) => {
						console.log(res);
					}
				)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #191a1f;
		// background-color: #000000;
	}

	.all {
		line-height: 1;
		padding-bottom: 190rpx;
	}

	.shang {
		font-weight: 800;
		background-color: $page-color-base;

		.tz {
			font-size: 33rpx;
			color: #FFFFFF;
		}

		.sy {
			.syl {
				background: #FEB041;
				border-radius: 10rpx;
				font-size: 21rpx;
				color: #000000;
				padding: 10rpx;
			}
		}

		.sj {
			font-weight: 800;
			text-align: center;

			.sj1 {
				width: 25%;

				.sz {
					font-size: 40rpx;
					color: #FFFFFF;
				}

				.wz {
					margin-top: 20rpx;
					font-size: 22rpx;
					color: #999999;
					padding-bottom: 20rpx;
				}
			}
		}

		.img {
			position: absolute;
			width: 325rpx;
			height: 285rpx;
			top: 0rpx;
			right: 40rpx;
		}
	}

	.sygc {
		background-color: $page-color-base;

		.gc {
			font-size: 28rpx;
			font-weight: 800;
			color: #FFFFFF;
		}

		.an {
			.an1 {
				width: 24rpx;
				height: 24rpx;
				border: 4px solid #FEB041;
				border-radius: 12rpx;
			}

			.xian {
				flex-grow: 1;
				height: 1rpx;
				background: #fff;
			}
		}
	}

	.wenben {
		background-color: $page-color-base;

		.wb {
			width: 33.3%;

			.wen {
				font-size: 22rpx;
				font-weight: 500;
				color: #999999;
			}
		}
	}

	.icon-box {
		background-color: $page-color-base;

		.icon:nth-child(2n-1) {
			background: #161616;
		}

		.icon {
			margin: 0 30rpx;
			border-radius: 10rpx;
			padding: 20rpx;

			.ic {
				width: 38rpx;
				height: 36rpx;

			}

			.jiaru {
				padding-left: 20rpx;
				height: 23rpx;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}

	.jine {
		background-color: $page-color-base;
		font-weight: 800;
		padding: 30rpx;

		.je {
			font-size: 28rpx;
			color: #999999;
		}

		.jes {
			font-size: 74rpx;
			color: #FEB041;
		}
	}



	.yue {
		background-color: $page-color-base;
		width: 750rpx;
		color: #FFFFFF;
		font-size: 29rpx;
		padding: 30rpx;

		.qianbao {
			width: 80rpx;
			height: 64rpx;
		}

		.ye {}

		.dangqian {}

		.dqs {
			color: #FEB041;
		}
	}

	.liji {
		padding: 40rpx 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: $page-color-base;
		.jr {
			background: linear-gradient(90deg, #feb041 0%, #feb041 100%);
			border-radius: 10rpx;
			padding: 30rpx;
			text-align: center;
		}

		.jia {
			font-size: 32rpx;
			font-weight: bold;
			color: #040404;
		}
	}
</style>