mall-web-ssr/pages/mobile/center/vendor/btobapCheck.vue

<template>
  <div>
    <div class="btobapCheck-wrapper">
      <div class="order-tab">
        <div class="order-tab-wrapper clearfix">
          <div class="fl active tab">B2B</div>
          <nuxt-link class="fl tab" to="/mobile/center/vendor/payCenter" 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 === 'end' ? 'active' : ''" @click="ChangeList('end')"><span>已作废</span></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="btobapCheck-wrapper-scroll" id="btobapCheck-wrapper-scroll">
        <div class="filter-wrapper">
          <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>
        <div v-if="resourceList.content && resourceList.content.length > 0">
          <div class="invoice-btob-list" v-for="item in resourceList.content" :key="item.id">
            <div class="invoice-btob-wrapper-top">
              <span class="read" v-if="!isUnread(item.id)" style="margin-right: 0.3rem">已读</span>
              <span class="noread" v-if="isUnread(item.id)" style="margin-right: 0.3rem">未读</span>
              <span  style="margin-right: 0.3rem">{{item.recordDate | time}}</span>
              <span class="isPut" v-if="item.status">已提交</span>
              <span class="noPut" v-else>未提交</span>
            </div>
            <div class="invoice-btob-wrapper-middle">
              <div class="invoice-btob-wrapper-middle-title">{{item.custName}}</div>
              <div @click="lookDetails(item.id)"><span>单据编号：</span><a>{{item.code}}条</a></div>
            </div>
            <div class="invoice-btob-wrapper-content">
              <div><span>对账期间：</span>{{item.beginDate | time}} - {{item.endDate | time}}</div>
              <div><span>对账金额：</span>{{isUser ? '-' : item.checkAmount}}</div>
              <div><span>明细条目：</span>{{item.items.length}}条</div>
              <div><span>商品总数：</span>{{item.getTotalProd}}</div>
              <div><span>对账结果：</span>{{item.checkStatus}}</div>
            </div>
          </div>
        </div>
        <empty-status
          v-else
          :text="'暂无对账信息'"
          :showLink="false"
        ></empty-status>
        <pull-up :fixId="'btobapCheck-wrapper-scroll'" :allPage="allPage" :page="filterParams.page" @pullUpAction="onPullUpAction"></pull-up>
      </div>
    </div>
    <modal-wrapper :title="'新增对账单'" :showModal="showModal" @closeAction="showModal = false">
      <div class="btobapCheck-modal">
        <div class="search-content mi-search-content">
          <input type="text" placeholder="选择对账客户">
          <span @click="toChooseUser"><i class="iconfont icon-sousuo"></i></span>
        </div>
        <div>
          <span class="title inline-block" style="font-size: 0.28rem;color: #666666;line-height: 0.5rem;margin-top:0.18rem">单据时间：</span>
          <div class="date-wrap">
            <label>
              <i class="iconfont icon-ico-date"></i>
              <input type="date" v-model="dateObj.fromDate" @change="setDate('fromDate')">
              <p v-if="dateObj.fromDate">{{dateObj.fromDate | date}}</p>
            </label>
            <span>—</span>
            <label>
              <i class="iconfont icon-ico-date"></i>
              <input type="date" v-model="dateObj.toDate" @change="setDate('toDate')">
              <p v-if="dateObj.toDate">{{dateObj.toDate | date}}</p>
            </label>
          </div>
        </div>
      </div>
    </modal-wrapper>
  </div>
</template>

<script>
  import { ModalWrapper, BaseFilter } from '~components/mobile/base'
  import { PullUp, EmptyStatus } from '~components/mobile/common'
  export default {
    layout: 'mobile',
    middleware: 'authenticated',
    data() {
      return {
        activeType: 'all',
        filterParams: {
          keyword: '',
          page: 1,
          count: 10
        },
        filterOptions: [
          {
            title: '交易时间',
            selectOption: 'date',
            selectItems: [{
              key: '30天',
              val: 1
            }, {
              key: '90天',
              val: 2
            }, {
              key: '180天',
              val: 3
            }, {
              key: '自定义',
              val: 4
            }],
            defaultVal: 1
          }
        ],
        resourceList: {
          content: []
        },
        isUser: false,
        unreadCode: [],
        showModal: true,
        dateObj: {}
      }
    },
    created() {
      this.$http.get('/account/role/isUser').then(res => {
        this.isUser = res.data.isUser
      })
     this.getUnread()
    },
    methods: {
      setDate (type) {
        if (this.dateObj[type]) {
          // 初始化为00:00:00
          this.dateObj[type] = new Date(this.dateObj[type]).getTime() - 8 * 60 * 60 * 1000
          if (this.dateObj.fromDate && this.dateObj.toDate && this.dateObj.fromDate > this.dateObj.toDate) {
            if (type === 'fromDate') {
              this.setRemindText('起始时间不能大于结束时间')
            } else {
              this.setRemindText('结束时间不能小于起始时间')
            }
            this.dateObj[type] = null
          }
//          else {
//            if (this.dateObj.fromDate && this.dateObj.toDate && this.dateObj.fromDate === this.dateObj.toDate) {
//              // 23:59:59
//              this.dateObj.toDate += 23 * 60 * 60 * 1000 + 59 * 60 * 1000 + 59 * 1000
//            }
//          }
          // 23:59:59
          if (this.dateObj.toDate && type === 'toDate') {
            this.dateObj.toDate += (23 * 60 * 60 * 1000 + 59 * 60 * 1000 + 59 * 1000)
          }
        } else {
          this.dateObj[type] = null
        }
      },
      toChooseUser() {
        console.log('选择客户')
      },
      onPullUpAction () {
        this.filterParams.page++
        this.setSelect(this.$selectObj.key, this.$selectObj.value, false)
      },
      getUnread() {
        this.$http.get('/sale/apCheck/unread').then(res => {
          this.unreadCode = res.data.content
        })
      },
      lookDetails(id) {
        console.log('前往详情并且设置为已读')
        // if (!this.isUnread(id)) { } else {
        //   let sourceId = []
        //   sourceId.push(id)
        //   this.$http.post('/sale/sample/setRead', sourceId).then(res => {
        //     this.getUnread()
        //   })
        // }
      },
      isUnread: function (id) {
        for (let i in this.unreadCode) {
          if (id === this.unreadCode[i]) {
            return true
          }
        }
      },
      ChangeList(tp) {
        this.activeType = tp
        this.filterParams.page = 1
        this.setSelect(this.$selectObj.key, this.$selectObj.value, true)
      },
      onFilter() {
        this.filterParams.page = 1
        this.setSelect(this.$selectObj.key, this.$selectObj.value, true)
      },
      onSelectAction(selectObj) {
        this.$selectObj = selectObj
        this.setSelect(selectObj.key, selectObj.value, true)
      },
      onValueAction(selectObj) {
        this.$selectObj = selectObj
        this.setSelect(selectObj.key, selectObj.value, true)
      },
      async setSelect(...val) {
        let { data } = await this.$http.get('/sale/apCheck/info/search', {
          params: {
            count: this.filterParams.count,
            page: this.filterParams.page,
            searchFilter: {'keyword': this.filterParams.keyword || '', 'fromDate': val[1].fromDate, 'endDate': val[1].toDate},
            sorting: {'recordDate': 'desc'},
            _state: this.activeType
          }})
        if (!this.resourceList.content) {
          this.resourceList.content = []
        }
        data.content.forEach(item => {
          item.checkAmount = item.checkAmount.toFixed(2)
          item.getTotalProd = 0
          item.items.forEach(im => {
            item.getTotalProd += im.checkQty
          })
        })
        if (!val[2]) {
          this.resourceList.content.push(...data.content)
          data.content = this.resourceList.content
        } else {
          this.resourceList.content = []
        }
        this.resourceList = data
      }
    },
    computed: {
      allPage () {
        return Math.ceil(this.resourceList.totalElement / 10)
      },
      isEmpty () {
        return this.resourceList.content.length === 0
      }
    },
    components: {
      ModalWrapper,
      BaseFilter,
      PullUp,
      EmptyStatus
    },
    filters: {
      time: 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 lang="scss" scoped>
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .btobapCheck-wrapper {
    background: #f1f3f6;
    margin: 1.26rem 0 0.98rem 0;
    .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;
      }
    }
    .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;
        }
      }
    }
    .btobapCheck-wrapper-scroll {
      height: calc(100vh - 1.26rem - 0.98rem - 0.82rem - 1.06rem - 0.92rem);
      overflow-y: auto;
    }
    .filter-wrapper{
      width: 7.1rem;
      margin: 0 auto 0.27rem;
      background: #fff;
      padding: 0.27rem 0.2rem;
      border-radius: 0.05rem;
    }
    .invoice-btob-list {
      width: 7.1rem;
      margin: 0 auto 0.2rem;
      background: #FFFFFF;
      border-radius: 0.05rem;
      padding: 0 0.24rem;
    }
    .invoice-btob-wrapper-top {
      height: 0.8rem;
      span{
        margin-top: 0.24rem;
        display: inline-block;
        font-size: 0.28rem;
        color: #333333;
        height:0.25rem;
        &.read {
          color: #15B262;
        }
        &.noread {
          color: #DE4545;
        }
        &.isPut {
          background: #15B262;
          color: #FFFFFF;
          font-size: 0.24rem;
          border-radius: 0.04rem;
        }
        &.noPut {
          font-size: 0.24rem;
          background: #DE4545;
          color: #FFFFFF;
          border-radius: 0.04rem;
        }
      }
    }
    .invoice-btob-wrapper-middle {
      border-top: 1px solid #D9D9D9;
      @include overFlowHidden();
      padding-top: 0.15rem;
      font-size: 0.28rem;
      color: #151515;
      line-height: 0.5rem;
      padding-bottom: 0.15rem;
      span {
        color: #666666;
      }
      .invoice-btob-wrapper-middle .tilte{
        color: #333333;
      }
    }
    .invoice-btob-wrapper-content {
      border-top: 1px solid #D9D9D9;
      @include overFlowHidden();
      padding-top: 0.15rem;
      font-size: 0.28rem;
      color: #151515;
      line-height: 0.5rem;
      padding-bottom: 0.15rem;
      span {
        color: #666666;
      }
    }
  }
  .btobapCheck-modal {
    .search-content input {border: 1px solid #3f84f6;}
    .date-wrap{
      text-align: center;
      display: inline-block;
      label {
        width: 2.3rem;
        height: .5rem;
        line-height: .5rem;
        border-radius: .04rem;
        border: 1px solid #bfbfbf;
        background: url(/images/mobile/select-arrow.png) no-repeat;
        background-size: .12rem .06rem;
        vertical-align: middle;
        background-color: #fff;
        background-position: 2.1rem .2rem;
        position: relative;
        margin: .2rem 0 0 0;
        i {
          font-size: .28rem;
          color: #3f84f6;
          margin-left: .1rem;
          float: left;
        }
        input {
          opacity: 0;
          width: 2.22rem;
          height: .5rem;
          position: absolute;
          left: 0;
          z-index: 1;
        }
        p {
          font-weight: normal;
          font-size: .22rem;
          color: #3E81F6;
          text-align: left;
          text-indent: 10px;
        }
      }
      span {
        color: #a0a0a0;
        margin: 0.3rem .1rem 0;
        width: .4rem;
        display: inline-block;
        text-align: center;
        vertical-align: top;
      }
    }
  }
</style>