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

<template>
  <div class="order-wrapper">
    <div class="order-tab">
      <div class="order-tab-wrapper clearfix">
        <div class="fl active tab">客户打样申请</div>
        <nuxt-link class="fl tab" to="/mobile/center/vendor/approval" tag="div" >
          客户认定单
        </nuxt-link>
      </div>
    </div>
    <div class="order-nav">
      <div :class="activeType === 'all' ? 'active': ''" @click="ChangeList('all')"><span>全部</span></div>
      <div :class="activeType === 'done' ? 'active': ''" @click="ChangeList('done')"><span>已送样</span></div>
      <div :class="activeType === 'todo' ? 'active' : ''" @click="ChangeList('todo')"><span>待送样</span></div>
      <div :class="activeType === 'invalid' ? 'active' : ''" @click="ChangeList('invalid')"><span>已作废</span></div>
    </div>
    <div class="search-content search-content2">
      <input type="text" placeholder="单据编号/客户名称/物料名称" v-model="filterParams.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" @click="lookItem(item)">
        <div class="list-title">
          <span v-if="!isUnread(item.id)" style="color:#15B262;margin-right:.5rem;">已读</span>
          <span v-if="isUnread(item.id)" style="color:#DE4545;margin-right:.5rem;">未读</span>
          <span>{{item.date | time}}</span>
          <span class="leave-active" v-if="item.status === 400 && !(item.qty > (item.sendQty || 0))">已送样</span>
          <span class="leave-active" v-if="item.status === 400 && item.qty > (item.sendQty || 0)">部分送样</span>
          <span class="over-active" v-if="item.status === 315">已作废</span>
        </div>
        <div class="list-content">
          <div class="item">
            {{item.proofing.enterprise.enName}}
          </div>
          <div class="item">
            <span>流水号：</span>
            <label v-html="item.proofing.code" style="color: #3F84F6;font-weight: 500"></label>
          </div>
        </div>
        <div class="list-content">
          <div class="item">
            <span>物料编码：</span>
            <label v-html="item.proofing.product.code || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>物料名称：</span>
            <label v-html="item.proofing.product.title || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>物料规格：</span>
            <label v-html="item.proofing.product.spec || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>环保要求：</span>
            <label v-html="item.proofing.envrequiry" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>数量：</span>
            <label v-html="item.qty" style="color: #333;font-weight: 500"></label>
            <label v-html="item.proofing.product.unit" 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.proofing.isCharge === '是' ? '是' : '否'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>需求日期：</span>
            <label style="color: #333;font-weight: 500">{{item.proofing.delivery | timeDay}}</label>
            <a v-if="item.status === 400" style="margin-left:1rem;color:#15B262;" @click="dropClick(item, $event)">送样信息<i class="fa fa-fw fa-angle-down"></i></a>
          </div>
          <template  v-if="item.isDrop">
            <div v-for="(send, key) in item.sends" style="padding: .2rem;">
              <div class="item">
                <span>序号：</span>
                <label style="color: #333;font-weight: 500">{{key + 1}}</label>
              </div>
              <div class="item">
                <span>送样时间：</span>
                <label style="color: #333;font-weight: 500">{{send.date | time}}</label>
              </div>
              <div class="item">
                <span>送样人：</span>
                <label style="color: #333;font-weight: 500">{{send.recorder}}</label>
              </div>
              <div class="item">
                <span>送样单号：</span>
                <label style="color: #333;font-weight: 500">{{send.code}}</label>
              </div>
              <div class="item">
                <span>送样数量：</span>
                <label style="color: #333;font-weight: 500">{{send.sendQty}}</label>
              </div>
              <div class="item">
                <span>采购单价：</span>
                <label style="color: #333;font-weight: 500">{{send.puprice | toFixedNum}}</label>
              </div>
              <div class="item">
                <span>最小包装量：</span>
                <label style="color: #333;font-weight: 500">{{send.minQty}}</label>
              </div>
              <div class="item">
                <span>最小订购量：</span>
                <label style="color: #333;font-weight: 500">{{send.minBuyQty}}</label>
              </div>
            </div>
          </template>
        </div>
        <!--<div class="list-bottom">-->
          <!--<span><i class="fa fa-paper-plane fa-lg fa-fw"></i>送样</span>-->
        <!--</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>
    <modal-wrapper :showModal="showModal" :title="'客户打样申请详情'" @closeAction="showModal = false">
      <div class="btob_invoice_modal">
        <div class="btob_invoice_modal_title">
          <span>单据信息</span>
          <span class="block" v-if="modalObj.status === 401">待送样</span>
          <span class="block" v-if="modalObj.status === 400 && !(modalObj.qty > (modalObj.sendQty || 0))">已送样</span>
          <span class="block" v-if="modalObj.status === 400 && modalObj.qty > (modalObj.sendQty || 0)">部分送样</span>
          <span class="block" v-if="modalObj.status === 315">已作废</span>
        </div>
        <div class="btob_invoice_modal_content">
          <div><span>单据编号：</span>{{modalObj.proofing && modalObj.proofing.code}}</div>
          <div><span>日期：</span>{{modalObj.proofing && modalObj.proofing.date | time}}</div>
          <div><span>客户：</span>{{modalObj.proofing && modalObj.proofing.enterprise.enName}}</div>
          <div><span>需求数：</span>{{modalObj.qty}}</div>
          <div><span>交货日期：</span>{{modalObj.proofing && modalObj.proofing.delivery | time}}</div>
          <div><span>送样申请人：</span>{{modalObj.proofing && modalObj.proofing.user.userName}}</div>
          <div><span>备注：</span>{{modalObj.proofing && modalObj.proofing.remark || '无'}}</div>
        </div>
        <div class="btob_invoice_modal_title">
          <span>物料信息</span>
        </div>
        <div class="btob_invoice_modal_content">
          <div><span>物料名称：</span>{{modalObj.proofing && modalObj.proofing.product.title}}</div>
          <div><span>物料型号：</span>{{modalObj.proofing && modalObj.proofing.product.code}}</div>
          <div><span>物料规格：</span>{{modalObj.proofing && modalObj.proofing.product.spec}}</div>
          <div><span>环保要求：</span>{{modalObj.proofing && modalObj.proofing.envrequiry || '无'}}</div>
        </div>
        <div class="btob_invoice_modal_title" v-if="modalObj.status !== 401 && modalObj.sends && modalObj.sends.length > 0">
          <span>明细清单</span>
        </div>
        <div class="btob_invoice_modal_content btob_invoice_modal_content2" v-if="modalObj.status !== 401" v-for="(item, index) in modalObj.sends">
          <div><span>序号：</span>{{index + 1}}</div>
          <div><span>单号：</span>{{item.code}}</div>
          <div><span>送样时间：</span>{{item.date | time}}</div>
          <div v-if="!isUser"><span>采购单价：</span>{{item.puprice | toFixedNum}} {{item.currency}}</div>
          <div><span>送样数量：</span>{{item.sendQty || '-'}}</div>
          <div><span>交货周期：</span>{{item.delivery || '-'}}</div>
          <div><span>送样人：</span>{{item.recorder || '-'}}</div>
          <div v-if="item.minQty"><span>最小包装量：</span>{{item.minQty}}</div>
          <div v-if="item.minBuyQty"><span>最小订购量：</span>{{item.minBuyQty}}</div>
          <div v-if="item.vendSpec"><span>生产厂型号：</span>{{item.vendSpec}}</div>
          <div v-if="item.brand"><span>品牌：</span>{{item.brand}}</div>
          <div v-if="item.weight"><span>单重：</span>{{item.weight}}</div>
          <div v-if="item.material"><span>材料：</span>{{item.material}}</div>
          <div v-if="item.materialQuality"><span>材质：</span>{{item.materialQuality}}</div>
          <div v-if="item.minBuyQty"><span>产地：</span>{{item.minBuyQty}}</div>
          <div v-if="item.addressMark"><span>产地标识：</span>{{item.addressMark}}</div>
          <div v-if="item.ratio"><span>口水料比例：</span>{{item.ratio}}</div>
          <!--<div v-if="item.attachs.length > 0"><span>附件：</span>{{item.attachs}}</div>-->
        </div>
      </div>
    </modal-wrapper>
  </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
          }
        ],
        filterParams: {
          keyword: ''
        },
        unreadCode: '',
        activeType: 'all',
        page: 1,
        orderList: [],
        allPage: 0,
        modalObj: {},
        showModal: false,
        isUser: false
      }
    },
    created() {
      this.getResource()
      this.getUnreadIds()
      this.getHasUser()
    },
    methods: {
      lookItem(bill) {
        this.showModal = true
        if (this.isUnread(bill.id)) {
          let lists = []
          lists[0] = bill.id
          let _then = this
          this.$http.post(`/sale/sample/setRead`, lists)
            .then(() => {
              _then.getHasUser()
            })
        }
        this.$http.get(`/sale/sample/${bill.id}/send`)
          .then(res => {
            this.modalObj = bill
            this.modalObj.sends = res.data
          })
      },
      isUnread (id) {
        for (let i in this.unreadCode) {
          if (id === this.unreadCode[i]) {
            return true
          }
        }
      },
      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: ''
        }
      },
      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)
      },
      getHasUser () {
        this.$http.get('/btob/account/role/isUser').then(res => {
          this.isUser = res.data.isUser
        })
      },
      dropClick (item, event) {
        event.stopPropagation()
        this.$http.get(`/sale/sample/${item.id}/send`)
          .then(res => {
            this.orderList.forEach(value => {
              if (item.id === value.id) {
                value.isDrop = !value.isDrop
                item.sends = res.data
              }
            })
          })
      },
      getUnreadIds () {
        this.$http.get('/sale/sample/getUnreadIds')
          .then(res => {
            this.unreadCode = res.data.content
          })
      },
      getResource(Reset) {
        this.$http.get('/sale/sample/info/search', {params: {
            _state: this.activeType !== 'all' ? this.activeType : null,
            count: 10,
            page: this.page,
            searchFilter: this.filterParams,
            sorting: {'proofingDate': 'desc'}
          }}).then(res => {
          if (Reset) {
            this.orderList = []
          }
          res.data.content.forEach(value => {
            value.isDrop = false
          })
          this.orderList.push(...res.data.content)
          this.allPage = Math.floor(res.data.totalElement / 10)
        })
      },
      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
          }
        }
      },
      toFixedNum: function (num) {
        return num ? parseFloat(num).toFixed(2) : '-'
      }
    }
  }
</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);
    /*padding-bottom: 0.96rem;*/
    .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: 25%;
        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;
      }
      span {
        /*height: .46rem;*/
        /*line-height: .46rem;*/
      }
    }
    .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;
        .list-title {
          @include lineHeight(0.91rem);
          @include overFlowHidden();
          font-size: 0.28rem;
          color: #3a3a3a;
          .over-active{
            @include lineHeight(.4rem);
            padding:.05rem;
            margin:0 .5rem;
            background: #989A9C;
            color:#fff;
            border-radius:.05rem;
          }
          .leave-active{
            @include lineHeight(.4rem);
            padding:.05rem;
            margin:0 .5rem;
            background: #15B262;
            color:#fff;
            border-radius:.05rem;
          }
        }
        .list-bottom{
          @include lineHeight(1rem);
          text-align: center;
          font-size: 0.26rem;
          color: #333;
        }
        .list-content {
          padding-top: 0.23rem;
          border-top: 1px solid #d3d3d3;
          .item {
            font-size: 0.28rem;
            color: #333;
            @include overFlowHidden();
            margin-bottom: 0.15rem;
            span {
              color: #666;
            }
            &.pric {
              color: #e6353d;
            }
          }
        }
      }
    }
    .com-none-state{
      background: #f1f3f6
    }
    .btob_invoice_modal {
      padding: 0 0.24rem;
      .btob_invoice_modal_title {
        line-height: 0.72rem;
        border-top:1px solid #D3D3D3;
        border-bottom:1px solid #D3D3D3;
        span {
          font-size: 0.28rem;
          color: #3F84F6;
          border-left: 0.06rem solid #3F84F6;
          padding-left: 0.15rem;
          height: 0.18rem;
          &.block{
            float:right;
            border:none;
          }
        }
        &:nth-child(1) {
          border-top: 0;
        }
      }
      .btob_invoice_modal_content {
        @include overFlowHidden();
        padding-top: 0.15rem;
        font-size: 0.28rem;
        color: #151515;
        line-height: 0.5rem;
        padding-bottom: 0.15rem;
        span {
          color: #666666;
        }
        &.btob_invoice_modal_content2 {
          border-bottom:1px solid #D3D3D3;
          &:nth-last-of-type(1) {
            border-bottom: 0px
          }
        }
      }
    }
  }
</style>