YNUtdPlatform/pages/HealthExaminationApp/myAppointment/myAppointment.vue

<template>
  <div>
    <u-navbar title="我的预约" @leftClick="leftClick" placeholder></u-navbar>
    <div class="content">
      <div class="item-wrapper">
        <div class="item" @click="show = true">
          <div v-if="!makeStatus">请选择体检状态</div>
          <div v-else>{{ makeStatus }}</div>
          <div><u-icon name="arrow-right"></u-icon></div>
        </div>
        <div class="btn">
          <u-button type="primary" text="查询" @click="handleQuery"></u-button>
        </div>
      </div>
      <u-picker :show="show" :columns="columns" keyName="label" @close="show = false" @confirm="handleSearch"></u-picker>

      <div class="tip">提示：向左滑动，取消预约</div>

      <u-swipe-action class="swipe-wrapper">
        <u-swipe-action-item
          class="swipe-item"
          :options="options"
          v-for="(item, index) in makeList"
          :key="index"
          :disabled="item.ifCancel != 2"
          @click="handleDelete(item)"
        >
          <div class="swipe-action" @click="handleOption(item)">
            <div class="item-icon">
              <u-icon
                v-if="item.ifCancel == 1 || item.ifCancel == 4"
                name="/static/images-tijian/isCanceled.png"
                size="120"
              ></u-icon>
              <u-icon v-else-if="item.ifCancel == 2" name="/static/images-tijian/readyExam.png" size="120"></u-icon>
              <u-icon v-else name="/static/images-tijian/isExamed.png" size="120"></u-icon>
            </div>
            <div class="item-cont">
              <div class="hospital-name">{{ item.hospitalName }}</div>
              <div class="combName">
                <div>{{ item.combName }}</div>
                <div style="color: red">￥{{ item.setMealPrice || '0.0' }}</div>
              </div>
              <div>预约时间：{{ item.phyAppontTime }}</div>
            </div>
          </div>
        </u-swipe-action-item>
      </u-swipe-action>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      token: '',
      show: false,
      columns: [
        [
          { label: '全部', value: 4 },
          { label: '已取消', value: 1 },
          { label: '待体检', value: 2 },
          { label: '已体检', value: 3 }
        ]
      ],
      // 体检状态
      makeStatus: '',
      makeStatusValue: 4,
      // 列表
      makeList: [],
      // 全部列表
      allList: [],
      // 已取消列表
      canceledList: [],
      // 待体检列表
      readyList: [],
      // 已体检
      examList: [],
      isDisabled: false,
      options: [
        {
          text: '取消',
          style: {
            backgroundColor: '#f56c6c'
          }
        }
      ]
    }
  },
  created() {
    this.token = uni.getStorageSync('tjToken')
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleSearch(e) {
      console.log('🚀 ~ handleSearch ~ e:', e)
      this.makeStatus = e.value[0].label
      this.makeStatusValue = e.value[0].value
      this.show = false
    },
    handleQuery(){
      if (this.makeStatusValue == 4) {
        this.makeList = this.allList
      } else if (this.makeStatusValue == 1) {
        this.makeList = this.canceledList
      } else if (this.makeStatusValue == 2) {
        this.makeList = this.readyList
      } else if (this.makeStatusValue == 3) {
        this.makeList = this.examList
      }
    },
    // 获取列表 getpersonappointInfo
    getList() {
      console.log('🚀 ~ 列表 ~ this.token:', this.token)
      uni.request({
        url: config.tjBaseUrl + '/app/getpersonappointInfo',
        method: 'post',
        data: this.token,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          token: this.token
        },
        success: res => {
          res = res.data
          console.log('🚀 ~ 列表 ~ res:', res)
          if (res.res == 1) {
            this.makeList = this.allList = res.obj
            this.canceledList = res.obj.filter(item => item.ifCancel == 1)
            this.readyList = res.obj.filter(item => item.ifCancel == 2)
            this.examList = res.obj.filter(item => item.ifCancel == 3)
          }
        },
        fail: err => {
          console.log('🚀 ~ 列表 ~ err:', err)
        }
      })
    },
    // 操作-删除  cancelpoint
    handleDelete(item) {
      const cry = new Crypoto()
      console.log('🚀 ~ handleDelete ~ item:', item)
      const params = {
        cancelId: cry.encrypt(item.id),
        mealType: item.setMealType,
        token: this.token
      }
      // 弹框确认
      uni.showModal({
        title: '提示',
        content: '确认取消预约吗？',
        success: res => {
          console.log('🚀 ~ handleDelete ~ res:', res)
          if (res.confirm) {
            uni.request({
              url: config.tjBaseUrl + '/app/cancelpoint',
              method: 'post',
              data: params,
              header: {
                'Content-Type': 'application/x-www-form-urlencoded',
                token: this.token
              },
              success: res => {
                res = res.data
                console.log('🚀 ~ 取消预约 ~ res:', res)
                if (res.res == 1) {
                  if (item.setMealType == '2') {
                    uni.removeStorageSync('appoint')
                  } else if (item.setMealType == '3') {
                    uni.removeStorageSync('jobAppoint')
                  }
                  // 刷新 - 重定向
                  uni.redirectTo({
                    url: '/pages/HealthExaminationApp/myAppointment/myAppointment'
                  })
                }
              },
              fail: err => {
                console.log('🚀 ~ 列表 ~ err:', err)
              }
            })
          }
        },
        fail: err => {
          console.log('🚀 ~ handleDelete ~ err:', err)
        }
      })
    },
    //
    handleOption(item) {
      console.log('🚀 ~ handleOption ~ item:', item)
      const params = {
        id: item.id,
        combName: item.combName
      }
      console.log('🚀 ~ handleOption ~ params:', params)
      uni.navigateTo({
        url: '/pages/HealthExaminationApp/myAppointment/healthExamDetails?params=' + JSON.stringify(params)
      })
    },
    leftClick() {
      uni.reLaunch({
        url: '/pages/HealthExaminationApp/index/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;
}
.item-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  .item {
    padding: 0 15px;
    width: calc(100vw - 100px);
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f5f5f5;
    border-radius: 50px;
    font-size: 14px;
    margin-right: 10px;
  }
  .btn {
    width: 50px;
  }
}
.tip {
  margin-left: 10px;
  margin-bottom: 20px;
  color: #999;
  font-size: 15px;
}
.swipe-item {
  border-radius: 5px;
  margin: 10px 0;

  .swipe-action {
    padding: 10px;
    border-radius: 5px;
    word-break: break-all;

    .item-icon {
      //定位 移到左上角
      position: absolute;
      top: -42px;
      left: -36px;
    }

    .item-cont {
      margin-left: 50px;

      .hospital-name {
        font-size: 15px;
        font-weight: bold;
        line-height: 1.5;
      }

      .combName {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>