fangliaoxiaochengxv/subPages/activityDetail/activityDetail.vue

<template>
  <view style="height: 100%; background: #F8F9FA;">
    <van-image
        class="huodongText2-img"
        height="360rpx"
        :src="activityInfo.pic"
        width="100%"
        style="display: flex;align-items: center;"
    />
    <view class="huodong-ccontent" >
      <view class="activity-content">
        <view class="activity-title">{{ activityInfo.name }}</view>
        <view class="activity-price"><span style="font-size: 24rpx">￥&nbsp;</span>{{ activityInfo.fee }}</view>
        <view class="activity-date">
          <van-image
              class="huodongText2-img"
              height="28rpx"
              src="/static/hd-time.png"
              width="28rpx"
              style="display: flex;align-items: center;"
          />
          <view class="activity-date-text">
            距报名截止仅剩:
          </view>
          <van-count-down :time="entry_end" format="DD 天 HH 时 mm 分 ss 秒"/>
        </view>
        <view class="activity-start-time" style="margin-top: 40rpx;">
          <van-image
              height="28rpx"
              src="/static/huodong-a.png"
              width="28rpx"
              style="display: flex;align-items: center;"
          />
          <view style="margin-left: 16rpx; width: 100rpx;margin-right: 30rpx;">
            活动时间
          </view>
          <view style="color: #444444;width: 474rpx">
            {{ activityInfo.start_time }}&nbsp;到&nbsp;{{ activityInfo.end_time }}
          </view>
        </view>

        <view class="activity-start-time" style="margin-top: 30rpx;">
          <van-image
              height="28rpx"
              src="/static/hd-if-b.png"
              width="28rpx"
              style="display: flex;align-items: center;"
          />
          <view style="margin-left: 16rpx; width: 100rpx;margin-right: 30rpx;">
            活动地点
          </view>
          <view style="color: #444444;width: 474rpx ">
            {{ activityInfo.address }}
          </view>
        </view>
        <view class="activity-describe" style="margin-top: 30rpx; ">
          <bm-view style="height:28rpx;width:28rpx;padding-top: 5rpx; ">
            <van-image
                height="28rpx"
                src="/static/hd-if-c.png"
                width="28rpx"
            />
          </bm-view>
          <view style="margin-left: 16rpx; width: 100rpx;margin-right: 30rpx;">
            活动描述
          </view>
          <view style="color: #444444; width: 474rpx">
            {{ activityInfo.remark }}
          </view>
        </view>
      </view>
    </view>
    <view class="huodong-ccontent" style="height: 80rpx;display: flex;  position: relative; /* 相对定位 */">
      <view>
        <view class="baoming-num">
          <span >{{activityInfo.entry_num}} </span> 人已报名
        </view >
        <view class="baoming-num2" v-if="activityInfo.entry_max>0">
          剩余{{  entry_balance }}个名额
        </view>
        <view class="baoming-num2" v-else>
          人数无限制
        </view>
      </view>
      <view :style="[getStyles(index)]" v-for="(image, index) in remainingImages" :key="index">
        <van-image
            height="84rpx"
            :src="image"
            width="84rpx"
            round
        />
      </view>

    </view>
    <view  class="activity-content-title">
      活动介绍
    </view>
    <view   id="activity-content"  ref="activityContent" style="width: 95%;margin: 0 auto;" v-html="activityInfo.content">
    </view>
    <view  style="width: 100%;height: 165rpx" > </view>
    <van-toast id="van-toast"/>
    <view class="bottom-navigation">
      <view class="bottom-navigation-div">
        <view  style="width: 40rpx;margin-right: 30rpx"   @click="toJump( 1)" >
          <van-image
              height="36rpx"
              src="/static/hd-icon-a.png"
              width="36rpx"
              style="display: flex;align-items: center;  justify-content: center;"
          />
          <span>
            首页
          </span>
        </view>
        <view style="width: 80rpx;margin-right: 30rpx" @click="toJump( 2)" >
          <van-image
              height="36rpx"
              src="/static/hd-icon-b.png"
              width="36rpx"
              style="display: flex;align-items: center;  justify-content: center;"
          />
          <span>
             报名信息
          </span>
        </view>
        <view  style="width: 40rpx;position:relative"  open-type="contact">
          <van-image
              height="36rpx"
              src="/static/hd-icon-c.png"
              width="36rpx"
              style="display: flex;align-items: center;  justify-content: center;"
          />
          <span>
              客服
          </span>
          <button style="position: absolute;width: 100%;height: 100%;z-index: 999;opacity: 0;top:0;"
                   open-type="contact" ></button>
        </view>
      </view>
      <button  class="activity-button" @click="handleRegister">立即报名</button>
    </view>
  </view>

</template>

<script>
import tabbarCom from "@/components/tabbar/tabbar.vue";
import {getConfigData} from '@/common/api/common.js';
import {getActivityDetail} from "@/common/api/activity";
import Toast from "../../wxcomponents/vant/dist/toast/toast";


export default {
  components: {
    tabbarCom,
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      search: "",
      sort: "",
      cateid: "",
      subCateId: '',
      sortType: "",
      data: [],
      active: 0,
      activityTypeList: [],
      activityId: 0,
      progressPercentage: 24.01,
      progressText: '24.01%',
      enrolledCount: 23,
      totalSlots: 100,
      activityInfo: {},
      entry_end: 0,
      remainingImages: [],
      entry_num:0,
      entry_max:0,
      entry_balance:0,
      is_entry:false,
    };
  },

  onLoad: function (option) {
    this.activityId = option.activityId
    this.getActivityDetail()
    this.setImgWidth()


  },
  onShow() {
    this.$nextTick(() => {
    });
  },
  onReachBottom() {
  },
  onShareAppMessage(res) {
    let params = {};
    params = {
      activityId: this.activityId
    };
    let configs = uni.getStorageSync('configs') || {};
    return {
      title: configs.shop_share_title,
      imageUrl: configs.shop_share_img,
      path: `/subPages/activityDetail/activityDetail${this.$stringPageOptions(params)}`
    };
  },
  onShareTimeline(res) {
    let params = {};
    params = {
      activityId: this.activityId
    };
    let configs = uni.getStorageSync('configs') || {};
    return {
      title: configs.shop_share_title,
      imageUrl: configs.shop_share_img,
      path: `/subPages/activityDetail/activityDetail${this.$stringPageOptions(params)}`
    };
  },
  computed: {},
  watch: {},
  methods: {
    getConfigDatalist() {
      getConfigData({dict_id: 36}).then(({data}) => {
        this.activityTypeList = data.reverse();
      });
    },
    handleRegister() {
      if (this.is_entry){
        Toast.fail('您已报名，请勿重复报名');
        return
      }
      uni.navigateTo({url: `/subPages/activityDetail/activitySave?activityId=${ this.activityId}`,})
    },
    getActivityDetail() {
      getActivityDetail({id: this.activityId}).then(({data}) => {
        this.activityInfo = data
        // 计算    activityInfo.entry_end  格式是2025-01-20 20:00:00这样的 到现在时间的时间戳 毫秒
        const entryEnd = new Date(data.entry_end.replace(' ', 'T'));
        this.entry_end = entryEnd.getTime();// 我想获取 现在到entryEnd时间戳
        const now = new Date().getTime();
        // 计算从现在到 entryEnd 的时间差（毫秒）
        this.entry_end = entryEnd.getTime() - now;
        this.entry_num = data.entry_num?data.entry_num:0
        this.entry_max = data.entry_max?data.entry_max:0
        this.entry_balance=this.entry_max-this.entry_num
        this.activityInfo.start_time = (new Date(this.activityInfo.start_time.replace(' ', 'T'))).toISOString().slice(0, 16).replace('T', ' ');
        this.activityInfo.end_time = (new Date(this.activityInfo.end_time.replace(' ', 'T'))).toISOString().slice(0, 16).replace('T', ' ');
        this.activityInfo.entry_end = entryEnd.toISOString().slice(0, 16).replace('T', ' ');
        if (data.entry_info != []&&data.entry_info.id) {
          this.is_entry=true
        }
        if (data.entry_num&&data.entry_num>0){
          if (data.entry_num>5){
            this.entry_num=5
          }else{
            this.entry_num=data.entry_num
          }
          for (let i = 0; i < this.entry_num; i++) {
            // 生成 1 到 4 之间的随机数
            const randomNum = Math.floor(Math.random() * 4)+1
            this.remainingImages.push("/static/tx-"+randomNum+".png");
          }
        }
        // 修正 activityInfo.content 中的 src 属性值
        if (this.activityInfo.content) {
          this.activityInfo.content = this.activityInfo.content.replace(/\/apihttps:/g, 'https:');
        }
        // 修正 activityInfo.content 中的 src 属性值
        if (this.activityInfo.content) {
          this.activityInfo.content = this.activityInfo.content.replace(/\/apihttps:/g, 'https:');
          // 使用正则表达式匹配和修改 img 标签的 style 属性
          this.activityInfo.content = this.activityInfo.content.replace(/<img([^>]*)>/gi, (match, attributes) => {
            // 检查是否已经存在 style 属性
            if (attributes.includes('style')) {
              // 如果存在 style 属性，添加 width: 100%;
              return match.replace(/style="([^"]*)"/i, (styleMatch, styleContent) => {
                if (!styleContent.includes('width: 100%')) {
                  return `style="${styleContent}; width: 100%;"`;
                }
                return styleMatch;
              });
            } else {
              // 如果不存在 style 属性，添加 style="width: 100%;"
              return match.replace(/<img/i, '<img style="width: 100%;"');
            }
          });
        }
        // 确保在数据更新后调用 setImgWidth
        this.$nextTick(() => {
          this.setImgWidth();
        });
      });

    },
    setImgWidth() {
      this.$nextTick(() => {
        if (this.$refs.activityContent) {
          const imgElements = this.$refs.activityContent.querySelectorAll('img');
          imgElements.forEach(img => {
            img.style.width = '100%';
          });
        } else {
          console.log(this.$refs)
        }
      });
    },
    getStyles(index=0) {
      let le =28
      let  py=30
      if (this.entry_num%2==1){
        py+= 224/2-(84/2)-(le*Math.floor(this.entry_num / 2 ))-le/2
      }else{
        py+=224/2-(84/2)-(le*this.entry_num/2)
      }
      let right= index*le+py
      var newVar = {
        position: 'absolute',
        width: '84rpx',
        height: '84rpx',
        borderRadius: '84rpx',
        top: '30rpx',
        right: right+'rpx',
      };
      return newVar
    },
    toJump( index) {
      if(index==1){
        uni.switchTab({
          url:'/pages/home/index'
        });
      }else if(index==2){
        if (!this.is_entry){
          Toast.fail('你暂未报名,无法查询报名信息！');
          return
        }
        uni.navigateTo({url: `/subPages/activityDetail/activitySave?activityId=${ this.activityId}`,})
      }

    },
  },
};
</script>

<style lang="scss" scoped>
.common-page {
  height: 100%;
  padding: 30rpx;
}

.huodong-ccontent {
  position: relative; /* 相对定位 */
  width: 650rpx;
  padding: 0rpx;
  margin: 30rpx auto;
  margin-bottom: 0;
  padding: 30rpx;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .baoming-num{
    font-family: 苹方, 苹方;
    font-weight: 400;
    font-size: 24rpx;
    color: #333333;
    line-height: 32rpx;
    font-style: normal;
    text-transform: none;
    span{
      font-family: D-DIN, D-DIN;
      font-weight: 700;
      font-size: 36rpx;
      color: #C29556;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }


  }

}
.baoming-num2{
  font-family: 苹方, 苹方;
  font-weight: 400;
  font-size: 24rpx;
  color: #888888;
  line-height: 32rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.remaining-seats-images {
  display: flex;
  gap: 10rpx;
  position: absolute;
  top: 30rpx;
  right: 30rpx;
}

.activity-content {
  margin-top: 30 rp;

  .activity-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    font-weight: bold;
    margin-bottom: 16rpx;
  }

  .activity-date {
    background: #F4F4F4;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: 630rpx;
    height: 68rpx;
    padding-left: 20rpx;
    // 垂直居中
    display: flex;
    align-items: center;

    &-text {
      font-family: 苹方, 苹方;
      font-weight: 400;
      font-size: 24rpx;
      color: #777777;
      line-height: 36rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin: 0 32rpx 0 24rpx;
    }
  }

  .activity-start-time {
    // 垂直居中
    display: flex;
    align-items: center;
    width: 650rpx;
    font-family: 苹方, 苹方;
    font-weight: 400;
    font-size: 24rpx;
    color: #777777;
    line-height: 36rpx;
    font-style: normal;
    text-transform: none;
  }
  .activity-describe {
       // 垂直居中
       display: flex;
       width: 650rpx;
       font-family: 苹方, 苹方;
       font-weight: 400;
       font-size: 24rpx;
       color: #777777;
       line-height: 36rpx;
       font-style: normal;
       text-transform: none;
  }



  .activity-price {
    font-family: 苹方, 苹方;
    font-weight: 400;
    font-size: 36rpx;
    color: #C29556;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 30rpx;
  }

  .activity-stats-and-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 128rpx;

  }

  .activity-stats {
    width: 330rpx;
    font-size: 24rpx;
    color: #666666;
  }



  /* 水平分割线 */
  .horizontal-line {
    width: 630rpx;
    height: 0rpx;
    border: 1rpx dashed #DDDDDD;
    margin: 20rpx 0 0rpx 0;
  }
}

/* 分割线样式 */
.separator {
  height: 1px;
  background-color: #e0e0e0;
  margin: 20rpx 0;
}

.bottom-navigation{
  position: fixed;
  // 文字垂直居中
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  height: 100rpx;
  width: calc(100% - 40rpx);
  background: #FFFFFF;
  box-shadow: 0rpx -2rpx 0rpx 0rpx #F1F3F6;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  border: 0rpx solid #979797;
  padding: 20rpx 20rpx 68rpx 20rpx ;
  &-div{
    height: 76rpx;
    width: 404rpx;
    // 文字垂直居中
    display: flex;
    align-items: center;
    padding-left: 30rpx;

    span{
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #333333;
      line-height: 32rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

  }


  .activity-button {
    width: 264rpx;
    height: 80rpx;
    background: linear-gradient(315deg, #CA9359 0%, #E2B98E 100%);
    border-radius: 292rpx 292rpx 292rpx 292rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 36rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    // 文字垂直居中
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* 设置 v-html 渲染的内容中的 img 标签宽度为 100% */
[v-html] img {
  width: 100%!important;
}
/* 定义 CSS 变量 */
:root {
  --nav-bar-icon-color: black;
  --nav-bar-arrow-size: 16px;
  --tab-font-size: 28rpx;
}
.activity-content-title {
  margin: 30rpx auto;
  width: 680rpx;
  // 垂直居中
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  font-style: normal;
  text-transform: none;
  margin-bottom: 20rpx;
  // 加粗
  font-weight: bold;
}
/* 确保 van-nav-bar 内部的内容能够正确适应新的高度 */
/deep/ .van-nav-bar__title {
  font-family: PingFang SC, PingFang SC !important;
  font-weight: 400 !important;
  font-size: 36rpx !important;
  color: #333333 !important;
  text-align: center;
  // 加粗
  // font-weight: bold;
}

/deep/ .van-nav-bar__content {
  text-align: center;
}
#activity-content img{
  width: 100%!important;
}
/* 添加 van-tab 标题的字体大小样式 */
/deep/ .van-tab__text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
}
</style>