mp-ui-user/src/packageOperate/exchange/index.vue

<template>
	<view>
		<!-- #ifdef MP-ALIPAY -->
		<u-navbar title="兑换码" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff"  leftIconSize="0" />
		<!-- #endif -->
		<!-- #ifndef MP-ALIPAY -->
		<u-navbar title="兑换码" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
		<!-- #endif -->
		
		<view class="wrap">
			<view class="wrap-code">
				<view class="wrap-code-input">
					<u-input :placeholder="placeholder" v-model="code" border="none" maxlength="16" placeholderStyle="color:#333" inputAlign="center" @focus="setPlaceholder" @blur = "setPlaceholder2"/>
				</view>
				<view class="wrap-code-text">
					兑换规则说明：<br>
					1、输入兑换码即可兑换相应奖品。<br>
					2、兑换码有效期有限制，超期失效。<br>
					3、兑换码不找零、不兑现，使用支配权归用户所有，可自用也可转赠他人
				</view>
			</view>
			<button @click="submit" type="button">提交兑换</button>
		</view>

		<u-overlay :show="exchangeShow" mask-click-able="false" >
			<view class="rect">
				<view class="rect-popup">
					<view class="rect-popup-top">
						<view class="image1">
							<image src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/activityPrizeBackGround.png" mode="aspectFit"></image>
						</view>
						<view class="text">～恭喜您得到奖品～</view>
						<view class="title">{{ info.type == 'coin' ? (info.goodsName + ' x' + info.value): info.goodsName }}</view>
						<view class="image2">
							<image :src="info.picUrl" mode="aspectFit"></image>
						</view>
						<view class="btn" v-if="info.type != 'coin'">
							<button @click="toPrize(info.type)">去查看我的奖品</button>
						</view>
						<view class="btn" v-if="info.type == 'coin'">
							<button @click="toPrize(info.type)">去商城兑换商品</button>
						</view>
						<view class="tip">温馨提示：实物商品需前往提货才可提交订单</view>
					</view>
					<view class="rect-popup-bottom" @click="close">
						<u-icon name="close" size="24"></u-icon>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	export default {
		data() {
			return {
				code: '',
				info: {},
				placeholder: '请输入兑换码',
				loading: false,
				exchangeShow: false,
			}
		},

		methods: {
			setPlaceholder() {
				if(this.code == '' &&  this.placeholder ==  '请输入兑换码'){
					this.placeholder = ''
				}
			},
			setPlaceholder2() {
				if(this.code == '' &&  this.placeholder ==  ''){
					this.placeholder = '请输入兑换码'
				}
			},
			submit() {
				if(this.loading) return
				this.loading = true
				
				let _this = this
				if(_this.code == '') {
					_this.loading = false
					uni.$u.toast('请输入兑换码');
					return
				}
				if(_this.code.length != 16) {
					_this.loading = false
					uni.$u.toast('兑换码错误');
					return
				}
				const rule = /^[a-zA-Z0-9]+$/
				if (!rule.test(_this.code)) {
					_this.loading = false
					uni.$u.toast('兑换码错误');
					return
				}
				let data = {
					cdKey: _this.code
				}
				$http.post('/api/v1/mp/user/mine/cdKey/exchange', data).then(res => {
					if (res.code == 0) {
						res.data.picUrl = env.filePublic + res.data.picUrl.split(',')[0] + '?imageView2/2/w/170'
						_this.info = res.data
						_this.exchangeShow = true
						_this.loading = false
					}else {
						_this.loading = false
					}
				})
			},
			
			toPrize(data) {
				if (data == 'goods') {
					uni.redirectTo({
						url: '/packagePrize/prize/index'
					})
				}
				if (data == 'coupon') {
					uni.redirectTo({
						url: '/packagePrize/prize/index?coupon=1'
					})
				}
				if (data == 'coupon_pkg') {
					uni.redirectTo({
						url: '/packagePrize/prize/index?coupon=1'
					})
				}
				if (data == 'coin') {
					uni.switchTab({
						url: '/pages/core/index'
					})
				}
			},
			
			close() {
				this.exchangeShow = false
			}
		},
	}
</script>
<style lang="scss" scoped>
.wrap {
	padding: 30rpx;
	&-code {
		background-color: #fff;
		padding: 40rpx;
		margin-bottom: 80rpx;
		&-input {
			margin-top: 28rpx;
			margin-bottom: 50rpx;
			height: 88rpx;
			border: 1px solid $uni-bg-color;
			background-color: rgba(142,81,247,0.12);
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			flex: 1;
		}
		&-text {
			font-size: 24rpx;
			color: #666666;
			line-height: 56rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
		}
	}
	
	button {
		margin: 0 auto;
		width: 666rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: $uni-bg-color;
		border-radius: 6rpx;
		color: #fff;
	}
}

.rect {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	&-popup {
		width: 85vw;
		text-align: center;
		&-top {
			background: linear-gradient(125deg, #FFF9F5 0%, #F8DFEF 44%, #C1BDFF 100%);
			margin-bottom: 80rpx;
			padding: 0 80rpx 40rpx;
			.image1 {
				display: inline-block;
				width: 374rpx;
				height: 148rpx;
				margin-top: -74rpx;
				image {
					width: 374rpx;
					height: 148rpx;
				}
			}
			.text {
				margin-top: 20rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: $uni-text-color;
				line-height: 36rpx;
			}
			.title {
				margin: 8rpx 0 15rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 50rpx;
			}
			.image2 {
				margin: 0 auto;
				width: 218rpx;
				height: 218rpx;
				image {
					width: 218rpx;
					height: 218rpx;
				}
			}
			.btn {
				margin: 40rpx 0 12rpx;
				button {
					height: 68rpx;
					line-height: 68rpx;
					background: $uni-bg-color;
					border-radius: 50rpx;
					color: #fff;
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
				}
			}
			
			.tip {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 50rpx;
			}
		}
		&-bottom {
			width: 80rpx;
			height: 80rpx;
			background: rgba(255,255,255,0.5);
			margin: 0 auto;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>