mall-web-ssr/pages/mobile/center/user/tender/index.vue

<template>
  <div class="order-wrapper">
    <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 === 'waiting' ? 'active' : ''" @click="ChangeList('waiting')"><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 === '已结标'">已结标</span>
          <span class="leave-active" v-if="item.status === '待评标' && item.overdue === 1 && item.result !== 1">待评标</span>
          <span class="leave-active" v-if="(item.status === '待评标' && item.overdue !== 1) || (item.status === '待投标' && item.overdue !== 1)">待投标</span>
          <span class="leave-active" v-if="(item.status === '待评标' && item.overdue === 1 && item.result === 1) || (item.status === '待投标' && item.overdue === 1) || item.status === '流标'">流标</span>
          <span class="leave-active" v-if="item.status === '待发布'">待发布</span>
        </div>
        <div class="list-content">
          <div class="item">
            <span>标题：</span>
            <label v-html="item.title || '-'"></label>
          </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.user || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>联系电话：</span>
            <label v-html="item.userTel || '-'" style="color: #333;font-weight: 500"></label>
          </div>
          <div class="item">
            <span>投标截止时间：</span>
            <label style="color: #333;font-weight: 500">{{item.endDate | timeDay}}</label>
          </div>
          <div class="item">
            <span>公布结果时间：</span>
            <label style="color: #333;font-weight: 500">{{item.publishDate | timeDay}}</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>
    <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 === '已结标'">已结标</span>
          <span class="block" v-if="modalObj.status === '待评标' && modalObj.overdue === 1 && modalObj.result !== 1">待评标</span>
          <span class="block" v-if="(modalObj.status === '待评标' && modalObj.overdue !== 1) || (modalObj.status === '待投标' && modalObj.overdue !== 1)">待投标</span>
          <span class="block" v-if="(modalObj.status === '待评标' && modalObj.overdue === 1 && modalObj.result === 1) || (modalObj.status === '待投标' && modalObj.overdue === 1) || modalObj.status === '流标'">流标</span>
          <span class="block" v-if="modalObj.status === '待发布'">待发布</span>
        </div>
        <div class="btob_invoice_modal_content">
          <div><span>招标标题：</span>{{modalObj.title}}</div>
          <div><span>联系人：</span>{{modalObj.user}}</div>
          <div><span>联系电话：</span>{{modalObj.userTel}}</div>
          <div><span>收货地址：</span>{{modalObj.shipAddress}}</div>
          <div><span>投标截止时间：</span>{{modalObj.endDate | timeDay}}</div>
          <div><span>公布结果时间：</span>{{modalObj.publishDate |timeDay}}</div>
          <div><span>交易币别：</span>{{modalObj.currency}}</div>
          <div><span>是否含税：</span>{{modalObj.ifTax === 1 ? '是' : '否'}}</div>
          <div><span>付款方式：</span>{{modalObj.payment}}</div>
          <div><span>证照要求：</span>{{modalObj.certificate || '无'}}</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(`/tender/purc/${bill.id}/info`)
          .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('/account/role/isUser').then(res => {
          this.isUser = res.data.isUser
        })
      },
      getUnreadIds () {
        this.$http.get('/tender/getUnreadIds/purc')
          .then(res => {
            this.unreadCode = res.data.content
          })
      },
      getResource(Reset) {
        this.$http.get('/tender/purc/info/search', {params: {
            _state: this.activeType !== 'all' ? this.activeType : null,
            count: 10,
            page: this.page,
            searchFilter: this.filterParams,
            sorting: {'id': 'desc'}
          }}).then(res => {
          if (Reset) {
            this.orderList = []
          }
          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>