kgMini-new/pages/makeField/selectTime.vue

<template>
  <view class="content">
    <view class="supplyList">
      <view
        class="supplyCard"
        v-for="(field, i) in fieldList"
        :key="i"
		 @tap="toDetail(field.id)"
      >
        <view class="image_content">
          <image :src="field.pic_path ? shareUrl + field.pic_path : '/static/nodata.svg'" mode="aspectFill" />
        </view>
        <view class="info">
          <view class="title">
            {{ field.name }}
          </view>
          <view class="time">
			  <view style="margin-bottom: 10rpx;">
				  <view>开放时间</view>
				  <view style="margin-top: 6rpx;">{{field.open_days}}：{{field.open_hours}}</view>
			  </view>
			 <view class="field-btn-box">
				 <button  :class="{
					free: field.statusName == '空闲',
					full: field.statusName == '今日已满',
					can: field.statusName == '今日可约',}">
					{{field.statusName}}</button>
				 <button style="background: #00a8ea;" :disabled="field.statusName == '今日已满'">前往预约</button>
			 </view>
		  </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      fieldList: [],
	  shareUrl:getApp().globalData.shareUrl,
	  areaId:''
    };
  },
  onLoad(option) {
	 this.areaId = option.id || '4' 
     this.getDaysTime(option.id);
  },
  methods: {
    toDetail(index) {
      uni.navigateTo({
        url: "/pages/makeField/viewDetail?id=" + index,
      });
    },
    getDaysTime(id) {
      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=get_days&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
			area_id :id,
			days:'30'
		},
        success: (res) => {
          if (res.data.code === 200) {
            console.log(res.data)
			this.getHoursTime(id);
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
	getHoursTime(id) {
	  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=get_hours&timestamp=" +
	    getApp().globalData.globalTimestamp +
	    "&sign=" +
	    md5Sign;
	  uni.request({
	    url: url,
	    method: "POST",
	    header: {
	      "content-type": "application/x-www-form-urlencoded",
	    },
	    data: {
			area_id :id,
			date :'2022-11-21',
			//order_id :  2           //如果是自己修改自己的预定，传入预定ID，否则可不传
		},
	    success: (res) => {
	      if (res.data.code === 200) {
	        console.log(res.data)
	      }
	    },
	    fail: () => {
	      console.log("连接失败");
	    },
	  });
	},
  },
};
</script>

<style lang="scss" scope>
.active {
  color: $uni-color-primary;
}
.content {
  font-size: 32rpx;
  margin: 0 5%;
  .supplyList {
    .supplyCard {
      display: flex;
      width: 92%;
      margin: 3% 0;
      padding: 2% 4%;
      height: 5%;
      border-radius: 30rpx;
      box-shadow: rgba(100, 100, 111, 0.2) 0rpx 14rpx 50rpx 0rpx;
      .image_content {
        margin-right: 5%;
		display: flex;
		align-items: center;
        image {
			width: 300rpx;
			height: 265rpx;
			object-fit: cover;
			border-radius: 6rpx;
			background-color: #e4e4e4;
        }
      }
      .info {
		width: 100%;
        display: flex;
        flex-flow: column;
		justify-content: space-between;
        // justify-content: space-around;
		.title {
			width: 100%;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			font-size: 32rpx;
		}
        .time {
			font-weight: 100;
			font-size: 24rpx;
			color: #7f7f7f;
			height: 60%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			// margin-top: 20rpx;
		  .field-btn-box {
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  button{
				background: #95f204;
				color: #fff;
				font-size: 18rpx;
				margin: 0;
			  };
			  .free {
				 background: #95f204; 
			  };
			  .full {
				 background: #f59a23; 
			  }
			  .can {
			  	background: #5498ff; 
			  }
		  }
        }
      }
    }
  }
}
</style>