kgMini-new/pages/makeField/viewDetail.vue

<template>
  <view class="content">
    <view class="header">
      <view class="title-read">
        <view class="title">
			<view>{{ areaObj.name }}</view>	
        </view>
		 <button  :class="{
			close: areaObj.order_status == '今日未开放',
			free: areaObj.order_status == '空闲',
			full: areaObj.order_status == '今日已满',
			can: areaObj.order_status == '今日可约',}">
			{{areaObj.order_status}}</button>
      </view>
    </view>
    <view class="active-deatil">
      <ul>
        <li>
          <p class="name">开放时间</p>
          <p class="deatil-content">{{areaObj.open_days}}：{{areaObj.open_hours}}</p>
        </li>
        <li style="margin-bottom: 0;">
          <p class="name">容纳人数</p>
          <p class="deatil-content">{{areaObj.max}}</p>
        </li>
      </ul>
    </view>
    <view class="rich">
      <activityRichCard :model="textModel" :isFold="true" />
    </view>
    <view class="share-box">
      <view class="button">
        <button @click="goSelectTime()" 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: "",
	  activityInfoList:[],
	  areaObj:{},
	  textModel: {
	    title: "",
	    text: "",
	  },
    };
  },
  onLoad(op) {
    this.id = op.id
    this.getAreaDeatil(op.id);
  },
  methods: {
    getAreaDeatil(areaId) {
      let md5Sign = md5(
        "method=" +
          "area" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=area&source=area&action=info_by_id&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        area_id: areaId,
        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) {
            this.areaObj = res.data.data;
          }
          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/area/${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("连接失败");
        },
      });
    },
    goSelectTime() {
		// if(!getApp().globalData.user_phone){
		// 	uni.showToast({
		// 	  title: "您还没有登录授权",
		// 	  duration: 2500,
		// 	  icon: "none",
		// 	});
		// uni.navigateTo({
		// 	url:'/pages/auth/index'
		// })
		// }
		uni.navigateTo({
			url:'/pages/makeField/selectTime?id=' + this.id
		})
    },
  },
};
</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%;
      }
	  .close {
		  background: #7f7f7f; 
		  font-weight: bolder;
	  };
	  .free {
		  background: #75e2a8;
		  font-weight: bolder;
	  };
	  .full {
		  background: #f59a23;
		  font-weight: bolder;
	  }
	  .can {
	  	background: #94a8ff;
		font-weight: bolder;
	  }
    }
    .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>