<template>
	<view class="redeem pos">
		<view v-if="ismask" class="mask flex_center flex_items"
			style="width: 100%;height: 100vh;position: fixed;z-index: 1;background: rgba(0,0,0,.6);">
			<view class="flex_column flex_items bgwhite"
				style="padding:50rpx;border-radius: 16rpx;width: calc(100% - 200rpx);">
				<image class="" :src="imgUrl+'dcg.png'" style="width: 120rpx;height: 120rpx;" mode=""></image>
				<text class="f40 mt50" style="color: #333;">领取成功</text>
				<text class="f28 mt30" style="color: #808080;">恭喜，奖品已经成功兑换，请到平台查看。</text>
				<view class="flex_items flex_center mt50">
					<view @click="gomy" class="f32 f-center"
						style="width: 280rpx;height: 80rpx;line-height: 80rpx;background: linear-gradient(270deg, #FF9843 0%, #F43139 100%);border-radius: 54rpx;color: #fff;">
						确认
					</view>
				</view>
			</view>
		</view>
		<view class="flex_items flex_center" style="width: 100%;">
			<view class="bgwhite pb30 plr20 pt20 mt35" style="width: calc(100% - 100rpx);border-radius: 20rpx;">
				<view class="flex_between flex_items pb20 bbe9s">
					<view class="flex_start flex_items">
						<image :src="info.prize_data.main_image"
							style="width: 104rpx;height: 104rpx;border-radius: 12rpx;" mode=""></image>
						<view class="flex_column f30 ml30" style="color:#333">
							<text class="bold">{{info.prize}}</text>
							<view class="f24 mt15" style="color: #666;">{{info.goodsExchangeRecord.receive_expire_time}}
							</view>
						</view>
					</view>
					<view class="flex_start flex_items mr20" style="color: #EB5E42;">
						<view class="f24">￥</view>
						<text class="f48 bolder one">{{info.prize_data.price}}</text>
					</view>
				</view>
				<view class="pt20 f22" style="color: #666;">{{info.prize_data.price}}元积分兑换券，积分已经充值到用户</view>
			</view>
		</view>
		<view class="flex_items flex_center" style="width: 100%;">
			<view class="bgwhite pb30 plr20 pt20 mt35 flex_column"
				style="width: calc(100% - 100rpx);border-radius: 20rpx;">
				<text class="f30 mt30 bold" style="color: #333;">待充账号</text>
				<u--input class="mt30" fontSize="14" placeholder="请输入手机号" border="surround" v-model="form.phone">
				</u--input>
				<text class="f26 mt40" style="color:#4D4D4D;">温馨提示</text>
				<view class="mt20 f24" style="color:#4D4D4D;">
					<view>1.此商品兑换后不支持七天无理由退换货，请谨慎兑换。</view>
					<view class="mt20">2.刷信誉、兼职等理由均为诈骗术，请勿相信任何诱导行为。</view>
				</view>
			</view>
		</view>
		<view class="flex_items flex_center abs" style="width: 100%;bottom:60rpx;left: 0;">
			<view @click="dui" class="f-center f32"
				style="width: 638rpx;height: 108rpx;line-height: 108rpx;background: linear-gradient(270deg, #FF9843 0%, #F43139 100%);border-radius: 54rpx;color: #fff;">
				立即兑换
			</view>
		</view>
		<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phone: uni.getStorageSync('phone')
				},
				info: {},
				ismask: false
			}
		},
		onLoad(options) {
			this.info = JSON.parse(options.item)
		},
		methods: {
			dui() {
				uni.showLoading({
					title: '兑换中...',
				})
				let that = this
				that.api.getdui({
					joinId: this.info.id,
					phone: this.form.phone
				}).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						that.ismask = true
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			gomy(){
				uni.switchTab({
					url:"/pages/my/index"
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f5f5f5 !important;
	}

	.redeem {
		height: 100vh;
	}
</style>
