406 lines
14 KiB
HTML
406 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: 5px 10px;
|
||
}
|
||
|
||
.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-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;
|
||
}
|
||
|
||
.tag {
|
||
position: absolute;
|
||
display: inline-block;
|
||
background-color: #1867b0;
|
||
color: #fff;
|
||
font-size: 10px;
|
||
top: 1px;
|
||
border-radius: 6px;
|
||
right: 5px;
|
||
padding: 1px 7px;
|
||
/*transform: rotate(0deg);*/
|
||
z-index: 99;
|
||
}
|
||
|
||
</style>
|
||
|
||
<div id="app" v-cloak>
|
||
<div class="container">
|
||
<van-nav-bar title="列表" left-arrow placeholder fixed
|
||
@click-left="history.back()"></van-nav-bar>
|
||
|
||
<div class="search-fixed" style="z-index: 100">
|
||
<van-dropdown-menu active-color="#1989fa">
|
||
<van-dropdown-item v-model="queryForm.year" :options="yearList"
|
||
@change="formChange"></van-dropdown-item>
|
||
<van-dropdown-item v-model="queryForm.status" :options="questionStatusList"
|
||
@change="formChange"></van-dropdown-item>
|
||
</van-dropdown-menu>
|
||
</div>
|
||
|
||
<!-- <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" style="margin: 60px auto 80px auto">
|
||
<div v-for="(item, index) in tableData" :id="item.qid" :key="item.qid">
|
||
<div class="quizzes-item" @click="openAnswer(item)">
|
||
<div>
|
||
<div class="tag" style="background-color: #bc62c5" v-if="[1,3].includes(item.qflag)">活动未开启</div>
|
||
<div class="tag"
|
||
v-else-if="[2].includes(item.qflag) && moment(item.startTime).valueOf() > moment().valueOf()">
|
||
活动未开始
|
||
</div>
|
||
<div class="tag"
|
||
v-else-if="[2].includes(item.qflag) &&moment(item.startTime).valueOf() < moment().valueOf() && moment().valueOf() < moment(item.endTime).valueOf()">
|
||
活动进行中
|
||
</div>
|
||
<div class="tag" style="background-color: #f14646"
|
||
v-else-if="[2].includes(item.qflag) &&moment().valueOf() > moment(item.endTime).valueOf()">
|
||
活动结束
|
||
</div>
|
||
</div>
|
||
<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.createTime).format('YYYY年MM月DD日') }}
|
||
</span>
|
||
</div>
|
||
<div class="quizzes-item-info-right" v-if="item.qlx!==4">
|
||
<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">
|
||
<van-tag @click.stop="showWinInfo(item)" type="primary" class="win_tag"
|
||
v-if="item.qlx===2 && item.isRaffle && moment(item.startTime).diff(moment(new Date().getTime()),'days') < 0">获奖信息</van-tag>
|
||
<!-- v-if="moment(item.startTime).diff(moment(new Date().getTime()),'days') < 0"-->
|
||
</span>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const vue = new Vue({
|
||
el: '#app',
|
||
mixins: [mobileMixins],
|
||
data() {
|
||
return {
|
||
questionStatus: '1',
|
||
scrollTop: 0,
|
||
statusBarHeight: 0,
|
||
pageLoading: false,
|
||
queryForm: {
|
||
year: '',
|
||
status: null
|
||
},
|
||
winPopupShow: false,
|
||
isWin: false,
|
||
|
||
questionStatusList: [
|
||
{text: '全部', value: 1},
|
||
{text: '未开启', value: 4},
|
||
{text: '未开始', value: 5},
|
||
{text: '进行中', value: 2},
|
||
{text: '已结束', value: 3}
|
||
]
|
||
}
|
||
},
|
||
async created() {
|
||
await this.init();
|
||
this.queryForm.type = GetQueryString("type")
|
||
this.doSearch()
|
||
},
|
||
methods: {
|
||
formChange() {
|
||
this.pageForm.pageNumber = 1
|
||
this.tableData = []
|
||
this.pageData()
|
||
},
|
||
async init() {
|
||
this.$set(this.queryForm, "status", 1)
|
||
this.$set(this.queryForm, "year", new Date().getFullYear())
|
||
},
|
||
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 (qlx === 1) {
|
||
//调查
|
||
location.href = '/mobile/question/h5/poll/index?id=' + qid
|
||
} else if (qlx === 2) {
|
||
//答题
|
||
// location.href = '?id=' + qid
|
||
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>
|
||
|
||
<!--#
|
||
}
|
||
#-->
|