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

<template>
  <van-list
    v-model="loadingMore"
    :finished="finished"
    :immediate-check="false"
    :finished-text="total ? '没有更多了' : ''"
    @load="fetchVideoList"
    class="vant-list"
  >
    <div class="page">
      <div class="page-content">
        <!-- 操作区域 -->
        <div class="control">
          <div class="search">
            <el-input
              placeholder="搜索手机号后四位或机构名称"
              @keyup.enter.native="getList"
              v-model="listQuery.mobileOrAuthpart"
              clearable
              @clear="getList"
            >
              <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>
          <SimpleVideoList :list="list" @praise="onPraise" />
          <!-- 列表为空 -->
          <SimpleEmpty v-if="!total && !isRequest" name="icon-empty-video.png" description="暂无视频~"></SimpleEmpty>
        </div>
      </div>

      <div class="publish" @click="onPublish">发布视频</div>
      <!-- 提示框 -->
      <GeneralDialog
        v-model="promptDialog"
        title="提示"
        :content="promptContent"
        :confirmText="promptConfirmText"
        @confirm="onPromptConfirm"
      ></GeneralDialog>
    </div>
  </van-list>
</template>

<script>
import { mapGetters } from 'vuex'
import { debounce } from '~/utils'
export default {
  layout: 'app-asbl',
  data() {
    const promptContentMap = {
      0: '恭喜您，报名成功，请去上传您的抖音视频！',
      1: '抱歉！活动还未开始，暂无法报名！',
      2: '抱歉！活动已结束，暂无法报名！',
      3: '抱歉！您已报名，请勿重复操作！',
      4: '抱歉！请完善您的营业执照!',
      5: '抱歉！您还未报名，请先报名后再来上传视频！',
      6: '抱歉！活动还未开始，暂无法上传视频！',
      7: '抱歉！活动已结束，暂无法上传视频！',
    }

    return {
      isRequest: true,
      finished: true, // 列表加载是否完毕（加载完了所有数据）
      loadingMore: false, // 是否正在加载
      listQuery: {
        mobileOrAuthpart: '',
        clubUserId: '',
        authUserId: '',
        pageNum: 1,
        pageSize: 20,
        status: 1,
      },
      list: [],
      total: 0,
      dialog: false,
      dialogOption: {
        confirmText: '确定',
        description: '抱歉，活动已结束，暂无法发布视频！',
        cancel: false,
      },
      publishInfo: {},

      // 提示框信息
      promptDialog: false,
      promptContentMap,
      promptStatus: -1,
      activityState: 0,
      // 用户报名状态
      signUpStatus: 0, // 0：未报名 1：已报名
    }
  },
  computed: {
    ...mapGetters(['routePrefix', 'accessToken', 'userInfo', 'authUserId']),
    promptContent() {
      return this.promptContentMap[this.promptStatus]
    },
    promptConfirmText() {
      return this.promptStatus === 2 ? '上传抖音视频' : '确定'
    },
  },
  created() {
    this.getList()
    this.fetchActivityStatus()
  },
  beforeDestroy() {
    this.$toast.clear()
  },
  methods: {
    // 获取列表
    getList() {
      this.$toast.loading({
        message: '正在获取视频列表...',
        duration: 0,
      })
      this.listQuery.pageNum = 1
      this.isRequest = true
      this.list = []
      this.fetchVideoList()
    },

    // 获取视频列表
    fetchVideoList: debounce(async function () {
      try {
        this.loadingMore = true
        this.isRequest = true
        this.listQuery.authUserId = this.authUserId
        this.listQuery.clubUserId = this.userInfo.clubUserId
        const res = await this.$http.api.fetchClubVideoList(this.listQuery)
        this.list = [...this.list, ...res.data.list]
        this.total = res.data.total
        this.listQuery.pageNum++
        this.finished = !res.data.hasNextPage
        this.loadingMore = false
        this.isRequest = false
      } catch (error) {
        console.log(error)
      } finally {
        this.$toast.clear()
      }
    }, 500),

    // 视频点赞
    async onPraise(video) {
      try {
        if (!this.accessToken) {
          this.$toast('请先登录')
          this.$store.commit('app/SHOW_LOGIN')
          return
        }
        const status = video.diggStatus === 0 ? 1 : 0
        const { clubUserId } = this.userInfo
        await this.$http.api.diggcountVideo({
          id: video.id,
          diggStatus: status,
          clubUserId,
          clubUserIds: video.clubUserIds,
        })
        video.diggStatus = status
        let tip = ''
        if (video.diggStatus === 0) {
          tip = '已取消点赞'
          video.diggCount--
        } else {
          tip = '点赞成功'
          video.diggCount++
        }
        this.$toast.success(tip)
      } catch (error) {
        console.log(error)
      }
    },

    // 去发布视频
    async onPublish() {
      // 活动未开启
      if (this.activityState === 0) {
        this.promptStatus = 6
        this.promptDialog = true
        return
      }
      // 活动已结束
      if (this.activityState === 2) {
        this.promptStatus = 7
        this.promptDialog = true
        return
      }
      // 未登录
      if (!this.accessToken) {
        this.$store.commit('app/SHOW_LOGIN')
        return
      }
      // 未报名
      if (this.signUpStatus === 0) {
        this.promptDialog = true
        this.promptStatus = 5
        return
      }

      this.$router.push(`${this.routePrefix}/activity/challenge/publish`)
    },

    // 提示框确定事件
    onPromptConfirm() {
      this.promptDialog = false
      // 上传资质
      if (this.promptStatus === 4) {
        this.showDialog = true
        return
      }
      // 去上传抖音视频
      if (this.promptStatus === 0) {
        this.$router.push(`${this.routePrefix}/activity/challenge/publish`)
        return
      }
    },

    // 获取用户活动报名状态
    async fetchContestInfo() {
      try {
        const { mobile } = this.userInfo
        const res = await this.$http.api.checkContestInfo({ mobile, authUserId: this.authUserId })
        this.signUpStatus = res.data.contestStatus
      } catch (error) {
        console.log(error)
      }
    },

    // 获取活动状态
    async fetchActivityStatus() {
      try {
        const res = await this.$http.api.fetchActivityStatus({
          authUserId: this.authUserId,
        })
        if (!res.data) return
        this.activityState = res.data.activityState
        if (!this.accessToken) return
        this.fetchContestInfo()
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  ::v-deep {
    .el-input.is-active .el-input__inner,
    .el-input__inner:focus {
      border-color: #f3920d;
    }
    .van-list__finished-text,
    .van-list__placeholder {
      background: #fff;
    }
  }

  .vant-list {
    background: #fff;
  }

  .page {
    background: #fff;
    min-height: calc(100vh - 80px - 80px - 50px);

    .page-top {
      width: 100%;
      height: 530px;
      background: url(~assets/theme-images/ross/pc-banner-activity.png) no-repeat center;
      background-size: auto 530px;
    }

    .publish {
      display: none;
    }

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

      .control {
        display: flex;
        align-items: center;
        padding: 32px 0;
        .publish {
          display: block;
          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;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .vant-list {
    padding-bottom: 28vw;
  }

  .page {
    background: #fff;
    position: relative;
    position: relative;
    // padding-bottom: 20vw;
    .page-top {
      width: 100%;
      height: 100vw;
      background: url(~assets/theme-images/ross/h5-banner-activity.png) no-repeat center;
      background-size: auto 100vw;
    }

    .publish {
      position: fixed;
      bottom: 16vw;
      left: 7.4vw;
      width: 85.6vw;
      height: 12vw;
      background: #f3920d;
      color: #fff;
      text-align: center;
      font-size: 3.6vw;
      line-height: 12vw;
      z-index: 9;
    }

    .page-content {
      position: relative;
      width: 93.6vw;
      margin: 0 auto;

      .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: 31.3vw;
              }

              &::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;
                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>