kgMini-new/pages/makeField/viewDetail.vue

<template>
  <view class="content">
    <view class="header">
      <view class="title-read">
        <view class="title">
			<view>{{ model.title }}</view>
			<view>整体参观</view>	
        </view>
        <button>今日已满</button>
      </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">周一至周五：08:00~17:00</p>
        </li>
        <li style="margin-bottom: 0;">
          <p class="name">容纳人数</p>
          <p class="deatil-content">50</p>
        </li>
      </ul>
    </view>
    <view class="rich">
      <activityRichCard :model="textModel" :isFold="true" />
    </view>
    <view class="share-box">
      <view class="button">
        <button @click="subscribeActivity()" class="start" >
          <!-- {{ model.activiteState }} -->
		  提交资料
        </button>
        <!-- <button disabled="true" class="ended" v-if="isJoin">已报名</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: "",
      isJoin: false,
	  activityInfoList:[],
	  sexValue:'男',
      model: {
        title: "",
        read: 123,
        url: "",
        date: "",
        type: 1,
        status: 0,
        way: "",
        share: 0,
        activiteState: "",
        max_person: "",
        person_count: "",
      },
      textModel: {
        title: "活动内容",
        text: "",
      },
    };
  },
  onLoad(op) {
    this.id = op.id
    this.getActivityDeatil();
  },
  methods: {
	checkboxChange(e){
		this.sexValue = e.detail.value;
	},
    shareRequest() {
      let md5Sign = md5(
        "method=" +
          "user" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=user&source=activity&action=repost&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
          openId: getApp().globalData.open_id,
          source_id: this.id,
          source: "activity",
        },
        success: (res) => {
          if (res.data.code === 200) {
            console.log(res);
            this.model.share = this.model.share + 1;
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    shareActive() {
      let that = this;
      uni.showShareMenu({
        title: that.model.title,
        path: "pages/activity/activity_detail?id=" + that.id,
        success(res) {
          that.shareRequest();
        },
      });
    },
    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("连接失败");
        },
      });
    },
    subscribeActivity() {
		if(!getApp().globalData.user_phone){
			uni.showToast({
			  title: "您还没有登录授权",
			  duration: 2500,
			  icon: "none",
			});
		uni.navigateTo({
			url:'/pages/auth/index'
		})
		}
		uni.navigateTo({
			url:'/pages/makeField/fieldForm'
		})
   //    if (Number(this.model.person_count) >= Number(this.model.max_person)) {
   //      uni.showToast({
   //        title: "报名人数已达上限",
   //        icon: "error",
   //        duration: 2000,
   //      });
   //      return;
   //    }
	  // if(this.activityInfoList.length > 0 && getApp().globalData.user_phone){
		 //  	this.open();
	  // }
	  // if(this.activityInfoList.length === 0 && getApp().globalData.user_phone){
		 //    this.subscribeFn(this.activityInfoList)
	  // }
    },
    signUpActivity(infoList) {
      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=active&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        openId: getApp().globalData.open_id,
        id: this.id,
		category_json:JSON.stringify(infoList)
      };
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: postData,
        success: (res) => {
          if (res.data.code == 200) {
            this.isJoin = true;
            uni.showToast({
              title: "报名成功",
              icon: "none",
              duration: 2500,
            });
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
	subscribeFn(info){
		let that = this;
		uni.requestSubscribeMessage({
		  tmplIds: [
		  "bSg5tUWHE4qWDeyK31GBejogT1uRgkuBD1_n2I5ptAc",
		  "T_ORLiW2C_UM6nZiEerYAokltHgHRGxWCid8eElujus",
		//  "XPULJQ64YrS-5sAnfMTJj3S9iV8-8X_mb3r_H5dgAgE",
		 //  "RWq7TE266RYr8DX2IHZ2F_zKbOnSfZDgh_xovBh0UiI" 		//测试环境模板id
		  ],
		  success(res) {
		    that.signUpActivity(info);
		  },
		});
	},
	open() {
		  this.$refs.popup.open('top')
	  },
	closePopup() {
		  this.$refs.popup.close()
	  },
	submitInfo(){
		let checkFlag = false;
		for(let i = 0; i < this.activityInfoList.length; i++){
			if(!this.activityInfoList[i].value){
				uni.showToast({
					title:'请填写' + this.activityInfoList[i].name,
					duration:2000,
					icon:'none'
				})
				checkFlag = false;
				break;
			}else {
				checkFlag = true;
			}
		} 
		if(checkFlag){
			this.activityInfoList.forEach((item)=>{
				if(item.name === '性别'){
					item.value = this.sexValue;
				}
				delete item.addtime;
				delete item.name;
				delete item.parent_id;
				delete item.weight;
			})
			this.$refs.popup.close();
			this.subscribeFn(this.activityInfoList)
		}
	}  
  },
};
</script>

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

    .title-read {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      .title {
		font-weight: 600;
		letter-spacing: 2rpx;
		font-size: 30rpx;
		width: 80%;
		padding: 20rpx;
      }
      button {
		background: #95f204;
		color: #fff;
		font-size: 18rpx;
		height: 46rpx;
		line-height: 46rpx;
		margin-top: 5%;
		width: 18%;
      }
    }
    .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: #7f7f7f;
        }
        .deatil-content {
          font-size: 28rpx;
        }
      }
    }
  }
  .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: 60rpx;
      height: 60rpx;
      position: relative;
      button::after {
        border: none;
      }
      image {
        width: 100%;
        height: 100%;
        position: absolute;
      }
      .shareCount {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -20%;
        right: -25%;
        color: #ffffff;
        height: 30rpx;
        width: 30rpx;
        padding: 3rpx;
        font-size: 16rpx;
        border-radius: 50%;
        background: #fe3637;
      }
    }
    .button {
      height: 100rpx;
      width: 75%;
      display: flex;
      justify-content: center;
      button {
		width: 80%;
		height: 80%;
		border: 1px solid;
		outline: none;
		background: none;
		font-size: 30rpx;
		// border-color: #00a8ea;
      }
      .start {
        //待开始
		background-color: transparent;
		border-color: none;
		color: #00a8ea;
      }
      .begun {
        //已开始
        border-color: #00a8ea;
        color: #00a8ea;
      }
      .ended {
        //已结束
        color: #00a8ea;
        border-color: #00a8ea;
      }
      .falseStart {
        color: #70b603;
        border-color: #70b603;
      }
    }
  }
}
</style>