<template>
	<view class="voucher">
		<view class="user flexCC">
			<image :src="userInfo.avatar"></image>
			<view>{{ userInfo.nickname }}</view>
		</view>
		<view class="voucher_con">
			<view class="line"></view>
			<view class="title">第{{ userInfo.season }}届大卫博士创业{{ userInfo.season_type | activityType }}营</view>
			<view class="voucher_icon">
				<view v-if="signInfo.status == 0">
					<image :src="signInfo.code_img"></image>
					<view>该二维码可用于签到确认</view>
					<view style="font-size:24rpx;color:#666;margin-top:20rpx;">（若二维码校验无法通过，可使用验证码进行校验）</view>
					<view style="font-size:48rpx;color:#EA4A41;margin:30rpx 0;">{{ signInfo.code }}</view>
					<view class="btn flexC">未签到</view>
				</view>
				<view v-if="signInfo.status == 1">
					<image src="../../static/imgs/sign_up_voucher.png" class="status"></image>
					<view>二维码已签到成功</view>
					<view>({{ signInfo.updated_at }})</view>
					<view style="font-size:48rpx;color:#333333;margin:30rpx 0;">{{ signInfo.code }}</view>
					<view class="btn flexC normal">已签到</view>
				</view>
				<view v-if="signInfo.status == 2">
					<image src="../../static/imgs/written_off.png" class="status"></image>
					<view style="color:#ccc">二维码及验证码已失效</view>
					<view style="font-size:48rpx;color:#CCCCCC;margin:30rpx 0;">{{ signInfo.code }}</view>
					<view class="btn flexC lose">已失效</view>
				</view>
			</view>
			<view class="notice">
				<view>1.请不要把报名凭证随意分享给其他人，以免被盗用。</view>
				<view>2.线下活动入场时，请展示凭证给工作人员扫码验证。</view>
			</view>
		</view>
	</view>
</template>

<script>
import { lookSign } from '../../api/sign.js';
import { numberToChinese } from '../../utiils/utils.js';
export default {
	data() {
		return {
			userInfo: {}, //用户信息
			signInfo: '' //报名信息
		};
	},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo');
		const that = this;
		wx.getSystemInfo({
			success: res => {
				this.canvasW = res.windowWidth / 375;
				this.canvasH = res.windowHeight;
			}
		});
		this.lookSign();
	},
	methods: {
		// 获取凭证信息
		lookSign() {
			lookSign().then(res => {
				if (res.code == 200) {
					console.log(res.data, 'signInfo');
					this.signInfo = res.data;
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.voucher {
	hieght: 100vh;
	min-height: 100vh;
	width: 100vw;
	position: relative;
	background: #fff;
	.user {
		width: 100%;
		height: 205rpx;
		border: 1rpx solid #fbfbfb;
		image {
			height: 108rpx;
			width: 108rpx;
			border-radius: 50%;
			margin: 20rpx 0;
		}
		view {
			font-size: 32rpx;
			color: #333;
		}
	}
	.voucher_con {
		width: 690rpx;
		margin: 0 auto;
		.title {
			color: #333;
			font-size: 42rpx;
			margin: 48rpx auto 48rpx;
			text-align: center;
			font-weight: bold;
		}
		.voucher_icon {
			text-align: center;
			image {
				height: 300rpx;
				width: 300rpx;
				margin-bottom: 20rpx;
			}
			.status {
				height: 192rpx;
				width: 192rpx;
			}
			view {
				font-size: 32rpx;
				color: #666666;
			}
			.btn {
				width: 640rpx;
				margin: 60rpx auto;
				height: 88rpx;
				color: #fff;
				border: 1rpx solid #ea4a42;
				border-radius: 44rpx;
				letter-spacing: 2rpx;
				color: #ea4a42;
			}
			.normal {
				border: 1rpx solid #08b25a;
				color: #08b25a;
			}
			.lose {
				border: 1rpx solid #cccccc;
				color: #cccccc;
			}
		}

		.info {
			margin: 30rpx 0 40rpx 100rpx;

			> view {
				margin-top: 34rpx;
				font-size: 28rpx;

				text {
					color: #656565;
				}

				view {
					color: #333333;
				}
			}
		}

		.notice {
			color: #666;
			font-size: 28rpx;
			view:first-child {
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>
