mall-web-ssr/components/store/home/CommodityList.vue

<template>
  <div id="goods-list-fragment">
    <el-dialog
      title="我要询价"
      :visible.sync="hasDialog">
      <div class="form_dialog">
        <ul class="list-inline">
          <li class="form-item">
            <span>品牌：</span>
            <p v-text="applyObj.brand ? spliceString(applyObj.brand, 90) : '-'">32432</p>
          </li>
          <li class="form-item">
            <span>物料名称：</span>
            <p v-text="applyObj.prodName ? spliceString(applyObj.prodName, 90) : '-'">32</p>
          </li>
          <li class="form-item">
            <span>型号：</span>
            <p v-text="applyObj.cmpCode ? spliceString(applyObj.cmpCode, 90) : '-'">32432</p>
          </li>
          <li class="form-item">
            <span>规格：</span>
            <p v-text="applyObj.spec ? spliceString(applyObj.spec, 90) : '-'">32432</p>
          </li>
          <li class="form-item">
            <span><i>*</i>截止日期：</span>
            <el-date-picker
              :class="{'error': !validObj.deadline}"
              v-model="applyObj.deadline"
              type="date"
              :picker-options="pickerOptions"
              @change="setDeadLineValid"
              :editable="false"
              :clearable="true"
              size="mini">
            </el-date-picker>
          </li>
          <li class="form-item">
            <span>封装：</span>
            <input type="text" class="form-control" v-model="applyObj.encapsulation"/>
          </li>
          <!--<li class="form-item">-->
          <!--<span>单价预算：</span>-->
          <!--<select v-model="applyObj.currency" class="form-control" style="width:40px;">-->
          <!--<option value="RMB">¥</option>-->
          <!--<option value="USD">$</option>-->
          <!--</select>-->
          <!--<input type="number" v-model="applyObj.unitPrice" class="form-control" :class="{'error': !validObj.unitPrice}"/>-->
          <!--</li>-->
          <!--<li class="form-item">-->
          <!--<span>生产日期：</span>-->
          <!--<input type="text" class="form-control" v-model="applyObj.produceDate"/>-->
          <!--</li>-->
          <li class="form-item">
            <span>采购数量(PCS)：</span>
            <input type="number" class="form-control" v-model="applyObj.amount" :class="{'error': !validObj.amount}"/>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <button @click="authorityInterceptor(baseUrls.userPublishSeek, goPublish)" :disabled="isClick">询价提交</button>
      </span>
    </el-dialog>
    <div class="container">
      <div class="content-adv">
        <div class="title-adv"><span>全球共享交易平台</span><span>全球共享询价平台</span></div>
        <div class="input-group">
          <input type="search" class="form-control" id="search_input" title="code" placeholder="型号/品牌"
                 v-model="searchCode" @search="goodsSearch(searchCode)"/>
          <span class="input-group-btn">
            <button type="button" class="btn" id="search_btn" @click="goodsSearch(searchCode)">&nbsp;搜&nbsp;索&nbsp;</button>
          </span>
          <span class="input-group-btn">
            <button type="button" class="btn sendprove" @click="sendprove()">我要发布产品</button>
          </span>
        </div>
      </div>
      <!--<div class="title-area">
        <div class="category-title">
          <span style="line-height: 34px;">产品分类</span>
        </div>
        <div class="category-content">
          <el-tree :data="data1" :props="defaultProps" accordion :highlight-current="true" @current-change="handlerCurrentNode" :default-expanded-keys="[0]" node-key="id" @node-collapse="onNodeCollapse">
           &lt;!&ndash;<span class="custom-tree-node" slot-scope="{ node, data }">&ndash;&gt;
             &lt;!&ndash;<span>{{ node.nameCn }}</span>&ndash;&gt;
             &lt;!&ndash;<span>{{ node.count }}</span>&ndash;&gt;
           &lt;!&ndash;</span>&ndash;&gt;
          </el-tree>
          &lt;!&ndash;<span class="empty" v-if="!kinds[0].children || !kinds[0].children.length">暂无数据</span>&ndash;&gt;
        </div>
      </div>-->
      <!-- 产品列表 -->
      <div class="goods-area">
        <!-- 列表展示 -->
        <table class="goodslist" style="width: 955px;background:#fff;" >
          <thead>
          <tr>
            <th width="165"><div>品牌/物料名称</div></th>
            <th width="148"><div>型号/规格</div></th>
            <th width="114"><div>包装</div></th>
            <th width="125"><div>库存</div></th>
            <!-- <th width="90">数量</th>
             <th width="90">香港交货<span style="font-size: 12px;">($)</span></th>
             <th width="100">大陆交货<span style="font-size: 12px;">(￥)</span></th>-->
            <th width="149"><div>价格梯度(PCS)</div></th>
            <th width="67"><div>交期(天)</div></th>
            <th width="66"><div>规格书</div></th>
            <th width="95"><div>操作</div></th>
          </tr>
          </thead>
          <tbody id="goodslist-content">
          <tr v-for="commodity in commodities.content" @click="goBatchDetail(commodity.batchCode)">
            <td class="brand-code">
              <img class="sellout-store-commodity" v-if="commodity.status === 602" src="/images/search/sellout-search.png" alt="">
              <img class="specific-price-tag" v-if="isSpecificPriceTag(commodity.tag) && isConsignment" src="/images/floor/specificPrice-store.png" alt="">
              <div class="brand" v-if="commodity.brandNameEn || commodity.brandEn">
                <a v-if="commodity.brandNameEn && commodity.branduuid" @click="goBrandDetail('/product/brand/' + commodity.branduuid, $event)" v-text="commodity.brandNameEn" :title="commodity.brandNameEn"></a>
                <span v-if="commodity.brandNameEn && !commodity.branduuid" v-text="commodity.brandNameEn" :title="commodity.brandNameEn"></span>
                <span v-if="commodity.brandEn && !commodity.branduuid" :title="commodity.brandEn">{{commodity.brandEn}}</span>
              </div>
              <div class="brand" v-if="!commodity.brandNameEn && !commodity.brandEn && commodity.kindNameCn">—</div>
              <a v-if="commodity.kindNameCn && commodity.kindUuid" @click="goBrandDetail('/product/kind/' + commodity.kindUuid, $event)" v-text="commodity.kindNameCn" :title="commodity.kindNameCn"></a>
              <span v-if="commodity.kindNameCn && !commodity.kindUuid" v-text="commodity.kindNameCn" :title="commodity.kindNameCn"></span>
              <div class="brand" v-if="!commodity.kindNameCn && (commodity.brandNameEn || commodity.brandEn)">—</div>
              <div class="brand" v-if="!commodity.brandNameEn && !commodity.brandEn && !commodity.kindNameCn">—</div>
            </td>
            <td class="brand-code">
              <div class="code" v-if="commodity.code" v-text="commodity.code" :title="commodity.code"></div>
              <div class="code" v-if="!commodity.code">—</div>
              <div class="brand spec" v-text="commodity.spec || '—'" :title="commodity.spec"></div>
            </td>
            <td>
              <div class="package" v-if="commodity.packaging" v-text="commodity.packaging" :title="commodity.packaging"></div>
              <div class="package" v-if="!commodity.packaging && !commodity.produceDate">—</div>
              <!--<div class="date" v-if='commodity.produceDate' v-text="commodity.produceDate" :title="commodity.produceDate">2016-12-01</div>-->
            </td>
            <td style="text-align: left;vertical-align: middle;">
              <div class="goods" v-if="commodity.reserve">
                库存：<span v-text="commodity.reserve" :title="commodity.reserve">31500</span>
              </div>
              <div v-if="!commodity.reserve" style="text-align: center;margin-left: 0;"><span>—</span></div>
              <div class="from" v-if="commodity.reserve && commodity.reserve>0">
                起拍：<span v-if="commodity.minBuyQty" v-text="commodity.minBuyQty" :title="commodity.minBuyQty">300</span>
              </div>
              <!--<div class="multiple">
                倍数：<span>1</span>
              </div>-->
              <div class="can-div-sell" v-if="commodity.reserve" v-text="commodity.breakUp?'可拆卖':'不可拆卖'"></div>
            </td>
            <td>
              <div class="amount">
                <div  v-for="price in commodity.prices" v-text="price.start + '+'" :title="price.start + '+'"></div>
              </div>
              <!--<div v-show="commodity.currencyName.indexOf('USD')==-1 || !commodity.prices">
                <span>—</span>
              </div>
              <div v-for="price in commodity.prices">{{price.uSDPrice | currency}}</div>-->
              <div class="price">
                <div v-show="!commodity.prices || !commodity.prices.length">
                  <span>—</span>
                </div>
                <template v-if="commodity.currencyName === 'RMB'">
                  <div v-for="price in commodity.prices" :title="'￥' + price.rMBPrice">￥{{price.rMBPrice | currency}}</div>
                </template>
                <template v-else>
                  <div v-for="price in commodity.prices" :title="'$' + price.uSDPrice">${{price.uSDPrice | currency}}</div>
                </template>
              </div>
            </td>
            <td>
              <div v-if="commodity.b2cMinDelivery">
                <!--{{commodity.b2cMinDelivery || 0}}-{{commodity.b2cMaxDelivery || 0}}天-->
                <span v-if="commodity.b2cMinDelivery != commodity.b2cMaxDelivery" v-text="commodity.b2cMinDelivery + '-' + commodity.b2cMaxDelivery" :title="commodity.b2cMinDelivery + '-' + commodity.b2cMaxDelivery"></span>
                <span v-if="commodity.b2cMinDelivery == commodity.b2cMaxDelivery" v-text="commodity.b2cMinDelivery" :title="commodity.b2cMinDelivery"></span>
              </div>
              <div v-if="!commodity.b2cMinDelivery"><span>—</span></div>
            </td>
            <td>
              <div v-if="commodity.attach">
                <a @click="goAttach(commodity.attach, $event)" target="_blank"><img src="/images/store/common/pdf.png" alt=""/></a>
              </div>
              <div v-if="!commodity.attach">—</div>
            </td>
            <td>
              <buy :item="commodity" v-if="commodity.attach"></buy>
              <button  v-if="!commodity.attach"
                       style="z-index: 1000;"
                      class="btn btn-primary btn-buy-now"
                      :class="{'disabled': isClick}"
                      @click="immediatelyClick(commodity, $event)">
                <span class="watch">立即询价</span>
              </button>
            </td>
          </tr>
          <tr class="active-empty" v-if="!commodities.content || commodities.content.length == 0">
            <td colspan="10" style="height: 880px;">
              <div class="text-center">
                <div class="col-xs-offset-3 col-xs-2">
                  <img src="/images/brandList/empty-cart.jpg">
                </div>
                <div class="col-xs-4 txt-info">
                  <!--<p class="grey f16">暂无器件信息</p>-->
                  <p class="grey f16"> 暂无产品信息</p>
                  <i class="iconfont" v-if="emptyShow === false">&#xe610;</i>&nbsp;<a v-if="emptyShow === false" href="/">返回首页</a>
                  <img v-if="emptyShow === true" src="/images/brandList/upload.png">&nbsp;<a v-if="emptyShow === true" href="/vendor#/vendor_upload?type=company" target="_blank">马上去上传</a>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
        <!--<div class="remind-area">-->
          <!--<img src="/images/store/store-remind.png" alt="">-->
          <!--所有报价、库存信息的真实性及准确性均由店铺负责，如有疑问请点击-->
          <!--<a @click="goLink" class="link-seller">联系卖家</a>-->
        <!--</div>-->
        <div style="float: right;margin-right: 12px;">
          <page :total="commodities.totalElements" :page-size="pageParams.count"
                :current="pageParams.page" @childEvent="handleCurrentChange"></page>
        </div>
        <link-saler-box
          :tel="tel"
          v-if="showLinkBox"
          @cancelAction="showLinkBox = false">
        </link-saler-box>
      </div>
    </div>
  </div>
</template>
<script>
  function getAllLeafIds (kind) {
    if (!kind) {
      return null
    }
    if (kind.isLeaf === 1) {
      return kind.id
    } else {
      if (!kind.children || kind.children.length === 0) {
        return null
      }
      let ids = []
      for (let i = 0; i < kind.children.length; i++) {
        ids.push(getAllLeafIds(kind.children[i]))
      }
      return ids.join(',')
    }
  }
  import Buy from '~components/common/buyOrCar/buyComponent.vue'
  import Page from '~components/common/page/pageComponent.vue'
  import LinkSalerBox from '~components/common/LinkSalerBox.vue'
  export default {
    name: 'commodity-list',
    props: ['kinds'],
    components: {
      Buy,
      Page,
      LinkSalerBox
    },
    data () {
      return {
        isClick: false,
        applyObj: {
          cmpCode: '',
          brand: '',
          unitPrice: '',
          currency: 'RMB',
          prodName: '',
          spec: '',
          encapsulation: '',
          produceDate: '',
          amount: '',
          deadline: ''
        },
        validObj: {
          unitPrice: true,
          amount: true,
          deadline: true
        },
        pickerOptions: {
          disabledDate (time) {
            // 大于等于今天 小于三个月后
            return time.getTime() < Date.now() - 1000 * 60 * 60 * 24 || time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 30 * 3
          }
        },
        hasDialog: false,
        defaultProps: {
          children: 'children',
          label: 'nameCn'
        },
        pageParams: {
          page: 1,
          count: 10
        },
        searchCode: '',
        parentKindId: 0,
        ids: null,
        showLinkBox: false,
        tel: ''
      }
    },
    filters: {
      currency: function (num) {
        if (typeof num === 'number') {
          if (num <= 0.000001) {
            num = 0.000001
          } else {
            if (num.toString().indexOf('.') === -1) {
              num += '.00'
            } else {
              let inputStr = num.toString()
              let arr = inputStr.split('.')
              let floatNum = arr[1]
              if (floatNum.length > 6) {
                num = inputStr.substring(0, arr[0].length + 7)
                if (Number(floatNum.charAt(6)) > 4) {
                  num = (Number(num) * 1000000 + 1) / 1000000
                }
              } else if (floatNum.length === 1) {
                num = num + '0'
              }
            }
          }
        }
        return num
      }
    },
    computed: {
      commodities () {
        return this.$store.state.shop.storeInfo.storeCommodity.data
      },
      storeInfo () {
        return this.$store.state.shop.storeInfo.store.data
      },
      user () {
        return this.$store.state.option.user
      },
      tab () {
        return this.$store.state.chat.tab.tab.data
      },
      isConsignment () {
        return this.storeInfo.type === 'CONSIGNMENT'
      },
      storeStatus () {
        return this.$store.state.option.storeStatus.data
      },
      emptyShow () {
        let loggedStatus = false
        if (this.user.logged && this.user.data.enterprise.uu) {
          if (this.storeStatus.uuid === this.storeInfo.uuid) {
            loggedStatus = true
          } else {
            loggedStatus = false
          }
        } else {
          loggedStatus = false
        }
        return loggedStatus
      },
      enterprise () {
        let ens = this.user.data.enterprises
        if (ens && ens.length) {
          return ens.find(item => item.current) || {enName: '个人账户'}
        } else {
          return {enName: '个人账户'}
        }
      }
    },
    watch: {
       kinds: {
         handler: function (val) {
           if (val) {
             val.forEach((item) => {
               this.KindsNameChange(item)
             })
           }
         },
         immediate: true
       }
  },
//    mounted () {
//      this.$nextTick(() => {
//         this.kinds.forEach((item) => {
//         this.KindsNameChange(item)
//       })
//      })
//    },
//  mounted () {
//      this.kinds.forEach((item) => {
//        this.KindsNameChange(item)
//      })
// //    alert(JSON.stringify(this.kinds))
//    },
    methods: {
      sendprove: function () {
        if (this.user.logged) {
          if (this.enterprise && this.enterprise.isVendor === 313) {
            window.open('/vendor#/vendor_upload')
          } else {
            this.$router.push('/register-saler')
          }
        } else {
          this.$router.push('/auth/login?returnUrl=' + window.location.href)
        }
      },
      goLink: function () {
        this.baseUtils.goLinkUser(this, this.storeInfo.enUU)
      },
      KindsNameChange: function (obj) {
          obj.nameCn += (obj.count ? `  (${obj.count})` : '')
          if (obj.children && obj.children.length) {
            obj.children.forEach((item) => {
              this.KindsNameChange(item)
            })
          }
      },
      goAttach: function (url, event) {
        event.stopPropagation()
        if (this.user.logged) {
          if (url && url !== '1') {
            window.open(url)
          } else {
            this.$message.error('规格书地址错误')
          }
        } else {
          this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
            if (response.data) {
              window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
            }
          })
        }
      },
      handlerCurrentNode (data, node) {
        this.searchCode = ''
        if (this.parentKindId === data.id) {
          this.parentKindId = 0
          this.ids = null
        } else {
          if (data.level === 1) {
            this.parentKindId = data.id
          }
          this.ids = getAllLeafIds(data)
        }
        this.pageParams.page = 1

        this.pageCommodity(this.pageParams, this.ids)
      },
      onNodeCollapse () {
        this.parentKindId = ''
      },
      goodsSearch (keyword) {
        this.pageParams.page = 1
        this.pageCommodity(this.pageParams, this.ids, keyword)
      },
      async pageCommodity (pageParams, kindId, keyword) {
//    pageCommodity (pageParams, kindId, keyword) {
        let params = { storeid: this.$route.params.uuid, origin: 'store', kindUuid: kindId, code: keyword }
        params.page = pageParams.page
        params.count = pageParams.count

        try {
          let { data } = await this.$http.get('/api/commodity/commodities', { params })
          this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', data)
        } catch (err) {
          this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_FAILURE', err)
        }
//      this.$http.get('/api/commodity/commodities', { params }).then(response => {
//        this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', response)
//      }, err => {
//        this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_FAILURE', err)
//      })
      },
      handleCurrentChange (page) {
        this.pageParams.page = page
        this.pageCommodity(this.pageParams, this.ids, this.searchCode)
      },
//    goBack () {
//      this.$router.back(-1)
//    }
      isSpecificPriceTag: function (tag) {
        return tag && tag.indexOf('特价') !== -1
      },
      goBatchDetail (batchCode) {
        window.open('/store/productDetail/' + batchCode)
      },
      goBrandDetail (url, event) {
        event.stopPropagation()
        window.open(url)
      },
      // 格式化字符串长度
      spliceString (str, length) {
        return str && str.length ? this.baseUtils.spliceStr(str, length) : '暂无信息'
      },
      // 弹出询价界面
      immediatelyClick (type, event) {
        event.stopPropagation()
        if (!this.user.logged) {
          this.$router.push('/auth/login?returnUrl=' + window.location.href)
        } else {
          this.hasDialog = true
          this.applyObj.cmpCode = type.code
          this.applyObj.brand = type.brandNameEn
          this.applyObj.spec = type.spec
          this.applyObj.prodName = type.kindNameCn
        }
      },
      // 时间格式化
      setDeadLineValid: function () {
        if(this.applyObj.deadline === '') {return ''}
        this.applyObj.deadline = this.baseUtils.formatDate(this.baseUtils.getFullDay(new Date(this.applyObj.deadline)), 'yyyy-MM-dd hh:mm:ss')
        this.validObj.deadline = true
      },
      // 检查单价预算
      checkUnitPrice () {
        this.validObj.unitPrice = this.applyObj.unitPrice === '' ? true : this.applyObj.unitPrice > 0 && this.applyObj.unitPrice < 100000000
        if (!this.validObj.unitPrice && this.applyObj.unitPrice <= 0) {
          this.$message.error('单价必须是大于0的数字')
        }
        return this.validObj.unitPrice
      },
      // 检查采购数量
      checkAmount () {
        this.validObj.amount = this.applyObj.amount === '' ? true : this.applyObj.amount > 0 && this.applyObj.amount < 1000000000
        return this.validObj.amount
      },
      // 检查时间是否有输入
      checkDeadline () {
        this.validObj.deadline = Boolean(this.applyObj.deadline)
        return this.validObj.deadline
      },
      // 检查各个字段输入正常数据
      checkAll () {
        return this.checkDeadline() && this.checkUnitPrice() && this.checkAmount()
      },
      emptyForm () {
        for (let attr in this.applyObj) {
          this.applyObj[attr] = attr === 'currency' ? 'RMB' : ''
        }
      },
      // 请求询价信息
      goPublish () {
        let _this = this
        this.isClick = true
        setTimeout(function () {
          _this.isClick = false
        }, 1000)
        if (this.checkAll()) {
          let inquiry = {}
          let inquiryItem = {}
          if (this.user.data.enterprise) {
            inquiry.enUU = this.user.data.enterprise.uu
          }
          let date = new Date()
          let currency = this.applyObj.unitPrice ? this.applyObj.currency : null
          inquiry.recorderUU = this.user.data.userUU
          inquiry.code = 'MALL' + date.getTime()
          inquiry.date = date
          inquiry.recorder = this.user.data.userName
          inquiry.endDate = this.applyObj.deadline
          inquiry.sourceapp = 'MALL'
          inquiry.amount = 1
          inquiryItem.userUU = this.user.data.userUU
          inquiryItem.source = 'MALL'
          inquiryItem.userName = this.user.data.userName
          inquiryItem.userTel = this.user.data.userTel
          inquiryItem.needquantity = this.applyObj.amount
          inquiryItem.inbrand = this.applyObj.brand
          inquiryItem.currency = currency
          inquiryItem.cmpCode = this.applyObj.cmpCode.toUpperCase()
          inquiryItem.unitPrice = this.applyObj.unitPrice
          inquiryItem.produceDate = this.applyObj.produceDate
          inquiryItem.date = date
          inquiryItem.endDate = this.applyObj.deadline
          inquiryItem.encapsulation = this.applyObj.encapsulation
          inquiryItem.spec = this.applyObj.spec
          inquiryItem.prodTitle = this.applyObj.prodName
          let inquiryItems = []
          inquiryItems.push(inquiryItem)
          inquiry.inquiryItems = inquiryItems
          inquiry.currency = this.applyObj.unitPrice ? this.applyObj.currency : null
          this.$http.post('/inquiry/buyer/save', inquiry)
            .then(res => {
              this.$message.success('发布成功')
              this.hasDialog = false
              this.emptyForm()
            }, error => {
              console.log(error)
              this.$message.error('发布失败')
            })
        } else {
          if (!this.validObj.deadline) {
            this.$message.error('截止日期不能为空')
          } else if (!this.validObj.amount) {
            this.$message.error('请输入正确的数值')
          }
        }
      }
    }
  }
</script>
<style type="text/scss" lang="scss">
  #goods-list-fragment {
    .btn-buy-now {
      background-color: #5078CB;
      color: #fff;
      width: 80px;
      height: 30px;
      font-size: 12px;
      border: 1px solid #5078cb;
      position: relative;
    }
    .btn-add-cart {
      margin-top: 10px;
      color: #214797;
      width: 80px;
      height: 30px;
      font-size: 12px;
      background-color: #fff;
      border: 1px solid #e8e8e8;
    }
    .btn-buy-now:hover{
      background: #214797;
    }
    .btn-buy-now.disabled,
    .btn-buy-now.disabled:focus{
      background-color: #d1d2d3!important;
      border: none!important;
      outline: none;
      color: #fff!important;
      cursor: not-allowed;
    }
    .el-dialog{
      width: 680px!important;
      .el-dialog__header{
        background: #4290f7;
        line-height: 40px;
        padding: 0 20px 0;
        display:block;
        .el-dialog__title{
          color:#fff;
        }
        .el-dialog__headerbtn:hover .el-dialog__close, .el-dialog__headerbtn:focus .el-dialog__close{
          color:#fff;
        }
      }
      .el-dialog__body{
        padding: 10px 20px;
      }
      .el-dialog__footer{
        text-align: center;
        button{
          display:inline-block;
          background: #3c7cf5;
          color:#fff;
          font-size: 14px;
          line-height: 30px;
          height:30px;
          padding:0 10px;
          box-shadow: none;
          border: 0;
          border-radius:5px;
        }
      }
    }
    .form_dialog{
      .el-date-editor--date{
        width: 230px;
        &.error {
          input {
            border: 1px solid #f4645f !important;
          }
        }
      }
      ul{
        li{
          width:50%;
          font-size: 14px;
          color:#666;
          vertical-align: top;
          margin-bottom:15px;
          &.form-item {
            position: relative;
            p{
              margin:0;
              margin-left:80px;
              word-break: break-all;
              word-wrap: break-word;
            }
            span {
              float:left;
              width: 112px;
              text-align: right;
              display: inline-block;
              color:#3c7cf5;
              i {
                position: relative;
                top: 2px;
                right: 5px;
                color: #e41515;
              }
            }
            ul {
              line-height: normal;
              position: absolute;
              top: 19px;
              left: 79px;
              background: #fff;
              border: 1px solid #b5b5b5;
              z-index: 1;
              max-height: 120px;
              overflow-y: auto;
              overflow-x: hidden;
              border-radius: 3px;
              width: 114px;
              font-size: 12px;
              li {
                height: 24px;
                line-height: 24px;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0 5px;
                &:hover {
                  background: #ddd;
                }
              }
            }
            select {
              width: 40px;
              position: absolute;
              height: 20px;
              background: url('/images/applyPurchase/select.png')no-repeat right;
              background-position-x: 23px;
              padding: 0 0 0 7px;
              border-radius: 0;
              & + input {
                padding-left: 45px;
              }
            }
            .el-input {
              width: 198px;
            }
            input {
              font-size: 14px;
              width: 198px;
              height: 20px;
              line-height: 20px;
              border-radius: 2px;
              padding: 0 3px;
              box-shadow: none;
              -webkit-box-shadow: none;
              -moz-box-shadow: none;
              &.error {
                border-color: #f4645f!important;
              }
            }
          }
        }
      }
    }
  }

  #goods-list-fragment{
    width: 100%;
    background: #ece9ec;
    /*padding-top: 20px;*/
  }
  #goods-list-fragment .container{
    width: 965px;
    padding: 0;
    /*height: 738px;*/
    background: #ece9ec;
  }

  /*  产品分类调整*/
  #goods-list-fragment .category-content{
    max-height: 496px;
    min-height: 224px;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
  }
  #goods-list-fragment .category-content .empty{
    display: block;
    width: 56px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-28px, -8px);
    color: #5e7382;
  }

  .category-content el-tree{
    /*border: none;*/
  }
  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content,.el-tree-node:hover{
    background: none !important;
  }
  .el-tree-node__content:hover{
    background: none !important;
  }
  .el-tree-node__content:hover span{
    color: #3c7df3;
  }
  .el-tree-node__content:hover span:last-child {
    /*text-decoration: underline;*/
  }
  .el-pagination .el-pager li.active{
    background-color: #5078cb;
    border-color: #337ab7;
  }
  .el-tree-node__expand-icon{
    margin-left: 3px;
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    width: inherit;
    height: inherit;
    border: inherit;
    font-weight: bold;
    text-shadow: -1px 0px 0 #333;
    margin-right: 3px !important;
  }
  .el-tree-node__content{
    line-height: 30px;
    height: 30px;
  }
  .el-tree-node__expand-icon.is-leaf{
    visibility: hidden;
  }
  .el-tree-node__expand-icon:before{
    content: "\E621";
  }
  #goods-list-fragment .category-title {
    height: 34px;
    background-color: #3c7df5;
    font-size: 16px;
    color: rgb(255,255,255);
    text-align: center;
    border-radius: 5px;
  }

  #goods-list-fragment .category-content li {
    line-height: 33px;
    font-size: 14px;
    color: #333;
    float: left;
    width: 100%;
    padding-left: 10px;
  }

  #goods-list-fragment .category-content li a {
    display: block;
    padding-left: 15px;
    text-decoration: none;
    color: #333;
    /* background:url("static/img/store/default/openblackR.png") no-repeat left; */
  }

  #goods-list-fragment .category-content li a:hover{
    color: #5078cb;
    cursor: pointer;
  }

  #goods-list-fragment .category-content ul.list-body {
    display: none;
    color: #666;
  }

  #goods-list-fragment .category-content ul.list-body.active {
    display: block;
  }

  #goods-list-fragment .category-content ul.list-body li {
    float: none;
    background-image: none;
    min-height: 26px;
    line-height: 26px;
    font-size: 12px;
  }

  #goods-list-fragment .category-content ul.list-body li a {
    padding-left: 15px;
    display: block;
    color: rgb(50,50,50);
    background: none;
  }

  #goods-list-fragment .category-content ul.list-body li a:hover {
    color: #5078cb;
    cursor: pointer;
  }

  #goods-list-fragment .category-content ul.list-body li a.cur {
    text-decoration: none;
    font-size: 14px;
    /* background:url("static/img/store/default/openblackR.png") no-repeat left; */
  }

  #goods-list-fragment .title-area {
    margin-bottom: 30px;
    width: 250px;
    float: left;
    background: #fff;
  }
  #goods-list-fragment .category-content{
    border: 1px solid #e8e8e8;
  }
  /* goods-area */
  #goods-list-fragment .goods-area {
    /*margin-left: 3px;*/
    float: left;
    /*margin-bottom: 30px;*/
    background: #fff;
    margin: 0 auto 24px;
    height: 914px;
  }

  #goods-list-fragment .goods-area .btn-line {
    border-radius: 0;
  }


  #goods-list-fragment .btn-info.btn-line {
    background-color: #5078CB;
    color: #fff;
    font-weight: 600;
  }

  #goods-list-fragment .btn-line {
    height: 34px;
    width: 150px;
    border: 1px solid #5078cb;
    background-color: #fff;
    color: rgb(80,120,203);
    font-weight: 600;
  }

  #goods-list-fragment .btn-line:hover {
    background-color: #5078CB;
    color: #fff;
  }

  /* 物品列表 */
  #goods-list-fragment .goodslist .brand-code {
    font-size: 12px;
    text-align: center;
    position: relative;
  }
  #goods-list-fragment #search_btn {
    background: #2496f1;
    color: #FFF;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    height: 28px;
    width: 69px;
    padding-right: 50px;
  }
  #goods-list-fragment .sendprove {
    width: 110px;
    height: 28px;
    color: #2496f1;
    font-size: 14px;
    background-color: #fff;
    border-radius: 3px;
    float: right;
    margin-left: 10px;
    border: 1px solid #2496f1;
  }
  #goods-list-fragment .sendprove:hover{
    background-color: #2496f1;
    border-color: #2496f1;
    color: #fff;
  }
  .btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: none;
    border-color: transparent;
  }
  #goods-list-fragment #search_input {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    width: 189px;
    float: right;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    border: 1px solid #2496f1;
  }

  #goods-list-fragment .brand-code .code {
    font-weight: 600;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  #goods-list-fragment .brand-code .spec {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  #goods-list-fragment .brand-code .brand a {
    color: #2496f1;
  }
  #goods-list-fragment .brand-code .brand span{
    color: #2496f1;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  #goods-list-fragment .goodslist thead tr{
    background-color: #2496f1;
    height: 34px;
  }
  #goods-list-fragment .goodslist tr th {
    color: #fefefe;
    font-size: 13px;
  }
  #goods-list-fragment .goodslist tr th:first-child{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  #goods-list-fragment .goodslist tr th:last-child{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  #goods-list-fragment .goodslist tr th div{
    text-align: center;
    border-right: 1px solid #fff;
  }
  #goods-list-fragment .goodslist tr th:last-child div{
    border-right: none;
  }
  #goodslist-content .goods,#goodslist-content .from, #goodslist-content .can-div-sell {
    padding-left: 20px;
  }
  #goodslist-content .goods span{
    /*color: #f01010;*/
  }
  #goodslist-content .amount {
    width: 50%;
    float: left;
    padding-left: 30px;
    text-align:left;
  }
  #goodslist-content .amount div{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #goodslist-content .amount div:last-child{
    /*color: #f01010;*/
  }
  #goodslist-content .price {
    width: 50%;
    float:right;
    text-align:left;
  }
  #goodslist-content .price div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #goodslist-content .price div:last-child{
    color: #f01010;
  }
  #goods-list-fragment .category-content a.selected-node,
  #goods-list-fragment .category-content ul.list-body li a.selected-node {
    color: #5078cb;
  }

  #goods-list-fragment .category-content a.selected-parent-node,
  #goods-list-fragment .category-content ul.list-body li a.selected-parent-node {
    /* background:url("static/img/store/default/openblack.png") no-repeat left; */
  }
  #goods-list-fragment .goodslist tbody>tr:hover{
    background: #ecf2fd;
  }
  #goods-list-fragment .goodslist tbody>tr {
    border: 1px solid #e8e8e8;
  }
  #goods-list-fragment .goodslist tbody>tr td.commodity-icon .img{
    border: 1px solid #e8e8e8;
    margin: 10px;
    width: 80px;
    height: 80px;
    overflow: hidden;
    line-height: 75px;
  }
  #goods-list-fragment .goodslist tbody>tr td.commodity-icon .img>img {
    width: 80px;
    height: 80px;
  }
  #goods-list-fragment .goodslist tbody>tr td.brand-code .sellout-store-commodity {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  #goods-list-fragment .goodslist tbody>tr td.brand-code .specific-price-tag {
    position: absolute;
    top: 0;
    left: 0;
  }
  #goods-list-fragment .goodslist td {
    font-size: 12px;
    color: #333;
    text-align: center;
    line-height: 20px;
    height: 88px;
  }
  #goods-list-fragment .goodslist tbody>tr td .can-div-sell {
    color: #333;
  }

  /* 物品列表按钮 */
  #goods-list-fragment .btn-buy-now {
    background-color: #2496f1;
    color: #fff;
    width: 80px;
    height: 24px;
    font-size: 12px;
    border: 1px solid #2496f1;
    border-radius: 2px;
  }

  #goods-list-fragment .btn-add-cart {
    margin-top: 10px;
    color: #2496f1;
    width: 80px;
    height: 24px;
    font-size: 12px;
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid #2496f1;
  }
  #goods-list-fragment .btn-buy-now:hover{
    background: #1278c7;
    border: 1px solid #1278c7;
  }
  #goods-list-fragment .btn-add-cart:hover{
    background-color: #1278c7;
    color: #fff;
  }
  .no-record{
    font-size: 14px;
    color: #999;
    text-align: center;
    line-height: 200px;
  }
  .no-record i{
    margin-right: 5px;
  }
  .active-empty:hover{
    background-color: #fff!important;
  }
  .text-center{
    text-align: center;
    margin-top: 30px;
  }
  .text-center  .col-xs-2  img{
    margin: 55px 0 85px 135px;
    vertical-align: middle;
  }
  .text-center .txt-info{
    font-size: 14px;
    margin: 50px 0px 0px -50px;
  }
  .text-center  .col-xs-4  p{
    color: #999;
    margin: 11px 0px 4px -6px;
  }
  .text-center  .txt-info i{
    color: #5078cb;
  }
  .text-center  .txt-info a{
    font-size: 14px;
    color: #5078cb;
  }
  .text-center  .col-xs-5 img{
    margin-left: -235px;
  }
  .goodslist{
    margin-bottom: 24px;
  }
  .remind-area {
    position: absolute;
    top: 1005px;
  }
  .remind-area img {
    margin-right: 12px;
  }
  .remind-area .link-seller {
    font-size: 12px;
    color: #fff;
    line-height: 20px;
    height: 20px;
    padding: 0 7px;
    background: #2496f1;
    border-radius: 2px;
  }
  @font-face {
    font-family: 'iconfont';  /* project id 357960 */
    src: url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.eot');
    src: url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.woff') format('woff'),
    url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.svg#iconfont') format('svg');
  }

  /*-- 分页 --*/
  #goods-list-fragment .el-pagination .el-pager li.active {
    border-color: #5078cb !important;
    background-color: #5078cb !important;
  }
  #goods-list-fragment .goods-area div>.page-wrap{
    margin: 0;
  }
</style>