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 class="desc">
            <div>
              “提高免疫力，我有黑科技”ROSS首届抖音任务挑战赛火热来袭，抖音发布符合任务的优质视频，ROSS认证通系统报名参加！
            </div>
            <div>
              欢迎各位美业精英参与抖音话题&nbsp;<b>#ross发烧疗法</b>，分享你提高免疫力的秘籍，线上PK赢——50w+本地KOL网红探店种草！！
            </div>
          </dd>
          <dt><div>活动时间</div></dt>
          <dd>
            <div>参赛时间：2022.12.28-2023.02.05</div>
            <div>领奖时间：2023.02.20-2023.02.28</div>
          </dd>
          <dt><div>活动奖励</div></dt>
          <dd>
            <div>一等奖：视频点赞NO.1，50w+本地KOL网红探店种草；</div>
            <div>二等奖：视频点赞NO.2，30w+本地KOL网红探店种草；</div>
            <div>三等奖：视频点赞NO.3，10w+本地KOL网红探店种草；</div>
            <div>参与奖：成功发布3个带ROSS相关素材的视频，获2000元导胶一瓶；</div>
            <div class="link">点击链接获取素材：<a href="https://zp.caimei365.com/12/ross/docs/1046"
                >https://zp.caimei365.com/12/ross/docs/1046</a
              >
              &gt;
            </div>
          </dd>
          <dt><div>参与方式</div></dt>
          <dd class="join">
            <div>
              第一步：通过抖音个人账号分享原创视频添加话题 #ross发烧疗法，@ROSS柔斯 @采美365（以上条件缺一不可）；
            </div>
            <div>第二步：进入ROSS任务挑战赛界面，点击报名参赛并上传视频链接；</div>
          </dd>
          <dt><div>评奖规则</div></dt>
          <dd class="p-rules">
            <div>1、参赛作品排名评奖以最终点赞量数据为准，截止时间为2023年2月05日17点59分；</div>
            <div>2、2023年2月20日起颁发奖品，期间以抖音私信、短信发送和电话的形式通知获奖用户领取奖励；</div>
            <div>3、2023年2月28日前抖音私信无回复者视为自动放弃奖项；</div>
          </dd>
          <dt><div>参与规则</div></dt>
          <dd class="rules">
            <div>1、作品要求必须原创，画质清晰、内容积极向上，视频时长控制在90s内；</div>
            <div>2、发布视频带话题“ross发烧疗法”并@ROSS柔斯和@采美365网；</div>
            <div>3、视频内容不违反抖音平台规则；</div>
          </dd>
          <dt><div>注意事项</div></dt>
          <dd class="message">
            <div>1、参赛对象——全国从事美容行业的门店；</div>
            <div>2、一到三等奖项以最高点赞量的视频作为统计，每个ID限领一次；</div>
            <div>3、活动最终解释权归主办方所有；</div>
            <div>4、如有疑问，可咨询官方客服微信：cmdjt01；</div>
          </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: url(~assets/theme-images/ross/pc_activity_page_bg.png);
    background-size:cover;
    .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: #FFFFFF;
        }
        .more {
          font-size: 14px;
          color: #FFFFFF;
          cursor: pointer;

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

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

        .title {
          font-size: 40px;
          color: #FFF;
          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: 890px;
          margin: 0 auto;
          dt {
            font-size: 30px;
            text-align: center;
            margin-bottom: 24px;

            div {
              line-height: 24px;
              display: inline-block;
              color:#FFFFFF;
              position:relative;
              &:before{
                content:'';
                width:117px;
                height:5px;
                background: linear-gradient(83deg, #DF1EFC 0%, #14C2ED 50%, #1430FF 100%);
                position:absolute;
                bottom:-5px;
                left:3px;
              }
            }
          }
          dd {
            font-size: 16px;
            color: #ffffff;
            text-align: center;
            line-height: 32px;
            margin-bottom: 64px;

            a {
              color: #f3920d;
            }

            &.desc {
              text-align: center;
            }

            &.join {
              width: 830px;
              text-align: left;
              margin: 0 auto 64px;
            }
            &.p-rules {
              width: 700px;
              text-align: left;
              margin: 0 auto 64px;
            }
            &.rules {
              width: 536px;
              text-align: left;
              margin: 0 auto 64px;
            }
            &.message {
              width: 476px;
              text-align: left;
              margin: 0 auto 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;
    background: url(~assets/theme-images/ross/h5_activity_page_bg.png);
    background-size:cover;
    .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: #fff;
        }
        .more {
          font-size: 14px;
          color: #FFFFFF;
          cursor: pointer;

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

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

        .title {
          font-size: 5vw;
          color: #FFF;
          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;
              color:#FFFFFF;
              position:relative;
              &:before{
                content:'';
                width:18.2vw;
                height:0.8vw;
                background: linear-gradient(83deg, #DF1EFC 0%, #14C2ED 50%, #1430FF 100%);
                position:absolute;
                bottom:-1vw;
                left:0.5vw;
              }
            }
          }
          dd {
            font-size: 3.4vw;
            color: #FFF;
            text-align: justify;
            line-height: 5.6vw;
            margin-bottom: 8.8vw;

            a {
              color: #f3920d;
            }
            .link{
              text-align: left;
            }
            &.desc {
              text-align: center;
            }

            &.join {
              text-align: left;
            }
            &.p-rules {
              text-align: left;
            }
            &.rules {
              text-align: left;
            }
            &.message {
              text-align: left;
            }
          }
        }
      }

      .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>