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

<template>
  <div class="box">
    <div style="position: fixed;z-index:-15;background-color: #eeeeef;top: 0;bottom: 0;right: 0;left: 0;"></div>
    <title class="order-body-title">预约信息<span @click="back"></span></title>
    <div class="order-body">
      <div class="my-order-body">
        <div><span class="title">创建：</span>{{order.time_str}}</div>
        <div><span class="title">姓名：</span>{{order.user_name}}</div>
        <div><span class="title">手机：</span><a id='tel' class="edit"
                                              v-bind:href='`tel:${order.mobile}`'>{{order.mobile}}</a>
        </div>

        <div><span class="title">地址：</span>{{order.address}}</div>

        <!--
        <div class="stroe"><span class="title"
                                 style="display: flex;align-items: center;"><span>门店：</span></span><span>
          {{store.name }}（{{store.address}}）<br>门店电话:<a id='tel' class="edit"
                                                        v-bind:href='`tel:${store.mobile}`'>{{store.mobile}}</a>
        </span></div>
        -->

        <div class="stroe"><span class="title"
                                 style="display: flex;align-items: center;"><span>门店：</span></span><span>{{store.name }}</span>
        </div>
        <div><span class="title">服务：</span>{{order.type_str}}</div>

        <div v-if='order.type -1 == 0'><span
          class="title">时间：</span>{{time.start}} ~ {{time.end}}
        </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 != 0'><span class="title">{{order.type > 2?'日期':'预产'}}：</span>{{order.yc_time}}
        </div>
        <div v-if='order.type -1 == 2'><span class="title">童龄：</span>{{order.age}}岁</div>
        <div><span class="title">备注：</span>{{order.desc}}</div>
        <!--<div v-if="showContract"><span class="title">状态：</span><span @click='btnContract'>{{contractStr}}</span></div>-->
        <div v-if="order.contract != 2"
             style="width: 100%;border-bottom: 1px solid #afafaf;height: 1px;margin:20px 0;"></div>
        <div v-if='!showTech  && order.status != 4 '><span class="title edit_title">人员：</span>{{order.tech}}</div>
        <div v-if="order.status === 3 && order.status != 4 "><span class="title edit_title">手机：</span><span>{{order.tech_mobile}}</span>
        </div>
        <div v-if="order.status >  2 && order.status != 4"><span class="title edit_title">面试：</span>{{order.status_time
          == '1970-01-01 08:00:00'?'未设置面试时间':order.status_time}}
        </div>
        <div v-if="order.status == 4"><span class="title edit_title ">原因:</span>{{order.cancel_cause}}</div>


        <!--showContract  btnContract-->
        <div v-if="order.status === 3 && order.contract === 2"><span class="title">状态：</span>{{order.contract_str}}
        </div>

        <!--家政员-->
        <div v-if="showTech && order.status != 4 && tech == ''">
          <span class="title edit_title">人员：</span><span class="edit" style="display:inline-block;"
                                                         @click="selectF">自动筛选家政员</span>
        </div>
        <div v-if="showTech && order.status != 4 && tech != ''">
          <span class="title edit_title">人员：</span><span class="edit" @click="selectF">{{tech}}</span>
        </div>
        <div v-if="order.status !== 3 && order.contract !== 2  && order.status != 4  && techMobile != ''">
          <span class="title edit_title">手机：</span><span class="edit" @click="selectF">{{techMobile}}</span>
        </div>
        <!--
        家政员
        <div v-if="showTech && order.status != 4">
          <span class="title">人员：</span><span><input v-model="tech" class="tech edit" type="text"
                                                      placeholder='请输入家政员'></span>
        </div>
        <div v-if="order.status !== 3 && order.contract !== 2  && order.status != 4 ">
          <span class="title">手机：</span><span><input v-model="techMobile" class="tech edit" type="text"
                                                        placeholder='请输入人员电话'></span>
        </div>

        -->
        <!--预约日期-->
        <div v-if="showStatus && order.status != 4">
          <!--选择时间-->
          <!--<span>预约日期:</span>
          <span class="edit"  @click="getTimes">{{bookingTime}}</span>-->
          <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="order.status === 1 && order.contract !== 2">
          <span class="title edit_title">状态：</span><span class="edit" @click='btnAppointmentStatus'>{{appointmentStatusStr.label}}</span>
        </div>
        <!--取消原因-->
        <div v-if="showTechAppointmentStatus" style="margin-top: 5px;">
          <span class="title edit_title">原因：</span><span><input v-model="showTechAppointmentStatusStr" class="tech edit"
                                                                type="text"
                                                                style="font-size: 15px"
                                                                placeholder='请输入取消原因'></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 edit_title">状态：</span>
          <span style="margin-left: -4px;" @click="btnServiceForm" class="edit">{{serviceForm}}</span>
        </div>
        <div v-if="order.status == 3 && order.contract != 2">
          <span class="title edit_title">状态：</span>
          <span style="margin-left: -4px;" @click="btnContractFrom" class="edit">{{contractFrom}}</span>
        </div>

      </div>
    </div>
    <div v-if="btnSubmintStrShow && order.status != 4" class="m-btn" @click="btnSubmint">
      {{btnSubmintStr}}
      <!--<x-button type="primary" @click.native='btnSubmint'>{{btnSubmintStr}}</x-button>-->
    </div>
  </div>
</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}
        ],
        contractArr: [
          {label: "未签约", value: 1},
          {label: "已签约", value: 2}
        ],
        appointmentStatus: [
          {
            label: "已预约",
            value: 0
          },
          {
            label: "已取消",
            value: 1
          }
        ],
        appointmentStatusStr: "", // 预约状态
        showTechAppointmentStatus: false, // 取消原因
        showTechAppointmentStatusStr: "",
        serviceForm: "未面试",
        resServiceArr: 1,
        contractFrom: "未签约",
        resContract: 1,
        order: {},
        eAppointmentDate: false,
        monthArr: {},
        skillStr: "", // 服务技能
        bookingTime: "请选择日期", // 服务时间
        time: {
          start: "",
          end: ""
        },
        value: ["2017-06-24", "03", "05"], // 设定日期格式
        startDate: selectTime.startDate, // 限定最小日期
        endDate: "", // 限定最大日期
        tech: "",
        techMobile: "",
        store: {
          name: "",
          address: "",
          mobile: ""
        },
        showTech: false, // 家政员
        showContract: false, // 签约状态
        contractStr: "未签约",
        contractStrArr: [],
        btnSubmintStr: "提交",
        // btnSubmintStr: '已预约',
        btnSubmintStrShow: true,
        showStatus: false, // 预约状态
        homeClerkDetails: {} // 家政员信息
      };
    },
    created() {
      let self = this;
      // 初始化订单状态 => 已预约
      self.appointmentStatusStr = self.appointmentStatus[0];
      // 设置订单中门店信息
      if (_.orderInfo.store.name == undefined) {
        _.$http(
          "/j/HouseKeeping/GetStore", {
            user_id: _.user_id
          }, res => {
            for (let i in res.data) {
              // 筛选出订单中的门店信息
              if (res.data[i].store_id == _.oldOrderInfo.store_id) {
                self.store.name = res.data[i].store_name;
                self.store.address = res.data[i].address;
                self.store.mobile = res.data[i].mobile;
                // 初始化门店信息
                _.orderInfo.store.name = self.store.name;
                _.orderInfo.store.address = self.store.address;
                _.orderInfo.store.mobile = self.store.mobile;
                return;
              }
            }
          }
        );
      } else {
        // 首次进入该界面前
        self.store.name = _.orderInfo.store.name;
        self.store.address = _.orderInfo.store.address;
        self.store.mobile = _.orderInfo.store.mobile;
      }

      if (_.oldOrderInfo === undefined) {
        self.$router.push({path: "/managementList"});
        return;
      }
      // 编辑界面
      /*setTimeout(() => {
          let $clientHeight = document.documentElement.clientHeight,
            $time = document.getElementsByClassName('order-body-title'),
            $orderBody = document.getElementsByClassName('order-body'),
            $mBtn = document.getElementsByClassName('m-btn'),
            $mBtnHeight = $mBtn[0] != undefined ? $mBtn[0].clientHeight : 0;
          $orderBody[0].style.height = $clientHeight - $time[0].clientHeight - $mBtnHeight + 15 + 'px';
        }, 200);*/
      self.order = _.oldOrderInfo;
      // 状态编辑
      // 时间
      self.order.time_str = _.timetrans(self.order.time);
      // 已面试
      if (self.order.contract === 1 && self.order.status === 2) {
        self.btnSubmintStr = "提交";
      }
      // 已签约
      if (self.order.contract === 1 && self.order.status === 3) {
        self.btnSubmintStr = "提交";
        // self.btnSubmintStr = '已签约'
      }
      // 已完成
      if (self.order.contract === 2 && self.order.status === 3) {
        self.btnSubmintStrShow = false;
      }

      // 预约时间
      // console.log(self.order.status_time);
      // console.log(self.bookingTime);
      // console.log(_.oldOrderInfo.bookingTime);
      if (self.order.status_time != 0) {
        self.bookingTime = self.order.status_time;
        if (_.oldOrderInfo.bookingTime == undefined) {
          _.oldOrderInfo.bookingTime = self.bookingTime;
        }
      }
      if (_.oldOrderInfo.bookingTime != undefined) {
        self.bookingTime = _.oldOrderInfo.bookingTime;
      }


      // 家政员
      if (self.order.tech.length > 0) {
        self.tech = self.order.tech;
      }
      // 家政员电话
      if (self.order.tech_mobile !== "") {
        self.techMobile = self.order.tech_mobile;
      }
      // 家政员信息赋值
      if (_.oldOrderInfo != undefined && _.oldOrderInfo.homeClerkDetails != undefined) {
        self.homeClerkDetails = _.oldOrderInfo.homeClerkDetails;
        self.tech = self.homeClerkDetails.name;
        // self.order.tech = self.homeClerkDetails.name;
        // _.oldOrderInfo.tech = self.homeClerkDetails.name;
        // _.oldOrderInfo.tech_mobile = self.homeClerkDetails.phone;
        self.techMobile = self.homeClerkDetails.phone;
        // self.order.tech_mobile = self.homeClerkDetails.phone;
        // console.log(205)
      }
      if (_.oldOrderInfo.homeClerkDetails == undefined) {
        // console.log(207)
        self.tech = self.order.tech;
        self.techMobile = self.order.tech_mobile;
      }
      // 转化时间格式
      // this.order.yc_time = _.timetrans(this.order.yc_time); // 预产期
      this.order.yc_time = this.order.yc_time.substring(0, 10); // 预产期
      this.time.start = _.timetrans(this.order.server_start_time);
      this.time.start = this.time.start.substring(11, 16);
      this.time.end = _.timetrans(this.order.server_end_time);
      this.time.end = this.time.end.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: {
      // 给家政员发送短信
      btnServer() {
        let self = this;
        _.$http("/j/HouseKeeping/Server", {
          user_name: self.tech,
          servers: self.order.type_str,
          status_time: ycTime(self.bookingTime),
          store: self.store.name,
          address: self.store.address,
          mobile: self.store.mobile,
          phone: self.techMobile
        }, res => {
          console.log(res.data)
        })
      },
      // 选择家政员
      selectF() {
        /*if (this.bookingTime === '请选择日期') {
            weui.alert('请先选择预约日期,再选择家政员');
            return
          } else {
            this.$router.push({path: '/managementEmployee'})
          }*/
        this.$router.push({path: "/managementEmployee"});
      },
      // 预约状态
      btnAppointmentStatus() {
        let self = this;
        weui.picker(self.appointmentStatus, {
          className: "custom-classname",
          container: "body",
          defaultValue: [0],
          onChange: function (result) {
            // console.log(result)
          },
          onConfirm: function (result) {
            // console.log(result)
            self.appointmentStatusStr = result[0];
            if (self.appointmentStatusStr.value === 1) {
              self.btnSubmintStr = "提交";
              // self.btnSubmintStr = '已取消';
              self.showTechAppointmentStatus = true;
              // console.log('123')
            } else {
              self.btnSubmintStr = "提交";
              // self.btnSubmintStr = '已预约';
              self.showTechAppointmentStatus = false;
            }
          },
          id: "singleLinePicker"
        });
      },
      btnSubmint() {
        let self = this;

        if (self.appointmentStatusStr.value != 1) {
          // 家政员不为空判断
          if (self.tech.length == "" && !self.appointmentStatusStr.value) {
            weui.alert("请筛选家政员");
            return;
          }

          //  预约日期判断
          if (self.bookingTime == '请选择日期' || self.bookingTime == "" && !self.appointmentStatusStr.value) {
            weui.alert("请选择预约日期");
            return;
          }
        }

        // 预约中
        if (self.order.contract == 1 && self.order.status == 1) {
          // 已预约
          if (!self.appointmentStatusStr.value) {
            _.$http(
              "/j/HouseKeeping/Edit",
              {
                id: _.oldOrderInfo.id,
                status: 2,
                flag: 1,
                status_time: ycTime(self.bookingTime),
                tech: self.tech,
                tech_mobile: self.techMobile
              },
              res => {
                if (res.data.success) {
                  self.btnServer();
                  weui.alert("提交成功", function () {
                    self.$router.push({path: "/managementList"});
                  });
                  return;
                } else {
                  weui.alert("提交失败");
                  return;
                }
              }
            );
            return;
          } else {
            // 已取消
            // 取消原因不为空
            if (self.showTechAppointmentStatusStr == "") {
              weui.alert("请输入取消原因!");
              return;
            }
            self.$vux.confirm.show({
              title: "提示",
              content: "请确定,是否取消该预约?",
              // 组件除show外的属性
              onCancel() {
              },
              onConfirm() {
                _.$http(
                  "/j/HouseKeeping/Edit",
                  {
                    id: _.oldOrderInfo.id,
                    status: 4,
                    cancel_cause: self.showTechAppointmentStatusStr
                  },
                  res => {
                    if (res.data.success) {
                      weui.alert("提交成功", function () {
                        self.$router.push({path: "/managementList"});
                      });
                      return;
                    } else {
                      weui.alert("提交失败");
                      return;
                    }
                  }
                );
                return;
              }
            });
          }
        }
        // 已面试
        if (self.order.contract == 1 && self.order.status == 2) {
          // 用户不想进入已面试阶段
          if (self.resServiceArr === 1) {
            // 时间未发生变化 || 家政员未发生变化
            if (
              _.oldOrder.tech == self.tech &&
              ycTime(self.bookingTime) == ycTime(self.order.status_time)
            ) {
              self.$vux.alert.show({
                // title:'提示',
                content: "请勿重复提交"
              });
            } else if (
              // 时间发生变化,但是家政员不变
            ycTime(self.bookingTime) != ycTime(self.order.status_time)) {
              self.$vux.confirm.show({
                // title: '提示',
                content: "提交后将给客户发送预约短信，确认提交吗？",
                onCancel() {
                },
                onConfirm() {
                  _.$http(
                    "/j/HouseKeeping/Edit",
                    {
                      id: _.oldOrderInfo.id,
                      contract: 1,
                      status: 2,
                      flag: 1,
                      status_time: ycTime(self.bookingTime),
                      tech: self.tech,
                      tech_mobile: self.techMobile
                    },
                    res => {
                      if (_.oldOrder.tech != self.tech) {
                        self.btnServer();
                      }
                      statusF(res.data.success);
                      return;
                    }
                  );
                }
              });
            } else if (
              // 时间发生变化,但是家政员不变
            ycTime(self.bookingTime) == ycTime(self.order.status_time) &&
            _.oldOrder.tech != self.tech
            ) {
              _.$http(
                "/j/HouseKeeping/Edit",
                {
                  id: _.oldOrderInfo.id,
                  contract: 1,
                  status: 2,
                  status_time: ycTime(self.bookingTime),
                  tech: self.tech,
                  tech_mobile: self.techMobile
                },
                res => {
                  self.btnServer();
                  statusF(res.data.success);
                  return;
                }
              );
            }
            // 用户想进入已面试阶段
          } else {
            // 已面试，但编辑过家政员或面试日期，进行拦截
            if (
              self.tech != _.oldOrder.tech ||
              ycTime(self.order.status_time) != ycTime(self.bookingTime)
            ) {
              self.$vux.alert.show({
                content: "提交失败！",
              })
              return
            }
            self.$vux.confirm.show({
              title: "提示",
              content: "请确定,家政员是否已面试",
              // 组件除show外的属性
              onCancel() {
              },
              onConfirm() {
                _.$http(
                  "/j/HouseKeeping/Edit",
                  {
                    id: _.oldOrderInfo.id,
                    contract: 1,
                    status: 3,
                    status_time: ycTime(self.bookingTime),
                    tech: self.tech
                  },
                  res => {
                    statusF(res.data.success);
                    return;
                  }
                );
              }
            });
          }
        }

        // 已签约
        if (self.order.contract == 1 && self.order.status == 3) {
          if (self.resContract == 2) {
            self.$vux.confirm.show({
              title: "提示",
              content: "请确定,家政员是否已签约",
              // 组件除show外的属性
              onCancel() {
              },
              onConfirm() {
                _.$http(
                  "/j/HouseKeeping/Edit",
                  {
                    id: _.oldOrderInfo.id,
                    contract: 2
                  },
                  res => {
                    statusF(res.data.success);
                    return;
                  }
                );
              }
            });
          } else {
            self.$vux.alert.show({
              title: "提示",
              content: "请先选择签约状态,然后提交!"
            });
          }
        }

        // 提交返回状态
        function statusF(s) {
          if (s) {
            self.$vux.alert.show({
              title: "提示",
              content: "提交成功！",
              onShow() {
                // console.log('Plugin: I\'m showing')
              },
              onHide() {
                self.$router.push({path: "/managementList"});
                return;
              }
            });
          } else {
            self.$vux.alert.show({
              title: "提示",
              content: "提交失败！请稍后再试。",
              onShow() {
              },
              onHide() {
                self.$router.push({path: "/managementList"});
              }
            });
          }
        }
      },
      change(val) {
        this.bookingTime = val;
        // console.log(this.bookingTime)
        _.oldOrderInfo.bookingTime = this.bookingTime;
      },
      //  预约日期
      getTime() {
        let self = this;
        // 组件内使用
        this.$vux.datetime.show({
          value: "", // 其他参数同 props
          format: "YYYY-MM-DD HH:00",
          yearRow: "{value}年",
          monthRow: "{value}月",
          dayRow: "{value}日",
          hourRow: "{value}点",
          confirmText: "完成",
          cancelText: "取消",
          onHide() {
            const _this = this;
            self.bookingTime = _this.value;
          },
          onShow() {
            const _this = this;
            // console.log(_this)
          }
        });
      },
      btnServiceForm() {
        let self = this;
        weui.picker(self.serviceArr, {
          className: "custom-classname",
          container: "body",
          defaultValue: [1],
          onChange: function (result) {
          },
          onConfirm: function (result) {
            self.serviceForm = result[0].label;
            self.resServiceArr = result[0].value;
          },
          id: "singleLinePicker"
        });
      },
      btnContractFrom() {
        let self = this;
        weui.picker(self.contractArr, {
          className: "custom-classname",
          container: "body",
          defaultValue: [1],
          onChange: function (result) {
          },
          onConfirm: function (result) {
            self.contractFrom = result[0].label;
            self.resContract = result[0].value;
          },
          id: "singleLinePicker"
        });
      },
      back() {
        this.$router.push("/managementList");
        // this.$router ? this.$router.back() : window.history.back()
      }
    },
    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 {
    background-color: white;
    margin-bottom: 5px;
    display: block;
    padding-top: 0.8rem;
    font-size: 1rem;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #eeeeef;
    span {
      content: "";
      width: 20px;
      height: 20px;
      position: absolute;
      left: 15px;
      bottom: 10px;
      background-image: url("http://oduj3utzz.bkt.clouddn.com/arrow_left_2.svg");
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center;
    }
  }

  .order-body {
    padding: 15px;
    background-color: #eeeeef;
    display: flex;
    /*@media (width: 375px) and (height: 812px) {
        height: 89.5vh;
      }*/

    .my-order-body {
      background-color: #fff;
      padding: 10px;
      /*padding-left: 30px;*/
      margin-top: 45px;
      @media (max-width: 320px) {
        /*padding: 0;*/
        /*padding-left: .5rem;*/
        /*margin-bottom: 20%;*/
      }

      flex: 1;
      & > div {
        color: #afafaf;
        background-color: white;
        font-size: 17px;
        padding: 3px 0;

        @media (max-width: 320px) {
          padding: 1px 0;
          font-size: 14.5px;
        }
        & > span:nth-child(1) {
          /*width: 25%;
            padding-left: 15px;
            display: inline-block;
            margin-right: 20px;
    */
          min-width: 65px;
          @media (max-width: 320px) {
            /*min-width: 80px;*/
          }
          /*flex: 2;*/
          color: #6a696a;
          font-weight: bold;
          text-align: left;
          /*padding-left: 15px;*/
          display: inline-block;
        }

        & > span:nth-child(2) {
          /*width: 60%;*/
          /*flex: 7;*/
          display: inline-block;
        }
      }
    }
  }

  .edit {
    color: #f4bf69;
  }

  .edit_title {
    color: #208bb7 !important;
    font-weight: 100 !important;
  }

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

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

  .m-btn {
    width: 100%;
    /*margin: 10% auto 0;*/
    bottom: 0;
    /*position: fixed;*/
    color: white;
    font-size: 1.2rem;
    padding: 0.5rem 0;
    text-align: center;
    /*min-height: 10vh;*/
    background-color: #ffb433;
  }

  /* .weui-cell_access p {
     color: #afafaf !important;
     font-weight: bold !important;
     font-size: 0.7rem !important;
   }*/
</style>