559 lines
15 KiB
HTML
559 lines
15 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.reward-page {
|
|
min-height: 100vh;
|
|
background: #f5f6fa;
|
|
}
|
|
|
|
.user-profile {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-right: 15px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.avatar-placeholder {
|
|
font-size: 24px;
|
|
color: white;
|
|
}
|
|
|
|
.user-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: white;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.user-details {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.employee-id {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.user-detail-card {
|
|
background: #f8f8ff;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.detail-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.detail-item {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.detail-item.full-width {
|
|
flex: 0 0 100%;
|
|
}
|
|
|
|
.detail-item .van-icon {
|
|
margin-right: 8px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.detail-item .label {
|
|
color: #666;
|
|
margin-right: 8px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.detail-item .value {
|
|
color: #333;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.divider {
|
|
height: 1px;
|
|
background: #eee;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #68a7c2 0%, #157ea9 100%);
|
|
padding: 20px;
|
|
color: white;
|
|
border-radius: 0 0 30px 30px;
|
|
position: relative;
|
|
margin-bottom: 80px;
|
|
}
|
|
|
|
.header-text {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
left: 25px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.header-text h1 {
|
|
font-size: 32px;
|
|
margin: 0;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.header-text p {
|
|
font-size: 16px;
|
|
margin: 0;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.content-card {
|
|
margin: 20px 16px 20px;
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.survey-info {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.survey-title {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: #1a1a1a;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.survey-details {
|
|
color: #666;
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 12px 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.detail-item .van-icon {
|
|
margin-right: 8px;
|
|
color: #1867b0;
|
|
}
|
|
|
|
.reward-status {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 30px 0;
|
|
padding: 20px 0;
|
|
border-top: 1px solid #eee;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.status-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.status-icon {
|
|
margin-bottom: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
.status-item.active .status-icon {
|
|
color: #1867b0;
|
|
}
|
|
|
|
.status-text h3 {
|
|
font-size: 16px;
|
|
margin: 0 0 8px;
|
|
color: #666;
|
|
}
|
|
|
|
.status-text p {
|
|
font-size: 18px;
|
|
margin: 0;
|
|
color: #1a1a1a;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.receive-time {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
color: #666;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.receive-time .van-icon {
|
|
margin-right: 8px;
|
|
color: #1867b0;
|
|
}
|
|
|
|
.action-area {
|
|
padding: 20px 16px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.action-area .van-button {
|
|
height: 50px;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.qrcode-popup {
|
|
width: 90%;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.qrcode-container {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.qrcode-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 24px;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.qrcode-title .van-icon {
|
|
margin-right: 8px;
|
|
color: #1867b0;
|
|
}
|
|
|
|
.qrcode-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.qrcode-tips {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.qrcode-tips p {
|
|
margin: 8px 0;
|
|
font-size: 16px;
|
|
color: #666;
|
|
}
|
|
|
|
.qrcode-tips .sub-tips {
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
|
|
/* 主题色按钮样式 */
|
|
.van-button--primary {
|
|
background: #1867b0;
|
|
border-color: #1867b0;
|
|
}
|
|
|
|
.van-button--primary:active {
|
|
background: #1165b2;
|
|
border-color: #1165b2;
|
|
}
|
|
|
|
|
|
.success-status{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<van-nav-bar title="领取奖品" left-arrow placeholder fixed @click-left="history.go(-1)"></van-nav-bar>
|
|
|
|
<div class="reward-page">
|
|
<!-- 问卷信息卡片 -->
|
|
<div class="content-card">
|
|
<div class="survey-info">
|
|
<div class="survey-title">{{ questionTitle }}</div>
|
|
<div class="survey-details">
|
|
<!-- <div class="detail-item">-->
|
|
<!-- <van-icon name="clock-o"></van-icon>-->
|
|
<!-- <span>中奖日期：{{ moment(surveyInfo.winDate).format('YYYY-MM-DD') }}</span>-->
|
|
<!-- </div>-->
|
|
<div class="detail-item">
|
|
<van-icon name="medal-o"></van-icon>
|
|
<span>答题得分：{{ surveyInfo.score }}分</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="user-detail-card">
|
|
<div class="detail-row">
|
|
<div class="detail-item full-width">
|
|
<van-icon name="contact" color="#1867b0"></van-icon>
|
|
<span class="label">姓名</span>
|
|
<span class="value">{{ surveyInfo.userName }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-item full-width">
|
|
<van-icon name="card" color="#1867b0"></van-icon>
|
|
<span class="label">工号</span>
|
|
<span class="value">{{ surveyInfo.loginName }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-item full-width">
|
|
<van-icon name="home-o" color="#1867b0"></van-icon>
|
|
<span class="label">单位</span>
|
|
<span class="value">{{ surveyInfo.unitName }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-row">
|
|
<div class="detail-item full-width">
|
|
<van-icon name="home-o" color="#1867b0"></van-icon>
|
|
<span class="label">工会</span>
|
|
<span class="value">{{ surveyInfo.unionName }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 领奖状态 -->
|
|
<div class="reward-status">
|
|
<div class="status-item" :class="{ active: hasQualification }">
|
|
<div class="status-icon">
|
|
<van-icon name="certificate" size="28"></van-icon>
|
|
</div>
|
|
<div class="status-text">
|
|
<h3>领奖资格</h3>
|
|
<p>{{ hasQualification ? '已获得' : '未获得' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-item" :class="{ active: hasReceive }">
|
|
<div class="status-icon">
|
|
<van-icon name="gift-o" size="28"></van-icon>
|
|
</div>
|
|
<div class="status-text">
|
|
<h3>领奖状态</h3>
|
|
<p>{{ hasReceive ? '已领取':'未领取' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 领取时间 -->
|
|
<div class="receive-time">
|
|
<van-icon name="underway-o"></van-icon>
|
|
<span>领取时间：{{ surveyInfo.receiveTime || '-' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 领奖按钮 -->
|
|
<div class="action-area">
|
|
<van-button
|
|
type="primary"
|
|
block
|
|
round
|
|
:disabled="!canReceive"
|
|
@click="handleReceive"
|
|
size="large"
|
|
>
|
|
{{ buttonText }}
|
|
</van-button>
|
|
</div>
|
|
|
|
<!-- 二维码弹窗 -->
|
|
<van-popup v-model="showQRCode" round class="qrcode-popup" @closed="handlePopupClosed">
|
|
<div class="qrcode-container">
|
|
<div class="qrcode-title">
|
|
<van-icon name="qr" size="24"></van-icon>
|
|
<span>领奖二维码</span>
|
|
</div>
|
|
<div class="qrcode-wrapper">
|
|
<img :src="qrcodeText" alt="" style="width: 300px;height: 300px"/>
|
|
</div>
|
|
|
|
<div class="status-wrapper">
|
|
<van-loading v-if="checking" size="24px" vertical>
|
|
等待工作人员扫码
|
|
</van-loading>
|
|
<div v-else-if="surveyInfo.isReceive" class="success-status">
|
|
<van-icon name="checked" color="#07c160" size="24px"></van-icon>
|
|
<span>领取成功</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="qrcode-tips">
|
|
<p>请到工会出示二维码领取奖品</p>
|
|
<p class="sub-tips">工作时间：周一至周五 9:00-17:00</p>
|
|
</div>
|
|
</div>
|
|
</van-popup>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
questionId: GetQueryString("qid"),
|
|
questionTitle: null,
|
|
surveyInfo: {
|
|
title: '',
|
|
score: 0
|
|
},
|
|
showQRCode: false,
|
|
qrcodeText: '',
|
|
|
|
checking: false
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
hasQualification() {
|
|
return !$.isEmptyObject(this.surveyInfo)
|
|
},
|
|
canReceive() {
|
|
return this.hasQualification && !this.isReceive
|
|
},
|
|
hasReceive() {
|
|
if (this.hasQualification) {
|
|
return this.surveyInfo.isReceive
|
|
}
|
|
},
|
|
|
|
buttonText() {
|
|
if (!this.hasQualification) return '暂无领奖资格'
|
|
if (this.hasReceive) return '已领取奖品'
|
|
return '立即领取奖品'
|
|
}
|
|
},
|
|
methods: {
|
|
handleReceive() {
|
|
if(this.hasReceive){
|
|
this.$toast('您已经领取奖品')
|
|
return
|
|
}
|
|
|
|
this.showQRCode = true
|
|
this.qrcodeText = jrQrcode.getQrBase64(this.surveyInfo.id)
|
|
this.checking = true
|
|
// 开始轮询检查领取状态
|
|
this.startCheckingStatus()
|
|
},
|
|
|
|
// 开始轮询检查
|
|
startCheckingStatus() {
|
|
// 清除可能存在的旧定时器
|
|
this.clearCheckTimer()
|
|
// 设置新的轮询定时器
|
|
this.checkTimer = setInterval(async () => {
|
|
try {
|
|
const {data} = await $.get('/mobile/question/h5/surveyInfo', {questionId: this.questionId})
|
|
this.surveyInfo = data
|
|
if (this.surveyInfo && this.surveyInfo.isReceive) {
|
|
this.checking = false
|
|
// 清除定时器
|
|
this.clearCheckTimer()
|
|
// 显示成功提示
|
|
this.$toast.success('领取成功！')
|
|
// 延迟关闭弹窗
|
|
// setTimeout(() => {
|
|
// this.showQRCode = false
|
|
// }, 1500)
|
|
}
|
|
} catch (error) {
|
|
console.error('检查领取状态失败：', error)
|
|
this.$toast('检查领取状态失败，请重试')
|
|
this.clearCheckTimer()
|
|
}
|
|
}, 3000)
|
|
},
|
|
// 清除定时器
|
|
clearCheckTimer() {
|
|
if (this.checkTimer) {
|
|
clearInterval(this.checkTimer)
|
|
this.checkTimer = null
|
|
}
|
|
},
|
|
|
|
// 弹窗关闭时的处理
|
|
handlePopupClosed() {
|
|
this.clearCheckTimer()
|
|
this.checking = false
|
|
},
|
|
|
|
// 获取问卷信息
|
|
getQuestionTitle() {
|
|
$.get('/mobile/question/h5/questionTitle', {questionId: this.questionId}).then(res => {
|
|
if (res.code === 0) {
|
|
this.questionTitle = res.data
|
|
}
|
|
})
|
|
},
|
|
|
|
// 获取中奖信息
|
|
getSurveyInfo(){
|
|
$.post('/mobile/question/h5/surveyInfo', {questionId: this.questionId}).then(res=>{
|
|
if (res.code === 0) {
|
|
this.surveyInfo = res.data
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.getQuestionTitle()
|
|
this.getSurveyInfo()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
|
|
<!--#
|
|
}
|
|
#-->
|