driverSchool/newPages/appointmentAdd/index.vue

<template>
  <view class="page flex-col">
    <view class="header">
      <headers titles="预约训练">
        <uni-icons @click="goback()" type="arrow-left" color="#000000"
                   size="22px"></uni-icons>
      </headers>
    </view>
    <view class="form_" >
      <view class="" style="background-color: white;padding: 10rpx 15rpx;border-radius: 15rpx">
        <u-form
            labelPosition="left"
            labelWidth="auto"
            labelAlign="center"
            :model="appointmentInfo"
            :rules="rules"
            ref="uForm"
        >
          <u-form-item
              label="课程名称"
              prop="userInfo.name"
              borderBottom
              ref="item1"
          >
            <u-input
                v-model="appointmentInfo.userInfo.name"
                border="none"
            ></u-input>
          </u-form-item>
          <u-form-item
              label="训练类型"
              prop="userInfo.sex"
              borderBottom
              @click="showSex = true; hideKeyboard()"
              ref="item1"
          >
            <u-input
                v-model="appointmentInfo.userInfo.sex"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择性别"
                border="none"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
              label="选择科目"
              prop="userInfo.sex"
              borderBottom
              @click="showSex = true; hideKeyboard()"
              ref="item1"
          >
            <u-input
                v-model="appointmentInfo.userInfo.sex"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择性别"
                border="none"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
              label="教练名称"
              prop="userInfo.sex"
              borderBottom
              @click="showSex = true; hideKeyboard()"
              ref="item1"
          >
            <u-input
                v-model="appointmentInfo.userInfo.sex"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择性别"
                border="none"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
        </u-form>

      </view>
    </view><view class="form_" >
      <view class="" style="background-color: white;padding: 10rpx 15rpx;border-radius: 15rpx">
        <u-form
            labelPosition="left"
            labelWidth="auto"
            :model="appointmentInfo"
            :rules="rules"
            ref="uForm"
        >
          <u-form-item
              label="累计训练时长"
              prop="userInfo.name"
              borderBottom
              ref="item1"
          >
            <u-input
                v-model="appointmentInfo.userInfo.name"
                border="none"
            ></u-input>
          </u-form-item>
          <u-form-item
              label="训练地址"
              prop="userInfo.sex"
              borderBottom
              @click="showSex = true; hideKeyboard()"
              ref="item1"
          >
            <u-input
                v-model="appointmentInfo.userInfo.sex"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择性别"
                border="none"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
              label="交通方式"
              prop="userInfo.sex"
              borderBottom
              @click="showSex = true; hideKeyboard()"
              ref="item1"
          >
            <u-input
                v-model="appointmentInfo.userInfo.sex"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择性别"
                border="none"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
              label="时间范围"
              prop="userInfo.sex"
              borderBottom
              @click="showSex = true; hideKeyboard()"
              ref="item1"
          >
            <u-input
                v-model="appointmentInfo.userInfo.sex"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择性别"
                border="none"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
        </u-form>

      </view>
    </view>
    <view class="section_4 flex-col bottom_">
      <view class="text-wrapper_5 flex-col">
        <text class="text_10">开始预约</text>
      </view>
    </view>
  </view>
</template>
<script>
import headers from "@/components/header/headers.vue";

export default {
  components: {headers},
  data() {
    return {
      rules: {},  // 确保 rules 至少是一个空对象
      constants: {},
      appointmentInfo: {}, // 预约信息
    };
  },
  methods: {
    goback() {
      uni.navigateBack()
    },
  }
};
</script>
<style lang='scss'>
@import '../common/common.scss';
@import './assets/style/index.rpx.scss';
.bottom_{
  position: fixed;
  bottom: 0;
}
.header {
  width: 100%;
  background: #f4f5f6;
  box-sizing: border-box;
  padding-top: 88px;
}
.form_ {
  padding: 10rpx 20rpx;
}
</style>