kgMini-new/pages/makeField/selectTime.vue

<template>
    <view>
        <lxCalendar @change="changeTime" :dot_lists="list"></lxCalendar>
		<view class="hours-box">
			<view class="hours-title">可选时间段</view>
			<view class="hours-content">
				<view v-for="(hour,index) in hourList" :key="index" 
				:class="hourListSelceted[index] ? 'selected' : 'default'"
				v-show="hour.enable" @click="selectHour(index,hour.hour)">{{hour.show}}</button>
			</view>
			</view>
		</view>
		<view class="share-box">
		  <view class="button">
			<button @click="goSubmit()" class="start" >
			  提交资料
			</button>
		  </view>
		</view>
	</view>
</template>

<script>
import md5 from "@/common/md5.js";
import lxCalendar from '@/components/lx-calendar/lx-calendar.vue'
export default {
	components:{
		lxCalendar,
	},
  data() {
    return {
      fieldList: [],
	  shareUrl:getApp().globalData.shareUrl,
	  areaId:'',
	  list: [],
	  hourList:[],
	  hourListSelceted:[],
	  selectDate:getApp().globalData.nowTime,
	  selectedHour:[],
    };
  },
  onLoad(option) {
	 this.areaId = option.id || '4' 
     this.getDaysTime(option.id);
  },
  methods: {
	  changeTime(e){
		this.selectDate  = e.fulldate;
		this.getHoursTime(this.areaId,this.selectDate)
	  },
	  selectHour(index,param){
		  this.hourListSelceted.splice(index,1,!this.hourListSelceted[index])
	  },
	 goSubmit(){
		if(!this.hourListSelceted.includes(true)) {
			uni.showToast({
				title:'请选择时间段',
				icon:'none'
			})
		}else {
			let filterArr = []
			this.hourListSelceted.forEach((item,index)=>{
				if(item){
					filterArr.push(this.hourList[index].hour)
				}
			})
			filterArr.join(',')
			uni.navigateTo({
			  url: "/pages/makeField/fieldForm?id=" + this.areaId +'&day=' + this.selectDate +'&hour=' + filterArr,
			});
		}
	},
	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) {
			let dayList = res.data.data;
			this.list = dayList;
			this.getHoursTime(id,this.selectDate)
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
	getHoursTime(id,time) {
	  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 :time,
			//order_id :  2           //如果是自己修改自己的预定，传入预定ID，否则可不传
		},
	    success: (res) => {
	      if (res.data.code === 200) {
			let hourArr = res.data.data;
			let hourCss = [];
			hourArr.forEach((item,index)=>{
				hourCss.push(false)
			})
			this.hourListSelceted = hourCss;
			this.hourList = res.data.data
	      }
	    },
	    fail: () => {
	      console.log("连接失败");
	    },
	  });
	},
  },
};
</script>

<style lang="scss" scope>
.calendar-box {
	    display: flex;
	    justify-content: center;
}
.hours-box {
	margin-top: 30rpx;
	.hours-title {
		padding-left: 20rpx;
		font-weight: 600;
		font-size: 26rpx;
	}
	.hours-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		margin-top: 20rpx;
		view {
			width: 45%;
			height: 80rpx;
			background: #f4f4f4;
			text-align: center;
			line-height: 80rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			font-size: 24rpx;

		}
	}
	.selected {
		background: #5398ff!important;
		color:#fff;
	}
	.default{
		background: #f4f4f4!important;
		color:#000
	}

	}
  .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;
		background-color: transparent;
		border-color: none;
		color: #00a8ea;
      }
    }
  }
</style>