mall-web-ssr/pages/mobile/center/vendor/approval/index.vue

<template>
  <div class="order-wrapper">
    <div class="order-tab">
      <div class="order-tab-wrapper clearfix">
        <nuxt-link class="fl tab" to="/mobile/center/vendor/sample" tag="div" >
          客户打样申请
        </nuxt-link>
        <div class="fl active tab">客户认定单</div>
      </div>
    </div>
    <div class="order-nav">
      <div :class="activeType === 'all' ? 'active': ''" @click="ChangeList('all')"><span>全部</span></div>
      <div :class="activeType === 'agreed' ? 'active': ''" @click="ChangeList('agreed')"><span>合格</span></div>
      <div :class="activeType === 'refused' ? 'active' : ''" @click="ChangeList('refused')"><span>不合格</span></div>
    </div>
    <div class="search-content search-content2">
      <input type="text" placeholder="单据编号/客户名称/物料名称" v-model="keyword" @keyup.13="searchOrderlist">
      <span @click="searchOrderlist">
          <i class="iconfont icon-sousuo"></i>
      </span>
    </div>
    <div class="filters-wrap">
      <base-filter
        v-for="filterOption in filterOptions"
        :key="filterOption.selectOption"
        :selectItems="filterOption.selectItems"
        :defaultVal="filterOption.defaultVal"
        :selectOption="filterOption.selectOption"
        @selectAction="onSelectAction"
        @valueAction="onValueAction"
        :title="filterOption.title">
      </base-filter>
    </div>
    <ul class="order-list-wrap" id="b2border-wrapper" v-show="orderList.length > 0">
      <li v-for="item in orderList">
        <div class="list-title">
          <span>{{item.inDate | timeDay}}</span>
          <span class="leave-active" v-if="item.finalresult && item.finalresult  === '合格'"><i class="fa fa-legal"></i>合格</span>
          <span class="over-active" v-if="!item.finalresult || item.finalresult  !== '合格'"><i class="fa fa-legal"></i>不合格</span>
        </div>
        <div class="list-content">
          <div class="item">
            {{item.enterprise.enName}}
          </div>
          <div class="item">
            <span>单号：</span>
            <label v-html="item.code" style="color: #3F84F6;font-weight: 500"></label>
          </div>
        </div>
        <div class="list-content">
          <div class="item">
            <span>物料型号：</span>
            <label v-html="item.prodCode || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>物料名称：</span>
            <label v-html="item.prodDetail || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>物料规格：</span>
            <label v-html="item.prodSpec || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>样品数量：</span>
            <label v-html="item.prodUnit || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>申请单：</span>
            <label v-html="item.pscode" style="color: #333;font-weight: 500"></label>
          </div>
          <!--<div class="item">-->
            <!--<span>附件：</span>-->
            <!--<label v-html="item.code" style="color: #333;font-weight: 500"></label>-->
          <!--</div>-->
          <div class="item">
            <span>最终认定：</span>
            <label v-html="item.finalresultremark || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>材料：</span>
            <label v-html="item.material || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>材质：</span>
            <label v-html="item.materialquality || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>单重：</span>
            <label style="color: #333;font-weight: 500">{{item.height || '-'}}g</label>
          </div>
        </div>
        <!--<div class="list-content">-->
          <!--<div class="item">-->
            <!--<span>研发认定</span>-->
            <!--<label v-html="item.height || '-'" style="color: #333;font-weight: 500"></label>-->
          <!--</div>-->
          <!--<div class="item">-->
            <!--<span>IQC认定</span>-->
            <!--<label v-html="item.height || '-'" style="color: #333;font-weight: 500"></label>-->
          <!--</div>-->
          <!--<div class="item">-->
            <!--<span>工程认定</span>-->
            <!--<label v-html="item.height || '-'" style="color: #333;font-weight: 500"></label>-->
          <!--</div>-->
        <!--</div>-->
      </li>
    </ul>
    <div v-if="orderList.length === 0" class="com-none-state">
      <img src="/images/mobile/@2x/search-empty.png">
      <p>抱歉，暂无订单消息</p>
      <nuxt-link to="/">返回首页</nuxt-link>
    </div>
    <pull-up :fixId="'b2border-wrapper'"
             :allPage="allPage"
             :page="page"
             :FixedEl="true"
             @pullUpAction="getMoreSearch"></pull-up>
  </div>
</template>

<script>
  import { RemindBox, PullUp } from '~components/mobile/common'
  import { ModalWrapper, BaseFilter } from '~components/mobile/base'
  export default {
    name: 'sample',
    layout: 'mobile',
    middleware: 'authenticated',
    data() {
      return {
        filterOptions: [
          {
            title: '交易时间',
            selectOption: 'date',
            selectItems: [{
              key: '30天',
              val: 1
            }, {
              key: '90天',
              val: 2
            }, {
              key: '180天',
              val: 3
            }, {
              key: '自定义',
              val: 4
            }],
            defaultVal: 1
          }
        ],
        activeType: 'all',
        page: 1,
        orderList: [],
        keyword: '',
        allPage: 0,
        filterParams: {
          count: 10,
          endDate: new Date().getTime(),
          fromDate: null,
          sorting: {'inDate': 'desc'}
        },
      }
    },
    created() {
      this.getResource()
    },
    methods: {
      setSelect (type, val, isReload) {
        if (type === 'date') {
          if (val) {
            this.filterParams.fromDate = val.fromDate
            this.filterParams.toDate = val.toDate
          } else {
            this.filterParams.fromDate = null
            this.filterParams.toDate = null
          }
        } else {
          this.filterParams[type] = val
        }
        isReload && this.filterRecord()
      },
      initFilterParams () {
        this.filterParams = {
          keyword: '',
          fromDate: '',
          toDate: '',
          type: ''
        }
      },
      filterRecord () {
        this.page = 1
        this.getResource(true)
      },
      onSelectAction (selectObj) {
        this.setSelect(selectObj.key, selectObj.value, true)
      },
      onValueAction (selectObj) {
        this.setSelect(selectObj.key, selectObj.value, false)
      },
      getResource(Reset) {
        if (this.activeType !== 'all') {
          this.filterParams._state = this.activeType
        }
        this.filterParams.page = this.page
        this.filterParams.keyword = this.keyword
        this.$http.get('/sale/sample/approval/info/search', {params: this.filterParams})
          .then(res => {
            if (Reset) {
              this.orderList = []
            }
            this.orderList.push(...res.data.content)
            this.allPage = Math.floor(res.data.totalElement / 10)
            console.log(this.orderList)
          })
      },
      ChangeList(_tp) {
        this.activeType = _tp
        this.getResource(true)
      },
      getMoreSearch() {
        this.page++
        this.getResource()
      },
      searchOrderlist() {
        this.page = 1
        this.getResource(true)
      }
    },
    components: {
      RemindBox, PullUp, ModalWrapper, BaseFilter
    },
    filters: {
      timeDay: function(time) {
        if (typeof time === 'number') {
          if (!time) {
            return '无'
          } else {
            let d = new Date(time)
            let year = d.getFullYear()
            let month = d.getMonth() + 1
            let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
            return year + '-' + month + '-' + day
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @mixin lineHeight($value) {
    height: $value;
    line-height: $value;
  }

  .order-wrapper {
    background: #f1f3f6;
    margin: 1.26rem 0 0.98rem 0;
    height: calc(100vh - 1.26rem - 0.98rem);
    .filters-wrap{
      background: #fff;
      margin: 0 auto .13rem;
      width: 7.1rem;
      overflow: hidden;
      padding: .1rem;
    }
    .order-tab {
      background: #3f84f6;
      padding-bottom: 0.2rem;
      .order-tab-wrapper {
        border: solid 1px #ffffff;
        width: 7.06rem;
        margin: 0 auto;
        border-radius: 0.04rem;
        line-height: 0.72rem;
        height: 0.72rem;
        overflow: hidden;
        div {
          color: #ffffff;
          font-size: 0.28rem;
          text-align: center;
          width: 50%;
          &.active {
            background-color: #ffffff;
            color: #3f84f6;
          }
        }
      }
    }
    .order-nav {
      background: #fff;
      div {
        height: 0.82rem;
        line-height: 0.82rem;
        display: inline-block;
        width: 33.3%;
        text-align: center;
        font-size: .28rem;
        color: #666;
        &.active span{
          color: #3f84f6;
          border-bottom: 0.04rem solid #3f84f6;
          padding-bottom: 0.2rem;
        }
      }
    }
    .search-content2 {
      text-align: center;
      padding: .25rem 0 0 0;
      margin-top: 0 !important;
      margin-bottom:.25rem;
      input {
        width: 7.1rem;
        border: 1px solid #376ff3;
      }
    }
    .order-list-wrap {
      height: calc(90vh - 1.26rem - 0.96rem - 0.84rem - 1rem - 0.92rem);
      overflow-y: scroll;
      margin-top: 0.2rem;
      li {
        background: #fff;
        width: 7.1rem;
        margin: 0 auto 0.2rem;
        border-radius: 0.04rem;
        border: 1px solid #e4e4e4;
        padding: 0 0.24rem;
        .over-active{
          @include lineHeight(.4rem);
          padding:.05rem;
          margin:0 .5rem;
          background: #F0AD4E;
          color:#fff;
          border-radius:.05rem;
        }
        .leave-active{
          @include lineHeight(.4rem);
          padding:.05rem;
          margin:0 .5rem;
          background: #15B262;
          color:#fff;
          border-radius:.05rem;
        }
        .list-title {
          @include lineHeight(0.91rem);
          @include overFlowHidden();
          font-size: 0.28rem;
          color: #3a3a3a;
        }
        .list-bottom{
          @include lineHeight(1rem);
          text-align: center;
          font-size: 0.26rem;
          color: #333;
        }
        .list-content {
          border-top: 1px solid #d3d3d3;
          padding-top: 0.23rem;
          .item {
            font-size: 0.28rem;
            color: #333;
            @include overFlowHidden();
            margin-bottom: 0.15rem;
            span {
              color: #666;
            }
            &.pric {
              color: #e6353d;
            }
          }
        }
      }
    }
    .com-none-state{
      background: #f1f3f6
    }
  }
</style>