YNUtdPlatform/pages/HealthExaminationApp/appointment/appointment.vue

<template>
  <view>
    <div class="content">
      <h3>选择医院</h3>
      <div class="item" @click="show = true">
        <div v-if="!hospital">点击选择医院</div>
        <div v-else>{{ hospital }}</div>
        <div><u-icon name="arrow-right"></u-icon></div>
      </div>

      <h3 style="margin-top: 20px">检查类型</h3>
      <div class="item" @click="showPropup = true">
        <div v-if="!checkType">点击选择检查类型</div>
        <div v-else>{{ checkType }}</div>
        <div><u-icon name="arrow-right"></u-icon></div>
      </div>

      <h3 style="margin-top: 20px">体检时间</h3>
      <div class="item" @click="handleShowTime">
        <div v-if="!healthTime">点击选择时间</div>
        <div v-else>{{ healthTime }}</div>
        <div><u-icon name="arrow-right"></u-icon></div>
      </div>
    </div>

    <!-- 选择医院 -->
    <u-picker
      :show="show"
      :columns="[hospitalList]"
      keyName="hospitalName"
      @cancel="show = false"
      @confirm="confirmHospital"
    ></u-picker>

    <!-- 检查类型 -->
    <u-popup :show="showPropup" :round="10" mode="bottom" closeable @close="showPropup = false">
      <div class="propup-content">
        <h3>请选择套餐</h3>
        <div class="title-wrapper">
          <div class="title title-tip" v-if="!checkType">
            <div>请选择</div>
            <div class="line"></div>
          </div>
          <div v-else>
            <div class="title">{{ checkType }}</div>
            <div class="line"></div>
          </div>
        </div>

        <div>
          <div
            class="list-item"
            :class="{ active: active == index }"
            v-for="(item, index) in checkTypeList"
            :key="index"
            @click="handleCheckType(item, index)"
          >
            {{ item.text }}
          </div>
        </div>

        <div class="cont-title" v-if="checkTypeContent">
          <div class="cont">{{ checkTypeContent }}</div>
          <div v-if="showIcon" class="cont-icon" @click="showIcon = false">
            <div style="margin-right: 3px">展开</div>
            <div>
              <u-icon name="arrow-down" color="#1989fa" size="16" />
            </div>
          </div>
          <div v-else class="cont-icon" @click="showIcon = true">
            <div style="margin-right: 3px">收起</div>
            <div>
              <u-icon name="arrow-up" color="#1989fa" size="16" />
            </div>
          </div>
        </div>
        <div class="cont-line"></div>

        <div v-show="!showIcon" class="contList-wrapper">
          <div class="contList-item" v-for="(item, index) in checkTypeContentList" :key="index">
            <div class="cont-title">{{ item.combinName }}</div>
            <div>项目内容：{{ item.combinContent }}</div>
            <div>
              项目价格：
              <span style="color: red">{{ item.combinPrice }}元</span>
            </div>
          </div>
        </div>

        <div class="btn" v-if="checkType">
          <u-button type="primary" text="确认套餐" size="small" @click="showPropup = false"></u-button>
        </div>
      </div>
    </u-popup>

    <!-- 体检时间 -->
    <u-calendar :show="showTime" mode="single" @confirm="confirmTime" @close="showTime = false"></u-calendar>

    <div v-if="healthTime" class="reservation-number">
      当天剩余可预约人数：{{ reservationNumber < 0 ? '0' : reservationNumber }}人
    </div>

    <div class="content" v-if="hospitalInfo.hospitalName">
      <h3>医院信息</h3>
      <div class="hospital-name">{{ hospitalInfo.hospitalName }}</div>
      <div>地址: {{ hospitalInfo.address }}</div>
      <div>营业时间: 周一至周五 {{ hospitalInfo.businessEnd }}-{{ hospitalInfo.businessHours }}</div>
      <div>负责人: {{ hospitalInfo.responsible }}</div>
      <div>联系方式: {{ hospitalInfo.telPhone }}</div>
    </div>

    <div style="margin: 30px 60px" v-if="hospital && checkType && healthTime && reservationNumber > 0">
      <u-button type="primary" text="确定预约" shape="circle" size="small" @click="handleSave"></u-button>
    </div>
  </view>
</template>

<script>
import config from '@/config'
import Crypoto from '@/utils/aescbc'

export default {
  data() {
    return {
      isLoading: false,
      token: uni.getStorageSync('tjToken'),
      idcard: '',
      active: null,
      // 医院列表
      hospitalList: [],
      // 选择的医院
      hospital: '',
      // 医院信息
      hospitalInfo: {},
      // 体检时间
      healthTime: '',
      show: false,
      showTime: false,
      columns: [],
      showPropup: false,
      setMealId: '',
      // 检查类型
      checkType: '',
      // 检查类型-列表
      checkTypeList: [],
      // 检查类型-内容
      checkTypeContent: '',
      checkTypeContentList: [],
      showIcon: false,
      reservationNumber: 0,
      isDisabled: true,
      checkId: ''
    }
  },
  onLoad(opt) {
    opt = JSON.parse(opt.params)
    console.log('🚀 ~ onLoad ~ opt:', opt)
    this.idcard = opt.idcard
  },
  mounted() {
    this.getHospitalList()
    this.getCheckType()
  },
  methods: {
    // 获取医院列表  app/gethospital
    getHospitalList() {
      const cry = new Crypoto()
      const params = {
        token: this.token,
        idcard: cry.encrypt(this.idcard)
      }
      console.log('🚀 ~ getHospitalList ~ params:', params)
      uni.request({
        url: config.tjBaseUrl + '/app/gethospital',
        method: 'post',
        data: params,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          token: this.token
        },
        success: res => {
          res = res.data
          console.log('🚀 ~ getHospitalList ~ res:', res)
          if (res.res == 1) {
            this.hospitalList = res.obj
            // this.columns 双层数组, 将医院列表push到columns中
            this.columns.push(this.hospitalList)
            console.log('🚀 ~ getHospitalList ~ this.hospitalList:', this.hospitalList)
          }
        },
        fail: err => {
          console.log('🚀 ~ getHospitalList ~ err:', err)
        }
      })
    },
    // 获取检查类型
    getCheckType() {
      const cry = new Crypoto()
      const params = {
        token: this.token,
        idcard: cry.encrypt(this.idcard)
      }
      console.log('🚀 ~ getCheckType ~ params:', params)
      uni.request({
        url: config.tjBaseUrl + '/app/getPhysicalExamination',
        method: 'post',
        data: params,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          token: this.token
        },
        success: res => {
          res = res.data
          console.log('🚀 ~ getCheckType ~ res:', res)
          if (res.res == 1) {
            this.checkTypeList = res.obj
          }
        },
        fail: err => {
          console.log('🚀 ~ getCheckType ~ err:', err)
        }
      })
    },
    // 确认医院
    confirmHospital(e) {
      console.log('🚀 ~ confirmHospital ~ e:', e)
      this.hospital = e.value[0].hospitalName
      this.hospitalInfo = e.value[0]
      console.log('🚀 ~ confirmHospital ~ this.hospitalInfo:', this.hospitalInfo)
      if (this.hospitalInfo.id) this.isDisabled = false
      this.show = false
    },
    // 选择检查类型
    handleCheckType(item, index) {
      console.log('🚀 ~ handleCheckType ~ item:', item)
      this.active = index
      this.checkType = item.text
      this.getCheckTypeContent(item)
    },
    // 获取套餐内容
    getCheckTypeContent(item) {
      this.checkId = item.id
      const params = {
        token: this.token,
        checkId: item.id,
        combType: 2
      }
      console.log('🚀 ~ getCheckTypeContent ~ params:', params)
      uni.request({
        url: config.tjBaseUrl + '/app/getexamination',
        method: 'post',
        data: params,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          token: this.token
        },
        success: res => {
          res = res.data
          console.log('🚀 ~ getCheckTypeContent ~ res:', res)
          if (res.res == 1) {
            this.setMealId = res.obj.tibean[0].id
            this.checkTypeContent = res.obj.tibean[0].combName
            this.checkTypeContentList = res.obj.tibeanson
          }
        },
        fail: err => {
          console.log('🚀 ~ getCheckTypeContent ~ err:', err)
        }
      })
    },
    handleShowTime() {
      if (this.isDisabled) {
        uni.showToast({
          title: '请选择医院',
          icon: 'none'
        })
      } else {
        this.showTime = true
      }
    },
    getCurrentDate() {
      const date = new Date()
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    // 确认时间
    confirmTime(e) {
      console.log('🚀 ~ confirmTime ~ e:', e)
      const today = this.getCurrentDate()
      if (e[0] == today) {
        uni.showToast({
          title: '不可以预约今天',
          icon: 'none'
        })
        return
      }
      this.healthTime = e[0]
      this.showTime = false
      this.getReservationNumber()
    },
    // 获取当天剩余可预约人数
    getReservationNumber() {
      const params = {
        token: this.token,
        hosId: this.hospitalInfo.id,
        phyAppontTime: this.healthTime,
        type: '2'
      }
      console.log('🚀 ~ getReservationNumber ~ params:', params)
      uni.request({
        url: config.tjBaseUrl + '/app/getphyappointnum',
        method: 'post',
        data: params,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          token: this.token
        },
        success: res => {
          res = res.data
          console.log('🚀 ~ getReservationNumber ~ res:', res)
          if (res.res == 1) {
            this.reservationNumber = res.obj
          }
        },
        fail: err => {
          console.log('🚀 ~ getReservationNumber ~ err:', err)
        }
      })
    },
    // 确定预约 phyappoint
    handleSave() {
      if (this.isLoading) {
        // 提示
        uni.showToast({
          title: '请勿重复提交',
          icon: 'none'
        })
        return
      }
      this.isLoading = true
      const cry = new Crypoto()
      const params = {
        hospitalId: this.hospitalInfo.id,
        setMealId: this.setMealId,
        phyAppontTime: this.healthTime,
        setMealType: '2',
        combName: this.checkTypeContent,
        checkId: this.checkId,
        // token: this.token
      }
      console.log('🚀 ~ handleSave ~ params:', params)
      console.log('🚀 ~ handleSave ~ params:', cry.encrypt(JSON.stringify(params)))

      uni.request({
        url: config.tjBaseUrl + '/app/phyappoint',
        method: 'post',
        data: { encryptedData: cry.encrypt(JSON.stringify(params)), token: this.token },
        // data: params,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          token: this.token
        },
        success: res => {
          res = res.data
          console.log('🚀 ~ handleSave ~ res:', res)
          if (res.res == 1) {
            // uni.setStorageSync('appoint', true)
            uni.showToast({
              title: '预约成功',
              icon: 'success'
            })
            uni.reLaunch({
              url: '/pages/HealthExaminationApp/myAppointment/bookSuccessfully'
            })
          } else {
            uni.showToast({
              title: res.resMsg,
              icon: 'none',
              duration: 1500
            })
            uni.reLaunch({
              url: '/pages/HealthExaminationApp/myAppointment/myAppointment'
            })
          }
        },
        fail: err => {
          console.log('🚀 ~ handleSave ~ err:', err)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  background: #fff;

  h3 {
    margin-bottom: 10px;
  }

  .hospital-wrapper {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; */
    margin-bottom: 20px;
  }
  .item {
    padding: 0 15px;
    width: calc(100% -30px);
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f5f5f5;
    border-radius: 50px;
    font-size: 14px;
  }

  .hospital-name {
    font-weight: 600;
    font-size: 16px;
    color: #1989fa;
    line-height: 35px;
  }
}
.propup-content {
  height: 500px;
  padding: 20px;

  .title-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .title {
    margin-top: 20px;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .title-tip {
    color: #999;
  }

  .line {
    margin: 10px 0;
    width: 42px;
    height: 2px;
    background: #1989fa;
    border-radius: 2px;
  }

  .list-item {
    margin-right: 10px;
    color: #333;

    &.active {
      color: #1989fa;
    }
  }

  .cont-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    color: #1989fa;
    font-size: 16px;

    .cont-icon {
      display: flex;
      align-items: center;
    }
  }
  .cont-line {
    margin-top: 6px;
    width: 100%;
    height: 1px;
    background: #ccc;
  }

  .contList-wrapper {
    max-height: 300px;
    overflow: auto;
  }
  .contList-item {
    margin: 10px 0;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    word-break: break-all;
    overflow: auto;

    .cont-title {
      font-size: 16px;
      color: #1989fa;
      line-height: 30px;
    }
  }

  .btn {
    // 固定左下方
    position: absolute;
    bottom: 20px;
    left: 20px;
    /* width: 80px; */
  }
}
.reservation-number {
  height: 20px;
  margin: 10px;
  margin-top: 0;
  padding: 10px;
  color: #999;
  background: #fff;
  border-radius: 5px;
  font-size: 15px;
  /* text-align: start; */
}
</style>