driverSchool/pagesA/appointmentAdd/index.vue

<template>
  <view class="page flex-col">
    <view class="header">
      <headers titles="预约">
        <uni-icons type="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="courseName" @click="showCourse = true" ref="item1">
            <u-input v-model="appointmentInfo.courseName" 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="courseType" ref="item1">
            <u-input v-model="appointmentInfo.courseType" disabled disabledColor="#ffffff"
                     placeholder="请选择训练类型" border="none"></u-input>
          </u-form-item>
          <u-form-item label="选择科目" prop="subject" ref="item1">
            <u-input v-model="appointmentInfo.subjectStr" disabled disabledColor="#ffffff"
                     placeholder="请选择科目" border="none"></u-input>
          </u-form-item>
          <u-form-item label="教练名称" prop="coachName" ref="item1">
            <u-input v-model="appointmentInfo.coachName" disabled disabledColor="#ffffff"
                     placeholder="请选择教练" border="none"></u-input>
          </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="name" ref="item1">
            <u-input v-model="appointmentInfo.trainTime" disabled disabledColor="#ffffff"
                     border="none"></u-input>
          </u-form-item>
          <u-form-item label="日期选择" prop="dateStr" @click="showDate = true;"
                       ref="item1">
            <u-input v-model="appointmentInfo.dateStr" 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="time" borderBottom @click="showTime = true;"
                       ref="item1" :borderBottom="false">
            <u-input v-model="appointmentInfo.time" disabled disabledColor="#ffffff"
                     placeholder="请选择时间范围" border="none"></u-input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </u-form>
      </view>
    </view>
    <u-picker :show="showCourse" @close="showCourse = false" keyName="courseName" @cancel="showCourse = false"
              @confirm="confirmCourse" :columns="[courseList]"></u-picker>
    <u-picker :show="showTime" @close="showTime = false" keyName="label" @cancel="showTime = false"
              @confirm="confirmTime" :columns="[timeColumns]"></u-picker>
    <u-calendar :show="showDate" @confirm="confirmDate" @close="showDate = false"></u-calendar>
    <view class="section_4 flex-col bottom_">
      <view class="text-wrapper_5 flex-col" @click="submit">
        <text class="text_10">开始预约</text>
      </view>
    </view>
  </view>
</template>
<script>
import headers from "@/components/header/headers.vue";
import request from "@/utils/request";
import {getDictDataByType} from "@/utils/utils";
import {getLocalUserInfo} from "@/utils/auth";

export default {
  components: {
    headers
  },
  data() {
    return {
      constants: {},
      appointmentInfo: {
        subjectStr: '',
        courseName: '',
        coachName: '',
        trainTime: '',
        dateStr: '',
        time: '',
        coachId: '',
      }, // 预约信息
      showCourse: false,
      courseList: [], //报名的课程信息
      showDate: false,
      showTime: false,
      tenantId: '',
      subjectColumns: [{
        label: '科目二',
        value: 2
      },
        {
          label: '科目三',
          value: 3
        },
      ],
      //时间段数组 查询字典
      timeColumns: '',
      showSubject: false,
      rules: {
        time: [{
          required: true,
          message: '请选择时间',
          trigger: 'change'
        }],
        courseName: [{
          required: true,
          message: '请选择课程',
          trigger: 'change'
        }],
        dateStr: [{
          required: true,
          message: '请选择日期',
          trigger: 'change'
        }],
        coachName: [{
          required: true,
          message: '请选择教练',
          trigger: 'change'
        }],
        subject: [{
          required: true,
          message: '请选择科目',
          trigger: 'change'
        }],
      }
    };
  },
  async onLoad() {
    this.getLoginUserCourseInfoList()
    this.timeColumns = await getDictDataByType('school_reserv_time');
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    goback() {
      uni.navigateBack()
    },
    confirmCourse(e) {
      this.restForm()
      this.appointmentInfo.courseId = e.value[0].courseId
      this.appointmentInfo.courseName = e.value[0].courseName
      this.appointmentInfo.courseType = e.value[0].courseType
      this.tenantId = e.value[0].tenantId
      this.appointmentInfo.userName = e.value[0].userName
      this.appointmentInfo.userId = e.value[0].userId
      this.getAllByCourseId(e.value[0].courseId)
      this.showCourse = false
    },
    confirmDate(e) {
      this.appointmentInfo.dateStr = e[0]
      this.showDate = false
    },
    confirmTime(e) {
      this.appointmentInfo.time = e.value[0].label
      this.showTime = false
    },
    restForm() {
      this.appointmentInfo = {
        subjectStr: '',
        courseName: '',
        coachName: '',
        trainTime: '',
      }
    },
    // 查询所有报名科目
    getLoginUserCourseInfoList() {
      request({
        url: '/app-api/small/drive/school-course-order/getCourseByLoginUser',
        method: 'GET'
      }).then(res => {
        if (res.data.length == 0) {
          uni.showModal({
            title: '提示',
            content: '请先报名课程',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定');
                uni.navigateBack()
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
            }
          });
        }
        this.courseList = res.data
      })
    },
    //根据课程id查询报名进度
    async getAllByCourseId(courseId) {
      const res = await request({
        url: '/app-api/process/getAllByCourseId',
        method: 'GET',
        params: {
          courseId: courseId
        }
      })
      // 找出正在训练中的科目并且科目不是1和4
      // && item.subject != 1 && item.subject != 4
      const progress = res.data.filter(item => {
        return item.status == 1 && item.subject != 1 && item.subject != 4
      })
      if (progress.length > 0) {
        // 找出正在训练中的科目并且科目不是1和4
        const subject = progress[0].subject
        this.$nextTick(() => {
          this.appointmentInfo.subject = subject
          this.appointmentInfo.subjectStr = this.subjectColumns.find(item => item.value == subject).label
        })
        this.appointmentInfo.coachName = progress[0].coachName
        this.appointmentInfo.coachId = progress[0].coachId
        this.appointmentInfo.trainTime = progress[0].trainTime
      } else {
        // 弹窗只能预约训练科目二
        uni.showModal({
          title: '提示',
          content: '只能预约训练科目二和科目三',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              uni.navigateBack()
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      }
    },
    // 查询训练地址
    getTrainAddress() {
      request({
        url: '/app-api/small/address/getList',
        method: 'GET',
        params: {
          type: 0,
          subject: this.appointmentInfo.subject,
          tenantId: this.tenantId
        }
      }).then(res => {
        console.log(res)
      })
    },
    submit() {
      // 获取当前登陆人
      this.$refs.uForm.validate().then(res => {
        const userInfo = getLocalUserInfo()
        const data = {
          ...this.appointmentInfo,
          userId: userInfo.id,
          userName: userInfo.nickname,
          tenantId: this.tenantId,
          reservDay: this.appointmentInfo.dateStr,
          reservTime: this.appointmentInfo.time,
          subject: this.appointmentInfo.subject,
        }
        request({
          url: '/app-api/reservation-course/create',
          method: 'PUT',
          data: data
        }).then(res => {
          console.log(res)
          uni.showToast({
            title: '预约成功',
            icon: 'none',
            duration: 2000
          })
          setTimeout(() => {
            uni.$emit('refresh');
            uni.navigateBack()
          }, 2000)
        })
      }).catch(errors => {
      })
    },
  }
};
</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>