hair/src/views/Apply.vue

<template>
  <div class="apply">
    <van-form @submit="onSubmit">
      <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: '未选择预定时间' }]"
      />
      <div style="margin: 16px">
        <br />
        <br />
        <van-button
          color="#e42417"
          round
          block
          type="info"
          native-type="submit"
        >
          确认预约
        </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>
    </van-form>

    <!-- #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/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";
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() {
    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 || "";
      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.replace({
        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() {
      apply({
        userName: this.username,
        userPhone: this.userphone,
        goodsId: this.radio,
        orderTime: this.date + ":00",
      }).then(() => {
        this.$router.replace({
          name: "Appointment",
          query: {
            userName: this.username,
            phone: this.userphone,
          },
        });
      });
    },
    onConfirm(date) {
      this.dateInput = false;
      this.date = date.join(" ");
    },
    onConfirmpro(date){
        this.program = false;
        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>