NFT/pages/market/duihuan.vue

<template>
	<view class="center">
		<view class="rule-box">
			<view class="rule-title">兑换规则</view>
			<view class="rule-main">
				每{{ list.sp_exchange_origin_cost * 1 }}{{ list.sp_exchange_origin }}+{{ list.sp_exchange_bingo_time }}幸运值可兑换{{ list.sp_exchange_target_get * 1
				}}{{ list.sp_exchange_target }}+{{ list.sp_exchange_bingo_time }}荣誉值
			</view>
		</view>
		<view class="main">
			<view class="main-title flex">
				<view class="shu"></view>
				<view class="main-font">福利兑换</view>
			</view>
			<view class="main-main flex">
				<view class="left flex">
					<view class="top font">
						<span>{{ list.sp_exchange_origin_cost * 1 || 0 }}</span>
						{{ list.sp_exchange_origin }}
					</view>
					<view class="zong font">+</view>
					<view class="bottom font">
						<span>{{ list.sp_exchange_bingo_time || 0 }}</span>
						幸运值
					</view>
				</view>
				<view class="bg">
					<image src="../../static/img/duhuanbg.png" mode=""></image>
				</view>
				<view class="left flex">
					<view class="top font">
						<span>{{ list.sp_exchange_target_get * 1 || 0 }}</span>
						{{ list.sp_exchange_target }}
					</view>
					<view class="zong font">+</view>
					<view class="bottom font">
						<span>{{ list.sp_exchange_bingo_time || 0 }}</span>
						荣誉值
					</view>
				</view>
			</view>
			<view class="sheng">
				当前剩余USDL
				<span>{{ USDL || 0 }}</span>
				幸运值
				<span>{{ lucky || 0 }}</span>
			</view>
			<view class="btn" @click="buy()">确认兑换</view>
		</view>
		<!-- <u-popup v-model="show1" mode="center" width="548rpx" border-radius="14">
			<view class="psw-wrapper">
				<view class="psw-title">请输入支付密码</view>
				<input type="password" v-model="password" class="psw-ipt" />
				<view class="psw-btn">
					<text @click="cancel">取消</text>
					<text class="psw-qd" @click="pswQd">确定</text>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
import { lalaDetial } from '@/api/product.js';
import { wallet } from '@/api/finance.js';
import { spExchange } from '@/api/market.js';
export default {
	data() {
		return {
			id: '',
			list: '',
			lucky: '',
			USDL: '',
			show1: false, //支付密码
			password: ''
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.loadData();
	},
	methods: {
		async loadData() {
			lalaDetial({}, this.id)
				.then(({ data }) => {
					console.log(data);
					this.list = data.data;
					this.lucky = data.luck_point - data.exchange_point;
				})
				.catch(e => {
					console.log(e);
				});
			wallet({}).then(({ data }) => {
				this.USDL = data.back['USDL'].money.money * 1 - data.back['USDL'].money.only_pink *1;
			});
		},
		buy() {
			// this.show1 = true;
			spExchange({}, this.id).then(e => {
				uni.navigateTo({
					url:'/pages/money/paySuccess?type=1' 
				})
			});
		},
		pswQd() {
			spExchange({}, this.id).then(e => {});
		},
		cancel() {
			this.show1 = false;
		}
	}
};
</script>

<style lang="scss">
.rule-box {
	width: 750px;
	padding: 30rpx;
	background: #ffffff;
	.rule-title {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0f253a;
	}
	.rule-main {
		margin-top: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6d7c88;
	}
}
.main {
	margin-top: 15rpx;
	width: 100%;
	background: #fff;
	padding-bottom: 220rpx;
	.main-title {
		padding: 20rpx 0 27rpx 30rpx;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1px #f3f3f3 solid;
		.shu {
			width: 2rpx;
			height: 30rpx;
			background: #44969d;
		}
		.main-font {
			margin-left: 16rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #0f253a;
		}
	}
	.main-main {
		padding: 62rpx;
		.left {
			flex-direction: column;
			align-items: center;
			.font {
				font-size: 42rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				span {
					color: #44969d;
				}
			}
			.zong {
				margin-top: 20rpx;
			}
			.bottom {
				margin-top: 40rpx;
			}
		}
		.bg{
			width: 70rpx;
			height: 70rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.sheng {
		padding: 30rpx 0 0 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6d7c88;
		span {
			color: #44969d;
		}
	}
}
.btn {
	margin: 130rpx auto;
	width: 674rpx;
	height: 88rpx;
	background: linear-gradient(90deg, #60bab0, #60bab0, #45969b);
	border-radius: 44rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
	text-align: center;
	line-height: 88rpx;
}
.psw-wrapper {
	width: 548rpx;
	height: 344rpx;
	background-color: #ffffff;
	.psw-title {
		width: 100%;
		font-size: 35rpx;
		padding: 43rpx 0 49rpx;
		text-align: center;
		font-weight: 800;
	}
	.psw-ipt {
		display: block;
		background-color: #dce3ed;
		height: 90rpx;
		width: 464rpx;
		padding-left: 30rpx;
		margin: 0 auto;
		font-size: 80rpx;
	}
	.psw-btn text {
		display: inline-block;
		text-align: center;
		width: 50%;
		padding-top: 29rpx;
		font-size: 35rpx;
	}
	.psw-qd {
		color: #45969b;
	}
}
</style>