HSW_WX/pages/subPackages/parkActivities/detail.vue

<template>
  <div class="detail">
    <div class="detail-body">
      <!-- <div class="img-text">
        <img :src="activityDetail.annexArray[0]" alt="" />
      </div> -->

      <div class="collect-part">
        <div class="normal-tip by y-bg" v-if="activityDetail.registrationStatus === '1'">
          报名中
        </div>
        <div class="normal-tip by h-bg" v-else>报名已结束</div>
        <div class="right">
          <span class="num">{{ !activityDetail.partakeNumber ? 0 : activityDetail.partakeNumber }}人参与</span>
          <div class="icon-collect" @click="changeCollectorsStatus()">
            <i :class="[
              'iconfont icon-wujiaoxingxingxingshoucangdianji',
              active && 'blue',
            ]"></i>
          </div>
        </div>
      </div>

      <div class="tel-part">
        <div class="tel-name">联系电话</div>
        <TelNum :num="activityDetail.contactPhone" />
      </div>

      <div class="info-part">
        <div class="info-item">
          <div class="custom-item-tit">
            <span class="tit">活动名称</span>
          </div>
          <div class="text">{{ activityDetail.activityName }}</div>
        </div>
        <div class="info-item">
          <div class="custom-item-tit">
            <span class="tit">活动举办</span>
          </div>
          <div class="text">{{ activityDetail.activityHold }}</div>
        </div>
        <div class="info-item">
          <div class="custom-item-tit"><span class="tit">活动详情</span></div>
          <rich-text class="text" :nodes="activityDetail.activityContent"></rich-text>
          <img v-for="item in imageList" :src="item" alt="" style="    max-width: 100%;">
          <!--          <image style="max-width:100%;" src="https://hswkxc.idea-sf.com/gardenTestApi/FileController/download/1402691710487625728">-->
          <!--          <image style="width:120rpx;height:120rpx;" src="https://hswkxc.idea-sf.com/gardenTestApi/FileController/download/1403409204810612736"></image>-->
        </div>

        <div class="info-item">
          <div class="custom-item-tit"><span class="tit">活动时间</span></div>
          <div class="text">
            {{ activityDetail.activityStartTime }} —
            {{ activityDetail.activityEndTime }}
          </div>
        </div>

        <div class="info-item">
          <div class="custom-item-tit"><span class="tit">活动地址</span></div>
          <div class="text">
            <span class="add">{{ activityDetail.activityAddress }}</span>
            <!--            <span class="dh" @click="goAddress(activityDetail.activityAddress)">导航</span>-->
          </div>
        </div>

        <!--        <div class="info-item">-->
        <!--          <div class="custom-item-tit"><span class="tit">报名条件</span></div>-->
        <!--          <div class="text">{{ activityDetail.registrationConditions }}</div>-->
        <!--        </div>-->

        <div class="info-item">
          <div class="custom-item-tit"><span class="tit">报名时间</span></div>
          <div class="text">
            {{ activityDetail.registrationStartTime }} —
            {{ activityDetail.registrationEndTime }}
          </div>
        </div>
        <div class="info-item">
          <div class="custom-item-tit"><span class="tit">活动参与</span></div>
          <div class="text">还有 {{ number }} 个名额</div>
        </div>
        <div class="info-item uploadBox">
          <div class="custom-item-tit"><span class="tit">附件查看</span></div>
          <div class="text" style="16rpx 0px">
            <div v-for="item in activityDetail.activityFile" :key="item.uid" @click="openFile(item.url)">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="but-bottom" @click="getApply()" :signInfo="signInfo" v-if="signInfo.signInStatus == 1">
      到场签到
    </div>
  </div>
</template>

<script>
import TelNum from "../../subPackages/components/tel-number";

import {
  getActivityById1,
  clickCollect,
  getUserLocalStorageInfo,
} from "@/js_sdk/http";
export default {
  components: {
    TelNum,
  },

  data() {
    return {
      signInfo: {},
      signInCode: "",
      active: false,
      id: "",
      activityDetail: {
        referenceId: "",
      },
      number: 0,
      imageList: []
    };
  },

  onLoad(option) {
    // this.getScanCode();
    console.log("option", option.id);
    console.log(getUserLocalStorageInfo().user.id)
    this.id = option.id;
    this.getActivityById1();

  },

  methods: {
    openFile(url) {
      uni.downloadFile({

        url: url, // 网络文档地址
        success: (data) => {
          if (data.statusCode === 200) {
            uni.saveFile({
              tempFilePath: data.tempFilePath, //临时路径
              success: function (res) {
                // 保存路径
                console.log(res);
                uni.openDocument({
                  showMenu: true,
                  filePath: res.savedFilePath,
                  success: function (res) {
                    console.log("res", res);
                  },
                  fail: function (error) {
                    console.log(error);
                    wx.previewImage({
                      current: "", // 当前显示图片的http链接
                      urls: [url], // 需要预览的图片http链接列表
                    });
                  },
                });
              },
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            title: "失败请重新下载",
          });
        },
      });
    },
    extractImagePathsFromString(str) {
      const regex = /<img[^>]+src="([^">]+)"/g;
      const paths = [];
      let match;

      while ((match = regex.exec(str)) !== null) {
        paths.push(match[1]);
      }

      return paths;
    },

    getActivityById1() {
      const _this = this;
      getActivityById1(this.id, "SCNjNSP7LJ9aarv1cNw", getUserLocalStorageInfo().user.id).then((res) => {
        if (res.data) {
          if (res.data.activityFile) {
            const files = JSON.parse(res.data.activityFile);
            if (files && files.length) {
              _this.fileList2 = _this.fileList2 ? _this.fileList2 : [];
              files.forEach((item) => {
                console.log("_this.fileList2", _this.fileList2);
                console.log(item);
                _this.fileList2.push({
                  url: item.url,
                  id: item.id,
                });
              });
            }
          }
          _this.activityDetail = res.data;
          _this.activityDetail.activityFile = JSON.parse(res.data.activityFile);
          console.log(
            "_this.activityDetail.activityFile",
            _this.activityDetail.activityFile
          );
          // let  activityContent=
          //   res.data.activityContent.replaceAll(
          //     "<img",
          //     `<image style="width:120rpx;height:120rpx;"`
          //   );
          // activityContent=activityContent.replaceAll(
          //     "</figure>",
          //     `</image></figure>`
          // );
          console.log()
          this.imageList = this.extractImagePathsFromString(_this.activityDetail.activityContent)
          _this.activityDetail.activityContent = res.data.activityContent.replaceAll(
            "<img",
            `<img style="width:120rpx;height:120rpx;"`
          );
          // </figure>
          console.log("registrationStatus", res.data.registrationStatus);
          if (
            _this.activityDetail.annexArray &&
            _this.activityDetail.annexArray.length
          ) {
            console.log(
              "_this.activityDetail.annexArray[0]",
              _this.activityDetail.annexArray[0]
            );
            _this.firstImg = _this.activityDetail.annexArray[0];
          }
          _this.activityDetail.registrationStartTime =
            this.$common.transBaseDateTime(
              _this.activityDetail.registrationStartTime
            );
          _this.activityDetail.registrationEndTime =
            this.$common.transBaseToDateTime(
              _this.activityDetail.registrationEndTime
            );
          _this.activityDetail.activityStartTime =
            this.$common.transBaseDateTime(
              _this.activityDetail.activityStartTime
            );
          _this.activityDetail.activityEndTime =
            this.$common.transBaseToDateTime(
              _this.activityDetail.activityEndTime
            );
          if (_this.activityDetail.collectorsStatus === "2") {
            _this.active = true;
          } else {
            _this.active = false;
          }
          _this.number =
            _this.activityDetail.limitPersonNumber -
            _this.activityDetail.partakeNumber;
        }
      });
    },
    getApply() {
      this.$refs.apply.init(this.signInfo);
    },
    goAddress(address) {
      if (address === null || undefined === address || address === "") {
        this.$showToast("地址不能为空");
        return false;
      } else {
        this.navigation(address);
      }
    },
    changeCollectorsStatus() {
      if (this.active) {
        const _this = this;
        clickCollect({
          id: this.id,
          userId: getUserLocalStorageInfo().user.id,
          collectorsStatus: "1",
        }).then((res) => {
          _this.getActivityById1();
        });
      } else {
        const _this = this;
        clickCollect({
          id: this.id,
          userId: getUserLocalStorageInfo().user.id,
          collectorsStatus: "2",
        }).then((res) => {
          _this.getActivityById1();
        });
      }
    },
  },
};
</script>

<style lang="scss" type="text/scss">
.h-bg {
  background: #f87a7a;
  color: #fff;
}

// 底部按钮
.but-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  // width: 100%;
  line-height: 120rpx;
  background: $main;
  color: #fff;
  font-size: 36rpx;
  text-align: center;
}

.text {
  font-size: 24rpx;
  color: $text5;
  margin-top: 32rpx;
}

.detail {
  box-sizing: border-box;
  background-color: #f2f2f2;
  padding: 0 0 140rpx;
  overflow-y: auto;

  .detail-body {
    .img-text {
      img {
        height: 420rpx;
        width: 100%;
      }
    }

    .collect-part {
      background-color: #fff;
      height: 120rpx;
      padding: 0 30rpx;
      margin-bottom: 10rpx;
      @include flex;

      .normal-tip {}

      .right {
        @include flex;

        .num {
          margin-right: 20rpx;
          font-size: 24rpx;
          color: #333333;
        }
      }
    }

    .tel-part {
      display: flex;
      width: 100%;
      background-color: #fff;
      margin-bottom: 10rpx;
      padding: 0 30rpx;
      align-items: center;
      box-sizing: border-box;
      justify-content: space-between;

      .tel-name {
        color: #333;
        font-size: 32rpx;
        font-weight: 700;
      }

      .custom-tel-component {
        width: 400rpx;

        .left {
          font-size: 26rpx;
        }
      }
    }
  }

  .info-part {
    background-color: #fff;
    overflow-y: auto;
    height: 100vh;
    box-sizing: border-box;
    padding: 40rpx 30rpx;

    .tit {
      padding-left: 2.667vw;
      position: relative;
      font-size: 4.267vw;

      &::after {
        content: "";
        width: 0.8vw;
        height: 90%;
        background-color: #976dec;
        border-radius: 0.4vw;
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }

    .info-item {
      padding: 10rpx 0rpx;
      margin-bottom: 20rpx;

      .custom-item-tit {
        font-size: 32rpx;
        font-weight: 700;
      }

      .text {
        font-size: 24rpx;
        color: $text5;
        margin-top: 32rpx;

        .add {
          margin-right: 40rpx;
        }

        .dh {
          width: 100rpx;
          text-align: center;
          display: inline-block;
          color: $main;
          border-left: 1rpx solid #666666;
        }
      }

      &:last-child {
        margin-bottom: 0rpx;
      }
    }
  }
}
</style>
<style lang="scss"></style>