hair/src/views/Apply.vue

<template>
  <div class="apply">
    <van-form ref="form">
      <van-field
        v-model="username"
        label="姓名"
        readonly
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="userphone"
        readonly
        type="tel"
        label="联系电话"
        placeholder="联系电话"
        :rules="[{ required: true, message: '请填写联系电话' }]"
      />
      <van-field
        @click="() => (program = true)"
        v-model="radioname"
        label="套餐"
        placeholder="请选择套餐"
        readonly
        :rules="[{ required: true, message: '未选择套餐' }]"
      />
      <!-- <van-radio-group v-model="radio" direction="horizontal">
            <van-radio v-for="(item, i) in goodsLi" :key="i" :name="item.id"
              >{{ item.name }}({{ item.price }}元)</van-radio
            >
          </van-radio-group> -->
      <van-field
        @click="() => (dateInput = true)"
        v-model="selectTime"
        label="预定时间"
        placeholder="请选择预定时间"
        readonly
        :rules="[{ required: true, message: '未选择预定时间' }]"
      />
    </van-form>
    <br />
    <br />
    <div style="margin: 0 16px">
      <van-button color="#e42417" round block type="info" @click="onSubmit">
        确认预约
      </van-button>
      <br />
      <van-button round block type="default" @click="toAppointment">
        查看预约列表
      </van-button>
      <br />
      <!-- <van-button round block type="info" @click="price">
          查看价目表
        </van-button> -->
    </div>

    <!-- #2a7ef4 -->
    <van-popup round v-model="dateInput" position="bottom">
      <van-picker
        title="选择预约时间"
        @cancel="dateInput = false"
        @confirm="onConfirm"
        value-key="startTime"
        show-toolbar
        :columns="tagList"
      />
    </van-popup>
    <!-- #2a7ef4 -->
    <van-popup round v-model="program" position="bottom">
      <van-picker
        title="选择套餐"
        @cancel="program = false"
        @confirm="onConfirmpro"
        value-key="name"
        show-toolbar
        :columns="goodsLi"
      />
    </van-popup>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Form as vanForm,
  Field as vanField,
  Button as vanButton,
  Popup as vanPopup,
  //   RadioGroup as vanRadioGroup,
  //   Radio as vanRadio,
  Picker as vanPicker,
  ImagePreview,
} from "vant";
import "vant/lib/form/style/index";
import "vant/lib/tag/style/index";
import "vant/lib/field/style/index";
import "vant/lib/button/style/index";
import "vant/lib/popup/style/index";
import "vant/lib/picker/style/index";
import { urlSearchData } from "../utils/tool";
import {
  getAPPUser,
  apply,
  getAPPToken,
  getAPPUserDetail,
  goodsList,
  applyrang,
} from "../api/index";
// import { goodsList, apply, applyrang } from "../api/index";
// import { isIphone, isAndroid } from "@/utils/isTerminal.js";

export default {
  name: "Apply",
  data() {
    return {
      program: false,
      username: "",
      userphone: "",
      date: "",
      currentDate: "",
      dateInput: false,
      minDate: new Date(Date.now()),
      maxDate: new Date(Date.now() + 86400000),
      radio: "",
      radioname: "",
      finished: false,
      loading: false,

      goodsLi: [],
      tagList: [],
    };
  },
  mounted() {
    let search = urlSearchData(),
      that = this;
    if (!search.ticket) return;
    getAPPUser({
      ticket: search.ticket,
    }).then(r => {
      getAPPToken("rest/63bada00-7d01-4acc-ab2b-df8061eeeb8f").then(res => {
        const t = JSON.parse(res || "{}");
        localStorage.token = t.id;
        getAPPUserDetail({
          loginName: r,
        }).then(detail => {
          const obj = JSON.parse(detail || "{}");
          that.userphone = obj.telNumber;
          that.username = obj.name;
          goodsList({
            userPhone: that.userphone || "",
          }).then(res => {
            this.goodsLi = (res || []).map(v => {
              v.name = v.name + "(" + v.price + "元)";
              return v;
            });
            this.radio = (this.goodsLi[0] || {}).id;
          });
          applyrang().then(res => {
            let l = res || [],
              nl = [],
              o = {};
            for (let i = 0; i < l.length; i++) {
              const v = l[i];
              if (v.isOrder === 1) continue;
              let keys = v.startTime.split(" "),
                key = keys[0],
                val = keys[1];
              v.startTime = val.replace(/:00$/, "");
              if (o[key] >= 0) {
                nl[o[key]].children.push(v);
              } else {
                o[key] = nl.length;
                nl[o[key]] = {
                  startTime: key,
                  children: [v],
                };
              }
            }
            this.tagList = nl;
          });
        });
      });
    });
    // window.voteNext = () => {
    //   let user = "";
    //   var payload = {
    //     type: "JSbridge",
    //     functionName: "getUserInfo",
    //     arguments: {},
    //   };
    //   if (isAndroid && window.H5Listener && window.H5Listener.getUserInfo)
    //     user = window.H5Listener.getUserInfo();
    //   if (isIphone) user = window.prompt(JSON.stringify(payload));
    //   user && (user = JSON.parse(user || "{}"));
    //   this.userphone = user.phone || "";
    //   this.username = user.realName || "";
    //   if (!this.userphone) {
    //     if (isAndroid && window.H5Listener && window.H5Listener.getUserInfo)
    //       window.H5Listener.doLogin();
    //     if (isIphone && window.webkit && window.webkit.messageHandlers)
    //       window.webkit.messageHandlers.doLogin.postMessage("{}");
    //   }
    //   goodsList().then(res => {
    //     this.goodsLi = (res || []).map(v => {
    //       v.name = v.name + "(" + v.price + "元)";
    //       return v;
    //     });
    //     this.radio = (this.goodsLi[0] || {}).id;
    //   });
    //   applyrang().then(res => {
    //     let l = res || [],
    //       nl = [],
    //       o = {};
    //     for (let i = 0; i < l.length; i++) {
    //       const v = l[i];
    //       if (v.isOrder === 1) continue;
    //       let keys = v.startTime.split(" "),
    //         key = keys[0],
    //         val = keys[1];
    //       v.startTime = val.replace(/:00$/, "");
    //       if (o[key] >= 0) {
    //         nl[o[key]].children.push(v);
    //       } else {
    //         o[key] = nl.length;
    //         nl[o[key]] = {
    //           startTime: key,
    //           children: [v],
    //         };
    //       }
    //     }
    //     this.tagList = nl;
    //   });
    // };
    // window.voteNext();
  },
  computed: {
    selectTime() {
      return this.date;
    },
  },
  methods: {
    price() {
      ImagePreview([
        "https://djweb.smcic.net/miniProgrammeData/img/price.jpg?v=" +
          Date.now(),
      ]);
    },
    toAppointment() {
      this.$router.push({
        name: "Appointment",
        query: {
          userName: this.username,
          phone: this.userphone,
        },
      });
    },
    filter(type, options) {
      if (type === "minute") {
        return options.filter(option => option % 5 === 0);
      }
      return options;
    },
    onSubmit() {
      this.$refs.form.validate().then(() => {
        apply({
          userName: this.username,
          userPhone: this.userphone,
          goodsId: this.radio,
          orderTime: this.date + ":00",
        }).then(() => {
          this.toAppointment();
        });
      });
    },
    onConfirm(date) {
      this.dateInput = false;
      this.date = date.join(" ");
    },
    onConfirmpro(date) {
      this.program = false;
      this.radio = date.id;
      this.radioname = date.name;
    },
  },
  beforeUnmount: function () {},
  components: {
    vanForm,
    vanField,
    vanPopup,
    vanButton,
    // vanRadioGroup,
    // vanRadio,
    vanPicker,
  },
};
</script>

<style>
.apply {
  height: 100%;
  background-color: #fff;
}
.apply .van-tag {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apply .van-radio {
  margin-bottom: 3px;
}
.apply .van-button--default {
  border-color: #c7c8c8;
}
</style>