mall-web-ssr/pages/mobile/center/vendor/customer/vendorPerformanceAssess.vue

<template>
  <div>
    <div class="mobile-assess-btob"  style="background: #f1f3f6" id="mobile-assess-btob">
      <div class="switch-head" style="border:0">
        <div class="com-switch-head clearfix" style="line-height: 0.78rem">
          <div style="width: 50%" class="pull-left">
            <router-link to="/mobile/center/vendor/customer" tag="span" style="margin: 0" class="com-switch-item inline-block">客户资料</router-link>
          </div>
          <div style="width:50%" class="pull-left">
            <span style="margin: 0" class="com-switch-item inline-block active" >绩效考核</span>
          </div>
        </div>
      </div>
      <div class="search-content mi-search-content">
        <input type="text" v-model="filterParams.keyword" @keyup.13="onFilter" placeholder="请输入企业名称搜索">
        <span @click="onFilter"><i class="iconfont icon-sousuo"></i></span>
      </div>
      <div class="customer-btob-wrapper">
        <div v-if="resourceList.content && resourceList.content.length > 0">
          <div class="customer-btob-wrapper-list" v-for="(item, index) in resourceList.content">
            <div class="customer-btob-wrapper-content">
              <div class="list-item"><span>考核单号：</span>{{item.vpaCode}}</div>
              <div class="list-item"><span>考核单位：</span><a>{{item.enterprise.enName}}</a></div>
              <div class="list-item"><span>考核期间：</span>{{item.vpaAssessdate}}</div>
              <div class="list-item"><span>录入日期：</span>{{item.vpaApplydate | time}}</div>
              <div class="list-item"><span>考核人：</span>{{item.vpaApplyman}}</div>
            </div>
          </div>
        </div>
        <empty-status
          v-else
          :text="'暂无对应的单据'"
          :showLink="false"
        ></empty-status>
      </div>
    </div>

    <pull-up :fixId="'mobile-assess-btob'" :allPage="allPage" :page="filterParams.page" @pullUpAction="onPullUpAction"></pull-up>
  </div>
</template>

<script>
  import { PullUp, EmptyStatus } from '~components/mobile/common'
  export default {
    layout: 'mobile',
    middleware: 'authenticated',
    data() {
      return {
        filterParams: {
          page: 1,
          count: 10,
          keyword: ''
        },
        resourceList: {
          content: []
        }
      }
    },
    methods: {
      onFilter() {
        this.setSelect(true)
      },
      onPullUpAction() {
        this.filterParams.page++
        this.setSelect()
      },
      async setSelect(reset) {
        let { data } = await this.$http.get('/vendorPerformanceAssess/info/search', {
          params: {
            count: this.filterParams.count,
            page: this.filterParams.page,
            keyword: this.filterParams.keyword
          }})
        if (!this.resourceList.content) {
          this.resourceList.content = []
        }
        if (reset) {
          this.resourceList.content = []
          this.resourceList = data
        } else {
          this.resourceList.content.push(...data.content)
          data.content = this.resourceList.content
        }
        this.resourceList = data
        data = null
      }
    },
    created() {
      this.setSelect()
    },
    computed: {
      allPage() {
        return this.resourceList.totalPage
      }
    },
    components: {
      PullUp,
      EmptyStatus
    }
  }
</script>

<style lang="scss" scoped>
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-assess-btob{
    background: #f1f3f6;
    margin: 1.26rem 0 0.98rem 0;
    height: calc(100vh - 1.26rem - 0.98rem);
    overflow-y: auto;
    .search-content {
      padding: .24rem 0;
      text-align: center;
      background: #f1f3f6;
      input {
        width: 6.48rem;
        height: .58rem;
        line-height: .58rem;
        border-radius: .14rem;
        margin: 0 0 0 .11rem;
        font-size: .26rem;
        padding: 0 .71rem 0 .21rem;
        border: 1px solid #3f84f6;
      }
    }
    .customer-btob-wrapper-list{
      width: 7.1rem;
      margin: 0 auto 0.2rem;
      background: #FFFFFF;
      border-radius: 0.05rem;
      padding: 0.16rem 0.24rem 0;
      .customer-btob-wrapper-content {
        div {
          font-size: 0.28rem;
          color: #151515;
          line-height: 0.5rem;
          &.list-item {
            @include overFlowHidden();
          }
          span {
            color: #666666;
          }
        }
      }
    }
  }
</style>