YNUtdPlatform/pages/HealthExaminationApp/myAppointment/myAppointment.vue

<template>
  <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="查询"></u-button>
      </div>
    </div>
    <u-picker :show="show" :columns="columns" @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 == 1 || item.ifCancel == 4"
				@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>
</template>

<script>
import config from '@/config'

export default {
  data() {
    return {
      token: '',
      show: false,
      columns: [['全部', '已取消', '待体检', '已体检']],
      // 体检状态
      makeStatus: '',
      // 列表
      makeList: [],
      isDisabled: false,
      options: [
        {
          text: '删除',
          // disabled: isDisabled,
          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]
      this.show = false
    },
    // 获取列表 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 = res.obj
          }
        },
        fail: err => {
          console.log('🚀 ~ 列表 ~ err:', err)
        }
      })
    },
		// 操作-删除
		handleDelete(item) {
			console.log('🚀 ~ handleDelete ~ item:', item)
			
		},
		// 
		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)
			})
		}
  }
}
</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>