jsm-mall-h5-front/src/packageWorkorder/pages/bookTime.vue

<template>
  <!-- #ifdef H5 -->
  <zj-page-layout :hasFooter="true">
    <view class="all-container">
      <view class="date-conteiner mt30">
      	<view class="item">
      	  <view class="label"><text>*</text>选择时间</view>
      	  <view class="picker" @tap="isShowDatePicker = true">
      	    <text class="value" v-if="date">{{date}}</text>
      	    <text class="placeholder" v-else>请选择</text>
      	    <text class="iconfont icon-jinru"></text>
      	  </view>
      	</view>
      </view>

      <view class="mt30 remark-container">
      	<view class="common-title">备注信息</view>
      	<u--textarea v-model="remarkVal" placeholder="请输入备注内容" fixed border="none" height="120"></u--textarea>
      </view>
    </view>

    <template slot="footer">
      <view class="footer-btn-group">
      	<u-button text="确定" type="primary" size="large" @click="submitData"></u-button>
      </view>
    </template>

    <u-datetime-picker
      :show="isShowDatePicker"
      v-model="datePickerValue"
      mode="date"
      :formatter="formatter"
      @cancel="isShowDatePicker = false"
      @close="isShowDatePicker = false"
      @confirm="confirmDate"
      :minDate="minDate"
    ></u-datetime-picker>
  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageWorkorder/pages/bookTime`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
  export default {
    data() {
      return {
        id: null,
        type: 1, // 1=预约，2=改约
        date: '',
        datePickerValue: Number(new Date()),
        minDate: Number(new Date()),
        isShowDatePicker: false,
        remarkVal: '', // 备注值
      }
    },

    onLoad({type, id}) {
      this.type = type || 1;
      this.id = id;

      uni.setNavigationBarTitle({
      　title: this.type == '1' ? '预约' : '改约'
      })
    },

    methods: {
      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`
        }
        if (type === 'month') {
          return `${value}月`
        }
        if (type === 'day') {
          return `${value}日`
        }
        return value
      },

      confirmDate(e) {
        this.isShowDatePicker = false;
        let time = new Date(e.value);
        let y = time.getFullYear();
        let m = (time.getMonth()+1) < 10 ? '0' + (time.getMonth()+1) : time.getMonth()+1;
        let d = (time.getDate()) < 10 ? '0' + (time.getDate()) : time.getDate();
        let hh = (time.getHours()) < 10 ? '0' + (time.getHours()) : time.getHours();
        let mm = (time.getMinutes()) < 10 ? '0' + (time.getMinutes()) : time.getMinutes();
        let ss = (time.getSeconds()) < 10 ? '0' + (time.getSeconds()) : time.getSeconds();
        this.date = `${y}-${m}-${d}`;
      },

      // 提交
      submitData() {
      	if (!this.date) return this.$toast('请选择改约时间');

        this.$api.post('/changeOrder/changeAppointmentTime', {
          id: this.id,
          appointmentTime: this.date + ' 00:00:00',
          appointmentEndTime: this.date + ' 23:59:59',
          remark: this.remarkVal,
        }).then((res) => {
        	this.$successToast('改约成功');
        	this.crossPage.$emit('refreshUserWorkorderList', '');
        	this.crossPage.$emit('refreshUserWorkorderDetail', '');
          setTimeout(() => {
            this.$navToPage({
            	delta: 1
            }, 'navigateBack')
          }, 500)
        });

      },
    },
  }

  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },
    onLoad(pam) {
      this.pam = pam;
    }
  }
  // #endif
</script>

<style lang="scss" scoped>
.all-container {
  padding-bottom: 30rpx;
}
.common-title {
  font-size: 32rpx;
  padding: 30rpx 0;
  text {
    color: $minor-color;
  }
}
.date-conteiner {
  background: #ffffff;
  padding: 30rpx 30rpx;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50rpx;
    .label {
      margin-right: 30rpx;
      text {
        color: $error-color;
      }
    }
    .picker {
      .placeholder {
        color: $sec-font;
      }
      .iconfont {
        margin-left: 12rpx;
        color: $sec-font;
      }
    }
  }
}
.remark-container {
  padding: 1rpx 30rpx 30rpx;
  background: #ffffff;

  ::v-deep .u-textarea {
    background: #f4f5f9;
  }
}
</style>