caimei-authentic-www/pages/_template/ross/activity/challenge/list.vue

<template>
  <div class="page">
    <div class="page-top"></div>
    <div class="page-content">
      <div class="control">
        <div class="search">
          <el-input
            placeholder="搜索登录账户后四位或所属机构"
            @keyup.enter="getList"
            v-model="listQuery.clubUserName"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div class="publish" @click="onPublish">发布视频</div>
      </div>
      <div class="video-content">
        <div class="title">视频排名</div>
        <div class="video-list">
          <div
            class="video"
            v-for="(item, index) in list"
            :key="index"
            @click="onPlay(item)"
          >
            <div class="cover">
              <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" @click="onPlay(item)"></div>
            </div>
            <div class="info">
              <div class="club-name">{{ item.authParty }}</div>
              <div class="mobile">{{ item.userName | mobileFormat }}</div>
            </div>
            <div class="foot">
              <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>

        <SimpleDialog
          v-model="dialog"
          :confirmText="dialogOption.confirmText"
          :description="dialogOption.description"
          :cancel="dialogOption.cancel"
          @confirm="onConfirm"
          @cancel="onCancel"
        ></SimpleDialog>

        <SimpleVideoPlayer
          :videoSrc="videoUrl"
          ref="videoPlayer"
        ></SimpleVideoPlayer>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 抱歉，活动已结束，暂无法发布视频！
 * 抱歉，由于您未认证机构，无法参与！
 * 抱歉，平台规定每个用户只能发布一个视频，由于您已发布过视频，请勿再次发布！
 *
 * 确认证
 */

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', 'accessToken', 'userInfo', 'authUserId']),
  },
  created() {
    this.checkActivityPublish()
    this.getList()
  },
  methods: {
    // 获取列表
    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>

<style lang="scss" scoped>
@mixin ellipsis($line: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

@media screen and (min-width: 768px) {
  .page {
    background: #fff;
    min-height: calc(100vh - 80px - 80px);
    .page-top {
      width: 100%;
      height: 530px;
      background-position: center;
      background: #ddd;
    }

    .page-content {
      width: 1200px;
      margin: 0 auto;
      padding-bottom: 80px;

      .control {
        display: flex;
        align-items: center;
        padding: 32px 0;
        .publish {
          width: 120px;
          height: 46px;
          text-align: center;
          line-height: 46px;
          background: #f3920d;
          color: #fff;
          font-size: 16px;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.2s;
          margin-left: 48px;

          &:hover {
            background: #e98d0d;
          }
        }

        .search {
          flex: 1;
          flex-shrink: 0;
          .el-input {
            height: 46px;
            font-size: 16px;
            .el-input__icon {
              font-size: 24px;
              line-height: 46px;
              margin-left: 12px;
            }

            ::v-deep {
              & > .el-input__inner {
                height: 46px;
                padding-left: 55px;
              }
            }
          }
        }
      }

      .video-content {
        .title {
          font-size: 16px;
          color: #282828;
          font-weight: bold;
          margin: 16px 0;
        }

        .video-list {
          &::after {
            content: '';
            display: block;
            clear: both;
          }

          .video {
            float: left;
            width: 288px;
            height: 356px;
            background: #fff;
            box-sizing: border-box;
            border: 1px solid #efefef;
            margin: 0 16px 16px 0;
            transition: all 0.4s;

            &:hover {
              transform: translateY(-10px);
              box-shadow: 0px 6px 16px 1px rgba(0, 0, 0, 0.1);

              .info {
                .club-name {
                  color: #f3920d;
                }
              }
            }

            &:nth-child(4n) {
              margin-right: 0;
            }

            .cover {
              width: 100%;
              height: 198px;
              position: relative;

              img {
                display: block;
                width: 100%;
                height: 100%;
              }

              &::after {
                content: '';
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
                width: 100%;
                height: 100%;
                background: #000;
                opacity: 0;
                transition: opacity 0.2s;
              }

              .play {
                position: absolute;
                z-index: 2;
                width: 48px;
                height: 48px;
                background: url(~assets/theme-images/common/pc-icon-play.png)
                  no-repeat center;
                background-size: 48px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                opacity: 0;
                transition: opacity 0.2s;
                cursor: pointer;
              }

              &:hover {
                .play {
                  opacity: 1;
                }

                .rank,
                .name {
                  opacity: 0;
                }

                &::after {
                  opacity: 0.4;
                }
              }

              .name {
                color: #fff;
                font-size: 16px;
                text-align: center;
                width: 100%;
                line-height: 40px;
                @include ellipsis(1);
                box-sizing: border-box;
                padding: 0 16px;
                position: absolute;
                left: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                transition: opacity 0.2s;
              }

              .rank {
                position: absolute;
                left: 10px;
                top: 0;
                width: 43px;
                height: 45px;
                background: url(~assets/theme-images/ross/pc-rank.png) no-repeat
                  center;
                background-size: 43px;
                text-align: center;
                box-sizing: border-box;
                padding-top: 13px;
                font-weight: bold;
                color: #fff;
                font-size: 13px;
                transition: opacity 0.2s;

                &.rank-01 {
                  background-image: url(~assets/theme-images/ross/pc-rank-01.png);
                }
                &.rank-02 {
                  background-image: url(~assets/theme-images/ross/pc-rank-02.png);
                }
                &.rank-03 {
                  background-image: url(~assets/theme-images/ross/pc-rank-03.png);
                }
              }
            }

            .info {
              padding: 24px 16px;
              .club-name {
                font-size: 18px;
                color: #282828;
                @include ellipsis(1);
              }
              .mobile {
                font-size: 16px;
                color: #666;
                margin-top: 12px;
              }
            }

            .foot {
              color: #999999;
              font-size: 14px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 0 16px;
              border-top: 1px solid #efefef;
              padding-top: 12px;

              .date,
              .praise,
              .pv {
                flex-shrink: 0;
                line-height: 24px;
              }

              .praise,
              .pv {
                position: relative;
                margin-left: 16px;
                padding-left: 30px;

                &::after {
                  content: '';
                  display: block;
                  width: 24px;
                  height: 24px;
                  background: url(~assets/theme-images/common/icon-praise.png)
                    no-repeat center;
                  background-size: 24px;
                  position: absolute;
                  left: 0;
                  top: 50%;
                  transform: translateY(-50%);
                }
              }

              .pv {
                &::after {
                  background-image: url(~assets/theme-images/common/icon-pv.png);
                }
              }

              .date {
                margin-right: 44px;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .page {
    background: #fff;
    .page-top {
      width: 100%;
      height: 100vw;
      background-position: center;
      background: #ddd;
    }

    .page-content {
      width: 93.6vw;
      margin: 0 auto;
      padding-bottom: 6.5vw;

      .control {
        display: flex;
        align-items: center;
        padding: 6.4vw 0 7.2vw;
        .publish {
          display: none;
        }

        .search {
          flex: 1;
          flex-shrink: 0;
          .el-input {
            height: 9.6vw;
            font-size: 3.4vw;
            .el-input__icon {
              font-size: 5.6vw;
              line-height: 9.6vw;
              margin-left: 12px;
            }

            ::v-deep {
              & > .el-input__inner {
                height: 9.6vw;
                padding-left: 55px;
              }
            }
          }
        }
      }

      .video-content {
        .title {
          font-size: 3.4vw;
          color: #282828;
          font-weight: bold;
          margin: 0 0 4vw;
        }

        .video-list {
          &::after {
            content: '';
            display: block;
            clear: both;
          }

          .video {
            float: left;
            width: 45.6vw;
            height: 56.4vw;
            background: #fff;
            box-sizing: border-box;
            border: 0.1vw solid #efefef;
            margin: 0 2.4vw 2.4vw 0;
            transition: all 0.4s;

            &:nth-child(2n) {
              margin-right: 0;
            }

            .cover {
              width: 100%;
              height: 31.3vw;
              position: relative;

              img {
                display: block;
                width: 100%;
                height: 100%;
              }

              &::after {
                content: '';
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
                width: 100%;
                height: 100%;
                background: #000;
                opacity: 0;
                transition: opacity 0.2s;
              }

              .play {
                position: absolute;
                z-index: 2;
                width: 48px;
                height: 48px;
                background: url(~assets/theme-images/common/pc-icon-play.png)
                  no-repeat center;
                background-size: 48px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                opacity: 0;
                transition: opacity 0.2s;
                cursor: pointer;
              }

              .name {
                color: #fff;
                font-size: 3vw;
                text-align: center;
                width: 100%;
                line-height: 6.4vw;
                @include ellipsis(1);
                box-sizing: border-box;
                padding: 0 1.2vw;
                position: absolute;
                left: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
              }

              .rank {
                position: absolute;
                left: 2.4vw;
                top: 0;
                width: 7.2vw;
                height: 7.5vw;
                background: url(~assets/theme-images/ross/h5-rank.png) no-repeat
                  center;
                background-size: 7.2vw;
                text-align: center;
                box-sizing: border-box;
                padding-top: 1.9vw;
                font-weight: bold;
                color: #fff;
                font-size: 2.1vw;

                &.rank-01 {
                  background-image: url(~assets/theme-images/ross/h5-rank-01.png);
                }
                &.rank-02 {
                  background-image: url(~assets/theme-images/ross/h5-rank-02.png);
                }
                &.rank-03 {
                  background-image: url(~assets/theme-images/ross/h5-rank-03.png);
                }
              }
            }

            .info {
              padding: 2.4vw;
              .club-name {
                font-size: 3.4vw;
                color: #282828;
                @include ellipsis(1);
              }
              .mobile {
                font-size: 3vw;
                color: #666;
                margin-top: 1.6vw;
              }
            }

            .foot {
              color: #999999;
              font-size: 2.6vw;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 0 2.4vw;
              border-top: 0.1vw solid #efefef;
              padding-top: 2.3vw;

              .date,
              .praise,
              .pv {
                flex-shrink: 0;
                line-height: 3.6vw;
              }

              .praise,
              .pv {
                position: relative;
                padding-left: 4.4vw;

                &::after {
                  content: '';
                  display: block;
                  width: 3.6vw;
                  height: 3.6vw;
                  background: url(~assets/theme-images/common/icon-praise.png)
                    no-repeat center;
                  background-size: 3.6vw;
                  position: absolute;
                  left: 0;
                  top: 50%;
                  transform: translateY(-50%);
                }
              }

              .pv {
                &::after {
                  background-image: url(~assets/theme-images/common/icon-pv.png);
                }
              }

              .date {
                margin-right: 5.5vw;
              }
            }
          }
        }
      }
    }
  }
}
</style>