mall-web-ssr/pages/mobile/center/user/outOfStorage/_id.vue

<template>
  <div class="storage">
    <div class="com-mobile-header mobile-center-header">
      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
      <p v-text="storageList.type === 'INBOUND' ? '查看入库记录' : '查看出库记录'"></p>
      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
    </div>
    <div class="mobile-fix-content mobile-centerfix-content" id="mobile-storage-center">
      <div class="storage-record">
        <div class="storage-info">
          <div class="linetext">{{storageList.type === 'INBOUND' ? '入库单' : '出库单'}}： <span v-text="storageList.inOutId"></span></div>
          <div class="linetext">{{storageList.type === 'INBOUND' ? '卖家名称' : '买家名称'}}： <span v-text="storageList.affiliatedEnterprise">21324</span></div>
          <div class="linetext">所属订单： <span v-text="storageList.associateOrderid || '-'">21324</span></div>
          <div class="linetext">类型： <span v-text="setFilterType(storageList.opertatorType)">21324</span></div>
          <div class="linetext" v-if="storageList.logistics">物流公司： <span v-text="storageList.logistics ? storageList.logistics.companyName : '-'">323425</span></div>
          <div class="linetext" v-if="storageList.logistics">物流单号：<span v-text="storageList.logistics ? storageList.logistics.number : '-'">34254</span></div>
          <div class="linetext">录入人： <span v-text="storageList.operaterUserName || '-'">21324</span></div>
          <div class="linetext">录入时间： <span v-text="storageList.createTime ? baseUtils.formatDate(new Date(storageList.createTime), 'yyyy-MM-dd hh:mm:ss') : '-'">21324</span></div>
        </div>
        <ul class="list-unstyled" v-if="storageList.inOutboundDetails">
          <li class="info-list clearfix" v-for="(item, index) in storageList.inOutboundDetails">
            <span class="super"><em v-text="index + 1">1</em></span>
            <div class="linetext width50 fl">型号： <span v-text="item.cmpCode || '-'">21324</span></div>
            <div class="linetext width50 fl">品牌： <span v-text="item.brandEn || '-'">21324</span></div>
            <div class="linetext width50 fl">物料名称： <span v-text="item.kindName || '-'">21324</span></div>
            <div class="linetext width50 fl">规格： <span v-text="item.spec || '-'">21324</span></div>
            <div class="linetext width50 fl">{{storageList.type === 'INBOUND' ? '入库数' : '出库数'}}(PCS)： <span v-text="item.qty || '-'">21324</span></div>
            <div class="linetext width50 fl">单价({{currency === 'RMB' ? '¥': '$'}})： <span class="base-color" v-text="item.price || '-'">21324</span></div>
          </li>
        </ul>
      </div>
    </div>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>
<script>
  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
  export default {
    middleware: 'authenticated',
    layout: 'mobile',
    fetch({route, store}) {
      return Promise.all([
        store.dispatch('product/getLoadStorageId', {id:route.params.id}),
        store.dispatch('loadCurrencyData')
      ])
    },
    data () {
      return {
        remindText: '',
        timeoutCount: 0
      }
    },
    components: {
      RemindBox,
      PullUp,
      EmptyStatus
    },
    computed: {
      storageList () {
        return this.$store.state.product.storage.detail.data
      }
    },
    methods: {
      onRemind: function (str) {
        this.remindText = str
        this.timeoutCount++
      },
      setFilterType (type) {
        let bound = ''
        if(type === 'OTHER_INBOUND') {
          bound = '其他入库'
        } else if(type === 'OTHER_OUTBOUND'){
          bound = '其他出库'
        } else if (type === 'PURCHASE_INBOUND') {
          bound = '采购入库'
        } else if(type === 'SELL_OUTBOUND') {
          bound = '销售出库'
        } else {
          bound = '全部类型'
        }
        return bound
      }
    }
  }
</script>
<style lang="scss" scoped>
  $base-color: #3f84f6;
  $title-color: #ffa200;
  #mobile-storage-center {
    padding-bottom: .5rem;
    margin: 0 auto;
  }
  .storage-record{
    padding: 0.24rem 0.24rem;
    margin: 0 auto;
    .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>