android-cloud-H5/pages/activity/invite-user/fission.vue

<template>
  <v-container class="invite-user" fluid :class="`bg-${type}`">
    <div class="rule" @click="show = true">规则</div>
    <activity-invite-user-box class="box1">
      <template #title>参与步骤</template>
      <v-img class="cybz-content" :src="returnContent ? returnContent.img : null" />
      <div class="cybz-content-text">
        <div class="cybz-content-text-item">分享好友</div>
        <div class="cybz-content-text-item">邀请好友下单</div>
        <div class="cybz-content-text-item">
          {{ returnContent ? returnContent.content : '' }}
        </div>
      </div>
      <v-btn class="share-button" rounded @click="share()">
        <template v-if="!($userAgent.isSzx || $userAgent.isSzxBrowser)">赶紧分享你的好友，送云机时长</template>
        <template v-else>分享好友赚云机时长</template>
      </v-btn>
      <div class="dqdj-content">
        <div class="dqdj-item">
          <div class="dqdj-title">{{ level.currentLevelName }}</div>
          <div class="dqdj-text">当前等级</div>
        </div>
        <div class="dqdj-content-line"></div>
        <div class="dqdj-item">
          <div class="dqdj-title">{{ level.shareFriendCount }}</div>
          <div class="dqdj-text">分享好友数</div>
        </div>
        <div class="dqdj-content-line"></div>
        <div class="dqdj-item">
          <div class="dqdj-title">{{ level.boostValue }}</div>
          <div class="dqdj-text">累计助力值</div>
        </div>
      </div>
      <div class="progress">
        <div class="progress-box" :style="`width: ${width}px`"></div>
        <div class="progress-list">
          <div v-for="item in level.levelAwardDetails" :key="item.goodsId" class="fnc">
            <img v-if="item.status === 0" class="wh38" src="~/assets/image/activity/invite-user/box-gray.png" alt="">
            <img v-else-if="item.status === 1" class="wh38" src="~/assets/image/activity/invite-user/box-close.png" alt="" @click="receiveLevelAward(item.goodsId)">
            <img v-else-if="item.status === 2" class="wh38" src="~/assets/image/activity/invite-user/box-open.png" alt="">
            <span class="progress-text">{{ item.levelName }}</span>
          </div>
        </div>
      </div>
    </activity-invite-user-box>
    <div v-if="type === 2" :class="current ? 'box3 tab2' : 'box3'">
      <div class="tab">
        <div class="tab-item" @click="current = 0">{{ current === 1 ? '我的奖励' : '' }}</div>
        <div class="tab-item" @click="current = 1">{{ current === 1 ? '排行榜' : '' }}</div>
      </div>
      <div v-show="current === 0">
        <div v-if="myActivationCode.length" class="code-table">
          <div class="table-header">
            <table class="w-full">
              <colgroup>
                <col class="time-col" />
                <col class="code-col" />
                <col class="award-col" />
                <col class="status-col" />
              </colgroup>
              <thead class="text-left text-sm whitespace-nowrap break-normal">
                <tr>
                  <th class="text-center">获取的时间</th>
                  <th class="text-center">激活码编号</th>
                  <th class="text-center">奖励内容</th>
                  <th class="text-center">使用状态</th>
                </tr>
              </thead>
            </table>
          </div>
          <div class="table-body">
            <table class="w-full">
              <colgroup>
                <col class="time-col" />
                <col class="code-col" />
                <col class="award-col" />
                <col class="status-col" />
              </colgroup>
              <tbody class="text-xs">
                <tr v-for="(item, index) in myActivationCode" :key="index">
                  <td class="whitespace-nowrap break-normal text-center">
                    {{ item.createTime | formatDate('MM月DD日 HH:mm') }}
                  </td>
                  <td class="whitespace-nowrap break-normal text-center">
                    <div class="flex">
                      <span class="font-mono">{{ item.activationCode | activationCodeMask }} </span><span class="mx-1">|</span>
                      <v-btn text small color="#FF9616" class="copy-btn" @click="copyCode(item)">复制</v-btn>
                    </div>
                  </td>
                  <td class="whitespace-nowrap break-normal text-center">
                    {{ item.awardStr }}
                  </td>
                  <td class="whitespace-nowrap break-normal text-center">
                    <span :style="item.activationUse ? 'color: #FF1D02' : '#333333'">{{ ['未使用', '已使用', '已过期'][item.activationUse] }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
            <div v-if="myActivationCode.length" v-intersect.quiet="codeLoadMoreIntersect" class="flex item-center justify-center">
              <v-btn :loading="codeIsLoading" text small>
                <template v-if="codeIsLoading">加载中</template>
                <template v-else-if="codeHasMore">加载更多</template>
                <template v-else>没有更多</template>
              </v-btn>
            </div>
          </div>
        </div>
        <div v-else class="fwc">
          <img src="~/assets/image/activity/invite-user/noReward@2x.png" alt="">
        </div>
      </div>
      <div v-show="current === 1">
        <div v-if="levelAwardRankings.length" class="code-table">
          <div class="mylevel">
            <div class="fcw">
              <span class="c8F8F8F">当前排名</span>
              <span>{{ currentRanking > 0 ? currentRanking : '暂未上榜' }}</span>
            </div>
            <div class="fcw">
              <span class="c8F8F8F">本轮助力值</span>
              <span>{{ boostValue }}</span>
            </div>
            <div class="fcw">
              <span class="c8F8F8F">距上一名</span>
              <span>{{ preRanking > 0 ? preRanking : '/' }}</span>
            </div>
            <div class="fcw">
              <span class="c8F8F8F">距本轮排行结束时间</span>
              <span>
                <van-count-down :time="currentEndTime * 1000" format="DD 天 HH 时 mm 分 ss 秒" />
              </span>
            </div>
          </div>
          <div class="table-header">
            <table class="w-full">
              <colgroup>
                <col class="num-col" />
                <col class="user-col" />
                <col class="friend-col" />
                <col class="award-col" />
              </colgroup>
              <thead class="text-sm whitespace-nowrap break-normal">
                <tr>
                  <th class="text-center">排名</th>
                  <th class="text-center">用户</th>
                  <th class="text-center">好友助力值</th>
                  <th class="text-center">排名奖励</th>
                </tr>
              </thead>
            </table>
          </div>
          <div class="table-body">
            <table class="w-full">
              <colgroup>
                <col class="num-col" />
                <col class="user-col" />
                <col class="friend-col" />
                <col class="award-col" />
              </colgroup>
              <tbody class="text-xs">
                <tr v-for="(item, index) in levelAwardRankings" :key="index">
                  <td class="whitespace-nowrap break-normal text-center">
                    <img v-if="item.ranking === 1" class="w24h28" src="~/assets/image/activity/invite-user/no1.png" alt="">
                    <img v-else-if="item.ranking === 2" class="w24h28" src="~/assets/image/activity/invite-user/no2.png" alt="">
                    <img v-else-if="item.ranking === 3" class="w24h28" src="~/assets/image/activity/invite-user/no3.png" alt="">
                    <span v-else>{{ item.ranking }}</span>
                  </td>
                  <td class="whitespace-nowrap break-normal text-center">
                    {{ item.userName }}
                  </td>
                  <td class="whitespace-nowrap break-normal text-center">
                    {{ item.boostValue }}
                  </td>
                  <td class="whitespace-nowrap break-normal text-center">
                    {{ item.awardStr }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div v-else class="fwc">
          <img src="~/assets/image/activity/invite-user/nodata.png" alt="">
        </div>
      </div>
    </div>
    <img class="w373h192" src="~/assets/image/activity/invite-user/rule2.png" alt="">
    <van-popup v-model="show" style="background: transparent;padding-bottom: 60px;width: 100%;">
      <activity-invite-user-box class="box4">
        <template #title>活动规则</template>
        <div class="text-sm" v-html="activityRules"></div>
      </activity-invite-user-box>
      <van-icon name="close" class="close1" color="#939393" @click="show = false;" />
    </van-popup>
  </v-container>
</template>

<script>
import { Toast } from 'vant';
export default {
  auth: false,
  name: 'Fission',
  filters: {
    activationCodeMask(value) {
      return value.replace(/(.{2})(.*)(.{2}$)/, '$1**$3');
    },
    timeStamp(StatusMinute) {
      const day = parseInt(StatusMinute / 60 / 60 / 24);
      const hour = parseInt((StatusMinute / 60 / 60) % 24);
      const min = parseInt(StatusMinute / 60 % 60);
      StatusMinute = '';
      if (day > 0) {
        StatusMinute = day + '天';
      }
      if (hour > 0) {
        StatusMinute += hour + '小时';
      }
      if (min > 0) {
        StatusMinute += parseFloat(min) + '分钟';
      }
      return StatusMinute;
    }
  },
  data() {
    return {
      show: false,
      current: 0,
      data: {
        todayIncomeStarCoin: 0,
        totalIncomeStarCoin: 0,
        todayBuyOrderCount: 0,
        totalBuyOrderCount: 0,
        todayBuyOrderSuccessCount: 0,
        totalBuyOrderSuccessCount: 0,
        withdrawStarCoinNum: 0,
        inviteUserName: null,
        activityId: null,
        status: 0,
        type: 2
      },
      level: {
        currentLevelName: '',
        activityId: '',
        levelAwardDetails: [],
        shareFriendCount: 0,
        boostValue: 0
      },
      activityRules: '',
      myActivationCode: [],
      levelAwardRankings: [],
      myCodeFrom: {
        activityId: null,
        pageNum: 1,
        pageSize: 8,
      },
      codeTotal: -1,
      codeIsLoading: false,
      client: 1,
      token: '',
      width: 0,
      boostValue: 0,
      currentEndTime: 0,
      currentRanking: 0,
      preRanking: 0
    };
  },
  async fetch() {
    // 页面初始化后触发
    try {
      this.token = this.$route.query.token;
      await this.getActiveInfo();
      this.$native.setShareInfo(this.shareInfo);
      await Promise.all([
        this.getActivityRules(),
        this.type === 2 && this.getMyActivationCode(this.myCodeFrom),
        this.myCodeFrom.activityId && this.getRanking({ activityId: this.myCodeFrom.activityId })
      ]);
    } catch (error) {
      Toast({
        message: error.message,
        duration: 4000
      });
    }
    if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
      this.client = 1;
    } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
      this.client = 2;
    } else if (this.$userAgent.isMiniProgram) {
      this.client = 5;
    } else {
      this.client = 7;
    }
  },
  head: {
    title: '邀请好友'
  },
  computed: {
    returnContent() {
      return {
        1: {
          img: require('@/assets/image/activity/invite-user/cybz-content@2x.png'),
          content: '返星币换现金',
        },
        2: {
          img: require('@/assets/image/activity/invite-user/cybz-content-2@2x.png'),
          content: '云机时长奖励',
        },
        3: {
          img: require('@/assets/image/activity/invite-user/cybz-content-3@2x.png'),
          content: '返积分',
        },
      }[this.type];
    },
    codeHasMore() {
      return (
        this.codeTotal < 0 ||
        this.myCodeFrom.pageNum * this.myCodeFrom.pageSize < this.codeTotal
      );
    },
    dataList() {
      switch (this.type) {
        case 1: {
          return [
            { label: '邀请用户总数', value: this.data.totalPromoter },
            { label: '购买总订单数', value: this.data.totalBuyOrderCount }
          ];
        }
        case 2: {
          return [
            { label: '邀请用户总数', value: this.data.totalPromoter },
            { label: '购买总订单数', value: this.data.totalBuyOrderCount }
          ];
        }
        case 3: {
          return [
            { label: '邀请用户总数', value: this.data.totalPromoter },
            { label: '购买总订单数', value: this.data.totalBuyOrderCount }
          ];
        }
        default: {
          return [];
        }
      }
    },
    type() {
      return 2;
    },
    shareUrl() {
      return (
        location.origin +
        this.$router.resolve({
          path: '/activity/invite-user/register-fission/',
          query: {
            invitationUserName: this.data.inviteUserName,
            activityId: this.data.activityId,
            type: this.type,
          },
        }).href
      );
    },
    shareInfo() {
      if (this.$userAgent.isMiniProgram) {
        return {
          title: '双子星APP',
          path: '/pages/home/home',
          imgUrl: location.origin + require('~/assets/image/logo.png'),
        };
      }
      return {
        title: '双子星云手机',
        desc: `畅玩“原神”“幻塔”，24小时在线，不限下载流量的手机`,
        link: this.shareUrl,
        imgUrl: location.origin + require('~/assets/image/logo.png'),
      };
    }
  },
  mounted() {
    this.makePoint('activity_Share_PV')
    this.makePoint('activity_Share_UV')
  },
  methods: {
    async receiveLevelAward(goodsId) {
      try {
        const res = await this.$axios.$post('/activity/v1/level/award/receiveLevelAward', { activityId: this.myCodeFrom.activityId, goodsId }, { headers: { Authorization: this.token } });
        Toast({
          message: res.msg,
          position: 'top'
        });
        if (this.myCodeFrom.activityId) {
          await this.myLevelAward();
        }
        this.myCodeFrom.pageNum = 1;
        this.myActivationCode = [];
        this.getMyActivationCode(this.myCodeFrom);
        if (this.myCodeFrom.activityId) {
          this.getRanking({ activityId: this.myCodeFrom.activityId });
        }
      } catch (err) {
        Toast({
          message: err.message,
          position: 'top'
        });
      }
    },
    async myLevelAward() {
      const res = await this.$axios.$get(`/activity/v1/level/award/myLevelAward?activityId=${this.myCodeFrom.activityId}`, { headers: { Authorization: this.token } });
      this.level = res.data;
      if (this.level.levelAwardDetails) {
        this.width = 0;
        const levelLength = 280 / (this.level.levelAwardDetails.length - 1)
        this.level.levelAwardDetails.forEach((item, index) => {
          if (item.status > 0) {
            if (index > 0) {
              this.width += levelLength
            }
            if (index === 0 || index === this.level.levelAwardDetails.length - 1) {
              this.width += 14
            }
          }
        })
      }
    },
    async getActiveInfo() {
      const res = await this.$axios.$get('/activity/v1/inviteUser/orderRelation/starCoinOverview', { headers: { Authorization: this.token } });
      this.data = res.data;
      this.myCodeFrom.activityId = res.data.activityId;
      if (this.myCodeFrom.activityId) {
        await this.myLevelAward();
      }
    },
    async getMyActivationCode(params) {
      try {
        this.codeIsLoading = true;
        const res = await this.$axios.$get('/activity/v1/inviteUser/orderRelation/myActivationCode', { params, headers: { Authorization: this.token } });
        this.codeTotal = res.data.total;

        this.myActivationCode.push(
          ...(res.data.list ?? [])
        );
        this.myCodeFrom = params;
      } finally {
        this.codeIsLoading = false;
      }
    },
    async getRanking(params) {
      try {
        this.codeIsLoading = true;
        const res = await this.$axios.$get('/activity/v1/level/award/ranking', { params, headers: { Authorization: this.token } });
        this.boostValue = res.data.boostValue
        this.currentEndTime = res.data.currentEndTime
        this.currentRanking = res.data.currentRanking
        this.preRanking = res.data.preRanking
        this.levelAwardRankings = res.data.levelAwardRankings;
      } finally {
        this.codeIsLoading = false;
      }
    },
    async share() {
      if (this.data.status !== 1) {
        if (this.data.status === 0) {
          Toast({
            message: '当前活动已过期',
            position: 'top'
          });
          return
        }
        if (this.data.status === 2) {
          Toast({
            message: '当前活动未开启',
            position: 'top'
          });
          return
        }
        if (this.data.status === 3) {
          Toast({
            message: '当前活动已结束',
            position: 'top'
          });
          return
        }
        Toast({
          message: '未知活动状态',
          position: 'top'
        });
        return
      }

      this.$tongji.trackEvent('活动', '分享', '', 0);
      if (this.$userAgent.isSzx || this.$userAgent.isSzxBrowser) {
        // app环境
        this.$native.share(this.shareInfo);
        this.makePoint('activity_Share_分享好友按钮');
      } else {
        // 浏览器环境
        await this.$native.clipboard.writeText(`${this.shareUrl} 双子星云手机`);
        // throw new Error('1231');
        this.$toast.success('链接复制成功');
        this.makePoint('activity_Share_复制链接');
      }
    },
    makePoint(positionButton) {
      this.$axios.$post('/public/v5/buriedPointRecord/reportRecords', [
        {
          client: this.client,
          eventCode: '28_分享活动',
          userName: this.$auth.user.username,
          positionButton,
          operationTime: this.getCurrentTime(),
          phoneNumber: this.$auth.user.phone,
          deviceId: ''
        },
      ]);
    },
    getCurrentTime() {
      const date = new Date(); // 当前时间
      const year = date.getFullYear() // 年
      const month = this.repair(date.getMonth() + 1); // 月
      const day = this.repair(date.getDate()); // 日
      const hour = this.repair(date.getHours()); // 时
      const minute = this.repair(date.getMinutes()); // 分
      const second = this.repair(date.getSeconds()); // 秒
      // 当前时间 
      const curTime = year + "-" + month + "-" + day +
        " " + hour + ":" + minute + ":" + second;
      return curTime;
    },
    repair(i) {
      if (i >= 0 && i <= 9) {
        return "0" + i;
      } else {
        return i;
      }
    },
    async getActivityRules() {
      const agreementCoding = {
        1: 'iuserrules01',
        2: 'iuserrules02',
        3: 'iuserrules03',
      }[this.type];
      if (agreementCoding) {
        const res = await this.$axios.$get(
          '/public/v4/agreement/content/getContentByType',
          {
            params: {
              agreementCoding,
              type: 1,
            },
          },
        );

        this.activityRules = res.data.content
          .replace(/[\d\D]*<body>([\d\D]+)<\/body>[\d\D]*/i, '$1')
          .replace(/<div class="phone-container">([\d\D]+)<\/div>/g, '$1');
      }
    },
    async copyCode(item) {
      await this.$native.clipboard.writeText(item.activationCode);
      Toast({
        message: '复制激活码，请在【我的-兑换中心】兑换'
      });
      this.makePoint('activity_Share_激活码复制')
    },
    codeLoadMoreIntersect(event) {
      if (event[0].isIntersecting && this.codeHasMore && !this.codeIsLoading) {
        this.getMyActivationCode({
          ...this.myCodeFrom,
          pageNum: this.myCodeFrom.pageNum + 1,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.w373h192 {
  width: 373px;
  height: 192px;
  display: block;
  margin: 17px auto 0;
}
.fcw {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #333333;
}

.c8F8F8F {
  color: #8F8F8F;
  margin-bottom: 8px;
}

.mylevel {
  width: 358px;
  height: 68px;
  background: #FFFFFF;
  box-shadow: 0px 2px 16px 0px rgba(243, 93, 67, 0.22);
  border-radius: 6px;
  margin-left: -12px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.rule {
  width: 24px;
  height: 56px;
  line-height: 28px;
  background: rgba(0, 0, 0, 0.19);
  border-radius: 6px 0px 0px 6px;
  font-size: 15px;
  font-weight: 400;
  color: #FFFFFF;
  position: absolute;
  right: 0;
  top: 28px;
  text-align: center;
}

.close1 {
  font-size: 30px;
  text-align: center;
  display: block;
}

.fwc {
  text-align: center;

  img {
    width: 75px;
    height: 83px;
    margin-top: 120px;
  }
}

.invite-user {
  color: #333;
  background-size: 100% auto;
  overflow: hidden;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 30px);
  background-color: #F67350;

  &.bg-1 {
    background-image: url('~/assets/image/activity/invite-user/bg@2x.png');
  }

  &.bg-2 {
    background-image: url('~/assets/image/activity/invite-user/bg-6@2x.png');
  }

  &.bg-3 {
    background-image: url('~/assets/image/activity/invite-user/bg-3@2x.png');
  }
}

.box1 {
  margin-top: 460px;

  .cybz-content {
    width: 305px;
    height: 75px;
    margin: auto;
    display: block;
  }

  .cybz-content-text {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 12px;
    color: #333;

    .cybz-content-text-item {
      text-align: center;
    }
  }

  .share-button {
    display: block;
    margin: auto;
    width: 302px !important;
    height: 62px !important;
    background-image: url('~/assets/image/activity/invite-user/share-button@2x.png');
    background-size: 100% 100%;
    margin-top: 24px;
    color: #dd1b0d;
    font-size: 18px;
    font-weight: bold;
  }

  .dqdj-content {
    width: 308px;
    height: 71px;
    background: #f9f1f5;
    border-radius: 6px;
    margin: 15px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .dqdj-content-line {
      width: 1px;
      height: 32px;
      background: #ff1d02;
      opacity: 0.1;
    }

    .dqdj-item {
      width: 96px;
      text-align: center;
    }

    .dqdj-title {
      font-size: 14px;
      font-weight: 600;
      color: #ff1d02;
      line-height: 20px;
      margin-bottom: 3px;
    }

    .dqdj-text {
      font-size: 12px;
      font-weight: 400;
      color: #333333;
      line-height: 17px;
    }
  }

  .progress {
    width: 308px;
    height: 8px;
    background: #e8e8e8;
    border-radius: 4px;
    margin: 34px auto 33px;
    position: relative;

    .progress-box {
      height: 8px;
      background: linear-gradient(270deg, #ff8a00 0%, #ff4200 100%);
      border-radius: 4px;
      position: absolute;
      top: 0;
      left: 0;
    }

    .wh38 {
      width: 38px;
      height: 38px;
    }

    .fnc {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .progress-text {
      font-size: 12px;
      color: #8f8f8f;
      line-height: 17px;
      margin-top: 5px;
    }

    .progress-list {
      width: 298px;
      position: absolute;
      left: 5px;
      top: -19px;
      display: flex;
      justify-content: space-between;
    }
  }
}

.box2 {
  .value {
    color: #ff6600;
  }

  ::v-deep .box-main {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.box3 {
  width: 345px;
  height: 523px;
  margin: 25px auto 0;
  background: url('~/assets/image/activity/invite-user/box2@2x.png');
  background-size: 100% 100%;
  padding: 0 4px;
  box-sizing: border-box;

  &.tab2 {
    background: url('~/assets/image/activity/invite-user/box@2x.png') !important;
    background-size: 100% 100% !important;
    height: 627px !important;
  }

  .tab {
    display: flex;
    width: 307px;
    justify-content: space-between;
    margin: 0 auto;

    .tab-item {
      width: 146px;
      height: 44px;
      text-align: center;
      line-height: 44px;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
    }
  }

  ::v-deep .box-main {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.code-table {
  .table-body {
    max-height: 430px;
    overflow-y: auto;
  }

  .time-col {
    width: 105px;
  }

  .code-col {
    width: 94px;
  }

  .award-col {
    width: 85px;
  }

  .status-col {
    width: 60px;
  }

  .num-col {
    width: 53px;
    text-align: center;
  }

  .user-col {
    width: 92px;
    text-align: center;
  }

  .friend-col {
    width: 85px;
    text-align: center;
  }

  .award-col {
    width: 96px;
    text-align: center;
  }

  tr {
    height: 40px;
    color: #8F8F8F;
  }

  td {
    height: 40px;
    color: #333;
  }

  .copy-btn {
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }
}

.box4::v-deep .box-main {
  padding-left: 10px;
  padding-right: 10px;
}

.table-header {
  margin: 0 2px;
  background: #F9F1F5;
}

.w24h28 {
  width: 24px;
  height: 28px;
}
</style>