|
@@ -4,7 +4,11 @@
|
|
|
<div class="page-content">
|
|
|
<div class="control">
|
|
|
<div class="search">
|
|
|
- <el-input placeholder="搜索登录账户后四位或所属机构">
|
|
|
+ <el-input
|
|
|
+ placeholder="搜索登录账户后四位或所属机构"
|
|
|
+ @keyup.enter="getList"
|
|
|
+ v-model="listQuery.clubUserName"
|
|
|
+ >
|
|
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
</el-input>
|
|
|
</div>
|
|
@@ -13,28 +17,34 @@
|
|
|
<div class="video-content">
|
|
|
<div class="title">视频排名</div>
|
|
|
<div class="video-list">
|
|
|
- <div class="video" v-for="(i, index) in 7" :key="index">
|
|
|
+ <div
|
|
|
+ class="video"
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index"
|
|
|
+ @click="onPlay(item)"
|
|
|
+ >
|
|
|
<div class="cover">
|
|
|
- <img src="https://picsum.photos/288/198" alt="" />
|
|
|
- <div class="name">医用透明质酸钠凝胶</div>
|
|
|
+ <img :src="item.cover" alt="" />
|
|
|
+ <div class="name">{{ item.title }}</div>
|
|
|
<div class="rank" :class="'rank-0' + (index + 1)">
|
|
|
{{ index + 1 }}
|
|
|
</div>
|
|
|
- <div class="play"></div>
|
|
|
+ <div class="play" @click="onPlay(item)"></div>
|
|
|
</div>
|
|
|
<div class="info">
|
|
|
- <div class="club-name">上海禾雅堂科技有限公司</div>
|
|
|
- <div class="mobile">137****6611</div>
|
|
|
+ <div class="club-name">{{ item.authParty }}</div>
|
|
|
+ <div class="mobile">{{ item.userName | mobileFormat }}</div>
|
|
|
</div>
|
|
|
<div class="foot">
|
|
|
- <div class="date">2022-09-28</div>
|
|
|
- <div class="praise">90</div>
|
|
|
- <div class="pv">513</div>
|
|
|
+ <div class="date">{{ item.releaseTime | dateFormat }}</div>
|
|
|
+ <div class="praise">{{ item.diggCount }}</div>
|
|
|
+ <div class="pv">{{ item.diggCount }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 列表为空 -->
|
|
|
<SimpleEmpty
|
|
|
+ v-if="!total"
|
|
|
name="icon-empty-video.png"
|
|
|
description="敬请期待~"
|
|
|
></SimpleEmpty>
|
|
@@ -47,6 +57,11 @@
|
|
|
@confirm="onConfirm"
|
|
|
@cancel="onCancel"
|
|
|
></SimpleDialog>
|
|
|
+
|
|
|
+ <SimpleVideoPlayer
|
|
|
+ :videoSrc="videoUrl"
|
|
|
+ ref="videoPlayer"
|
|
|
+ ></SimpleVideoPlayer>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -64,27 +79,120 @@
|
|
|
import { mapGetters } from 'vuex'
|
|
|
export default {
|
|
|
layout: 'app-ross',
|
|
|
+ filters: {
|
|
|
+ mobileFormat(mobile) {
|
|
|
+ return mobile ? mobile.replace(/^(\w{3})\w+(\w{4})$/, '$1****$2') : ''
|
|
|
+ },
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
+ listQuery: {
|
|
|
+ clubUserName: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
dialog: false,
|
|
|
dialogOption: {
|
|
|
confirmText: '确定',
|
|
|
description: '抱歉,活动已结束,暂无法发布视频!',
|
|
|
cancel: false,
|
|
|
},
|
|
|
+ publishStatus: {},
|
|
|
+ publishInfo: {},
|
|
|
+ videoUrl: '',
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['routePrefix']),
|
|
|
+ ...mapGetters(['routePrefix', 'accessToken', 'userInfo', 'authUserId']),
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.checkActivityPublish()
|
|
|
+ this.getList()
|
|
|
},
|
|
|
methods: {
|
|
|
- onConfirm() {},
|
|
|
- onCancel() {},
|
|
|
+ // 获取列表
|
|
|
+ getList() {
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ this.list = []
|
|
|
+ this.fetchVideoList()
|
|
|
+ },
|
|
|
+ // 获取视频列表
|
|
|
+ async fetchVideoList() {
|
|
|
+ try {
|
|
|
+ this.listQuery.authUserId = this.authUserId
|
|
|
+ const res = await this.$http.api.fetchVideoList(this.listQuery)
|
|
|
+ this.list = res.data.list
|
|
|
+ this.total = res.data.total
|
|
|
+ this.listQuery.pageNum++
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onConfirm() {
|
|
|
+ this.dialog = false
|
|
|
+ if (this.dialogOption.confirmText === '去认证') {
|
|
|
+ const path = `${this.routePrefix}/form/club-register`
|
|
|
+ this.$router.push(path)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onCancel() {
|
|
|
+ this.dialog = false
|
|
|
+ },
|
|
|
// 去发布视频
|
|
|
onPublish() {
|
|
|
+ if (!this.accessToken) {
|
|
|
+ this.$toast('请先登录')
|
|
|
+ this.formType = 'login'
|
|
|
+ this.$store.commit('app/SHOW_LOGIN')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.userInfo.authId) {
|
|
|
+ this.dialogOption.description = '抱歉,由于您未认证机构,无法参与!'
|
|
|
+ this.dialogOption.confirmText = '去认证'
|
|
|
+ this.dialog = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.publishInfo.activityState === 0) {
|
|
|
+ this.dialogOption.description = '抱歉,活动未开始!'
|
|
|
+ this.dialog = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.publishInfo.activityState === 2) {
|
|
|
+ this.dialogOption.description = '抱歉,活动已结束,暂无法发布视频!'
|
|
|
+ this.dialog = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.publishInfo.releaseStatus === 1) {
|
|
|
+ this.dialogOption.description =
|
|
|
+ '抱歉,平台规定每个用户只能发布一个视频,由于您已发布过视频,请勿再次发布!'
|
|
|
+ this.dialog = true
|
|
|
+ return
|
|
|
+ }
|
|
|
const url = `${this.routePrefix}/activity/challenge/publish`
|
|
|
this.$router.push(url)
|
|
|
},
|
|
|
+ // 验证发布状态
|
|
|
+ async checkActivityPublish() {
|
|
|
+ if (!this.accessToken) return
|
|
|
+ const { authId, mobile } = this.userInfo
|
|
|
+ try {
|
|
|
+ const res = await this.$http.api.checkActivityPublish({
|
|
|
+ authId,
|
|
|
+ userName: mobile,
|
|
|
+ })
|
|
|
+ this.publishInfo = res.data
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 播放视频
|
|
|
+ onPlay(row) {
|
|
|
+ this.videoUrl = row.ossUrl
|
|
|
+ this.$refs.videoPlayer.open()
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|