154 lines
3.4 KiB
Vue
154 lines
3.4 KiB
Vue
<template>
|
|
<section class="AppVote">
|
|
<AiGroup noBorder description class="mar-b32">
|
|
<u-parse :html="detail.preface"/>
|
|
</AiGroup>
|
|
<div class="voteItem" flex @click="handleDetail(row.id)" v-for="row in list" :key="row.id">
|
|
<div class="fill">
|
|
<b class="mar-b16" v-text="row.videoName"/>
|
|
<div class="color-999 line3" v-text="row.videoIntroduction"/>
|
|
</div>
|
|
<div class="thumb">
|
|
<img :src="row.imageFileUrl"/>
|
|
<span v-text="`${row.voteNumber}票`"/>
|
|
</div>
|
|
</div>
|
|
<AiGroup noBorder description>
|
|
<u-parse :html="detail.ending"/>
|
|
</AiGroup>
|
|
<u-gap height="160"/>
|
|
<weixin-login :autoShow="!user.token" :visible.sync="wxLogin" content="投票需要您授权您的微信信息" @login="getList"/>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex"
|
|
import WeixinLogin from "./component/weixinLogin";
|
|
|
|
export default {
|
|
name: "AppVote",
|
|
components: {WeixinLogin},
|
|
appName: "“微视频”大赛",
|
|
data() {
|
|
return {
|
|
detail: {},
|
|
list: [],
|
|
wxLogin: 0,
|
|
current: 1,
|
|
total: 0
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
},
|
|
methods: {
|
|
getDetail(retry = false) {
|
|
this.$http.post("/app/appvideovoteconfig/queryDetailByCorpId", null, {
|
|
withoutToken: !this.user.token || retry
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.detail = res.data
|
|
}
|
|
}).catch(() => !retry && this.getList(true))
|
|
},
|
|
getList() {
|
|
const {current, total, list} = this
|
|
if (current == 1 || list.length < total) {
|
|
current == 1 && (this.list = [])
|
|
this.$http.post("/app/appvideoinfo/list", null, {
|
|
withoutToken: true,
|
|
params: {current}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.list = [this.list, res.data.records].flat().filter(Boolean)
|
|
this.total = res.data.total
|
|
}
|
|
})
|
|
}
|
|
},
|
|
handleDetail(id) {
|
|
if (!this.user.token) this.wxLogin++
|
|
else uni.navigateTo({url: './voteDetail?id=' + id})
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getDetail()
|
|
this.getList()
|
|
},
|
|
onReachBottom() {
|
|
this.current++
|
|
this.getList()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AppVote {
|
|
min-height: 100vh;
|
|
background: #fff;
|
|
|
|
.AiGroup {
|
|
width: 100%;
|
|
padding-right: 32px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.voteItem {
|
|
height: 240px;
|
|
border: 1px solid #CCCCCC;
|
|
border-radius: 16px;
|
|
margin: 0 32px 24px;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
font-family: PingFangSC;
|
|
align-items: flex-start;
|
|
|
|
b {
|
|
font-size: 34px;
|
|
color: #333333;
|
|
display: block;
|
|
line-height: 48px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.line3 {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.thumb {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
margin-left: 24px;
|
|
width: 192px;
|
|
height: 192px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
background-color: #eee;
|
|
|
|
& > span {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
padding: 0 8px;
|
|
line-height: 44px;
|
|
background: #FF883C;
|
|
color: #fff;
|
|
z-index: 2;
|
|
}
|
|
|
|
& > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|