UNION_NSI/target/classes/views/mobile/healthCheckup/list.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;
  }

  .tag {
    position: absolute;
    display: inline-block;
    background-color: #1867b0;
    color: #fff;
    font-size: 14px;
    top: 0px;
    border-radius: 6px;
    right: -3px;
    padding: 0px 6px;
    transform: rotate(16deg);
  }

</style>

<div id="app" v-cloak>

  <van-sticky>
    <van-nav-bar title="体检套餐列表" left-arrow
                 @click-left="history.go(-1)"></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 @click="toCheckUp(o)" 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 v-if="o.selectCount <= 0" class="tag">未选择</div>
            <div v-else class="tag" style="background-color: green">已选择</div>
            <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>
    </van-list>
    <van-empty v-else description="暂无数据"></van-empty>
  </template>


</div>
<script>
  new Vue({
    el: '#app',
    mixins: [mobileMixins],
    data() {
      return {
        tabName: 'ing',
      }
    },
    methods: {
      toCheckUp(o) {
        if(o.selectCount > 0) {
          vant.Dialog.alert({
            title: '温馨提示',
            message: '此项活动您已选择',
          })
          return
        }
        //当前时间
        const nowDate = moment().unix()
        //结束时间
        const endDate = moment(o.choiceTimeEnd).unix()
        if(nowDate > endDate) {
          vant.Dialog.alert({
            title: '温馨提示',
            message: '选择时间已过',
          })
        } else {
          location.href = '/mobile/healthCheckup/checkUp?projectId=' + o.id
        }
      },
      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/pageData', 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>
<!--#
}
#-->