mall-web-ssr/components/mobile/center/outOfStorage/detailStorage.vue

<template>
  <div class="storage">
    <div class="storage-info">
      <div class="linetext">入库单： <span>21324</span></div>
      <div class="linetext">买家名称： <span>21324</span></div>
      <div class="linetext">所属订单： <span>21324</span></div>
      <div class="linetext">物流公司： <span>323425</span></div>
      <div class="linetext">物流单号：<span>34254</span></div>
      <div class="linetext">录入人： <span>21324</span></div>
      <div class="linetext">录入时间： <span>21324</span></div>
    </div>
    <ul class="list-unstyled">
      <li class="info-list clearfix">
        <span class="super"><em>1</em></span>
        <div class="linetext width50 fl">型号： <span>21324</span></div>
        <div class="linetext width50 fl">品牌： <span>21324</span></div>
        <div class="linetext width50 fl">物料名称： <span>21324</span></div>
        <div class="linetext width50 fl">规格： <span>21324</span></div>
        <div class="linetext width50 fl">应出库(PCS)： <span>21324</span></div>
        <div class="linetext width50 fl">已出库(PCS)： <span>21324</span></div>
        <div class="linetext width50 fl"><em>*</em>本次出库(PCS)： <span>21324</span></div>
        <div class="linetext width50 fl">单价($)： <span class="base-color">21324</span></div>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        remindText: '',
        timeoutCount: 0,
        switchType: 'inBound',
        handleItem:0,
        filterOptions: [
          {
            title: '交易时间',
            selectOption: 'date',
            selectItems: [{
              key: '30天',
              val: 1
            }, {
              key: '90天',
              val: 2
            }, {
              key: '180天',
              val: 3
            }, {
              key: '自定义',
              val: 4
            }],
            defaultVal: 1
          }
        ]
      }
    },
    methods: {
      onRemind: function (str) {
        this.remindText = str
        this.timeoutCount++
      },
      setSwitchType (type) {
        this.switchType = type
      },
      setSelect (type, val) {
        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
        }
        this.filterRecord()
      },
      initFilterParams () {
        this.filterParams = {
          keyword: '',
          fromDate: '',
          toDate: '',
          currencyName: '',
          method: ''
        }
      },
      onSelectAction (selectObj) {
        this.setSelect(selectObj.key, selectObj.value)
      },
      filterRecord () {
        this.page = 1
        this.isChange = true
        this.reloadList()
      },
      reloadList () {
        if (this.switchType === 'account') {
          this.$store.dispatch('payCenter/loadBuyerAccount', {
            count: this.count,
            page: this.page,
            sorting: {num: 'ASC'},
            type: 'buyer'
          })
        } else {
          this.$store.dispatch('payCenter/loadBuyerRecord', {
            count: this.count,
            page: this.page,
            sorting: {'paytime': 'DESC'},
            currencyName: this.filterParams.currencyName || null,
            fromDate: this.filterParams.fromDate || null,
            toDate: this.filterParams.toDate || null,
            remitteeType: this.filterParams.remitteeType || null,
            keyword: this.filterParams.keyword || null
          })
        }
      },
    }
  }
</script>
<style lang="scss" scoped>
  $base-color: #3f84f6;
  $title-color: #ffa200;
  .storage{
    .storage-info{
      padding: 0.24rem 0.24rem;
      background: #fff;
      margin-bottom:.2rem;
    }
    .linetext{
      color:#666;
      line-height: .6rem;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
      span{
        color:#333;
        &.base-color{
          color:$base-color;
        }
      }
    }
    .info-list{
      position:relative;
      padding: 0.3rem 0.24rem;
      background: #fff;
      margin-bottom:.2rem;
      .width50{
        display:inline-block;
        width: 48%;
        margin-left: .1rem;
      }
      >span{
        display:inline-block;
        position:absolute;
        left:0;
        top:0;
        padding: 0 .1rem;
        background: $title-color;
        border-radius: 0 .5rem .5rem 0;
        line-height: .3rem;
        height:.3rem;
        color:#fff;
        font-size: .24rem;
      }
    }
  }
</style>