hair/src/views/Applyreal.vue

<template>
  <div class="apply">
    <van-nav-bar title="预定"  />
    <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
            }}({{ item.price }}元)</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="userphone"
        type="tel"
        label="联系电话"
        placeholder="联系电话"
        :rules="[{ required: true, message: '请填写联系电话' }]"
      />
      <div style="margin: 16px">
        <van-button
          color="#2a7ef4"
          round
          block
          type="info"
          native-type="submit"
        >
          提交
        </van-button>
      </div>
    </van-form>

    <!-- #2a7ef4 -->
  </div>
</template>

<script>
// @ is an alias to /src
import {
  NavBar as vanNavBar,
  Form as vanForm,
  Field as vanField,
  Button as vanButton,
  RadioGroup as vanRadioGroup,
  Radio as vanRadio,
  Toast
} from "vant";
import "vant/lib/nav-bar/style/index";
import "vant/lib/form/style/index";
import "vant/lib/toast/style/index";
import "vant/lib/field/style/index";
import "vant/lib/button/style/index";

import { goodsList, applyreal } from "../api/index";

export default {
  name: "Applyreal",
  data() {
    return {
      username: "",
      userphone: "",
      radio: "",
      finished: false,
      loading: false,

      goodsLi: [],
    };
  },
  mounted() {
    goodsList().then(res => {
      this.goodsLi = res || [];
      this.radio = (this.goodsLi[0] || {}).id;
    });
   
  },
  computed: {},
  methods: {
    filter(type, options) {
      if (type === "minute") {
        return options.filter(option => option % 5 === 0);
      }
      return options;
    },
    onSubmit() {
      applyreal({
        userName: this.username,
        userPhone: this.userphone,
        goodsId: this.radio,
      }).then(() => {
          Toast("预约成功")
      });
    },
  },
  beforeUnmount: function () {},
  components: {
    vanNavBar,
    vanForm,
    vanField,
    vanButton,
    vanRadioGroup,
    vanRadio,
  },
};
</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;
}
.apply .van-radio{
    margin-bottom: 14px
}
</style>