XEH-miniProgram/pages/taxationLesson/active.vue

<template>
  <view class="active-box">
     
     <image class="poster" :src="model.url"></image>

     <view class="title">{{model.title}}</view>


     <view class="content">
		  <view class="child border-bottom-1">
			  <image class="time" src="/static/taxation/clock-icon.svg"></image>
			  <text>{{model.time}}</text>
		  </view>
		  <view class="child">
			  <image class="address"  src="/static/taxation/address-icon.svg"></image>
			  <text>{{model.address}}</text>
		  </view>		  
	 </view>  

     <view class="detail border-bottom-1">活动详情</view>
	 
	 
	 <view class="rich-box">
		 {{model.richText}}
		  <activityRichCard :model="model.rich" :isFold="true" />
	 </view>
	 

  </view>
</template>

<script>
import md5 from "@/common/md5.js";
import activity_rich_card from "./rich_card.vue";
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: {
		url: "/static/taxation/active-example.png",
        title: "8月供需对接会",
        time: '2023-09-13  09:00 至 17:00',
        address:'四信大厦5楼会议大厅',
		detail:'',
		richText:'7月27-29日，“2021机器人与智能制造强国论坛暨第一届数字化智造博览会”在山东济宁隆重召开。此次活动由山东省工业和信息化厅、济宁市人民政府、中国电子信息产业发展研究院共同主办，包括主论坛、两场高峰论坛、供需对接交流会、第一届数字化智造博览会，以及第二十届全国大学生机器人大赛等多项内容。其中，第一届数字化智造博览会在济宁高新区展览馆启幕。整个展区占地面积7000平方米，来自全国各地的118家智能制造企业，以需求为导向，携高端制造装备产品亮相博览会.' 
      },
    };
  },
  onLoad(op) {
    // this.id = op.id;
  },
  methods: {
    getActivityDeatil() {
      let md5Sign = md5(
        "method=" +
          "activity" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=activity&source=activity&action=info_by_id&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        id: this.id,
        openId: getApp().globalData.open_id,
      };
      //获取文章
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: postData,
        success: (res) => {
          if (res.data.code == 200) {
            let data = res.data.data;
            this.isJoin = data.active ? true : false;
			if(data.category_list && data.category_list.length > 0){
				this.activityInfoList = data.category_list;
				this.activityInfoList.forEach((item)=>{
						if(item.name === '性别'){
							item.value = '男'
						}else {
							item.value = '';
						}
				})
			}
            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.max_person = data.max_person;
            this.model.person_count = data.person_count;
            this.model.share = parseInt(data.real_repost_count) + parseInt(data.base_repost_count);
            if (data.status == '待开始') {
              if (data.type == 2) {
                this.model.activiteState = "我要参加";
              } else {
                this.model.activiteState = "活动待开始";
              }
            } else if (data.status == '已开始') {
              this.model.activiteState = "活动进行中";
            } else {
              this.model.activiteState = "活动已结束";
            }
          }
          this.getRich();
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    replaceImg(html) {
      let result = html.replace(
        /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
        function (match, capture) {
		  if(capture.includes('http')){
			  return (
				"<img src=" +
				capture +
				' style="max-width:100%;height:auto;display:block;margin:10px auto;"/>'
			  );
		  }else {
			return (
			  "<img src=" +
			  getApp().globalData.shareUrl +
			  capture +
			  ' style="max-width:100%;height:auto;display:block;margin:10px auto;"/>'
			);
		  }	
        }
      );
      return result;
    },
    getRich() {
      uni.request({
        url:
          getApp().globalData.shareUrl +
          `content/activity/${Math.floor(this.id / 1000)}/${this.id}.html`+'?version='+ Math.random(),
        method: "GET",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        success: (res) => {
          if (res.statusCode === 200) {
            this.textModel.text = this.replaceImg(res.data);
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.active-box {
  display: flex;
  flex-direction: column;
     .poster {
		width: 99%;
		height: 500rpx;
		margin-left: 0.5%;
	 }
	 .title {
		 font-size: 40rpx;
		 padding-left: 40rpx;
		 width: 100%;
		 height: 120rpx;
		 display: flex;
		 align-items: center;
	 }
	 .content {
		 display: flex;
		 flex-direction: column;
		 width: 100%;
		 height: 196rpx;
		 border-top: 8px solid #f3f3f3;
		 border-bottom: 8px solid #f3f3f3;
		 .child {
			 display: flex;
			 align-items: center;
			 height: 50%;
			 text {
				 color: #999;
			 }
			 .time {
				width: 40rpx;
				height: 40rpx;
				margin: 0 30rpx 0 40rpx;
			 }
			 .address {
				width: 40rpx;
				height: 50rpx;
				margin: 0 30rpx 0 40rpx; 
			 }
		 }
	 }
	 .detail {
		 font-size: 32rpx;
		 padding-left: 40rpx;
		 width: 100%;
		 height: 100rpx;
		 display: flex;
		 align-items: center;
	 }
	  .rich-box {
		color: #666;
		padding: 30rpx 40rpx 30rpx 40rpx;
		font-size: 30rpx;
	  }
   
}

.border-bottom-1 {
	border-bottom: 1px solid #e0e0e0;
}
</style>