konggang-city-miniprogram/pages/activity/activity_deatil.vue

<template>
  <view class="content">
    <view class="header">
      <view class="title-read">
        <view class="title">
          {{ model.title }}
        </view>
        <view class="read">阅读量 {{ model.read }}</view>
      </view>
      <view class="header-image">
        <image :src="model.url" alt="" />
      </view>
    </view>
    <view class="active-deatil">
      <ul>
        <li>
          <p class="name">活动时间</p>
          <p class="deatil-content">{{ model.date }}</p>
        </li>
        <li>
          <p class="name">活动类型</p>
          <p class="deatil-content">{{ model.type == 1 ? "线上" : "线下" }}</p>
        </li>
        <li>
          <p class="name">主办方</p>
          <p class="deatil-content">{{ model.way }}</p>
        </li>
      </ul>
    </view>
    <view class="rich">
      <activityRichCard :model="textModel" :isFold="true" />
    </view>
    <view class="share-box">
      <view class="share">
        <view class="shareCount">{{ model.share }}</view>
        <image src="../../static/share_icon.png"></image>
      </view>
      <view class="button"
        ><button
          @click="signUpActivity"
          :disabled="!(model.status == 0 && model.type == 2)"
          :class="{
            start: model.status == 0 && model.type == 2,
            begun: model.status == 1,
            ended: model.status == 2,
            falseStart: model.status == 0 && model.type == 1,
          }"
        >
          {{ model.activiteState }}
        </button></view
      >
      <!--         "status":"活动状态 0：待开始；1：已开始； 2：已结束
        "type":"活动类型 1:线上;2 线下"} -->
    </view>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
import activity_rich_card from "../policy/policy_rich_card";
export default {
  filters: {
    formDateTime(value) {
      if (value) {
        const time = new Date(value * 1000);
        const y = time.getFullYear();
        const m =
          time.getMonth() + 1 < 10
            ? "0" + (time.getMonth() + 1)
            : time.getMonth() + 1;
        const d = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
        // const h = time.getHours()
        // const mm = time.getMinutes();
        // const s = time.getSeconds();
        return y + "." + m + "." + d;
      } else {
        return "";
      }
    },
    formDateTimeSecond(value) {
      if (value) {
        const time = new Date(value * 1000);
        // const y = time.getFullYear();
        // const m = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
        // const d = time.getDate() < 10 ? '0' + time.getDate(): time.getDate();
        const h =
          time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
        const mm =
          time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
        return h + ":" + mm;
      } else {
        return "";
      }
    },
  },
  components: {
    activityRichCard: activity_rich_card,
  },
  data() {
    return {
      id: "",
      model: {
        title: "",
        read: 123,
        url: "",
        date: "",
        type: 1,
        status: 0,
        way: "",
        share: 0,
        activiteState: "",
      },
      textModel: {
        title: "活动内容",
        text:
          "<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;</strong>2021QQ名人赛第二季全明星王牌赛从开战至今便火爆出圈、收获超高关注度，明星嘉宾与主播联袂征战，激烈对抗燃爆整个电竞赛场；豪华的阵容加上新奇玩法，缔造全场高能的视觉盛宴！生而为战，精彩不断，如今第五期比赛余热未散，9月25日下午13：00的第六期比赛即将高能来袭！</p><p><br></p><p><strong>&nbsp;&nbsp;&nbsp;&nbsp;此外，在直播期间，还有Airpods pro、西伯利亚耳机、QQ年费黄钻、会员、绿钻以及白鹤梁神女，乞巧织情，战令币等多款礼品在直播间在线放送，一定不要错过咯~</strong></p><p>&nbsp;</p><p><strong>&nbsp;&nbsp;&nbsp;“奶味甜豆”张星特遇上“水系男孩”俞更寅！</strong></p><p>&nbsp;&nbsp;&nbsp;&nbsp;本次全明星王牌赛王者专场第六期到场的明星嘉宾是张星特与俞更寅，两位实力vocal男神将在峡谷相遇，开启实力峡谷对决！</p><p>&nbsp;&nbsp;&nbsp;&nbsp;本期红方阵营出战的是被称为“奶味甜豆”的张星特，舞台上的他用自己迷人的声音和灿烂的微笑收获了不少观众的青睐，这个像星星一样闪闪发光的男孩，在生活中也是一个爱撒娇的“小甜豆”哦，期待他这次可以在展示自己电竞实力的同时也能“萌翻峡谷”~</p><p>&nbsp;&nbsp;&nbsp;&nbsp;本期蓝方阵营出战的是被称为“水系男孩”的俞更寅，他凭着自己对音乐的热爱，坚定地踏上了追梦之旅，用自己天籁般的嗓音治愈着观众，创造着一个又一个奇迹，当这个无畏逐梦的男孩来到峡谷，势必会给我们创造无限惊喜！</p><p>&nbsp;&nbsp;&nbsp;&nbsp;两位实力vocal男神降临峡谷，不仅能欣赏他们精彩的游戏技术还能看到他们“彪歌”“彪高音”，一起期待吧！</p><p><br></p><p><br></p><p><strong>&nbsp;&nbsp;&nbsp;&nbsp;打野天花板清清vs 8国服主播菜咪，实力与人气之争！</strong></p><p>&nbsp;&nbsp;&nbsp;&nbsp;本期我们还邀请到了两位技术流主播清清和菜咪。其中清清搭档张星特作为红方阵营，而菜咪搭档俞更寅作为蓝方阵营。</p><p>&nbsp;&nbsp;&nbsp;&nbsp;作为拥有着国服最高战力曜的清清，一直是打野天花板的存在，这位教学殿堂级主播，素有“虎牙清清曜无敌”的美誉，其操作绝对值得一看；而拥有着双系统8国服的菜咪，一直凭借着自己超高的颜值和高超的辅助技术深受玩家喜爱，是人气爆火的实力派，其粉丝美称“菜咪不菜，峡谷打怪”！</p><p><br></p><p><br></p><p>&nbsp;&nbsp;&nbsp;&nbsp;除此之外，我们还邀请到了仙染、名辞、 汤汤、耀宇、乔妹等6位虎牙人气主播作为线上嘉宾，精兵强将在峡谷一决高下！</p><p>&nbsp;&nbsp;&nbsp;&nbsp;强强对决，到底红蓝双方谁能脱颖而出？记得关注9月25日下午13：00的2021QQ名人赛第二季全明星王牌赛第六期，届时将会为大家揭晓答案。</p><p>&nbsp;&nbsp;&nbsp;&nbsp;2021QQ名人赛－虎牙直播全明星联赛，作为一档王牌明星电竞对抗赛事，由腾讯QQ主办，QQ游戏中心、QQ空间、QQicon联合主办，由虎牙直播独家直播呈现，携手战略合作伙伴先知电竞打造的全明星电竞赛事。赛事以王者荣耀、和平精英等热门游戏为比赛项目，聚合众多人气明星及游戏KOL进行游戏竞技。青春热血，生而为战，王牌聚集，开战无敌！</p><p>&nbsp;&nbsp;&nbsp;&nbsp;明星嘉宾携手知名主播在峡谷相约对战，精彩刺激的红蓝对决，现场互动玩法升级，请持续关注2021QQ名人赛第二季全明星王牌赛！</p><p>&nbsp;</p>",
      },
    };
  },
  onLoad(op) {
    this.id = op.id;

    this.getActivityDeatil();
  },
  methods: {
    getActivityDeatil() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=activity&action=info_by_id&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        id: this.id,
      };
      //获取文章
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: postData,
        success: (res) => {
          if (res.data.code == 200) {
            console.log(res);
            let data = res.data.data;
            this.model.title = data.name;
            this.model.read =
              parseInt(data.base_read_count) + parseInt(data.real_read_count);
            this.model.url = getApp().globalData.shareUrl + data.pic_url;
            let arr = ["start_time", "end_time"];
            let ans = [];
            for (const item of arr) {
              let time = this.$options.filters["formDateTime"](data[item]);
              let timeSecond = this.$options.filters["formDateTimeSecond"](
                data[item]
              );
              ans.push(time + " " + timeSecond);
            }
            this.model.date = ans.join(" - ");
            this.model.type = data.type;
            this.model.status = data.status;
            this.model.way = data.sponsor;
            this.model.share =
              parseInt(data.real_repost_count) +
              parseInt(data.base_repost_count);
            if (data.status == 0) {
              if (data.type == 2) {
                this.model.activiteState = "我要参加";
              } else {
                this.model.activiteState = "活动待开始";
              }
            } else if (data.status == 1) {
              this.model.activiteState = "活动进行中";
            } else {
              this.model.activiteState = "活动已结束";
            }
          }
          this.getRich();
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    getRich() {
      uni.request({
        url:
          getApp().globalData.shareUrl +
          `content/activity/${Math.floor(this.id / 1000)}/${this.id}.html`,
        method: "GET",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },

        success: (res) => {
          console.log(res);
          if (res.statusCode === 200) {
            this.model.artical = res.data;
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    signUpActivity() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=activity&action=active&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        openId: getApp().globalData.open_id,
        id: this.id,
      };
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: postData,
        success: (res) => {
          if(res.data.code==200){
            console.log("报名成功");
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    height: 150rpx;
    padding: 20rpx;

    .title-read {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .title {
        font-weight: 600;
        letter-spacing: 2rpx;
        font-size: 32rpx;
      }
      .read {
        margin-top: 20rpx;
        font-size: 22rpx;
        color: $uni-text-color-grey;
      }
    }
    .header-image {
      height: 100%;
      width: 50%;
      image {
        width: 100%;
        height: 100%;
        border-radius: 10%;
      }
    }
  }
  .active-deatil {
    padding: 20rpx;
    ul {
      padding: 30rpx;
      box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
      border-radius: 32rpx;
      li {
        margin-bottom: 30rpx;
        list-style: none;
        .name {
          margin-bottom: 10rpx;
          font-size: 30rpx;
          color: $uni-text-color-grey;
        }
        .deatil-content {
          font-size: 27rpx;
        }
      }
    }
  }
  .rich {
    margin-bottom: 150rpx;
    padding: 20rpx;
  }
  .share-box {
    box-sizing: border-box;
    height: 150rpx;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    position: fixed;
    bottom: 0;
    display: flex;
    background: #ffffff;
    .share {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50rpx;
      height: 50rpx;
      position: relative;
      image {
        width: 100%;
        height: 100%;
      }
      .shareCount {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -30%;
        right: -30%;
        color: #ffffff;
        height: 30rpx;
        width: 30rpx;
        padding: 3rpx;
        font-size: 16rpx;
        border-radius: 50%;
        background: #fe3637;
      }
    }
    .button {
      height: 100rpx;
      width: 70%;
      display: flex;
      justify-content: center;
      button {
        width: 80%;
        height: 90%;
        border: 1px solid;
        outline: none;
        background: none;
      }
      .start {
        //待开始
        background-color: #00a8ea;
        color: #ffffff;
        border-color: none;
      }
      .begun {
        //已开始
        border-color: #00a8ea;
        color: #00a8ea;
      }
      .ended {
        //已结束
        color: #aaaaaa;
        border-color: #aaaaaa;
      }
      .falseStart {
        color: #70b603;
        border-color: #70b603;
      }
    }
  }
}
</style>