399 lines
14 KiB
HTML
399 lines
14 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.container {
|
|
height: 100vh;
|
|
}
|
|
|
|
.top-back {
|
|
width: 100%;
|
|
background-color: rgb(22, 120, 255);
|
|
height: 200px;
|
|
}
|
|
|
|
.title {
|
|
position: fixed;
|
|
left: 40px;
|
|
top: 110px;
|
|
font-size: 24px;
|
|
color: white;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
min-height: calc(100vh - 46px - 44px);
|
|
max-height: calc(100vh - 46px - 44px);
|
|
overflow-y: scroll;
|
|
background: #f3f3f3;
|
|
}
|
|
|
|
.quizzes-item {
|
|
position: relative;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
}
|
|
|
|
.quizzes-item-v {
|
|
box-sizing: border-box;
|
|
padding: 1rem;
|
|
width: 100%;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.quizzes-item-info {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.quizzes-item-info-v{
|
|
flex: 1;
|
|
}
|
|
|
|
.quizzes-item-info-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.quizzes-item-info-icon img {
|
|
width: 6rem;
|
|
height: 5rem;
|
|
}
|
|
|
|
.quizzes-item-info-title {
|
|
margin-bottom: 1rem;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.quizzes-item-info-right {
|
|
font-size: 13px;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.quizzes-item-info-tip {
|
|
color: #606266;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.quizzes-item-info-text {
|
|
color: #232426;
|
|
}
|
|
|
|
.winPopup {
|
|
width: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
.winPopup img {
|
|
transform: translateY(-50%);
|
|
position: absolute;
|
|
top: 50%;
|
|
}
|
|
|
|
.winPopup .van-popup__close-icon {
|
|
|
|
}
|
|
|
|
.iconDiv {
|
|
color: white;
|
|
font-size: 66px;
|
|
text-align: center;
|
|
position: fixed;
|
|
bottom: 90px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
}
|
|
|
|
.win_tag {
|
|
position: relative;
|
|
top: 16px;
|
|
left: 5px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<div class="container">
|
|
<van-sticky>
|
|
<van-nav-bar title="列表" left-arrow
|
|
@click-left="history.back()"></van-nav-bar>
|
|
</van-sticky>
|
|
|
|
<van-tabs v-model="queryForm.status" @change="doSearch">
|
|
<van-tab title="进行中" name="1"></van-tab>
|
|
<van-tab title="已结束" name="2"></van-tab>
|
|
</van-tabs>
|
|
|
|
<div class="content">
|
|
<div v-for="(item, index) in tableData" :id="item.qid" :key="item.qid">
|
|
<div class="quizzes-item" @click="openAnswer(item)">
|
|
<div class="quizzes-item-v">
|
|
<div class="quizzes-item-info">
|
|
<div class="quizzes-item-info-icon">
|
|
<image src="/assets/mobile/svg/question/quizzes2.svg"/>
|
|
</div>
|
|
<div class="quizzes-item-info-v">
|
|
<div class="quizzes-item-info-title">{{ item.qtitle }}</div>
|
|
<div class="quizzes-item-info-right">
|
|
<span class="quizzes-item-info-tip">活动开始时间:</span>
|
|
<span class="quizzes-item-info-text">
|
|
{{ moment(item.startTime).format('YYYY年MM月DD日') }}
|
|
</span>
|
|
</div>
|
|
<div class="quizzes-item-info-right">
|
|
<span class="quizzes-item-info-tip">活动结束时间:</span>
|
|
<span class="quizzes-item-info-text">
|
|
{{ moment(item.endTime).format('YYYY年MM月DD日') }}
|
|
</span>
|
|
</div>
|
|
<div class="quizzes-item-info-right" v-if="item.isRaffle">
|
|
<!-- <span class="quizzes-item-info-tip">题目数量:</span>-->
|
|
<!-- <span class="quizzes-item-info-text">-->
|
|
<!-- {{item.ctMode === 1 ? item.topicTotal : item.ctNum }}-->
|
|
<!-- </span>-->
|
|
<span class="quizzes-item-info-text" style="position: absolute;right: 0;bottom: 0">
|
|
<!-- <van-tag @click.stop="showWinInfo(item)" type="primary" class="win_tag"-->
|
|
<!-- v-if="item.qlx===2 && item.isRaffle && item.zjTotal>0">获奖信息</van-tag>-->
|
|
</span>
|
|
</div>
|
|
<div style="display: flex;justify-content: end" v-if="item.isRaffle">
|
|
<!-- <van-button size="small" type="info" round color="#1867b0" @click.stop="receivePrize(item)">领取奖品</van-button>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<van-empty v-if="finished && !tableData.length" text="暂无问卷" icon-size="320"
|
|
src="/static/img/notData.svg">
|
|
</van-empty>
|
|
</div>
|
|
|
|
<van-popup v-model="winPopupShow" class="winPopup"
|
|
:style="{ height: '100%' }"
|
|
>
|
|
<div style="display: flex;align-items: center">
|
|
<img v-if="isWin" width="100%" height="60%" src="/assets/mobile/img/question/win.png"/>
|
|
<img v-if="!isWin" width="100%" height="50%"
|
|
src="/assets/mobile/img/question/noWin1.png"/>
|
|
</div>
|
|
<div class="iconDiv">
|
|
<div v-if="isWin" style="font-size: 14px;!important;">恭喜您中奖了，本次活动中奖机会只有一次喔！</div>
|
|
<van-icon @click="winPopupShow = false" name="close"></van-icon>
|
|
</div>
|
|
</van-popup>
|
|
|
|
<van-dialog v-model="tipShow" title="提示">
|
|
<div>活动期间，每天答题次数不限，每天答题的最终成绩取最高分。每天答题得90分(含)以上者，可参加线上抽奖活动。</div>
|
|
<div>6月17日至6月23日每天线上抽取“幸运奖”100名'。</div>
|
|
</van-dialog>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
mixins: [mobileMixins],
|
|
data() {
|
|
return {
|
|
questionStatus: '1',
|
|
scrollTop: 0,
|
|
statusBarHeight: 0,
|
|
pageLoading: false,
|
|
queryForm: {
|
|
status: '1'
|
|
},
|
|
winPopupShow: false,
|
|
isWin: false,
|
|
|
|
tipShow:false
|
|
}
|
|
},
|
|
created() {
|
|
this.queryForm.type = GetQueryString("type")
|
|
this.doSearch()
|
|
},
|
|
methods: {
|
|
receivePrize(item){
|
|
location.href = '/mobile/question/h5/answer/raffle?qid='+item.qid
|
|
},
|
|
async showWinInfo({qid}) {
|
|
const {data} = await $.post('/mobile/question/h5/winInfo', {questionId: qid})
|
|
const userId = "${@shiro.getPrincipalProperty('id')}"
|
|
const user = data.find(o => o.id === userId)
|
|
this.isWin = user !== undefined
|
|
this.winList = data
|
|
console.log(this.isWin)
|
|
this.winPopupShow = true
|
|
|
|
/*vant.Dialog.alert({
|
|
message: '每人仅有一次中奖机会喔，立即查询获奖信息。'
|
|
}).then(() => {
|
|
this.winPopupShow = true
|
|
});*/
|
|
},
|
|
pageData() {
|
|
this.$modal.loading()
|
|
this.tableLoading = true
|
|
|
|
$.post('/mobile/question/h5/pageData', {...this.pageForm, ...this.queryForm}).then(res => {
|
|
this.tableData = this.tableData.concat(res.data.list)
|
|
this.pageForm.totalCount = res.data.totalCount
|
|
if (this.tableData.length === this.pageForm.totalCount) {
|
|
this.finished = true
|
|
} else {
|
|
this.pageForm.pageNumber++
|
|
}
|
|
this.tableLoading = false
|
|
this.$modal.closeLoading()
|
|
})
|
|
|
|
|
|
// $.post('/activity/question/h5/pageData', this.pageForm, {
|
|
// params: this.queryForm
|
|
// }).then(res => {
|
|
// this.tableData = this.tableData.concat(res.data.list)
|
|
// this.pageForm.totalCount = res.data.totalCount
|
|
// if (this.tableData.length === this.pageForm.totalCount) {
|
|
// this.finished = true
|
|
// } else {
|
|
// this.pageForm.pageNumber++
|
|
// }
|
|
// this.tableLoading = false
|
|
// this.$modal.closeLoading()
|
|
// }).finally(() => {
|
|
// this.tableLoading = false
|
|
// this.finished = true
|
|
// this.$modal.closeLoading()
|
|
// })
|
|
},
|
|
|
|
tabChange(index) {
|
|
this.page.current = index;
|
|
// this.refresh();
|
|
},
|
|
lower(e) {
|
|
if (!this.finished) this.loadData();
|
|
},
|
|
|
|
async hasPermissionByIssue(groupId) {
|
|
const resp = await this.$http.get('/platform/question/applets/list/hasPermission', {
|
|
params: {groupId: groupId}
|
|
})
|
|
return resp
|
|
},
|
|
|
|
async openAnswer(item) {
|
|
const {qid, qlx, qflag, activityUserScopeId} = item
|
|
|
|
if (qflag !== 2) {
|
|
this.$modal.msg('该问卷未发布')
|
|
return
|
|
}
|
|
|
|
const now = new Date().getTime()
|
|
if (now < item.startTime || now > item.endTime) {
|
|
this.$modal.msg('不在开启时间内')
|
|
return
|
|
}
|
|
|
|
if (activityUserScopeId) {
|
|
const resp = await $.get('/mobile/question/h5/checkPermission/' + activityUserScopeId)
|
|
if (!resp.data) {
|
|
this.$modal.msg('您无权限参加')
|
|
return
|
|
}
|
|
}
|
|
|
|
if (qid === '827cc4ef9cde47ed97bc21f6be75f91a') {
|
|
this.$dialog.alert({
|
|
title:'提示',
|
|
messageAlign:'left',
|
|
message: '<div style="text-indent: 2em;">活动期间，每天答题次数不限，每天答题的最终成绩取最高分。每天答题得90分(含)以上者，可参加线上抽奖活动。<div>' +
|
|
'<div style="text-indent: 2em;">6月17日至6月23日每天线上抽取“幸运奖”100名。</div>'+
|
|
'<div style="text-indent: 2em;">答题并提交成功后，可于次日查看获奖信息。</div>'
|
|
,
|
|
}).then(()=>{
|
|
if (qlx === 1) {
|
|
//调查
|
|
location.href = '/mobile/question/h5/poll/index?id=' + qid
|
|
} else if (qlx === 2) {
|
|
//答题
|
|
location.href = '/mobile/question/h5/answer/index?id=' + qid
|
|
} else if (qlx === 3) {
|
|
//购物
|
|
location.href = '/mobile/question/h5/shop/index?id=' + qid
|
|
} else if (qlx === 4) {
|
|
//蛋糕卡
|
|
location.href = '/mobile/question/h5/cake/index?id=' + qid
|
|
}
|
|
})
|
|
return
|
|
}
|
|
|
|
if (qlx === 1) {
|
|
//调查
|
|
location.href = '/mobile/question/h5/poll/index?id=' + qid
|
|
} else if (qlx === 2) {
|
|
//答题
|
|
location.href = '/mobile/question/h5/answer/index?id=' + qid
|
|
} else if (qlx === 3) {
|
|
//购物
|
|
location.href = '/mobile/question/h5/shop/index?id=' + qid
|
|
} else if (qlx === 4) {
|
|
//蛋糕卡
|
|
location.href = '/mobile/question/h5/cake/index?id=' + qid
|
|
}
|
|
|
|
|
|
// if (qlx === 4) {
|
|
// if (item.startTime > new Date().getTime() || item.endTime < new Date().getTime()) {
|
|
// uni.showToast({
|
|
// title: "不在开启时间内",
|
|
// icon: 'none',
|
|
// duration: 2000
|
|
// });
|
|
// return
|
|
// }
|
|
// if (item.startTime)
|
|
// uni.navigateTo({
|
|
// url: "/pages/quizzes/cakeAnswer/cakeAnswer?id=" + id
|
|
// });
|
|
// } else if (qlx === 2) {
|
|
// if (activityUserScopeId) {
|
|
// const resp = await this.hasPermissionByIssue(activityUserScopeId)
|
|
// if (resp.code !== 0) {
|
|
// uni.showToast({
|
|
// title: resp.msg,
|
|
// icon: 'none',
|
|
// duration: 2000
|
|
// });
|
|
// return
|
|
// }
|
|
// }
|
|
// uni.navigateTo({
|
|
// url: "/pages/quizzes/choiceAnswer/choiceAnswer?id=" + id
|
|
// });
|
|
// } else {
|
|
// uni.navigateTo({
|
|
// url: "/pages/quizzes/answer?id=" + id
|
|
// });
|
|
// }
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|