YNUtdPlatform/pages/HealthExaminationApp/report/report.vue

<template>
  <view>
    <div class="content">
      <u-search
        placeholder="查找报告"
        v-model="keyword"
        clearabled
        :showAction="false"
        @clickIcon="handleSearch"
      ></u-search>

      <div class="cont-wrapper">
        <div class="cont-title">请选择体检年度</div>
        <div class="cont-item" @click="showData = true">
          <div>{{ year }}</div>
          <u-icon name="arrow-right" size="13"></u-icon>
        </div>
        <div class="cont-item" @click="showType = true">
          <div v-if="type">{{ type }}</div>
          <div v-else style="color: #999">体检类型</div>
          <u-icon name="arrow-right" size="13"></u-icon>
        </div>
      </div>

      <div class="cont-list" v-for="(item, index) in contList" :key="index">
        <div class="list-type">{{ item.fixedValue }}</div>
        <div class="center-cont">
          <div class="title">{{ item.mealName }}</div>
          <div>{{ item.createTime }}</div>
        </div>
        <div class="btn">
          <u-button type="primary" shape="circle" text="查看报告" @click="handleSeeReport(item)"></u-button>
        </div>
      </div>
    </div>

		<u-picker :show="showData" :columns="dataColumns" @cancel="showData = false" @confirm="handleData"></u-picker>
		<u-picker
			:show="showType"
			:columns="typeColumns"
			keyName="label"
			@cancel="showType = false"
			@confirm="handleType"
		></u-picker>
  </view>
</template>

<script>
import config from '@/config'

export default {
  data() {
    return {
      isShow: true,
      token: '',
      keyword: '',
      // 体检年度
      year: new Date().getFullYear(),
      // 体检类型
      type: '',
			typeValue: '',
      showData: false,
      showType: false,
      dataColumns: [],
      typeColumns: [
        [
          { label: '全部', value: '' },
          { label: '普通体检', value: 0 },
          { label: '职业体检', value: 1 }
        ]
      ],
      contList: [],
			pdfPath: ''
    }
  },
  mounted() {
    this.token = uni.getStorageSync('tjToken')
    this.year = new Date().getFullYear()
    console.log('🚀 ~ mounted ~ year:', this.year)
    let arr = []
    for (let i = 0; i < 10; i++) {
      arr.push(this.year - i)
    }
    this.dataColumns = [arr]
    console.log('🚀 ~ mounted ~ this.dataColumns:', this.dataColumns)
    this.getList()
  },
  methods: {
    // 搜索
    handleSearch() {
      console.log('🚀 ~ handleSearch ~ this.keyword:', this.keyword)
			this.getList()
    },
    // 选择体检年度
    handleData(e) {
      console.log('🚀 ~ handleData ~ this.year:', e)
      this.year = e.value[0]
			this.getList()
      this.showData = false
    },
    // 选择体检类型
    handleType(e) {
      console.log('🚀 ~ handleType ~ this.type:', e)
      this.type = e.value[0].label
			this.typeValue = e.value[0].value
			this.getList()
      this.showType = false
    },
    // 获取列表
    getList() {
      const params = {
        name: this.keyword,
        data: this.year,
        type: this.typeValue,
        token: this.token
      }
      console.log('🚀 ~ getList ~ params:', params)

      uni.request({
        url: config.tjBaseUrl + '/app/getpackageBid',
        method: 'get',
        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) {
            this.contList = res.obj
          }
        },
        fail: err => {
          console.log('🚀 ~ 列表 ~ err:', err)
        }
      })
    },
    // 查看报告
    handleSeeReport(item) {
      console.log('🚀 ~ handleSeeReport ~ item:', item)
      this.pdfPath = config.tjFile + item.physicalAddress
			// 跳转
			uni.navigateTo({
				url: `/pages/HealthExaminationApp/report/pdfView?path=${this.pdfPath}`
			})
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  margin: 10px;
  padding: 10px;

  .cont-wrapper {
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 10px 0;

    .cont-title {
      height: 40px;
      line-height: 40px;
      font-size: 15px;
      font-weight: bold;
      text-align: center;
    }

    .cont-item {
      padding: 0 5px;
      width: 28%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      border-radius: 40px;
    }
  }

  .cont-list {
		margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    margin-top: 10px;

    .list-type {
      padding: 10px;
      width: 20px;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      white-space: pre-wrap;
      word-break: break-all;
      background: #9bc5c6;
			color: #fff;
			border-radius: 5px 0 0 5px;
    }

    .center-cont {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #666;

			.title {
				font-size: 15px;
				font-weight: bold;
				color: #333;
				margin-bottom: 15px;
			}
    }

    .btn {
      margin-right: 10px;
      width: 80px;
      text-align: center;
    }
  }
}
</style>