douhuo-h5/pages/empower/verification.vue

<template>
	<view class="content">
		<!-- 核销凭证列表 -->
		<block v-if="vouchers.length > 0">
			<view class="vouchers" v-for="(item, index) in vouchers" :key="index">
				<image class="vouchers-icon" src="@/static/icon/sign.png" mode="widthFix" v-if="!item.can_sign"></image>
				<view class="vouchers-info">
					<view class="vouchers-info-item title">{{item.empower.title}}(第{{item.semester.no}}期)</view>
					<view class="vouchers-info-item">报名人：{{item.name}}</view>
					<view class="vouchers-info-item">有效期：{{item.semester.end}}</view>
				</view>
				<view class="vouchers-btns">
					<view class="vouchers-btn" @click="onShowLay(index)">{{item.can_sign ? '立即使用': '查看凭证'}}</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="list-null">
				<u-empty
					mode="history"
					icon="http://cdn.uviewui.com/uview/empty/history.png"
					text="暂无可使用课程凭证"
				>
				</u-empty>
			</view>
		</block>
		<!-- 核销弹出层 -->
		<u-popup :show="popupShow" mode="center" round="20rpx" closeable @close="popupShow = false">
			<view class="lay-info" v-if="vouchers.length > 0">
				<view class="lay-title">报名信息</view>
				<view class="lay-content">
					<view class="lay-item">
						<label>报名课程</label>
						<view class="lay-item-val">{{vouchers[layIndex].empower.title}}</view>
					</view>
					<view class="lay-item">
						<label>学期名称</label>
						<view class="lay-item-val">{{vouchers[layIndex].empower.subtitle}}</view>
					</view>
					<view class="lay-item">
						<label>报名姓名</label>
						<view class="lay-item-val">{{vouchers[layIndex].name}}</view>
					</view>
					<view class="lay-item">
						<label>报名电话</label>
						<view class="lay-item-val">{{vouchers[layIndex].mobile}}</view>
					</view>
					<view class="lay-item">
						<label>开始时间</label>
						<view class="lay-item-val">{{vouchers[layIndex].semester.start}}</view>
					</view>
					<view class="lay-item">
						<label>结束时间</label>
						<view class="lay-item-val">{{vouchers[layIndex].semester.end}}</view>
					</view>
					<view class="lay-item">
						<label>课程地点</label>
						<view class="lay-item-val">{{vouchers[layIndex].semester.address}}</view>
					</view>
				</view>
				<view class="lay-border"></view>
				<view class="lay-content">
					<view class="lay-item">
						<label>签到状态</label>
						<view class="lay-item-val bold">{{vouchers[layIndex].can_sign ? '未签到': '已签到'}}</view>
					</view>
					<view class="lay-item" v-if="!vouchers[layIndex].can_sign">
						<label>签到时间</label>
						<view class="lay-item-val">{{vouchers[layIndex].sign_at}}</view>
					</view>
				</view>
				<view class="lay-btns">
					<button class="lay-btn" :disabled="!vouchers[layIndex].can_sign" @click="onSign(vouchers[layIndex].item_id)">{{vouchers[layIndex].can_sign ? '签到': '已签到'}}</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { codes, sign } from '@/apis/interfaces/empower.js'
	export default {
		data() {
			return {
				popupShow	: false,
				vouchers	: [],
				layIndex	: 0
			};
		},
		onShow(){
			codes(this.$Route.query.code).then(res => {
				this.vouchers = res;
			})
		},
		methods: {
			// 显示确认弹出层
			onShowLay(index){
				this.layIndex 	= index
				this.popupShow	= true
			},
			// 签到
			onSign(id){
				sign(id).then(res => {
					this.$set(this.vouchers, this.layIndex, res)
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		},
		onNavigationBarButtonTap() {
			this.$Router.replace({
				name: "Index"
			})
		}
	}
</script>

<style lang="scss">
	.content{ background: #f7f7f7; min-height: calc(100vh - 44px); padding: 10rpx 30rpx; box-sizing: border-box; }
	// 票券
	.vouchers{
		background: white;
		border-radius: 20rpx;
		margin: 20rpx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		position: relative;
		&-icon{
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			z-index: 1;
			top: 15%;
			left: 53%;
			opacity: .5;
		}
		&-info{
			position: relative;
			padding: 20rpx 30rpx;
			font-size: 28rpx;
			border-right: dashed 2rpx #ddd;
			width: calc(100% - 200rpx);
			box-sizing: border-box;
			&::after,&::before{ content: " "; height: 22rpx; width: 22rpx; background: #f7f7f7; position: absolute; right: -11rpx; border-radius: 50%; }
			&::after{ top: -11rpx; }
			&::before{ bottom: -11rpx; }
			&-item{
				line-height: 40rpx;
				font-size: 26rpx;
				color: gray;
				&.bold{ font-weight: bold;  }
				&.title{ font-size: 30rpx; margin-bottom: 10rpx; font-weight: bold; color: #333; }
			}
		}
		&-btns{
			width: 200rpx;
			text-align: center;
			.vouchers-btn{ background: $mian-color; color: white; line-height: 60rpx; border-radius:30rpx; width: 150rpx; font-size: 26rpx; display: inline-block; }
		}
	}
	// 核销凭证弹出层
	.lay-info{
		width: 78vw;
		box-sizing: border-box;
		padding-bottom: 50rpx;
		.lay-title{ font-size: 40rpx; font-weight: bold; text-align: center; color: #333; line-height: 60rpx; padding: 50rpx; }
		.lay-content{
			padding: 0 40rpx;
			.lay-item{
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				padding: 10rpx 0;
				line-height: 40rpx;
				label{ color: gray; width: 160rpx; }
				.lay-item-val{
					width: calc(100% - 160rpx);
					&.bold{ color: $mian-color; font-weight: bold; }
				}
			}
		}
		.lay-border{ border-bottom: dashed 2rpx #ddd; margin: 40rpx 0; }
		.lay-btns{
			padding: 40rpx 40rpx 0;
			button.lay-btn{
				margin: 0;
				background: $mian-color;
				color: white;
				height: 90rpx;
				line-height: 90rpx;
				padding: 0;
				border-radius: 45rpx;
				&::after{ display: none; }
				&[disabled]{ opacity: .7; }
			 }
		}
	}
	// 核销凭证为空
	.list-null{ height: 80vh; display: flex; align-items: center; justify-content: center; }
</style>