mall-web-ssr/components/home/floor/FloorList.vue

<template>
  <div class="floor-list">
    <div class="container">
      <floor-bar :floors="floorsList"></floor-bar>
      <!--<a href="/store/33069557578d44e69bd91ad12d28a8d4" target="_blank"><img src="/images/all/banner-cuxiao.png" alt=""></a>-->
      <!--<div v-if="purchaseManListData && false"></div>-->
      <div class="banner">
        <ul class="seek-banner">
          <!--<li><a href="/store/33069557578d44e69bd91ad12d28a8d4" target="_blank"><img src="/images/all/banner-cuxiao001.jpg" alt=""></a></li>-->
          <li>
            <div class="banner-cuxiao">
              <div class="wrap">
                <p class="title"><span>最新求购</span><img class="new-animate" src="/images/all/banner-cuxiao03.jpg" alt="">
                  <nuxt-link to="/applyPurchase">查看更多</nuxt-link>
                </p>
                <div class="list-head">
                  <span>发布时间</span>
                  <span>买家名称</span>
                  <span>品牌</span>
                  <span>物料名称</span>
                  <span>型号</span>
                  <span>规格</span>
                  <span>操作</span>
                </div>
                <ul>
                  <li v-for="(purchaseMan, index) in purchaseManListData.content" :style="'top: -' + 32 * timerIndex + 'px'" :class="{'top': isTop}">
                    <div>{{purchaseMan.date | date}}</div>
                    <div>
                      <span :title="user.logged ? purchaseMan.inquiry.enName : null" v-if="purchaseMan.inquiry && purchaseMan.inquiry.enName">{{[purchaseMan.inquiry.enName, user] | enterpriseFilter}}</span>
                      <span :title="user.logged ? purchaseMan.userName : null" v-else>{{[purchaseMan.userName, user] | userNameFilter}}</span>
                    </div>
                    <div :title="purchaseMan.inbrand">{{purchaseMan.inbrand || '-'}}</div>
                    <div :title="purchaseMan.prodTitle">{{purchaseMan.prodTitle || '-'}}</div>
                    <div :title="purchaseMan.cmpCode">{{purchaseMan.cmpCode || '-'}}</div>
                    <div :title="purchaseMan.spec">{{purchaseMan.spec || '-'}}</div>
                    <div>
                      <div class="is-say-price" v-if="purchaseMan.remainingTime > 0 && purchaseMan.quoted == 1">已报价 <img src="/images/applyPurchase/green-check.png" alt=""></div>
                      <div v-else>
                        <a title="该求购已截止" v-if="!purchaseMan.remainingTime || purchaseMan.remainingTime <= 0" class="is-same" @click="sayPriceStop">我要报价</a>
                        <a title="此为贵公司的求购" v-if="purchaseMan.remainingTime > 0 && (!purchaseMan.quoted || purchaseMan.quoted != 1) && (user.logged && ((purchaseMan.inquiry.enterprise && user.data.enterprise && (purchaseMan.inquiry.enterprise.uu === user.data.enterprise.uu)) || (!user.data.enterprise.uu && purchaseMan.userUU == user.data.userUU  && !purchaseMan.inquiry.enterprise)))" class="is-same" @click="sayPriceSeft">我要报价</a>
                        <a v-if="purchaseMan.remainingTime > 0 && (!purchaseMan.quoted || purchaseMan.quoted != 1) && !(user.logged && ((purchaseMan.inquiry.enterprise && user.data.enterprise && (purchaseMan.inquiry.enterprise.uu === user.data.enterprise.uu)) || (!user.data.enterprise.uu && purchaseMan.userUU == user.data.userUU  && !purchaseMan.inquiry.enterprise)))" @click="sayPrice(purchaseMan, index)">我要报价</a>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <nuxt-link to="/applyPurchase" class="purchase">我要求购</nuxt-link>
            </div>
          </li>
        </ul>
      </div>
      <template v-for="floor in expandList">
        <floor :floor="floor" :isDefault="true"></floor>
      </template>
      <template v-for="floor in floorsList" >
        <floor :floor="floor" :isDefault="false"></floor>
      </template>
    </div>
    <say-price :current="currentSayPriceIndex"
               :purchase="purchaseManListData || {}"
               @cancelSayPriceAction="cancelSayPrice"
               @resetListAction="resetList"
               @sayPriceIndexAction="setIndex(index)"
    ></say-price>
  </div>
</template>
<script>
  import Floor from './Floor.vue'
  import FloorBar from './FloorBar.vue'
  import SayPrice from '~components/applyPurchase/SayPrice.vue'
  import baseUtils from '~utils/baseUtils'
  export default {
    name: 'floor-list',
    components: {
      Floor,
      FloorBar,
      SayPrice
    },
    data () {
      return {
        timerIndex: 0,
        pageSize: 50,
        nowPage: 1,
        currentSayPriceIndex: -1,
//        purchaseManList: {
//          content: []
//        },
//        listTemplate: [],
        isChange: false,
        isTop: false, // 判断是否滚动至顶,
        timer: {} // 定时器实体
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.changeInterval(true)
      })
    },
    filters: {
      date: function (date) {
        const now = baseUtils.formatDate(new Date(), 'yyyy-MM-dd')
        const day = Math.floor((new Date(now).getTime() - new Date(baseUtils.formatDate(new Date(date), 'yyyy-MM-dd')).getTime()) / (1000 * 60 * 60 * 24))
        return day <= 0 ? '今天' : day + '天前'
      },
      enterpriseFilter ([str, user]) {
        if (!user.logged) {
          return str ? str.length > 4 ? str.substring(0, 2) + '**' + str.substring(str.length - 2, str.length) : str : '-'
        } else {
          return str || '-'
        }
      },
      userNameFilter ([str, user]) {
        if (!user.logged) {
          return str ? str.substring(0, 1) + '**' : '-'
        } else {
          return str || '-'
        }
      }
    },
    computed: {
      floorsData () {
        if (this.$store.state.floor.list_v3.data && this.$store.state.floor.list_v3.data.data) {
          return this.$store.state.floor.list_v3.data.data
        } else {
          return {}
        }
      },
      floorsF1 () {
        return this.floorsData.home_floor_f1 || {}
      },
      floorsF2 () {
        return this.floorsData.home_floor_f2 || {}
      },
      floorsF3 () {
        return this.floorsData.home_floor_f3 || {}
      },
      floorsF4 () {
        return this.floorsData.home_floor_f4 || {}
      },
      floorsF5 () {
        return this.floorsData.home_floor_f5 || {}
      },
      expandF1 () {
        return this.floorsData.home_expand_f1 || {}
      },
      expandF2 () {
        return this.floorsData.home_expand_f2 || {}
      },
      floorsList () {
        let lists = []
        let floorName = ['传感器件', '连接器件', '分立器件', '被动器件', '电源产品']
        for (let i = 0; i < floorName.length; i++) {
          lists.push({'floorNumber': i + 1, 'name': floorName[i]})
        }
        lists[0].items = this.floorsF1
        lists[1].items = this.floorsF2
        lists[2].items = this.floorsF3
        lists[3].items = this.floorsF4
        lists[4].items = this.floorsF5
        lists.slice().forEach(function(value) {
          let lengs = value.items ? value.items.length : 0
          for (let j = 0; j < lengs; j++) {
            value.items[j].backGroundColor = value.items[j].metadatas.contExp_select
            value.items[j].body = value.items[j].metadatas.contExp_remark
            value.items[j].name = value.items[j].metadatas.contExp_abstract
            value.items[j].size = value.items[j].metadatas.contExp_spec
            value.items[j].hrefUrl = value.items[j].detailsLink
            value.items[j].pictureUrl = value.items[j].pictureLink
            value.items[j].price = value.items[j].remark
            value.items[j].isNull = value.items[j].pictureLink === null
          }
        })
        return lists
      },
      expandList () {
        let lists = []
        let floorName = ['特价1', '特价2']
        for (let i = 0; i < floorName.length; i++) {
          lists.push({'floorNumber': i + 1, 'name': floorName[i]})
        }
        lists[0].items = this.expandF1
        lists[1].items = this.expandF2
        lists.slice().forEach(function(value) {
          let lengs = value.items ? value.items.length : 0
          for (let j = 0; j < lengs; j++) {
            value.items[j].backGroundColor = value.items[j].metadatas.contExp_select
            value.items[j].body = value.items[j].metadatas.contExp_remark
            value.items[j].name = value.items[j].metadatas.contExp_abstract
            value.items[j].size = value.items[j].metadatas.contExp_spec
            value.items[j].hrefUrl = value.items[j].detailsLink
            value.items[j].pictureUrl = value.items[j].pictureLink
            value.items[j].price = value.items[j].remark
            value.items[j].isNull = value.items[j].pictureLink === null
          }
        })
        return lists
      },
      isProd () {
        return this.$store.state.option.url === 'https://mall.usoftchina.com'
      },
      purchaseManListData () {
//        let list = this.$store.state.applyPurchase.purchaseManList.purchaseManList.data
//        if (this.isChange) {
//          this.purchaseManList.content = []
//          this.listTemplate = list
//          this.isChange = false
//        } else if (list.content) {
//          for (let i = 0; i < list.content.length; i++) {
//            this.purchaseManList.content.push(list.content[i])
//          }
//          this.listTemplate = list
//        }
        return this.$store.state.applyPurchase.purchaseManList.purchaseManList.data
      },
      user () {
        return this.$store.state.option.user
      }
    },
    methods: {
      getMinPrice: function (prices, currency) {
        for (let i = 0; i < prices.length; i++) {
          if (i === prices.length - 1) {
            return currency === 'RMB' ? prices[i].rMBPrice : prices[i].uSDPrice
          }
        }
      },
      setIndex: function (index) {
        this.currentSayPriceIndex = index
      },
      sayPriceStop: function () {
        this.$message.error('该求购已截止')
      },
      sayPriceSeft: function () {
        this.$message.error('此为贵公司的求购')
      },
      sayPrice: function (purchaseMan, index) {
        if (this.user.logged) {
          if (this.user.data.enterprise.uu) {
            if (this.user.data.enterprise.isVendor && this.user.data.enterprise.isVendor !== '1690') {
//              purchaseMan.active = true
              this.authorityInterceptor(this.baseUrls.vendorBusinessSayPrice, () => {
                this.changeInterval(false)
                this.currentSayPriceIndex = index
              })
            } else {
              this.$message.error('抱歉，您需开通卖家功能才可报价')
            }
          } else {
            this.$message.error('个人账户暂不可报价')
          }
        } else {
          this.$router.push('/auth/login?returnUrl=' + window.location.href)
        }
      },
      resetList: function () {
        this.currentSayPriceIndex = -1
        this.timerIndex = 0
        this.isChange = true
        this.$store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: this.nowPage, pageSize: this.pageSize, enUU: this.user.data.enterprise ? this.user.data.enterprise.uu : null})
      },
      cancelSayPrice: function () {
//        this.purchaseManList.content[this.currentSayPriceIndex].active = false
        this.currentSayPriceIndex = -1
        this.changeInterval(true)
      },
      changeInterval: function (flag) {
        if (flag) {
          this.timer = setInterval(() => {
            this.timerIndex ++
            this.isTop = (this.timerIndex % 45 === 0)
            if (this.isTop) {
//          for (let i = 0; i < _this.listTemplate.content.length; i++) {
//            this.purchaseManList.content.push(_this.listTemplate.content[i])
//          }
              this.timerIndex = 0
            }
          }, 3000)
        } else {
          clearInterval(this.timer)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';
  /*add*/
  .floor-list .container{
    padding: 0;
  }
  .floor-list {
    margin-bottom: $xlg-pad;
  }
  .floor-list .container > a > img {
    margin-top: 30px;
  }
  .banner{
    width:1190px;
    height: 253px;
    margin-top: 20px;
    .seek-banner {
      > li{
        /*float: left;*/
        /*padding-left: 14px;*/
        position: relative;
        /*&:first-child{*/
          /*padding-left: 0;*/
        /*}*/
      }
    }
    .banner-cuxiao {
      width: 1190px;
      height: 253px;
      background: url('/images/all/home-apply.jpg') no-repeat;
      /*background-size: 1190px auto;*/
      .wrap {
        width: 874px;
        .title {
          color: #f57a2e;
          font-size: 20px;
          font-weight: bold;
          padding: 10px 30px;
          margin: 0;
          a {
            font-size: 14px;
            color: #f57a2e;
            float: right;
            margin-top: 7px;
          }
        }
        .list-head {
          height: 30px;
          line-height: 30px;
          color: #fff;
          font-size: 14px;
          background-color: #f57a2e;
          text-align: center;
          span {
            display: inline-block;
            &:nth-child(1) {
              width: 97px;
            }
            &:nth-child(2) {
              width: 164px;
            }
            &:nth-child(3) {
              width: 139px;
            }
            &:nth-child(4) {
              width: 115px;
            }
            &:nth-child(5) {
              width: 160px;
            }
            &:nth-child(6) {
              width: 99px;
            }
            &:nth-child(7) {
              width: 91px;
            }
          }
        }
        ul {
          max-height: 160px;
          overflow: hidden;
          position: relative;
          li {
            height: 32px;
            line-height: 32px;
            position: relative;
            top: 0;
            transition: top 1s;
            -moz-transition: top 1s; /* Firefox 4 */
            -webkit-transition: top 1s; /* Safari and Chrome */
            -o-transition: top 1s; /* Opera */
            &.top {
              transition: top 0s;
              -moz-transition: top 0s; /* Firefox 4 */
              -webkit-transition: top 0s; /* Safari and Chrome */
              -o-transition: top 0s; /* Opera */
            }
            > div {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              display: inline-block;
              text-align: center;
              padding: 0px 10px;
              &:first-child {
                color: #f57a2e;
              }
              &:nth-child(1) {
                width: 97px;
              }
              &:nth-child(2) {
                width: 164px;
              }
              &:nth-child(3) {
                width: 139px;
              }
              &:nth-child(4) {
                width: 115px;
              }
              &:nth-child(5) {
                width: 160px;
              }
              &:nth-child(6) {
                width: 99px;
              }
              &:nth-child(7) {
                width: 91px;
              }
              a {
                width: 64px;
                height: 22px;
                line-height: 22px;
                text-align: center;
                padding: 3px 5px;
                color: #fd3904;
                font-size: 12px;
                border-radius: 2px;
                border: 1px solid #fd3904;
                &:hover {
                  border: 1px solid #fd3904;
                  background-color: #fd3904;
                  color: #fff;
                  -moz-box-shadow: 0 3px 5px #f57a2e; /* 老的 Firefox */
                  box-shadow: 0 3px 10px #f57a2e;
                }
                &.is-same {
                  background: #cccbcb;
                  border: none;
                  color: #fff;
                  -webkit-box-shadow: none;
                  -moz-box-shadow: none;
                  box-shadow: none;
                }
              }
              .is-say-price {
                color: #39ae05;
                img {
                  margin-bottom: 2px;
                }
              }
            }
          }
        }
      }
      .purchase {
        position: absolute;
        right: 88px;
        top: 170px;
        width: 114px;
        height: 32px;
        font-size: 16px;
        line-height: 32px;
        background-color: rgba(255, 255, 255, 0.98);
        box-shadow: 0px 1px 1px 1px rgba(244, 94, 2, 0.8);
        border-radius: 14px;
        opacity: 0.98;
        background-color: #fff;
        color: #f57a2e;
        text-align: center;
        font-weight: bold;
        &:hover{
          background-color: #FB6102;
          color: #fff;
          box-shadow: 0px 3px 10px #fd863d;
        }
      }
    }
  }
</style>