php/www/webapp/housekeeping/src/components/management/edit.vue

<template>
  <scroller>
    <div class="box">
      <title>预约信息</title>
      <div class="my-order-body">
        <div><span class="title">创建日期：</span>{{order.time}}</div>
        <div><span class="title">用户姓名：</span>{{order.user_name}}</div>
        <div><span class="title">用户手机：</span><a id='tel' v-bind:href='`tel:${order.mobile}`'>{{order.mobile}}</a></div>
        <div><span class="title">服务地址：</span>{{order.address}}</div>
        <div class="stroe"><span class="title">门店：</span><span>
          {{storeName}}（{{storeAddress}}）<br>门店电话:<a id='tel' v-bind:href='`tel:${storeMobile}`'>{{storeMobile}}</a>
        </span></div>
        <div><span class="title">服务类型：</span>{{order.type_str}}</div>


        <div v-if='order.type -1 == 0'><span
          class="title">服务时间：</span>{{order.server_start_time}} ~ {{order.server_end_time}}
        </div>
        <div v-if='order.type -1  == 0'><span class="title">服务形式：</span>{{order.cart_str}}</div>

        <div v-if='order.type -1  == 0'><span class="title">服务技能：</span>{{skillStr}}</div>
        <div v-if='order.type - 1 == 1'><span class="title">预产期：</span>{{order.yc_time}}</div>
        <div v-if='order.type -1 == 2'><span class="title">孩子年龄：</span>{{order.age}}岁</div>
        <!--showContract  btnContract-->
        <div v-if="order.status === 3 && order.contract === 2"><span class="title">签约状态：</span>{{order.contract_str}}
        </div>
        <!--<div v-if="showContract"><span class="title">签约状态：</span><span @click='btnContract'>{{contractStr}}</span></div>-->
        <!--预约日期-->
        <div v-if="showStatus">
          <!--选择时间-->
          <datetime v-model="bookingTime" format="YYYY-MM-DD HH:00"
                    @on-change="change" :title="('预约日期:')" year-row="{value}年" month-row="{value}月" day-row="{value}日"
                    hour-row="{value}点" minute-row="{value}分" confirm-text="完成" cancel-text="取消"
                    :start-date='startDate'
                    placeholder="请选择日期"
                    :end-date='endDate' :min-hour=9 :max-hour=18></datetime>
        </div>
        <div v-if="!showStatus"><span class="title">预约日期：</span>{{order.status_time}}</div>
        <!--家政员-->
        <div v-if="showTech">
          <span class="title">家政员：</span><span><input v-model="tech" class="tech" type="text"
                                                      placeholder='请输入家政员'></span>
        </div>
        <div v-if="order.status !== 3 && order.contract !== 2">
          <span class="title">家政员电话：</span><span><input v-model="techMobile" class="tech" type="text"
                                                        placeholder='请输入家政员电话'></span>
        </div>
        <div v-if='!showTech'><span class="title">家政员：</span>{{order.tech}}</div>
        <div v-if="order.status === 3"><span class="title">家政员电话：</span><span>{{order.tech_mobile}}</span></div>
        <!--面试状态-->
        <!--<div class="weui-cell" v-if="order.status == 2">-->
        <!--<div class="weui-cell__hd"><label class="weui-label">面试状态</label></div>-->
        <!--<div class="weui-cell__bd" @click='btnServiceForm'>-->
        <!--<input class="weui-input select-time" type="button" required=""-->
        <!--:value="serviceForm">-->
        <!--</div>-->
        <!--<div class="weui-cell__ft"><i class="weui-icon-warn"></i></div>-->
        <!--</div>-->
        <div v-if="order.status == 2">
          <span class="title">面试状态：</span>
          <span style="margin-left: -4px;" @click="btnServiceForm">{{serviceForm}}</span>
        </div>
        <div><span class="title">备注：</span>{{order.desc}}</div>
      </div>
      <div v-if="btnSubmintStrShow" class="m-btn">
        <x-button type="primary" @click.native='btnSubmint'>{{btnSubmintStr}}</x-button>
      </div>
    </div>
  </scroller>
</template>
<script>
  import _ from '@/config'
  import selectTime from '@/config/selectTime'
  import axios from 'axios'
  import {Group, Datetime, XButton} from 'vux'

  export default {
    name: 'orderInfo',
    data() {
      return {
        type: {0: '钟点工', 1: '月嫂', 2: '育婴师', 3: '护理老人', 4: '全套家务'},
        serviceArr: [
          {label: '未面试', value: 1},
          {label: '已面试', value: 2}
        ],
        serviceForm: '未面试',
        resServiceArr: 1,
        order: {},
        eAppointmentDate: false,
        monthArr: {},
        skillStr: '', // 服务技能
        bookingTime: '', // 服务时间
        value: ['2017-06-24', '03', '05'], // 设定日期格式
        startDate: selectTime.startDate, // 限定最小日期
        endDate: '', // 限定最大日期
        tech: '',
        techMobile: '',
        storeStr: '',
        storeName: '',
        storeAddress: '',
        storeMobile: '',
        showTech: false, // 家政员
        showContract: false, // 签约状态
        contractStr: '未签约',
        contractStrArr: [],
        btnSubmintStr: '已预约',
        btnSubmintStrShow: true,
        showStatus: false // 预约状态
      }
    },
    created() {
      let that = this;
      axios.post(_.apiPath + 'j/HouseKeeping/GetStore').then(res => {
        for (let i in res.data) {
          if (res.data[i].store_id == _.oldOrderInfo.store_id) {
            that.storeName = res.data[i].store_name;
            that.storeAddress = res.data[i].address;
            that.storeMobile = res.data[i].mobile
          }
        }
      })

      if (_.oldOrderInfo === undefined) {
        this.$router.push({path: '/managementList'})
      }
      this.order = _.oldOrderInfo;
      // 状态编辑
      // 已面试
      if (that.order.contract === 1 && that.order.status === 2) {
        that.btnSubmintStr = '提交'
      }
      // 已签约
      if (that.order.contract === 1 && that.order.status === 3) {
        that.btnSubmintStr = '已签约'
      }
      // 已完成
      if (that.order.contract === 2 && that.order.status === 3) {
        that.btnSubmintStrShow = false
      }
      // 预约时间
      console.log(that.order);
      if (that.order.status_time !== 0) {
        that.bookingTime = that.order.status_time
      }
      // 家政员
      if (that.order.tech.length > 0) {
        that.tech = that.order.tech;
      }
      // 家政员电话
      if (that.order.tech_mobile !== '') {
        that.techMobile = that.order.tech_mobile;
      }
      // 转化时间格式
      // this.order.yc_time = _.timetrans(this.order.yc_time); // 预产期
      this.order.yc_time = this.order.yc_time.substring(0, 10); // 预产期
      this.order.server_start_time = _.timetrans(this.order.server_start_time);
      this.order.server_start_time = this.order.server_start_time.substring(11, 16);
      this.order.server_end_time = _.timetrans(this.order.server_end_time);
      this.order.server_end_time = this.order.server_end_time.substring(11, 16);

      if (this.order.status - 1 == 0) {
        this.eAppointmentDate = true
      }
      if (this.order.status !== 3) {
        this.showStatus = true;
        this.showTech = true;
      }
      if (this.order.contract == 1 && this.order.status == 2) {
        this.showContract = true;
      }
      for (let i in this.order.skill_str) {
        this.skillStr = `${this.skillStr} ${this.order.skill_str[i]}`
      }
    },
    components: {
      Group,
      Datetime,
      XButton
    },
    methods: {
      btnSubmint() {
        let that = this;

        //  预约日期判断
        if (that.bookingTime == '') {
          weui.alert('请选择预约日期');
          return
        }
        // 家政员不为空判断
        if (that.tech.length == '') {
          weui.alert('请输入家政员');
          return
        }
        // 家政员电话不为空判断
        if (that.techMobile.length == '') {
          weui.alert('请输入家政员电话');
          return
        }
        // 预约中
        if (that.order.contract == 1 && that.order.status == 1) {
          let stitching = `&id=${_.oldOrderInfo.id}&status=2&status_time=${ycTime(that.bookingTime)}&tech=${that.tech}&tech_mobile=${that.techMobile}`;
          axios.post(_.apiPath + 'j/HouseKeeping/Edit' + stitching).then(res => {
            if (res.data.success) {
              weui.alert('提交成功', function () {
                that.$router.push({path: '/managementList'});
              });
              return
            } else {
              weui.alert('提交失败');
              return
            }
          })
          return;
        }
        // 已面试
        if (that.order.contract == 1 && that.order.status == 2) {

          // 用户不想进入已面试阶段
          if (that.resServiceArr === 1) {
            let stitching = `&id=${_.oldOrderInfo.id}&contract=1&status=2&status_time=${ycTime(that.bookingTime)}&tech=${that.tech}&tech_mobile=${that.techMobile}`;
            axios.post(_.apiPath + 'j/HouseKeeping/Edit' + stitching).then(res => {
              statusF(res.data.success);
              return;
            })
            // 用户想进入已面试阶段
          } else {
            that.$vux.confirm.show({
              title: '提示',
              content: '请确定,家政员是否已面试',
              // 组件除show外的属性
              onCancel() {
              },
              onConfirm() {
                let stitching = `&id=${_.oldOrderInfo.id}&contract=1&status=3&status_time=${ycTime(that.bookingTime)}&tech=${that.tech}`;
                axios.post(_.apiPath + 'j/HouseKeeping/Edit' + stitching).then(res => {
                  statusF(res.data.success);
                  return;
                })
              }
            })
          }
        }

        // 已签约
        if (that.order.contract == 1 && that.order.status == 3) {
          that.$vux.confirm.show({
            title: '提示',
            content: '请确定,家政员是否已签约',
            // 组件除show外的属性
            onCancel() {
            },
            onConfirm() {
              let stitching = `&id=${_.oldOrderInfo.id}&contract=2`;
              axios.post(_.apiPath + 'j/HouseKeeping/Edit' + stitching).then(res => {
                statusF(res.data.success);
                return;
              })
            }
          })
        }

        // 提交返回状态
        function statusF(s) {
          if (s) {
            that.$vux.alert.show({
              title: '提示',
              content: '提交成功！',
              onShow() {
                // console.log('Plugin: I\'m showing')
              },
              onHide() {
                that.$router.push({path: '/managementList'});
                return;
              }
            })
          } else {
            that.$vux.alert.show({
              title: '提示',
              content: '提交失败！请稍后再试。',
              onShow() {
              },
              onHide() {
                that.$router.push({path: '/managementList'});
              }
            })
          }
        }
      },
      change(val) {
        this.bookingTime = val;
      },

      btnServiceForm() {
        let that = this;
        weui.picker(that.serviceArr, {
          className: 'custom-classname',
          container: 'body',
          defaultValue: [1],
          onChange: function (result) {
          },
          onConfirm: function (result) {
            that.serviceForm = result[0].label;
            that.resServiceArr = result[0].value;
          },
          id: 'singleLinePicker'
        });
      },
    },
    watch: {
      order: function (val, oldVal) {
        if (val == undefined) {
          this.$router.push({path: '/order'})
        }
      }
    }
  }

  // 日期转时间戳 2014-07-10
  function ycTime(t) {
    let stringTime = t + ':00';
    let timestamp = Date.parse(new Date(stringTime));
    timestamp = timestamp / 1000;
    return timestamp;
  }
</script>
<style scoped lang="less">
  .weui-cell {
    padding: 0 15px 0 0 !important;
  }

  title {
    display: block;
    padding: 15px 0;
    font-size: 30px;
    font-weight: 900;
    text-align: center;
  }

  .my-order-body {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    padding-left: 15px;
    & > div {
      font-size: 13px;
      padding: 5px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      &:last-child {
        border-bottom: 0;
      }
      & > span:nth-child(1) {
        width: 25%;
        display: inline-block;
        margin-right: 20px;
      }
      & > span:nth-child(2) {
        width: 60%;
        display: inline-block;
      }
    }
  }

  .stroe {
    display: flex;
    flex-direction: row;
  }

  .tech, .tech:focus {
    border: 0;
    outline: none
  }

  .m-btn {
    width: 80%;
    margin: 10% auto 0;
  }

  p {
    color: #2c3e50 !important;
    font-size: 15px !important;
  }
</style>