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

<template>
  <div class="page">
    <div class="page-top">
      <div class="top-tip-container">
        <transition name="fade">
          <div class="top-tip" v-show="showMobileStatus && activityState === 1">{{ showMobile }} 已报名参赛！</div>
        </transition>
      </div>
    </div>
    <div class="page-content">
      <!-- 视频列表 -->
      <template v-if="videoListFilter.length > 0">
        <div class="section-title">
          <div class="title">视频排名</div>
          <div class="more" @click="onMoreClick">
            <span>更多</span>
            <span class="iconfont icon-arrow-right"></span>
          </div>
        </div>
        <SimpleVideoList :list="videoListFilter" @praise="onPraise" />
      </template>
      <!-- 活动介绍 -->
      <div class="section-title">
        <!-- <div class="title">活动介绍</div> -->
      </div>
      <div class="activity-content">
        <div class="title">赛事活动介绍</div>
        <dl>
          <dt><div>活动介绍</div></dt>
          <dd>采美平台和云进通在跨境物流领域达成战略合作，为广大采美客户提供轻松无忧的跨境体验！</dd>
          <dt><div>活动时间</div></dt>
          <dd>2022.10月10日——2022.12月31日</dd>
          <dt><div>活动奖励</div></dt>
          <dd>a、一等奖1000元；b、二等奖500元；c、三等奖300元</dd>
          <dt><div>参与方式</div></dt>
          <dd>
            第一步：申请认证和上传相关资料可以登录ROSS官方网站或品牌授权的正品认证通入口申请；第二步：通过手机号码、机构
            名称，注册账号；第三步：通过上传机构门头照片、营业地址等相关信息，进行机构认证；第四步：通过填写设备
            相关名称、图片、相关购买凭证，进行设备认证。完成后登录上传视频且抖音分享成功即可！
          </dd>
          <dt><div>评奖规则</div></dt>
          <dd>用户登录商城注册成功后，按在规定的时间内完成点赞数最高的评定等级</dd>
          <dt><div>奖项公布</div></dt>
          <dd>用户在规定时间内完成后10个工作日将公布排名以及颁发奖品</dd>
          <dt><div>注意事项</div></dt>
          <dd>一个抖音账号只能参与一次</dd>
        </dl>
      </div>

      <div class="control">
        <div class="btn type1" @click="onToSingUp">点击报名参赛</div>
        <div class="btn type2" @click="onToUpload">上传抖音视频</div>
      </div>
    </div>

    <!-- 资质上传框 -->
    <GeneralDialog
      v-model="showDialog"
      title="上传营业执照"
      @confirm="onConfirm"
      confirmText="提交报名"
      @closed="onClosed"
    >
      <div class="general-content">
        <SimpleUploadImage
          @success="onImageSuccess"
          @remove="onImageRemove"
          :imageList="imageList"
          :showDetail="false"
        />
        <div class="tip">提示：请上传您的真实营业执照，以免影响 您的评奖结果！</div>
      </div>
    </GeneralDialog>

    <!-- 提示框 -->
    <GeneralDialog
      v-model="promptDialog"
      title="提示"
      :content="promptContent"
      :confirmText="promptConfirmText"
      @confirm="onPromptConfirm"
    ></GeneralDialog>
  </div>
</template>

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

    return {
      dialog: true,
      activityState: 0,
      videoList: [],
      // 用户报名状态
      signUpStatus: 0, // 0：未报名 1：已报名
      // 营业执照
      showDialog: false,
      imageList: [],
      qualificationUrl: '',
      // 提示框信息
      promptDialog: false,
      promptContentMap,
      promptStatus: -1,
      // 非认证机构报名提交资质报名表单
      formData: {
        mobile: '',
        licenseOssUrl: '',
        authUserId: '',
        licenseOssName: '',
        authId: '',
      },
      listQuery: {
        clubUserId: '',
        clubUserName: '',
        authUserId: '',
        pageNum: 1,
        pageSize: 12,
        status: 1,
      },
      // 参赛用户列表
      singInClubList: [],
      showMobile: '',
      showMobileStatus: false,
    }
  },
  computed: {
    ...mapGetters(['routePrefix', 'authUserId', 'accessToken', 'userInfo', 'authId', 'isPc']),
    // 提示框内容
    promptContent() {
      return this.promptContentMap[this.promptStatus]
    },
    // 确定按钮内容
    promptConfirmText() {
      return this.promptStatus === 2 ? '上传抖音视频' : '确定'
    },
    // 参赛机构手机号
    signInClubMobileList() {
      return this.singInClubList.map((item) => item.userName.replace(/^(\w{3})\w+(\w{4})$/, '$1****$2'))
    },
    videoListFilter() {
      return this.videoList.filter((item, index) => {
        return index < (this.isPc ? 6 : 4)
      })
    },
  },
  created() {
    this.fetchActivityStatus()
    this.fetchVideoList()
    if (this.activityState === 1) {
      this.fetchSignInClubList()
    }
  },
  mounted() {
    // 分享当前页面
    this.initAppMessageShareData()
  },
  methods: {
    // 参赛机构手机号滚动
    mobileLoop() {
      if (this.signInClubMobileList.length > 0) {
        let i = 0
        this.showMobile = this.signInClubMobileList[i]
        this.showMobileStatus = true
        console.log('显示')
        setTimeout(() => {
          this.showMobileStatus = false
          console.log('隐藏')
        }, 1500)
        const timer = setInterval(() => {
          i++
          setTimeout(() => {
            this.showMobileStatus = false
            console.log('隐藏')
          }, 1500)
          if (i > this.signInClubMobileList.length - 1) {
            clearInterval(timer)
            console.log('结束')
            return
          }
          console.log('显示')
          this.showMobile = this.signInClubMobileList[i]
          this.showMobileStatus = true
        }, 2000)
      }
    },

    // 查看更多视频
    onMoreClick() {
      this.$router.push(`${this.routePrefix}/activity/challenge/list`)
    },

    // 点击报名
    onToSingUp() {
      // 活动未开启
      if (this.activityState === 0) {
        this.promptStatus = 1
        this.promptDialog = true
        return
      }
      // 活动已结束
      if (this.activityState === 2) {
        this.promptStatus = 2
        this.promptDialog = true
        return
      }
      // 未登录
      if (!this.accessToken) {
        this.$store.commit('app/SHOW_LOGIN')
        return
      }
      // 已经报名
      if (this.signUpStatus === 1) {
        this.promptStatus = 3
        this.promptDialog = true
        return
      }
      // 未认证机构
      if (!this.authId) {
        this.promptStatus = 4
        this.promptDialog = true
        return
      }

      // 已认证机构
      if (this.authId) {
        this.clubSignUpActivity()
      }
    },

    // 上传抖音视频
    onToUpload() {
      // 活动未开启
      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`)
    },

    // 机构用户报名
    async clubSignUpActivity() {
      try {
        this.formData.mobile = this.userInfo.mobile
        this.formData.authUserId = this.authUserId
        this.formData.authId = this.userInfo.authId
        await this.$http.api.clubSignUpActivity(this.formData)
        // 报名成功
        this.promptStatus = 0
        this.signUpStatus = 1
        this.promptDialog = true
      } catch (error) {
        console.log(error)
      }
    },

    // 提示框确定事件
    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
      }
    },

    // 提交资质文件
    onConfirm() {
      if (!this.formData.licenseOssUrl) {
        this.$toast('请上传营业执照')
        return
      }
      this.showDialog = false
      this.clubSignUpActivity()
    },

    onClosed() {
      this.imageList = []
    },

    // 文件上传成功
    onImageSuccess({ response, fileList }) {
      this.imageList = fileList
      this.formData.licenseOssUrl = response.data
    },

    // 文件移除
    onImageRemove() {
      this.imageList = []
      this.formData.licenseOssUrl = ''
    },

    // 视频点赞
    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 fetchVideoList() {
      try {
        this.listQuery.authUserId = this.authUserId
        this.listQuery.clubUserId = this.userInfo.clubUserId
        const res = await this.$http.api.fetchClubVideoList(this.listQuery)
        this.videoList = res.data.list
      } catch (error) {
        console.log(error)
      }
    },

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

    // 获取参赛的用户
    async fetchSignInClubList() {
      try {
        const res = await this.$http.api.fetchEnteredClubList({ authUserId: this.authUserId })
        this.singInClubList = res.data
        this.mobileLoop()
      } 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)
      }
    },

    // 分享当前页面
    initAppMessageShareData() {
      //  重试次数
      let retryCount = 1
      this.$wxReady((wx) => {
        //需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({
          title: '认证通', // 分享标题
          desc: '您的好友邀请您一起来参与认证通挑战赛，赢大奖，快来参与吧！', // 分享描述
          link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
          imgUrl: window.location.origin + '/activity.png', // 分享图标
          fail: () => {
            if (retryCount === 0) return
            this.initAppMessageShareData()
            retryCount--
          },
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

@media screen and (min-width: 768px) {
  .general-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    .tip {
      width: 266px;
      margin: 0 auto;
      margin-top: 36px;
      line-height: 24px;
      font-size: 14px;
      color: #b2b2b2;
      text-align: center;
    }
  }

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

      .top-tip-container {
        position: relative;
        width: 870px;
        margin: 0 auto;

        .top-tip {
          position: absolute;
          left: 0;
          top: 32px;
          width: 200px;
          height: 32px;
          background: rgba(0, 0, 0, 0.4);
          border-radius: 2px;
          font-size: 14px;
          color: #fff;
          text-align: center;
          line-height: 32px;
        }
      }
    }

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

      .section-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32px 0 16px;
        .title {
          font-size: 16px;
          font-weight: bold;
          color: #282828;
        }
        .more {
          font-size: 14px;
          color: #999;
          cursor: pointer;

          &:hover {
            color: #f3920d;
          }
        }
      }

      .activity-content {
        min-height: 1170px;

        .title {
          font-size: 40px;
          color: #333;
          height: 80px;
          box-sizing: border-box;
          text-align: center;
          margin-bottom: 70px;
          padding-top: 20px;
          font-weight: bold;
          background: url(~assets/theme-images/ross/pc_activity_title_01.png) no-repeat center;
          background-size: auto 80px;
        }

        dl {
          width: 872px;
          margin: 0 auto;
          dt {
            font-size: 30px;
            text-align: center;
            margin-bottom: 24px;

            div {
              line-height: 24px;
              display: inline-block;
              border-bottom: 5px;
              border-bottom-color: #ffd7c5;
              border-bottom-style: solid;
            }
          }
          dd {
            font-size: 16px;
            color: #666666;
            text-align: center;
            line-height: 32px;
            margin-bottom: 64px;
          }
        }
      }

      .control {
        .btn {
          width: 295px;
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          text-align: center;
          margin: 16px auto 0;
          cursor: pointer;
          border-radius: 4px;

          &.type1 {
            background: #f3920d;
            color: #ffffff;
          }
          &.type2 {
            border: 1px solid #f3920d;
            box-sizing: border-box;
            line-height: 48px;
            color: #f3920d;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .general-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    .tip {
      width: 57vw;
      margin: 0 auto;
      margin-top: 4.8vw;
      line-height: 5.6vw;
      font-size: 3.2vw;
      color: #b2b2b2;
      text-align: center;
    }
  }

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

      .top-tip-container {
        position: relative;
        width: 100%;
        margin: 0 auto;

        .top-tip {
          position: absolute;
          left: 4vw;
          top: 6.4vw;
          width: 46vw;
          height: 7.2vw;
          background: rgba(0, 0, 0, 0.4);
          border-radius: 0.2vw;
          font-size: 3.2vw;
          color: #fff;
          text-align: center;
          line-height: 7.2vw;
        }
      }
    }

    .page-content {
      width: 85.6vw;
      margin: 0 auto;
      margin-top: 3.2vw;

      .section-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32px 0 16px;
        .title {
          font-size: 16px;
          font-weight: bold;
          color: #282828;
        }
        .more {
          font-size: 14px;
          color: #999;
          cursor: pointer;

          &:hover {
            color: #f3920d;
          }
        }
      }

      .activity-content {
        min-height: 116.3vw;
        margin-top: 8vw;

        .title {
          font-size: 5vw;
          color: #333;
          height: 9vw;
          box-sizing: border-box;
          text-align: center;
          margin-bottom: 8vw;
          padding-top: 2.4vw;
          font-weight: bold;
          background: url(~assets/theme-images/ross/h5_activity_title_01.png) no-repeat center;
          background-size: auto 9vw;
        }

        dl {
          dt {
            font-size: 4.8vw;
            text-align: center;
            margin-bottom: 4.8vw;

            div {
              line-height: 3.2vw;
              display: inline-block;
              border-bottom: 0.8vw;
              border-bottom-color: #ffd7c5;
              border-bottom-style: solid;
            }
          }
          dd {
            font-size: 3.4vw;
            color: #666666;
            text-align: center;
            line-height: 5.6vw;
            margin-bottom: 8.8vw;
          }
        }
      }

      .control {
        .btn {
          width: 85.5vw;
          height: 12vw;
          line-height: 12vw;
          font-size: 3.6vw;
          text-align: center;
          margin: 2.4vw auto 0;
          cursor: pointer;
          border-radius: 0.4vw;

          &.type1 {
            background: #f3920d;
            color: #ffffff;
          }
          &.type2 {
            border: 0.1vw solid #f3920d;
            box-sizing: border-box;
            line-height: 11.8vw;
            color: #f3920d;
          }
        }
      }
    }
  }
}
</style>