alipay-emulator/components/exchange/exchange.vue

<template>
	<view>
		<view class="right-btn" @click="open">
			<image src="/static/image/recharge/rightBtnImg.png" mode=""></image>
		</view>
		<view class="maskExchange" v-if="isMaskExchange">
			<view class="box">
				<view class="info" v-if="!isExchange">
					<view :style="styles">
						<uni-easyinput :styles="styles" v-model="code" placeholder="请输入兑换码" :inputBorder="false"
							placeholderStyle="text-align: center;"></uni-easyinput>
					</view>
					<view class="btn" :class="{'noValue':code==''}" @click="getExchange">
						兑换
					</view>
				</view>
				<view class="info" v-else>
					<view class="title">
						{{couponVip.exchange_name}}
					</view>
					<view class="title">
						{{couponVip.exchange_value}}
					</view>
					<view class="time">
						截至日期：{{couponVip.expire_time}}
					</view>
					<view class="btn btn2" @click="submit">
						兑换
					</view>
				</view>
			</view>
			<view class="close" @click="close">
				<image src="/static/image/recharge/closeE.png" mode=""></image>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		postJson
	} from "@/utils/requests.js"
	export default {
		name: "exchange",
		data() {
			return {
				code: "",
				isMaskExchange: false,
				isExchange: false,
				couponVip: {

				},
				styles: {
					backgroundColor: '#FFFCEC',
					padding: '10px ',
					'border-radius': '10px'
				}
			};
		},
		methods: {
			open() {
				this.isMaskExchange = true
				this.isExchange = false
				this.code = ''
			},
			close() {
				this.isMaskExchange = false
				this.code = ''
			},
			async getExchange() {
				if (this.code == '') {
					return
				}
				let couponVip = await this.$requestPromise({
					url: 'api/activity/exchange',
					method: "GET",
					data: {
						code: this.code
					}
				})
				console.log(couponVip)
				if (couponVip.code != 0) {
					uni.showToast({
						icon: "none",
						title: "兑换码有误"
					})
					return
				}
				this.isExchange = true
				this.couponVip = couponVip.data
			},
			async submit() {
				let exchangeRes = await postJson('q', 'api/activity/exchange', {
					code: this.code
				})
				if (exchangeRes.code != 0) {
					uni.showToast({
						icon: "none",
						title: "券已使用过了"
					})
					return
				} else {
					uni.showToast({
						icon: "none",
						title: "兑换成功"
					})
					//获取app用户信息
					let user = await proxy.$requestPromise({
						url: 'api/user',
						method: "GET",
						data: {}
					})
					if (user.code == 0) {
						data.appUser = user.data
						console.log("app用户信息", data.appUser);
					}
					this.isMaskExchange = false
					this.isExchange = false
					uni.navigateBack({
						delta: 1
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.maskExchange {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		z-index: 999;
		background-color: rgba(0, 0, 0, .5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.box {
			background-image: url('/static/image/recharge/exchange.png');
			background-size: 307px 120px;
			background-repeat: no-repeat;
			width: 307px;
			padding: 120px 0 20px 0;

			.info {
				padding: 16px;
				background-color: #fff;
				border-radius: 0 0 26px 26px;

				input {
					background: #FFFCEC;
					border-radius: 11px 11px 11px 11px;
					padding: 18px 0;
					text-align: center;
				}

				.title {
					font-size: 20px;
					color: #1a1a1a;
					text-align: center;
					margin-bottom: 24px;
				}

				.time {
					font-size: 16px;
					color: #AAAAAA;
					text-align: center;
				}
			}

			.btn {
				color: #fff;
				margin-top: 32px;
				font-size: 18px;
				padding: 16px 0;
				color: #FFFFFF;
				background: linear-gradient(360deg, #4B3F30 0%, #181713 56.43%, #504834 100%), #D8D8D8;
				border-radius: 60px;
				text-align: center;
			}

			.btn2 {
				margin-top: 12px;
			}

			.noValue {
				opacity: 0.5;
			}
		}

		.close {
			margin-top: 16px;
			width: 34px;
			height: 34px;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.right-btn {
		position: fixed;
		top: 100rpx;
		right: 36rpx;
		z-index: 1;
		width: 54px;
		height: 26px;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>