mall-web-ssr/components/mobile/applyPurchase/SeekList.vue

<template>
  <ul class="seek-list">
    <li v-for="(item, index) in purchaseManList.content">
      <p>
      <span v-if="item.inquiry.enterprise && item.inquiry.enterprise.enName">{{item.inquiry.enterprise.enName | enterpriseFilter}}</span>
      <span v-else>{{item.userName | userNameFilter}}</span>
      </p>
      <div>
        <div class="fl">
          <div>
            品牌：<span>{{item.cmpCode || '-'}}</span>
          </div>
          <div>
            型号：<span>{{item.inbrand || '-'}}</span>
          </div>
          <div>
            规格：<span>{{item.spec || '-'}}</span>
          </div>
          <div>
            截止日期：<span class="date">{{item.endDate | date}}</span>
          </div>
        </div>
        <div class="fr">
          <p v-if="item.remainingTime > 0">剩余：
            <span v-if="getDay(item.remainingTime) > 0" v-text="getDay(item.remainingTime)"></span>
            <i v-if="getDay(item.remainingTime) > 0">&nbsp;天&nbsp;</i>
            <span v-if="getDay(item.remainingTime) <= 0" v-text="getHours(item.remainingTime)"></span>
            <i v-if="getDay(item.remainingTime) <= 0" >&nbsp;小时</i>
          </p>
          <p v-else>已截止</p>
          <!--<a v-if="item.remainingTime > 0 && item.quoted == 1">已报价</a>-->
          <!--<a v-if="item.remainingTime > 0 && (!item.quoted || item.quoted != 1) && (user.logged && ((item.inquiry.enterprise && user.data.enterprise && (item.inquiry.enterprise.uu === user.data.enterprise.uu)) || (!user.data.enterprise.uu && item.userUU == user.data.userUU  && !item.inquiry.enterprise)))">自己发布的</a>-->
          <!--<a v-if="item.remainingTime > 0 && (!item.quoted || item.quoted != 1) && !(user.logged && ((item.inquiry.enterprise && user.data.enterprise && (item.inquiry.enterprise.uu === user.data.enterprise.uu)) || (!user.data.enterprise.uu && item.userUU == user.data.userUU  && !item.inquiry.enterprise)))">我要报价</a>-->
          <!--<nuxt-link to="/mobile/applyPurchase/list/1">查看报价</nuxt-link>-->
          </div>
      </div>
    </li>
  </ul>
</template>
<script>
  export default {
    filters: {
      date: function (date) {
        const d = new Date(Number(date))
        const year = d.getFullYear()
        const monthTemp = d.getMonth() + 1
        const month = monthTemp < 10 ? '0' + monthTemp : '' + monthTemp
        const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate() + ' '
        return year + '-' + month + '-' + day
      },
      enterpriseFilter (str) {
        return str && str.length > 4 ? str.substring(0, 2) + '**' + str.substring(str.length - 2, str.length) : str || '-'
      },
      userNameFilter (str) {
        return str ? str.substring(0, 1) + '**' : '-'
      }
    },
    computed: {
      purchaseManList () {
        return this.$store.state.applyPurchase.purchaseManList.purchaseManList.data
      },
      user () {
        return this.$store.state.option.user
      }
    },
    methods: {
      getDay: function (timeStamp) {
        return Math.floor(timeStamp / (1000 * 60 * 60 * 24))
      },
      getHours: function (timeStamp) {
        return Math.floor((timeStamp / (1000 * 60 * 60)) % 24)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .seek-list {
    width: 7.26rem;
    margin: .13rem auto 0;

    li {
      border: .04rem solid #e0e0e4;
      height: 3.32rem;
      margin-bottom: .2rem;

      >
      p {
        font-size: .32rem;
        color: #3a3a3a;
        background: #f8f7fa;
        height: .92rem;
        line-height: .92rem;

        span {
          display: block;
          width: 6.9rem;
          border-bottom: .04rem dashed #9f9f9f;
          margin: 0 auto;
        }

      }
      >
      div {
        font-size: .3rem;
        display: inline-block;

        .fl {
          color: #666;
          width: 4.8rem;
          height: 1.74rem;
          margin: .27rem 0 .29rem .18rem;
          line-height: .46rem;
          border-right: .04rem dashed #9f9f9f;

          > div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            span {
              color: #333;
            }
          }

        }
        .fr {
          width: 2.2rem;
          padding: .66rem 0 0 .2rem;

          p {
            font-size: .28rem;

            span {
              font-size: .35rem;
              color: #ff3208;
            }

            i {
              font-style: normal;
            }

          }
          a {
            display: block;
            width: 1.64rem;
            height: .58rem;
            line-height: .58rem;
            text-align: center;
            font-size: .32rem;
            color: #e62f36;
            border: .01rem solid #ea494f;
            margin-top: .34rem;
            border-radius: .06rem;
          }

        }
      }
    }
  }
</style>