hair/src/views/Apply.vue

<template>
  <div class="apply">
    <van-nav-bar title="预定" :left-arrow="back" @click-left="$router.go(-1)" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field label="套餐">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio v-for="(item, i) in goodsLi" :key="i" :name="item.id">{{
              item.name
            }}</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="userphone"
        type="tel"
        label="联系电话"
        placeholder="联系电话"
        :rules="[{ required: true, message: '请填写联系电话' }]"
      />
      <van-field
        @click="() => (dateInput = true)"
        v-model="selectTime"
        label="预定时间"
        placeholder="预定时间"
        readonly
        :rules="[{ required: true, message: '请选择预定时间' }]"
      />
      <div style="margin: 16px">
        <van-button
          color="#2a7ef4"
          round
          block
          type="info"
          native-type="submit"
        >
          提交
        </van-button>
      </div>
    </van-form>
    <div style="margin: 16px">
      <!-- <div style="margin: 16px" v-if="!back"> -->
      <van-button round block type="default" @click="toAppointment">
        查看预约
      </van-button>
    </div>

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

<script>
// @ is an alias to /src
import {
  NavBar as vanNavBar,
  Form as vanForm,
  Field as vanField,
  Button as vanButton,
  Popup as vanPopup,
  RadioGroup as vanRadioGroup,
  Radio as vanRadio,
  Picker as vanPicker,
} from "vant";
import "vant/lib/nav-bar/style/index";
import "vant/lib/form/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 { goodsList, apply, applyrang } from "../api/index";

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

      goodsLi: [],
      tagList: [],
    };
  },
  mounted() {
    this.userphone = this.$route.query.phone || "";
    this.username = this.$route.query.userName || "";
    this.back = !location.href.split("?")[1];
    goodsList().then(res => {
      this.goodsLi = res || [];
      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];
        let keys = v.startTime.split(" "),
          key = keys[0],
          val = keys[1];
        v.startTime = val;
        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;
    });
  },
  computed: {
    selectTime() {
      return this.date;
    },
  },
  methods: {
    filter(type, options) {
      if (type === "minute") {
        return options.filter(option => option % 5 === 0);
      }
      return options;
    },
    toAppointment() {
      this.$router.push({ name: "Appointment", query: { phone: this.userphone } });
    },
    onSubmit() {
      apply({
        userName: this.username,
        userPhone: this.userphone,
        goodsId: this.radio,
        orderTime: this.date,
      }).then(() => {
        this.toAppointment();
      });
    },
    onConfirm(date) {
      this.dateInput = false;
      this.date = date.join(" ");
    },
  },
  beforeUnmount: function () {},
  components: {
    vanNavBar,
    vanForm,
    vanField,
    vanPopup,
    vanButton,
    vanRadioGroup,
    vanRadio,
    vanPicker,
  },
};
</script>

<style>
.apply {
  height: 100%;
  max-width: 990px;
  margin: 0 auto;
  background-color: #fff;
}
.apply .van-tag {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>