zhangjing/douhuo-h5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新增增收赋能

Browse Source
This commit is contained in:
唐明明
2023-07-07 18:55:54 +08:00
parent 1af9e0eda5
commit e37f23be46
13 changed files with 1387 additions and 707 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
pages/empower/verification.vue Normal file
View File

@@ -0,0 +1,205 @@
<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>