UNION_NSI/target/classes/views/mobile/healthCheckup/mine.html

<!--#
layout("/mobile/platform.html"){
#-->

<style>

  .list-card {
    position: relative;
    margin: 10px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 12px #ebedf0;
    width: auto;
  }

  .list-card > .content {
    padding: 16px 10px;
    display: flex;
    max-height: 100px;
  }

  .content-right {
    width: calc(100% - 150px);
    max-width: calc(100% - 150px);
    padding-left: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .cr-title {
    /*max-height: 40px;*/
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: bold;
  }

  .concat, .mobile, .union {
    font-size: 13px;
    line-height: 18px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .operateDiv {
    text-align: right;
    padding-right: 10px;
    padding-bottom: 6px;
  }

  .operateDiv .van-button {
    height: 28px;
    border-radius: 8px;
    margin-left: 4px;
  }

  .desc_info div {
    font-size: 12px;
  }

</style>

<div id="app" v-cloak>

  <van-sticky>
    <van-nav-bar title="我选择的体检套餐" left-arrow
                 @click-left="location.href='/mobile/index'"></van-nav-bar>
  </van-sticky>

  <van-sticky>
    <van-tabs v-model="pageForm.tabName" @change="tabChange">
      <van-tab title="进行中" name="ing"></van-tab>
      <van-tab title="已结束" name="end"></van-tab>
    </van-tabs>
  </van-sticky>

  <template v-if="vLoading && !vLoading.value">
    <van-list :finished="finished" :finished-text="tableData.length>0?'没有更多了':''"
              v-if="tableData && tableData.length>0"
              v-model="loading"
              @load="pageData">

      <div class="list-card" v-for="o in tableData">
        <div class="content">
          <van-image
                  height="76"
                  radius="8"
                  :src="FILE_STREAM_PREVIEW_ADDRESS+'?id='+o.cover"
                  width="100">
          </van-image>
          <div class="content-right">
            <div class="cr-title">
              <span>{{o.name}}</span>
            </div>
            <div class="desc_info">
              <div class="concat">
                <span>开始时间：</span>
                {{moment(o.choiceTimeStart).format('YYYY/MM/DD HH:mm')}}
              </div>
              <div class="mobile">
                <span>结束时间：</span>
                {{moment(o.choiceTimeEnd).format('YYYY/MM/DD HH:mm')}}
              </div>
            </div>
          </div>
        </div>
        <div class="operateDiv">

          <van-button @click="edit(o)" v-if="moment().unix() < moment(o.choiceTimeEnd).unix()"
                      type="info" size="small" color="#1867b0">
            修&ensp;改
          </van-button>
          <van-button @click="cancel(o)" v-if="moment().unix() < moment(o.choiceTimeEnd).unix()"
                      type="info" size="small" color="#1867b0">
            取&ensp;消
          </van-button>
        </div>
      </div>
    </van-list>
    <van-empty v-else description="暂无数据"></van-empty>
  </template>

</div>
<script>
  new Vue({
    el: '#app',
    mixins: [mobileMixins],
    data() {
      return {

      }
    },
    methods: {
      edit(o) {
        location.href = '/mobile/healthCheckup/checkUp?projectId=' + o.projectId +
                '&selectId=' + o.id
      },
      async cancel(o) {
        vant.Dialog.confirm({
          title: '温馨提醒',
          message: '您确定要取消此选择吗？',
        }).then(async () => {
          const res = await $.post('/mobile/healthCheckup/cancel', {id: o.id, projectId: o.projectId})
          if(res.code === 0) {
            vant.Toast('取消成功')
            this.getData()
          }else {
            vant.Toast(res.msg)
          }
        }).catch(() => {})
      },
      doSearch() {
        this.loading = true
        this.pageForm.pageNumber = 1
        this.tableData = []
        this.pageData()
      },
      tabChange(val) {
        this.tabName = val
        this.startLoading()
        this.tableData = []
        this.pageForm.pageNumber = 1
        this.pageData()
        this.closeLoading()
      },
      async pageData() {
        this.mLoading = true
        const resp = await $.post('/mobile/healthCheckup/mineData', this.pageForm)
        if (resp.code === 0) {
          this.tableData = this.tableData.concat(resp.data.list)
          if (this.tableData.length === resp.data.totalCount) {
            this.finished = true
          } else {
            this.pageForm.pageNumber++
          }
        }
        this.loading = false
        this.mLoading = false
      },
      init() {
        this.startLoading()
        this.pageForm.tabName = 'ing'
        this.pageData()
        this.closeLoading()
      }
    },
    created() {
      this.init()
    },
  })
  window.onload = () => {
    window.addEventListener('pageshow', e => {
      if (e.persisted) {
        window.location.reload()
      }
    })
  }
</script>
<!--#
}
#-->