Merge remote-tracking branch 'origin/feature-201816-wangcz' into feature-201816-wangcz

assets/scss/reset.scss

@@ -120,3 +120,33 @@ img {
 p {
   margin: 0 0 10px;
 }
+
+.article{
+  float:left;
+  width:220px;
+}
+.section{
+  margin-left:235px;
+  vertical-align: top;
+}
+
+// 发布求购 小图标
+.purchase_icon{
+  display:inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+  width:15px;
+  height:15px;
+  text-align: center;
+  background: url(/images/applyPurchase/purchase_icon.png)no-repeat center;
+}
+// 发布求购 下载图标
+.down_icon{
+  display:inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+  width:13px;
+  height:13px;
+  text-align: center;
+  background: url(/images/applyPurchase/down_icon.png)no-repeat center;
+}

components/applyPurchase/ApplyInfo.vue

@@ -5,7 +5,7 @@
       <span>海量求购，一网打尽</span>
       <div>
         <input type="text" class="form-control" v-model="keyWord" @keyup.13="searchList" :placeholder="user.logged ? '品牌/类目/型号/规格/公司' : '品牌/类目/型号/规格'" />
-        <span @click="searchList">查询</span>
+        <span @click="searchList">搜索</span>
       </div>
     </div>
     <div class="apply-info-list">
@@ -371,18 +371,17 @@ export default {
 </script>
 <style lang="scss" scoped>
   .apply-info {
-    width: 1190px;
     margin: 0 auto;
     .apply-info-title {
-      border-bottom: 1px solid #3975f4;
+      border-bottom: 1px solid #e5e5e5;
       > p {
         display: inline-block;
-        width: 156px;
+        width: 120px;
         height: 33px;
         line-height: 33px;
         color: #fff;
         background: #3975f4;
-        font-size: 18px;
+        font-size: 16px;
         text-align: center;
         border: {
           top-left-radius: 3px;
@@ -401,6 +400,7 @@ export default {
         > input {
           width: 241px;
           height: 32px;
+          border: 1px solid #2496f1;
           line-height: 32px;
           font-size: 13px;
           border: {
@@ -495,10 +495,10 @@ export default {
     }
     .apply-info-list {
       .list-title {
-        background: #e2ebff;
-        height: 40px;
-        line-height: 40px;
-        margin: 9px 0 0 0;
+        background: #edf1fa;
+        height: 36px;
+        line-height: 36px;
+        margin: 5px 0 0 0;
         .list-title-item {
           display: inline-block;
           text-align: center;
@@ -509,36 +509,37 @@ export default {
             }
           }
           &:nth-child(1) {
-            margin-left: 22px;
+            margin-left: 25px;
           }
           &:nth-child(2) {
-            margin-left: 150px;
+            margin-left: 90px;
           }
           &:nth-child(3) {
-            margin-left: 220px;
+            margin-left: 168px;
           }
           &:nth-child(4) {
-            margin-left: 175px;
+            margin-left: 135px;
           }
           &:nth-child(5) {
-            margin-left: 55px;
+            margin-left: 50px;
           }
           &:nth-child(6) {
-            margin-left: 100px;
+            margin-left: 40px;
           }
         }
       }
       > ul {
         margin-bottom: 29px;
+        font-size:12px;
         > li {
           position: relative;
           border: 1px solid #ededed;
           &.active {
-            border: 1px solid #4290f7;
+            border: 1px solid #2496f1;
             box-shadow: 2px 4px 5px 0 rgb(205, 221, 252);
           }
           &:hover {
-            border: 1px solid #4290f7;
+            border: 1px solid #2496f1;
             box-shadow: 2px 4px 5px 0 rgb(205, 221, 252);
             .il-item.il-right .sharecode {
               display: block;
@@ -548,7 +549,7 @@ export default {
             height: 120px;
             display: inline-block;
             text-align: center;
-            color: #3c3c3c;
+            color: #333;
             padding-top: 16px;
             vertical-align: middle;
             .item {
@@ -557,23 +558,23 @@ export default {
               text-overflow: ellipsis;
               white-space: nowrap;
               span {
-                color: #999;
+                color: #333;
               }
             }
             &.il-left {
-              width: 165px;
+              width: 125px;
               padding: 16px 5px 0;
               div {
                 display: block;
                 &:last-child {
                   margin-top: 37px;
-                  color: #666;
+                  color: #333;
                 }
               }
             }
             &.il-center {
               text-align: left;
-              width: 740px;
+              width: 640px;
               .il-box {
                 display: inline-block;
                 float: left;
@@ -582,10 +583,9 @@ export default {
                 }
               }
               .il-box-large {
-                width: 610px;
-                margin-left:15px;
+                width: 505px;
                 .fl {
-                  width: 298px;
+                  width: 220px;
                   line-height: 19px;
                   word-break: break-all;
                   white-space: unset;
@@ -594,7 +594,7 @@ export default {
                   }
                   .content {
                     display: inline-block;
-                    width: 251px;
+                    width: 155px;
                     overflow: hidden;
                     vertical-align: middle;
                     height: 38px;
@@ -605,16 +605,16 @@ export default {
                     display:inline-block;
                     width:94px;
                     text-align:right;
-                    color:#3c7cf5;
+                    color:#2496f1;
                   }
                   &.size-middle {
-                    /*width: 260px;*/
+                    width:260px;
                     margin-right: 10px;
-                    .content {
-                      width: 194px;
-                    }
                   }
                  &.item-right {
+                   .content{
+                     width:180px;
+                   }
                     span {
                       width: auto;
                     }
@@ -625,7 +625,6 @@ export default {
                 width: 100px;
                 text-align: center;
                 line-height: 90px;
-                margin-left:-15px;
                 .item {
                   color: #f71026;
                 }
@@ -654,7 +653,7 @@ export default {
                   height: 28px;
                   line-height: 28px;
                   color: #fff;
-                  background: #3c7cf5;
+                  background: #2496f1;
                   border-radius: 3px;
                   cursor: pointer;
                   /*  &:first-child {
@@ -697,7 +696,7 @@ export default {
                   line-height: 14px;
                 }
                 .title {
-                  color: #3c7cf5;
+                  color: #2496f1;
                   font-size: 16px;
                   margin: 21px auto;
                   margin-bottom: 0px;
@@ -716,7 +715,7 @@ export default {
                 div span {
                   display: inline-block;
                   color: #fff;
-                  background: #4290f7;
+                  background: #2496f1;
                   height: 36px;
                   line-height: 36px;
                   width: 70px;
@@ -735,7 +734,7 @@ export default {
                 .sharecodeR {
                   width: 4px;
                   height: 120px;
-                  background: #4290f7;
+                  background: #2496f1;
                   float: right;
                 }
                 .sharecodeL {
@@ -747,7 +746,7 @@ export default {
                   margin-top: 10px;
                   width: 28px;
                   height: 68px;
-                  background-color: #3c7cf5;
+                  background-color: #2496f1;
                   border-radius: 2px;
                   color: #ffffff;
                   font-size: 14px;
@@ -779,13 +778,12 @@ export default {
             }
           }
           .number-content {
-            margin-left: 10px;
             line-height: 120px;
             padding-top: 0;
-            width: 100px;
-            margin-right: 34px;
+            width: 60px;
+            margin-right: 6px;
             span {
-              color: #5392f9;
+              color: #2496f1;
               &.active {
                 color: #ff9a00;
               }

components/applyPurchase/PublishApply.vue

@@ -1,902 +1,13 @@
 <template>
-  <div class="publish-apply">
-    <!--<div class="good-purchaser">
-      <p class="good-purchaser-title">
-        <img src="/images/applyPurchase/good-purchaser-title.png" alt="">
-      </p>
-      <ul>
-        <li v-for="(goodMan, index) in goodPurchaseMan.content">
-          <i v-text="index + 1" :style="'background: url(/images/applyPurchase/level-' + getRankBg(index)  + '.png) center no-repeat;'"></i>
-          <span v-text="goodMan.name"></span>
-        </li>
-      </ul>
-    </div>-->
-    <div class="publish-area">
-      <div class="publish-form-area">
-        <p>单个发布</p>
-        <div>
-          <div class="form-item">
-            <span>
-              <i>*</i>品牌：
-            </span>
-            <input type="text" class="form-control" :class="{'error': !validObj.brand}" v-model="applyObj.brand" @blur="checkBrand" @input="onBrandChange" placeholder="请勿填中文符号" />
-            <ul class="brand-similar-list" v-show="showSimilarBrandList && applyObj.brand">
-              <li v-for="sBrand in similarBrand" @click="setBrand(sBrand.nameEn)">{{sBrand.nameEn}}</li>
-            </ul>
-          </div>
-          <div class="form-item">
-           <span>
-              <i>*</i>物料名称(类目)：
-            </span>
-            <input type="text" class="form-control" :class="{'error': !validObj.prodTitle}" v-model="applyObj.prodTitle" @blur="checkProdTitle" @input="onProdTitleInput"/>
-          </div>
-          <div class="form-item">
-            <span>
-              <i>*</i>型号：
-            </span>
-            <input type="text" class="form-control" :class="{'error': !validObj.code}" v-model="applyObj.code" @blur="checkCode" @input="onCodeChange" placeholder="请勿填中文符号"/>
-            <ul v-show="showSimilarCodeList && applyObj.code">
-              <li v-for="sCode in similarCode" @click="setCode(sCode.code)">{{sCode.code}}</li>
-            </ul>
-          </div>
-          <div class="form-item">
-           <span>
-              规格：
-            </span>
-            <input type="text" class="form-control" :class="{'error': !validObj.spec}" v-model="applyObj.spec" @blur="checkSpec" @input="onSpecInput"/>
-          </div>
-          <div class="form-item">
-            <span>
-              <i>*</i>截止日期：
-            </span>
-            <!--<input type="text" class="form-control" readonly :class="{'error': !validObj.deadline}" v-model="applyObj.deadline" @blur="checkDeadline" />-->
-            <el-date-picker
-              v-model="applyObj.deadline"
-              type="date"
-              :picker-options="pickerOptions"
-              :class="{'error': !validObj.deadline}"
-              @change="setDeadLineValid"
-              :editable="false"
-              :clearable="true"
-              size="mini">
-            </el-date-picker>
-          </div>
-          <!--<div class="form-item">
-            <span>
-              单价预算：
-            </span>
-            <select v-model="applyObj.currency" class="form-control">
-              <option value="RMB">¥</option>
-              <option value="USD">$</option>
-            </select>
-            <input type="number" class="form-control" :class="{'error': !validObj.unitPrice}" v-model="applyObj.unitPrice" @blur="checkUnitPrice" @input="onUnitPriceInput" />
-          </div>-->
-          <!--<div class="form-item">
-           <span>
-              封装：
-            </span>
-            <input type="text" class="form-control" v-model="applyObj.encapsulation" @input="onEncapsulationChange" />
-          </div>-->
-          <div class="form-item">
-            <span>
-              采购数量(PCS)：
-            </span>
-            <input type="text" class="form-control" :class="{'error': !validObj.amount}" v-model="applyObj.amount" @blur="checkAmount" @input="onAmountInput" />
-          </div>
-          <!--<div class="form-item">
-            <span>
-              生产日期：
-            </span>
-            <input type="text" class="form-control" v-model="applyObj.produceDate" @input="onProduceDateChange" />
-          </div>-->
-        </div>
-        <a @click="goPublish">发布求购</a>
-      </div>
-      <div class="publish-upload">
-        <h1>批量发布</h1>
-        <h2>3秒一键配单采购</h2>
-        <label>
-          <img src="/images/applyPurchase/upload.png" alt="" />
-          <!--<input type="file" accept="*.xls, *.xlsx" @change="upload">-->
-          <el-upload
-            drag
-            action="/seek/importBom"
-            accept="*.xls, *.xlsx"
-            :show-file-list="false"
-            :on-success="onSuccess"
-            :on-error="onError">
-          </el-upload>
-        </label>
-        <h3>把Excel格式的BOM拖放到框中</h3>
-        <img @click="downloadTemplate()" class="download-line" src="/images/applyPurchase/download.png" alt="">
-        <img class="apply-logo" src="/images/applyPurchase/publish-apply.png" alt="">
-      </div>
-    </div>
-    <div class="apply-rank">
-      <table>
-        <thead>
-          <tr>
-            <th width="73">排名</th>
-            <th width="272">型号</th>
-            <th width="100">求购次数</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(rank, index) in purchaseRank">
-            <td><div>NO.<span>{{index + 1}}</span><i>|</i></div></td>
-            <td>
-              <div>
-                <span v-if="rank.id_cmpcode" :title="rank.id_cmpcode">{{rank.id_cmpcode}}</span>
-                <span v-if="!rank.id_cmpcode">-</span>
-                <i>|</i>
-              </div>
-            </td>
-            <td><div>{{rank.seekAmount || 0}}</div></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <!--提示框-->
-    <div class="apply-del-box" v-if="showRemindBox">
-      <div class="title">
-        <a @click="showRemindBox = false"><i class="fa fa-close fa-lg"></i></a>
-      </div>
-      <div class="content">
-        <!--<p style="line-height: 20px;margin-top: 10px;padding:0 10px">非常抱歉，目前暂无此品牌！<br>若直接前往“品牌申请”，我们将为您先开通寄售功能，待申请通过后再提交开店申请。</p>-->
-        <!--<p style="line-height: 20px;">前往<a @click="goBrandApply()"  target="_blank" style="color: #5078CB">品牌申请&nbsp;<i class="fa fa-arrow-right"></i></a></p>-->
-        <p><img src="/images/applyPurchase/check.png" alt="">发布成功</p>
-        <p>其中 <span>100</span>个求购型号有现货在售，您可前往“<span>买家中心-我的求购</span>”查询并直接购买</p>
-        <div>
-          <a @click="showRemindBox = false">我知道了</a>
-          <a href="/user#/seekPurchase">前往我的求购</a>
-        </div>
-      </div>
-    </div>
-  </div>
+  <div class="publish-apply"></div>
 </template>
 <script>
-  export default {
-    data () {
-      return {
-        applyObj: {
-          code: '',
-          brand: '',
-          unitPrice: '',
-          currency: 'RMB',
-          prodTitle: '',
-          spec: '',
-          encapsulation: '',
-          produceDate: '',
-          amount: '',
-          deadline: ''
-        },
-        validObj: {
-          code: true,
-          brand: true,
-          unitPrice: true,
-//          encapsulation: true,
-//          produceDate: true,
-          amount: true,
-          deadline: true,
-          spec: true,
-          prodTitle: true
-        },
-        pickerOptions: {
-          disabledDate (time) {
-            // 大于等于今天 小于三个月后
-            return time.getTime() < Date.now() - 1000 * 60 * 60 * 24 || time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 30 * 3
-          }
-        },
-        showRemindBox: false,
-        showSimilarCodeList: false,
-        showSimilarBrandList: false,
-        similarCode: [],
-        similarBrand: []
-      }
-    },
-    computed: {
-      goodPurchaseMan () {
-        return this.$store.state.applyPurchase.goodPurchaseMan.goodPurchaseMan.data
-      },
-      purchaseRank () {
-        return this.$store.state.applyPurchase.purchaseApplyRank.purchaseApplyRank.data
-      },
-      user () {
-        return this.$store.state.option.user
-      }
-    },
-    filters: {
-      enterpriseFilter (str) {
-        return str.length > 4 ? str.substring(0, 2) + '**' + str.substring(str.length - 2, str.length) : str
-      },
-      userNameFilter (str) {
-        return str.substring(0, 1) + '**'
-      }
-    },
-    mounted () {
-      document.getElementsByClassName('el-upload-dragger')[0].onclick = function (event) {
-        event.stopPropagation()
-      }
-      let _this = this
-      document.body.onclick = function () {
-        _this.showSimilarCodeList = false
-        _this.showSimilarBrandList = false
-      }
-    },
-    methods: {
-      emptyForm: function () {
-        for (let attr in this.applyObj) {
-          this.applyObj[attr] = attr === 'currency' ? 'RMB' : ''
-        }
-      },
-      getRankBg: function (index) {
-        return index === 0 ? 1 : index < 3 ? 2 : 3
-      },
-      getMaterialKind: function (code, brand) {
-        return this.$http.get('/productuser/match/getKind', {params: {cmpCode: code, brand: brand}})
-      },
-      startPublish: function (prodTitle) {
-        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.spec = this.applyObj.spec
-        inquiryItem.currency = currency
-        inquiryItem.cmpCode = this.applyObj.code.trim().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 = prodTitle || this.applyObj.prodTitle || '其他'
-        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(response => {
-            this.$message.success('发布成功')
-//                this.showRemindBox = true
-            this.emptyForm()
-//                this.validObj.deadline = true
-            this.$store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: 1, pageSize: 10, enUU: this.user.data.enterprise ? this.user.data.enterprise.uu : null})
-          }, error => {
-            console.log(error)
-            this.$message.error('发布失败')
-          })
-      },
-      goPublish: function () {
-        if (this.user.logged) {
-          this.authorityInterceptor(this.baseUrls.userPublishSeek, () => {
-            if (this.checkAll()) {
-//            if (!this.applyObj.prodTitle || this.applyObj.prodTitle.length === 0) {
-//              this.getMaterialKind(this.applyObj.code, this.applyObj.brand).then(response => {
-//                this.startPublish(response.data && response.data.length ? response.data : '其他')
-//              })
-//            } else {
-//              this.startPublish()
-//            }
-              this.getMaterialKind(this.applyObj.code, this.applyObj.brand).then(response => {
-                this.startPublish(response.data && response.data.length ? response.data : this.applyObj.prodTitle)
-              })
-            } else {
-              if (!this.validObj.prodTitle) {
-                this.$message.error('类目不能为空')
-              } else if (!this.validObj.deadline) {
-                this.$message.error('截止日期不能为空')
-              } else if (!this.validObj.amount) {
-                this.$message.error('请输入正确的数值')
-              }
-            }
-          })
-        } else {
-          this.$router.push('/auth/login?returnUrl=' + window.location.href)
-        }
-      },
-      getSimilarCode: function () {
-        if (this.applyObj.code) {
-          this.$http.get('/search/similarComponents', {params: {keyword: this.applyObj.code}})
-            .then(response => {
-              this.similarCode = response.data
-              this.showSimilarCodeList = response.data.length > 0
-            })
-        } else {
-          this.showSimilarCodeList = false
-        }
-      },
-      getSimilarBrand: function () {
-        if (this.applyObj.brand) {
-          this.$http.get('/search/similarBrands', {params: {keyword: this.applyObj.brand}})
-            .then(response => {
-              this.similarBrand = response.data
-              this.showSimilarBrandList = response.data.length > 0
-            })
-        } else {
-          this.showSimilarBrandList = false
-        }
-      },
-      checkCode: function () {
-        let code = this.applyObj.code.trim()
-        let nullStrFlag = this.baseUtils.checkNullStr(code)
-        this.validObj.code = code && code !== '' && nullStrFlag
-        if (!this.validObj.code) {
-          if (!nullStrFlag) {
-            this.$message.error('型号输入不合法')
-          } else {
-            this.$message.error('型号不能为空')
-          }
-        }
-        return this.validObj.code
-      },
-      checkProdTitle: function () {
-        let prodTitle = this.applyObj.prodTitle.trim()
-        this.validObj.prodTitle = prodTitle && prodTitle !== ''
-        if (!this.validObj.prodTitle) {
-          this.$message.error('类目不能为空')
-        }
-        console.log(prodTitle)
-        return this.validObj.prodTitle
-      },
-      checkBrand: function () {
-        let nullStrFlag = this.baseUtils.checkNullStr(this.applyObj.brand)
-        this.validObj.brand = this.applyObj.brand && this.applyObj.brand !== '' && nullStrFlag
-        if (!this.validObj.brand) {
-          if (!nullStrFlag) {
-            this.$message.error('品牌输入不合法')
-          } else {
-            this.$message.error('品牌不能为空')
-          }
-        }
-        return this.validObj.brand
-      },
-      checkUnitPrice: function () {
-        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
-      },
-      checkSpec: function () {
-        let nullStrFlag = this.baseUtils.checkNullStr(this.applyObj.spec)
-        this.validObj.spec = nullStrFlag
-        if (!nullStrFlag) {
-          this.$message.error('规格输入不合法')
-        }
-        return this.validObj.spec
-      },
-      checkAmount: function () {
-        this.validObj.amount = this.applyObj.amount === '' ? true : this.applyObj.amount > 0 && this.applyObj.amount < 1000000000
-        return this.validObj.amount
-      },
-      checkAll: function () {
-        return this.checkBrand() && this.checkProdTitle() && this.checkCode() && this.checkDeadline() && this.checkUnitPrice() && this.checkAmount() && this.checkSpec()
-      },
-      checkDeadline: function () {
-        this.validObj.deadline = Boolean(this.applyObj.deadline)
-        return this.validObj.deadline
-      },
-      setDeadLineValid: function () {
-        this.applyObj.deadline = this.baseUtils.formatDate(this.applyObj.deadline, 'yyyy-MM-dd hh:mm:ss')
-        this.validObj.deadline = true
-      },
-      onUnitPriceInput: function () {
-        let price = this.applyObj.unitPrice
-        if (price >= 10000) {
-          this.applyObj.unitPrice = price.substring(0, 4)
-        } else if (price.indexOf('.') > -1) {
-          let arr = price.split('.')
-          if (arr[0].length > 4) {
-            this.applyObj.unitPrice = Number(arr[0].substring(0, 4) + '.' + arr[1])
-          } else if (arr[1].length > 6) {
-            this.applyObj.unitPrice = Number(arr[0] + '.' + arr[1].substring(0, 6))
-          }
-        }
-      },
-      onProduceDateChange: function () {
-        if (this.applyObj.produceDate && this.baseUtils.getRealLen(this.applyObj.produceDate) > 12) {
-          this.applyObj.produceDate = this.baseUtils.cutOutString(this.applyObj.produceDate, 12)
-        }
-      },
-      onEncapsulationChange: function () {
-        if (this.applyObj.encapsulation && this.baseUtils.getRealLen(this.applyObj.encapsulation) > 20) {
-          this.applyObj.encapsulation = this.baseUtils.cutOutString(this.applyObj.encapsulation, 20)
-        }
-      },
-      onProdTitleInput: function () {
-        if (this.applyObj.prodTitle && this.baseUtils.getRealLen(this.applyObj.prodTitle) > 40) {
-          this.applyObj.prodTitle = this.baseUtils.cutOutString(this.applyObj.prodTitle, 40)
-        }
-      },
-      onSpecInput: function () {
-        if (this.applyObj.spec && this.baseUtils.getRealLen(this.applyObj.spec) > 100) {
-          this.applyObj.spec = this.baseUtils.cutOutString(this.applyObj.spec, 100)
-        }
-      },
-      onCodeChange: function () {
-        if ((/[^\x00-\xff]/g).test(this.applyObj.code)) {
-          let chineseIndex = -1
-          for (let i = 0; i < this.applyObj.code.length; i++) {
-            if ((/[^\x00-\xff]/g).test(this.applyObj.code.charAt(i))) {
-              chineseIndex = i
-              break
-            }
-          }
-          this.applyObj.code = this.baseUtils.cutOutString(this.applyObj.code, chineseIndex)
-        } else if (this.applyObj.code && this.baseUtils.getRealLen(this.applyObj.code) > 100) {
-          this.applyObj.code = this.baseUtils.cutOutString(this.applyObj.code, 100)
-        } else {
-          this.getSimilarCode()
-        }
-      },
-      onBrandChange: function () {
-        this.applyObj.brand = this.applyObj.brand.trim()
-        if ((/[^\x00-\xff]/g).test(this.applyObj.brand)) {
-          let chineseIndex = -1
-          for (let i = 0; i < this.applyObj.brand.length; i++) {
-            if ((/[^\x00-\xff]/g).test(this.applyObj.brand.charAt(i)) && !(/[\u4e00-\u9fa5]/).test(this.applyObj.brand.charAt(i))) {
-              chineseIndex = i
-              break
-            }
-          }
-          if (chineseIndex > -1) {
-            this.applyObj.brand = this.applyObj.brand.substring(0, chineseIndex)
-          }
-        } else if (this.applyObj.brand && this.baseUtils.getRealLen(this.applyObj.brand) > 50) {
-          this.applyObj.brand = this.baseUtils.cutOutString(this.applyObj.brand, 50)
-        } else {
-          this.getSimilarBrand()
-        }
-      },
-      onAmountInput: function () {
-        if (!(/^[0-9]*$/).test(this.applyObj.amount)) {
-          let chineseIndex = -1
-          for (let i = 0; i < this.applyObj.amount.length; i++) {
-            if (!(/^[0-9]*$/).test(this.applyObj.amount.charAt(i))) {
-              chineseIndex = i
-              break
-            }
-          }
-          this.applyObj.amount = this.baseUtils.cutOutString(this.applyObj.amount, chineseIndex)
-        } else if (this.applyObj.amount.length > 9) {
-          this.applyObj.amount = this.baseUtils.cutOutString(this.applyObj.amount, 9)
-        }
-      },
-      onSuccess: function (data) {
-        if (!this.user.logged) {
-          this.$router.push('/auth/login?returnUrl=' + window.location.href)
-        } else {
-          // 能拦截跳转但无法阻止上传
-          this.authorityInterceptor(this.baseUrls.userImportBom, () => {
-            if (data.success) {
-              window.location.href = '/applyPurchase/' + data.data
-            } else {
-              this.$message.error(data.message)
-            }
-          })
-        }
-      },
-      onError: function () {
-        if (!this.user.logged) {
-          this.$router.push('/auth/login?returnUrl=' + window.location.href)
-        } else {
-          this.$message.error('上传失败, 系统错误')
-        }
-      },
-      downloadTemplate: function () {
-        window.location.href = '/seek/release/template'
-      },
-      setCode: function (code) {
-        this.applyObj.code = code
-        this.showSimilarCodeList = false
-      },
-      setBrand: function (brand) {
-        this.applyObj.brand = brand
-        this.showSimilarBrandList = false
-      }
-//      upload: function (e) {
-//        let file = e.target.files[0]
-//        let param = new FormData()
-//        param.append('file', file, file.name)
-//        let config = {
-//          headers: {'Content-Type': file.type}
-//        }
-//        this.$http.post('/seek/importBom', param, config).then(response => {
-//          if (response.data.success) {
-//            window.open('/applyPurchase/' + response.data.data)
-//          } else {
-//            this.$message.error('上传失败')
-//          }
-//        }, err => {
-//          console.log(err)
-//          this.$message.error('系统错误')
-//        })
-//      }
-    }
-  }
+
 </script>
 <style lang="scss">
   .publish-apply {
     background: url('/images/applyPurchase/banner.png') center center/cover no-repeat;
-    height: 583px;
-    padding-top: 290px;
-    width: 1190px;
-    margin: 0 auto;
-    padding-left: 44px;
-    >div {
-      display: inline-block;
-      border: 1px solid #3975f4;
-      height: 267px;
-      margin-right: 6px;
-      vertical-align: middle;
-      background: #fff;
-      float: left;
-      text-align: center;
-    }
-    /*.good-purchaser {
-      width: 225px;
-      .good-purchaser-title {
-        height: 55px;
-        line-height: 55px;
-        background: #3975f4;
-        margin: 0;
-      }
-      ul {
-        padding: 0 22px 0 10px;
-        li {
-          line-height: 42px;
-          span {
-            float: right;
-            display: inline-block;
-            width: 152px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            text-align: left;
-          }
-          i {
-            display: inline-block;
-            float: left;
-            width: 25px;
-            color: #fff;
-            font-size: 16px;
-            font-style: normal;
-          }
-        }
-      }
-    }*/
-    .publish-area {
-      width: 644px;
-      text-align: center;
-      .publish-form-area {
-        width: 289px;
-        float: left;
-        height: 100%;
-        margin-left: 12px;
-        p {
-          padding-top: 8px;
-          font-size: 22px;
-          color: #3975f4;
-          margin-bottom: 4px;
-        }
-        >div {
-          text-align: left;
-          margin-left: 3px;
-          .form-item {
-            margin-bottom: 14px;
-            position: relative;
-            span {
-              width: 114px;
-              text-align: right;
-              display: inline-block;
-              color: #333;
-              i {
-                position: relative;
-                top: 2px;
-                right: 3px;
-                color: #e41515;
-              }
-            }
-            ul {
-              line-height: normal;
-              position: absolute;
-              top: 19px;
-              left: 114px;
-              background: #fff;
-              border: 1px solid #b5b5b5;
-              z-index: 1;
-              max-height: 120px;
-              overflow-y: auto;
-              overflow-x: hidden;
-              border-radius: 3px;
-              width: 162px;
-              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: 32px;
-              position: absolute;
-              height: 20px;
-              background: url('/images/applyPurchase/select.png')no-repeat right;
-              background-position-x: 15px;
-              padding: 0 0 0 3px;
-              border-radius: 0;
-              & + input {
-                padding-left: 34px;
-              }
-            }
-            .el-input {
-              width: 106px;
-              /*.el-input__inner {
-              }*/
-            }
-            input {
-              font-size: 12px;
-              width: 162px;
-              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;
-              }
-            }
-          }
-        }
-        >a {
-          width: 100px;
-          height: 25px;
-          line-height: 25px;
-          background: #3975f4;
-          color: #fefefe;
-          font-size: 16px;
-          display: block;
-          margin: -8px 29px 0px 150px;
-          border-radius: 3px;
-          cursor: pointer;
-        }
-      }
-      .publish-upload {
-        background: url('/images/applyPurchase/publish-apply-bg.png')no-repeat;
-        background-size: cover;
-        width: 304px;
-        height: 100%;
-        padding-left: 22px;
-        float: right;
-        color: #fff;
-        position: relative;
-        h1 {
-          font-size: 22px;
-          margin: 11px 0 0 0;
-        }
-        h2 {
-          font-size: 16px;
-          margin: 10px 0 23px 0;
-        }
-        h3 {
-          font-size: 16px;
-          margin: 20px 0 13px 0;
-        }
-        label {
-          position: relative;
-          /*input {
-            display: none;
-          }*/
-          > div {
-            position: absolute;
-            .el-upload {
-              input {
-                display: none;
-              }
-              .el-upload-dragger {
-                width: 247px;
-                height: 216px;
-                position: absolute;
-                bottom: -37px;
-                right: -166px;
-                opacity: 0;
-              }
-            }
-          }
-        }
-        .download-line {
-          cursor: pointer;
-          color: #b47200;
-        }
-        .apply-logo {
-          position: absolute;
-          left: -20px;
-          top: 86px;
-        }
-      }
-    }
-    .apply-rank {
-      width: 451px;
-      margin-right: 0;
-      background: url('/images/applyPurchase/rank-title1.png') no-repeat;
-      background-color: #fff;
-      background-size: 451px 74px;
-      background-position: -1px -2px;
-      table {
-        margin: 76px auto 0;
-        width: 98%;
-        thead {
-          background: #e0e0e0;
-          height: 26px;
-          line-height: 26px;
-          border-radius: 3px;
-          tr {
-            th {
-              font-size: 16px;
-              font-weight: bold;
-              text-align: center;
-            }
-          }
-        }
-        tbody {
-          tr {
-            height: 25px;
-            line-height: 25px;
-            &:first-child {
-              td {
-                padding-top: 10px;
-              }
-            }
-            td {
-              color: #666;
-              &:nth-child(1) {
-                color: #f6682f;
-                font-size: 12px;
-                >div {
-                  width: 74px;
-                  span {
-                    font-size: 16px;
-                  }
-                }
-              }
-              &:nth-child(2) {
-                >div {
-                  width: 273px;
-                }
-              }
-              &:nth-child(3) {
-                >div {
-                  width: 102px;
-                }
-              }
-              >div {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                padding: 0 8px;
-                position: relative;
-                height: 30px;
-                i {
-                  font-style: normal;
-                  float: right;
-                  color: #8b8b8b;
-                  font-size: 14px;
-                  position: absolute;
-                  right: 0;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    .apply-del-box{
-      position: fixed;
-      z-index: 1000;
-      height: auto;
-      opacity: 1;
-      background-color: white;
-      width: 310px;
-      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
-      -moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);
-      -o-box-shadow: 0 5px 15px rgba(0,0,0,.5);
-      box-shadow: 0 5px 15px rgba(0,0,0,.5);
-      margin: -155px 0 0 -75px;
-      top: 55%;
-      left: 43%;
-      .title{
-        height: 24px;
-        background-color: #007aff;
-        text-align: right;
-        padding-right: 15px;
-        line-height: 24px;
-        a{
-          color: white;
-          font-size: 12px;
-        }
-      }
-      .content{
-        width: 100%;
-        text-align: center;
-        margin: 0 auto;
-        p{
-          padding: 12px 31px;
-          margin: 0;
-          i{
-            color: #5078cb;
-            font-size: 16px;
-            margin-right: 10px;
-          }
-          span {
-            color: #007aff;
-          }
-          &:last-child {
-            font-size: 12px;
-          }
-        }
-        div{
-          width: 100%;
-          text-align: center;
-          margin: 0 auto 20px;
-          a{
-            padding: 0 19px;
-            height: 26px;
-            line-height: 26px;
-            display: inline-block;
-            text-align: center;
-            font-size: 14px;
-            color: #fff;
-            &:first-child{
-              background: #c8c6c6;
-              margin-right: 10px;
-            }
-            &:last-child{
-              background: #007aff;
-            }
-          }
-        }
-      }
-    }
-  }
-  .el-date-editor--date{
-    width: 110px;
-    &.error {
-      input {
-        border: 1px solid #f4645f !important;
-      }
-    }
-  }
-  .el-icon-date {
-    display: none;
-  }
-  .el-input__inner {
-    height: 20px;
-    border-radius: 0;
-    border: 1px solid #c9c9c9;
+    height: 400px;
+    margin-bottom:20px;
   }
 </style>

components/applyPurchase/articleFour.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="article_four">
+    <ul class="list-unstyled">
+      <li v-for="item in list">
+        <div class="img">
+          <img :src="'/images/applyPurchase/' + item.img">
+        </div>
+        <div class="info_right">
+          <h4 v-text="item.title"></h4>
+          <p v-text="item.info"></p>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        list: [{
+          img: 'xiaolvgao.png',
+          title: '效率高',
+          info: '批量求购，一键上传，广获价格信息'
+        }, {
+          img: 'shujuhua.png',
+          title: '数据化',
+          info: '千万产品数据匹配，推送现货比对购买安心'
+        }, {
+          img: 'kedianzi.png',
+          title: '可垫资',
+          info: '可申请垫资服务，提升资金周转率'
+        }]
+      }
+    }
+  }
+</script>
+<style lang="scss" type="text/scss" scoped>
+  .article_four{
+    position:relative;
+    border-radius:5px;
+    border:1px solid #d2d2d2;
+    margin-bottom:20px;
+    ul{
+      padding:10px 0;
+      li{
+        height:70px;
+        line-height: 70px;
+        .img{
+          float:left;
+          width:65px;
+          text-align: center;
+          img{}
+        }
+        .info_right{
+          padding-top:10px;
+          margin-left:65px;
+          vertical-align:top;
+          color:#666;
+          h4{
+            line-height: 20px;
+            font-size: 14px;
+            margin:0;
+          }
+          p{
+            line-height: 16px;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+</style>

components/applyPurchase/articleOne.vue

@@ -0,0 +1,691 @@
+<template>
+  <div class="article_one">
+    <div class="title">
+      <span><i class="purchase_icon"></i>发布求购</span>
+    </div>
+    <div class="publish-area">
+      <div class="area_title">
+        <span>单个求购</span>
+      </div>
+      <div class="publish-form-area">
+        <div class="form-item">
+            <span>
+              <i>*</i>品牌：
+            </span>
+          <input type="text" class="form-control" :class="{'error': !validObj.brand}" v-model="applyObj.brand" @blur="checkBrand" @input="onBrandChange" placeholder="请勿填中文符号" />
+          <ul class="brand-similar-list" v-show="showSimilarBrandList && applyObj.brand">
+            <li v-for="sBrand in similarBrand" @click="setBrand(sBrand.nameEn)">{{sBrand.nameEn}}</li>
+          </ul>
+        </div>
+        <div class="form-item">
+           <span>
+              <i>*</i>物料名称(类目)：
+            </span>
+          <input type="text" class="form-control" :class="{'error': !validObj.prodTitle}" v-model="applyObj.prodTitle" @blur="checkProdTitle" @input="onProdTitleInput"/>
+        </div>
+        <div class="form-item">
+            <span>
+              <i>*</i>型号：
+            </span>
+          <input type="text" class="form-control" :class="{'error': !validObj.code}" v-model="applyObj.code" @blur="checkCode" @input="onCodeChange" placeholder="请勿填中文符号"/>
+          <ul v-show="showSimilarCodeList && applyObj.code">
+            <li v-for="sCode in similarCode" @click="setCode(sCode.code)">{{sCode.code}}</li>
+          </ul>
+        </div>
+        <div class="form-item">
+           <span>
+              规格：
+            </span>
+          <input type="text" class="form-control" :class="{'error': !validObj.spec}" v-model="applyObj.spec" @blur="checkSpec" @input="onSpecInput"/>
+        </div>
+        <div class="form-item">
+            <span>
+              <i>*</i>截止日期：
+            </span>
+          <!--<input type="text" class="form-control" readonly :class="{'error': !validObj.deadline}" v-model="applyObj.deadline" @blur="checkDeadline" />-->
+          <el-date-picker
+            v-model="applyObj.deadline"
+            type="date"
+            :picker-options="pickerOptions"
+            :class="{'error': !validObj.deadline}"
+            @change="setDeadLineValid"
+            :editable="false"
+            :clearable="true"
+            size="mini">
+          </el-date-picker>
+        </div>
+        <!--<div class="form-item">
+          <span>
+            单价预算：
+          </span>
+          <select v-model="applyObj.currency" class="form-control">
+            <option value="RMB">¥</option>
+            <option value="USD">$</option>
+          </select>
+          <input type="number" class="form-control" :class="{'error': !validObj.unitPrice}" v-model="applyObj.unitPrice" @blur="checkUnitPrice" @input="onUnitPriceInput" />
+        </div>-->
+        <!--<div class="form-item">
+         <span>
+            封装：
+          </span>
+          <input type="text" class="form-control" v-model="applyObj.encapsulation" @input="onEncapsulationChange" />
+        </div>-->
+        <div class="form-item">
+            <span>
+              采购数量(PCS)：
+            </span>
+          <input type="text" class="form-control" :class="{'error': !validObj.amount}" v-model="applyObj.amount" @blur="checkAmount" @input="onAmountInput" />
+        </div>
+        <!--<div class="form-item">
+          <span>
+            生产日期：
+          </span>
+          <input type="text" class="form-control" v-model="applyObj.produceDate" @input="onProduceDateChange" />
+        </div>-->
+        <div class="form-item">
+          <a @click="goPublish">发布求购</a>
+        </div>
+      </div>
+      <div class="area_title">
+        <span>批量求购</span>
+      </div>
+      <div class="publish-upload">
+        <h2>3秒一键配单采购</h2>
+        <label>
+          <img src="/images/applyPurchase/upload.png" />
+          <el-upload
+            drag
+            action="/seek/importBom"
+            accept="*.xls, *.xlsx"
+            :show-file-list="false"
+            :on-success="onSuccess"
+            :on-error="onError">
+          </el-upload>
+        </label>
+        <h3>把Excel格式的BOM<br/>拖放到框中</h3>
+        <a @click="downloadTemplate()" class="download-line"><i class="down_icon"></i>Excel模板下载</a>
+      </div>
+    </div>
+    <!--提示框-->
+    <div class="apply-del-box" v-if="showRemindBox">
+      <div class="title">
+        <a @click="showRemindBox = false"><i class="fa fa-close fa-lg"></i></a>
+      </div>
+      <div class="content">
+        <!--<p style="line-height: 20px;margin-top: 10px;padding:0 10px">非常抱歉，目前暂无此品牌！<br>若直接前往“品牌申请”，我们将为您先开通寄售功能，待申请通过后再提交开店申请。</p>-->
+        <!--<p style="line-height: 20px;">前往<a @click="goBrandApply()"  target="_blank" style="color: #5078CB">品牌申请&nbsp;<i class="fa fa-arrow-right"></i></a></p>-->
+        <p><img src="/images/applyPurchase/check.png" alt="">发布成功</p>
+        <p>其中 <span>100</span>个求购型号有现货在售，您可前往“<span>买家中心-我的求购</span>”查询并直接购买</p>
+        <div>
+          <a @click="showRemindBox = false">我知道了</a>
+          <a href="/user#/seekPurchase">前往我的求购</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        applyObj: {
+          code: '',
+          brand: '',
+          unitPrice: '',
+          currency: 'RMB',
+          prodTitle: '',
+          spec: '',
+          encapsulation: '',
+          produceDate: '',
+          amount: '',
+          deadline: ''
+        },
+        validObj: {
+          code: true,
+          brand: true,
+          unitPrice: true,
+//          encapsulation: true,
+//          produceDate: true,
+          amount: true,
+          deadline: true,
+          spec: true,
+          prodTitle: true
+        },
+        pickerOptions: {
+          disabledDate (time) {
+            // 大于等于今天 小于三个月后
+            return time.getTime() < Date.now() - 1000 * 60 * 60 * 24 || time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 30 * 3
+          }
+        },
+        showRemindBox: false,
+        showSimilarCodeList: false,
+        showSimilarBrandList: false,
+        similarCode: [],
+        similarBrand: []
+      }
+    },
+    computed: {
+      goodPurchaseMan () {
+        return this.$store.state.applyPurchase.goodPurchaseMan.goodPurchaseMan.data
+      },
+      user () {
+        return this.$store.state.option.user
+      }
+    },
+    filters: {
+      enterpriseFilter (str) {
+        return str.length > 4 ? str.substring(0, 2) + '**' + str.substring(str.length - 2, str.length) : str
+      },
+      userNameFilter (str) {
+        return str.substring(0, 1) + '**'
+      }
+    },
+    mounted () {
+      document.getElementsByClassName('el-upload-dragger')[0].onclick = function (event) {
+        event.stopPropagation()
+      }
+      let _this = this
+      document.body.onclick = function () {
+        _this.showSimilarCodeList = false
+        _this.showSimilarBrandList = false
+      }
+    },
+    methods: {
+      emptyForm: function () {
+        for (let attr in this.applyObj) {
+          this.applyObj[attr] = attr === 'currency' ? 'RMB' : ''
+        }
+      },
+      getRankBg: function (index) {
+        return index === 0 ? 1 : index < 3 ? 2 : 3
+      },
+      getMaterialKind: function (code, brand) {
+        return this.$http.get('/productuser/match/getKind', {params: {cmpCode: code, brand: brand}})
+      },
+      startPublish: function (prodTitle) {
+        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.spec = this.applyObj.spec
+        inquiryItem.currency = currency
+        inquiryItem.cmpCode = this.applyObj.code.trim().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 = prodTitle || this.applyObj.prodTitle || '其他'
+        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(response => {
+            this.$message.success('发布成功')
+//                this.showRemindBox = true
+            this.emptyForm()
+//                this.validObj.deadline = true
+            this.$store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: 1, pageSize: 10, enUU: this.user.data.enterprise ? this.user.data.enterprise.uu : null})
+          }, error => {
+            console.log(error)
+            this.$message.error('发布失败')
+          })
+      },
+      goPublish: function () {
+        if (this.user.logged) {
+          this.authorityInterceptor(this.baseUrls.userPublishSeek, () => {
+            if (this.checkAll()) {
+//            if (!this.applyObj.prodTitle || this.applyObj.prodTitle.length === 0) {
+//              this.getMaterialKind(this.applyObj.code, this.applyObj.brand).then(response => {
+//                this.startPublish(response.data && response.data.length ? response.data : '其他')
+//              })
+//            } else {
+//              this.startPublish()
+//            }
+              this.getMaterialKind(this.applyObj.code, this.applyObj.brand).then(response => {
+                this.startPublish(response.data && response.data.length ? response.data : this.applyObj.prodTitle)
+              })
+            } else {
+              if (!this.validObj.prodTitle) {
+                this.$message.error('类目不能为空')
+              } else if (!this.validObj.deadline) {
+                this.$message.error('截止日期不能为空')
+              } else if (!this.validObj.amount) {
+                this.$message.error('请输入正确的数值')
+              }
+            }
+          })
+        } else {
+          this.$router.push('/auth/login?returnUrl=' + window.location.href)
+        }
+      },
+      getSimilarCode: function () {
+        if (this.applyObj.code) {
+          this.$http.get('/search/similarComponents', {params: {keyword: this.applyObj.code}})
+            .then(response => {
+              this.similarCode = response.data
+              this.showSimilarCodeList = response.data.length > 0
+            })
+        } else {
+          this.showSimilarCodeList = false
+        }
+      },
+      getSimilarBrand: function () {
+        if (this.applyObj.brand) {
+          this.$http.get('/search/similarBrands', {params: {keyword: this.applyObj.brand}})
+            .then(response => {
+              this.similarBrand = response.data
+              this.showSimilarBrandList = response.data.length > 0
+            })
+        } else {
+          this.showSimilarBrandList = false
+        }
+      },
+      checkCode: function () {
+        let code = this.applyObj.code.trim()
+        let nullStrFlag = this.baseUtils.checkNullStr(code)
+        this.validObj.code = code && code !== '' && nullStrFlag
+        if (!this.validObj.code) {
+          if (!nullStrFlag) {
+            this.$message.error('型号输入不合法')
+          } else {
+            this.$message.error('型号不能为空')
+          }
+        }
+        return this.validObj.code
+      },
+      checkProdTitle: function () {
+        let prodTitle = this.applyObj.prodTitle.trim()
+        this.validObj.prodTitle = prodTitle && prodTitle !== ''
+        if (!this.validObj.prodTitle) {
+          this.$message.error('类目不能为空')
+        }
+        console.log(prodTitle)
+        return this.validObj.prodTitle
+      },
+      checkBrand: function () {
+        let nullStrFlag = this.baseUtils.checkNullStr(this.applyObj.brand)
+        this.validObj.brand = this.applyObj.brand && this.applyObj.brand !== '' && nullStrFlag
+        if (!this.validObj.brand) {
+          if (!nullStrFlag) {
+            this.$message.error('品牌输入不合法')
+          } else {
+            this.$message.error('品牌不能为空')
+          }
+        }
+        return this.validObj.brand
+      },
+      checkUnitPrice: function () {
+        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
+      },
+      checkSpec: function () {
+        let nullStrFlag = this.baseUtils.checkNullStr(this.applyObj.spec)
+        this.validObj.spec = nullStrFlag
+        if (!nullStrFlag) {
+          this.$message.error('规格输入不合法')
+        }
+        return this.validObj.spec
+      },
+      checkAmount: function () {
+        this.validObj.amount = this.applyObj.amount === '' ? true : this.applyObj.amount > 0 && this.applyObj.amount < 1000000000
+        return this.validObj.amount
+      },
+      checkAll: function () {
+        return this.checkBrand() && this.checkProdTitle() && this.checkCode() && this.checkDeadline() && this.checkUnitPrice() && this.checkAmount() && this.checkSpec()
+      },
+      checkDeadline: function () {
+        this.validObj.deadline = Boolean(this.applyObj.deadline)
+        return this.validObj.deadline
+      },
+      setDeadLineValid: function () {
+        this.applyObj.deadline = this.baseUtils.formatDate(this.applyObj.deadline, 'yyyy-MM-dd hh:mm:ss')
+        this.validObj.deadline = true
+      },
+      onUnitPriceInput: function () {
+        let price = this.applyObj.unitPrice
+        if (price >= 10000) {
+          this.applyObj.unitPrice = price.substring(0, 4)
+        } else if (price.indexOf('.') > -1) {
+          let arr = price.split('.')
+          if (arr[0].length > 4) {
+            this.applyObj.unitPrice = Number(arr[0].substring(0, 4) + '.' + arr[1])
+          } else if (arr[1].length > 6) {
+            this.applyObj.unitPrice = Number(arr[0] + '.' + arr[1].substring(0, 6))
+          }
+        }
+      },
+      onProduceDateChange: function () {
+        if (this.applyObj.produceDate && this.baseUtils.getRealLen(this.applyObj.produceDate) > 12) {
+          this.applyObj.produceDate = this.baseUtils.cutOutString(this.applyObj.produceDate, 12)
+        }
+      },
+      onEncapsulationChange: function () {
+        if (this.applyObj.encapsulation && this.baseUtils.getRealLen(this.applyObj.encapsulation) > 20) {
+          this.applyObj.encapsulation = this.baseUtils.cutOutString(this.applyObj.encapsulation, 20)
+        }
+      },
+      onProdTitleInput: function () {
+        if (this.applyObj.prodTitle && this.baseUtils.getRealLen(this.applyObj.prodTitle) > 40) {
+          this.applyObj.prodTitle = this.baseUtils.cutOutString(this.applyObj.prodTitle, 40)
+        }
+      },
+      onSpecInput: function () {
+        if (this.applyObj.spec && this.baseUtils.getRealLen(this.applyObj.spec) > 100) {
+          this.applyObj.spec = this.baseUtils.cutOutString(this.applyObj.spec, 100)
+        }
+      },
+      onCodeChange: function () {
+        if ((/[^\x00-\xff]/g).test(this.applyObj.code)) {
+          let chineseIndex = -1
+          for (let i = 0; i < this.applyObj.code.length; i++) {
+            if ((/[^\x00-\xff]/g).test(this.applyObj.code.charAt(i))) {
+              chineseIndex = i
+              break
+            }
+          }
+          this.applyObj.code = this.baseUtils.cutOutString(this.applyObj.code, chineseIndex)
+        } else if (this.applyObj.code && this.baseUtils.getRealLen(this.applyObj.code) > 100) {
+          this.applyObj.code = this.baseUtils.cutOutString(this.applyObj.code, 100)
+        } else {
+          this.getSimilarCode()
+        }
+      },
+      onBrandChange: function () {
+        this.applyObj.brand = this.applyObj.brand.trim()
+        if ((/[^\x00-\xff]/g).test(this.applyObj.brand)) {
+          let chineseIndex = -1
+          for (let i = 0; i < this.applyObj.brand.length; i++) {
+            if ((/[^\x00-\xff]/g).test(this.applyObj.brand.charAt(i)) && !(/[\u4e00-\u9fa5]/).test(this.applyObj.brand.charAt(i))) {
+              chineseIndex = i
+              break
+            }
+          }
+          if (chineseIndex > -1) {
+            this.applyObj.brand = this.applyObj.brand.substring(0, chineseIndex)
+          }
+        } else if (this.applyObj.brand && this.baseUtils.getRealLen(this.applyObj.brand) > 50) {
+          this.applyObj.brand = this.baseUtils.cutOutString(this.applyObj.brand, 50)
+        } else {
+          this.getSimilarBrand()
+        }
+      },
+      onAmountInput: function () {
+        if (!(/^[0-9]*$/).test(this.applyObj.amount)) {
+          let chineseIndex = -1
+          for (let i = 0; i < this.applyObj.amount.length; i++) {
+            if (!(/^[0-9]*$/).test(this.applyObj.amount.charAt(i))) {
+              chineseIndex = i
+              break
+            }
+          }
+          this.applyObj.amount = this.baseUtils.cutOutString(this.applyObj.amount, chineseIndex)
+        } else if (this.applyObj.amount.length > 9) {
+          this.applyObj.amount = this.baseUtils.cutOutString(this.applyObj.amount, 9)
+        }
+      },
+      onSuccess: function (data) {
+        if (!this.user.logged) {
+          this.$router.push('/auth/login?returnUrl=' + window.location.href)
+        } else {
+          // 能拦截跳转但无法阻止上传
+          this.authorityInterceptor(this.baseUrls.userImportBom, () => {
+            if (data.success) {
+              window.location.href = '/applyPurchase/' + data.data
+            } else {
+              this.$message.error(data.message)
+            }
+          })
+        }
+      },
+      onError: function () {
+        if (!this.user.logged) {
+          this.$router.push('/auth/login?returnUrl=' + window.location.href)
+        } else {
+          this.$message.error('上传失败, 系统错误')
+        }
+      },
+      downloadTemplate: function () {
+        window.location.href = '/seek/release/template'
+      },
+      setCode: function (code) {
+        this.applyObj.code = code
+        this.showSimilarCodeList = false
+      },
+      setBrand: function (brand) {
+        this.applyObj.brand = brand
+        this.showSimilarBrandList = false
+      }
+//      upload: function (e) {
+//        let file = e.target.files[0]
+//        let param = new FormData()
+//        param.append('file', file, file.name)
+//        let config = {
+//          headers: {'Content-Type': file.type}
+//        }
+//        this.$http.post('/seek/importBom', param, config).then(response => {
+//          if (response.data.success) {
+//            window.open('/applyPurchase/' + response.data.data)
+//          } else {
+//            this.$message.error('上传失败')
+//          }
+//        }, err => {
+//          console.log(err)
+//          this.$message.error('系统错误')
+//        })
+//      }
+    }
+  }
+</script>
+<style lang="scss" type="text/scss">
+  .article_one{
+    border: 1px solid #d2d2d2;
+    border-radius:3px;
+    background: #fff;
+    margin-bottom:30px;
+    .title{
+      height:30px;
+      background: #2496f1;
+      padding:0 10px;
+      span{
+        font-size: 14px;
+        color:#fff;
+        line-height: 30px;
+      }
+    }
+    .publish-area{
+      padding:5px 10px 10px;
+      .area_title{
+        border-bottom:1px solid #e5e5e5;
+        margin-bottom:10px;
+        span{
+          position:relative;
+          top:1px;
+          display:inline-block;
+          height:25px;
+          line-height: 25px;
+          border-bottom:1px solid #2496f1;
+          font-size: 14px;
+          color:#666;
+        }
+      }
+      .publish-form-area{
+        background: #d3eafc;
+        border-radius:10px;
+        padding:5px 10px;
+        margin-bottom:5px;
+        .form-item {
+          margin-bottom: 5px;
+          position: relative;
+          >a{
+            width: 120px;
+            height: 30px;
+            line-height: 30px;
+            background: #2496f1;
+            color: #eee;
+            font-size: 14px;
+            display: block;
+            border-radius: 3px;
+            cursor: pointer;
+            text-align: center;
+            margin:15px auto;
+          }
+          >span {
+            text-align: right;
+            display: inline-block;
+            line-height: 23px;
+            color: #333;
+            i {
+              position: relative;
+              top: 2px;
+              right: 3px;
+              color: #e41515;
+            }
+          }
+          > ul {
+            line-height: normal;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            background: #fff;
+            border: 1px solid #b5b5b5;
+            z-index: 1;
+            max-height: 120px;
+            overflow-y: auto;
+            overflow-x: hidden;
+            border-radius: 3px;
+            width: 178px;
+            font-size: 12px;
+            li {
+              height: 24px;
+              line-height: 24px;
+              cursor: pointer;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              padding: 0 3px;
+              &:hover {
+                background: #ddd;
+              }
+            }
+          }
+          select {
+            width: 32px;
+            position: absolute;
+            height: 20px;
+            background: url('/images/applyPurchase/select.png')no-repeat right;
+            background-position-x: 15px;
+            padding: 0 0 0 3px;
+            border-radius: 0;
+            & + input {
+              padding-left: 34px;
+            }
+          }
+          .el-input {
+            width: 100%;
+          }
+          input {
+            font-size: 12px;
+            height: 20px;
+            line-height: 20px;
+            border-radius: 5px;
+            padding: 0 3px;
+            box-shadow: none;
+            -webkit-box-shadow: none;
+            -moz-box-shadow: none;
+            &.error {
+              border-color: #f4645f!important;
+            }
+          }
+        }
+      }
+      .publish-upload{
+        height:208px;
+        background: #d3eafc;
+        border-radius:5px;
+        text-align: center;
+        color:#666;
+        padding-top:16px;
+        h2 {
+          font-size: 12px;
+          margin:0;
+          margin-bottom:18px;
+        }
+        h3 {
+          font-size: 12px;
+          line-height: 20px;
+          margin: 15px 0;
+        }
+        label {
+          position: relative;
+          > div {
+            position: absolute;
+          }
+        }
+        .download-line {
+          cursor: pointer;
+          width: 130px;
+          height: 30px;
+          line-height: 30px;
+          background: #2496f1;
+          color: #eee;
+          font-size: 12px;
+          display: block;
+          border-radius: 3px;
+          text-align: center;
+          margin:15px auto;
+        }
+      }
+    }
+  }
+  .el-upload {
+    input {
+      display: none;
+    }
+    .el-upload-dragger {
+      width: 198px;
+      height: 150px;
+      position: absolute;
+      top: -80px;
+      left: -75px;
+      opacity: 0;
+    }
+  }
+  .el-date-editor--date{
+    width: 100%;
+    &.error {
+      input {
+        border: 1px solid #f4645f !important;
+      }
+    }
+  }
+  .el-icon-date {
+    display: none;
+  }
+  .el-input__inner {
+    height: 20px;
+    border-radius: 0;
+    border: 1px solid #c9c9c9;
+  }
+</style>

components/applyPurchase/articleThree.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="article_three">
+    <div class="get_business">
+      <a @click="showRemindBox = true">查看 》</a>
+    </div>
+    <!--弹出框-->
+    <el-dialog
+      :visible.sync="showRemindBox">
+      <div class="content">
+        <span @click="showRemindBox = false">×</span>
+        <img src="/images/applyPurchase/dialog_banner.png">
+        <a @click="Maintenance()">去维护个人产品 》</a>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        showRemindBox: false
+      }
+    },
+    computed: {
+      user () {
+        return this.$store.state.option.user
+      }
+    },
+    methods: {
+      Maintenance () {
+        if (!this.user.logged) {
+          this.$message.error('请先登录')
+        } else {
+          let isSelf = true
+          let tempEnterprise = {}
+          let ens = this.user.data.enterprises
+          if (ens && ens.length) {
+            ens.forEach(function (item) {
+              if (item.current) {
+                isSelf = false
+                tempEnterprise = item
+              }
+            })
+          } else {
+            isSelf = true
+          }
+          if (isSelf) {
+            this.$message.error('请先点击【卖家中心】升级成为卖家')
+          } else {
+            if (tempEnterprise.isVendor === 313) {
+              window.location.href = '/vendor#/vendor_upload?type=self'
+            } else {
+              this.$message.error('请先点击【卖家中心】升级成为卖家')
+            }
+          }
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss">
+  .el-dialog--small{
+    width:1190px;
+    .el-dialog__header{
+      display:none;
+    }
+    .el-dialog__body{
+      padding:0;
+      .content{
+        position:relative;
+        span{
+          position:absolute;
+          top:15px;
+          right:25px;
+          display:inline-block;
+          width:32px;
+          height:32px;
+          cursor:pointer;
+          line-height: 26px;
+          font-size:36px;
+          color:#fff;
+          background: #999999;
+          border-radius:50%;
+          text-align: center;
+        }
+        a{
+          position:absolute;
+          top: 1525px;
+          left: 215px;
+          display:inline-block;
+          width:135px;
+          height:30px;
+          line-height: 30px;
+          color:#eee;
+          background: #3b7cf4;
+          border-radius:5px;
+          text-align: center;
+        }
+        img{
+          width:100%;
+        }
+      }
+    }
+  }
+  .article_three{
+    position:relative;
+    border-radius:5px;
+    border:1px solid #d2d2d2;
+    margin-bottom:20px;
+    .get_business{
+      padding-top:275px;
+      height:340px;
+      background: url(/images/applyPurchase/business_banner.png)no-repeat center;
+      > a{
+        width: 130px;
+        height: 30px;
+        line-height: 30px;
+        background: #2496f1;
+        color: #fdfdfd;
+        font-size: 14px;
+        display: block;
+        border-radius: 3px;
+        cursor: pointer;
+        text-align: center;
+        margin:0 auto;
+      }
+    }
+
+  }
+</style>

components/applyPurchase/articleTwo.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="article_two">
+    <div class="apply-rank">
+      <table>
+        <thead>
+        <tr>
+          <th width="50">排名</th>
+          <th width="95">型号</th>
+          <th width="65">求购次数</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="(rank, index) in purchaseRank">
+          <td><div>NO.<span>{{index + 1}}</span></div></td>
+          <td>
+            <div>
+              <span v-if="rank.id_cmpcode" :title="rank.id_cmpcode">{{rank.id_cmpcode}}</span>
+              <span v-if="!rank.id_cmpcode">-</span>
+            </div>
+          </td>
+          <td><div>{{rank.seekAmount || 0}}</div></td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    computed: {
+      purchaseRank () {
+        return this.$store.state.applyPurchase.purchaseApplyRank.purchaseApplyRank.data
+      }
+    }
+  }
+</script>
+<style lang="scss">
+  .article_two{
+    position:relative;
+    border-radius:5px;
+    border:1px solid #d2d2d2;
+    padding-top:25px;
+    margin-bottom:20px;
+    &:before{
+      content: '';
+      display:block;
+      position:absolute;
+      top:-12px;
+      left:1px;
+      height:30px;
+      width:215px;
+      background: url(/images/applyPurchase/biaoti.png)no-repeat center;
+    }
+    .apply-rank {
+      margin-bottom:10px;
+      table {
+        margin: 0 auto;
+        color:#666;
+        text-align: center;
+        thead {
+          background: #d3eafc;
+          height: 26px;
+          line-height: 26px;
+          border-radius: 3px;
+          tr {
+            th {
+              font-size: 12px;
+              font-weight: bold;
+              text-align: center;
+            }
+          }
+        }
+        tbody {
+          tr {
+            height: 30px;
+            line-height: 30px;
+            &:first-child {
+              td {
+                padding-top: 10px;
+              }
+            }
+            td {
+              color: #666;
+              &:nth-child(1) {
+                color: #f6682f;
+                font-size: 12px;
+                >div {
+                  width: 50px;
+                  span {
+                    font-size: 16px;
+                  }
+                }
+              }
+              &:nth-child(2) {
+                >div {
+                  width: 90px;
+                }
+              }
+              &:nth-child(3) {
+                >div {
+                  width: 60px;
+                }
+              }
+              >div {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                padding: 0 8px;
+                position: relative;
+                height: 30px;
+                i {
+                  font-style: normal;
+                  float: right;
+                  color: #8b8b8b;
+                  font-size: 14px;
+                  position: absolute;
+                  right: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

components/applyPurchase/index.js

@@ -3,5 +3,9 @@ import PublishApply from './PublishApply.vue'
 import ApplyFooter from './ApplyFooter.vue'
 import BusinessOpportunities from './BusinessOpportunities.vue'
 import BatchPublish from './BatchPublish.vue'
+import ArticleOne from './articleOne'
+import ArticleTwo from './articleTwo'
+import ArticleThree from './articleThree'
+import ArticleFour from './articleFour'
 
-export { ApplyInfo, PublishApply, ApplyFooter, BusinessOpportunities, BatchPublish }
+export { ApplyInfo, PublishApply, ApplyFooter, BusinessOpportunities, BatchPublish, ArticleOne, ArticleTwo, ArticleThree, ArticleFour }

components/main/Nav.vue

@@ -100,6 +100,7 @@
   .nav-list {
     background-color: rgb(244, 248, 255);
     height: $nav-height;
+    margin-bottom:20px;
 
     .item {
       display: inline-block;

components/supplier/articleOne.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="supplier_one">
+    <div class="count">
+      已入驻 <span v-text="all"></span>
+    </div>
+    <ul class="list-unstyled">
+      <li v-for="item in list.content" @click="jumpResource(item.enUU)">
+        <div class="content_name" v-text="item.storeName">深圳英优软科技有限公司</div>
+      </li>
+    </ul>
+    <el-dialog
+      title="提示"
+      :visible.sync="hasDialog ">
+      <div class="form_dialog">
+        <p><span>供应商正在完善产品信息，</span>暂时不能查看更多。 </p>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <a type="button" @click="hasDialog=false">我知道了</a>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        hasDialog: false
+      }
+    },
+    computed: {
+      list () {
+        console.log('newMerchant', this.$store.state.supplier.merchant.newMerchant.data)
+        return this.$store.state.supplier.merchant.newMerchant.data
+      },
+      all () {
+        let count = this.$store.state.supplier.merchant.merchantAll.data
+        let supplierCount = count.content ? '00000' + count.totalElements : '00000'
+        return supplierCount.substr(-5)
+      }
+    },
+    methods: {
+      jumpResource (id) {
+        if (!this.hasJump) {
+          this.isVaildSupplier(id)
+        }
+      },
+      // 判断是否有有效物料信息
+      isVaildSupplier (id) {
+        this.$http.get('vendor/introduction/product/count', {params: {vendUU: id}})
+          .then(res => {
+            if (res.data.count !== 0) {
+              this.$router.push('supplier/' + id)
+            } else {
+              this.hasDialog = true
+            }
+          }, err => {
+            console.log(err)
+          })
+      }
+    }
+  }
+</script>
+
+<style type="text/scss" lang="scss">
+.supplier_one{
+  position:relative;
+  border:1px solid #ccc;
+  padding-top:90px;
+  border-radius:5px;
+  padding-bottom:5px;
+  margin-bottom:15px;
+  background: #fff;
+  min-height:400px;
+  .el-dialog{
+    width: 290px!important;
+    .el-dialog__header{
+      background: #4290f7;
+      line-height: 40px;
+      padding: 0 20px 0;
+      .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;
+      a{
+        display:inline-block;
+        background: #3c7cf5;
+        color:#fff;
+        font-size: 14px;
+        line-height: 30px;
+        height:30px;
+        padding:0 10px;
+        border-radius:5px;
+      }
+    }
+  }
+  .form_dialog{
+    p{
+      width:200px;
+      font-size: 14px;
+      color:#666666;
+      margin:0 auto;
+      padding-top:5px;
+      line-height: 20px;
+      span{
+        color:#eb6054;
+      }
+    }
+  }
+  &:before{
+    content: '';
+    position:absolute;
+    top:0;
+    left:0;
+    display:block;
+    width:100%;
+    height:92px;
+    background: url(/images/supplier/header_img.png)no-repeat center center
+  }
+  .count{
+    text-align: center;
+    font-size: 25px;
+    color:#2496f1;
+    font-weight: bold;
+    margin-bottom:5px;
+  }
+  ul{
+    li{
+      position:relative;
+      padding: 0 18px 0 20px;
+      line-height: 25px;
+      height:25px;
+      color:#666;
+      overflow: hidden;
+      &:before{
+        content: '';
+        position:absolute;
+        top: 12px;
+        left: 7px;
+        display:block;
+        width:5px;
+        height:5px;
+        line-height: 30px;
+        background: #2496f1;
+      }
+      &:hover{
+        cursor:pointer;
+        color:#2496f1;
+      }
+      .content_name{
+        width:180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space:nowrap;
+      }
+    }
+  }
+}
+</style>

components/supplier/articleTwo.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="supplier_two">
+    <div class="title">
+      <span>供应商推荐</span>
+    </div>
+    <ul class="list-unstyled">
+      <li v-for="item in list.content" @click="jumpResource(item.enUU)">
+        <div class="img">
+          <img :src="item.enLogoUrl || '/images/all/default.png'">
+        </div>
+        <div class="content_name" v-text="item.enName">深圳英优软科技有限公司</div>
+      </li>
+    </ul>
+    <el-dialog
+      title="提示"
+      :visible.sync="hasDialog ">
+      <div class="form_dialog">
+        <p><span>供应商正在完善产品信息，</span>暂时不能查看更多。 </p>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <a type="button" @click="hasDialog=false">我知道了</a>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        hasDialog: false
+      }
+    },
+    computed: {
+      list () {
+        console.log('recommend', this.$store.state.supplier.merchant.recommend.data)
+        return this.$store.state.supplier.merchant.recommend.data
+      }
+    },
+    methods: {
+      jumpResource (id) {
+        if (!this.hasJump) {
+          this.isVaildSupplier(id)
+        }
+      },
+      // 判断是否有有效物料信息
+      isVaildSupplier (id) {
+        this.$http.get('vendor/introduction/product/count', {params: {vendUU: id}})
+          .then(res => {
+            if (res.data.count !== 0) {
+              this.$router.push('supplier/' + id)
+            } else {
+              this.hasDialog = true
+            }
+          }, err => {
+            console.log(err)
+          })
+      }
+    }
+  }
+</script>
+
+<style type="text/scss" lang="scss">
+  .supplier_two{
+    position:relative;
+    border:1px solid #ccc;
+    border-radius:5px;
+    padding-bottom:5px;
+    margin-bottom:15px;
+    background: #fff;
+    min-height:300px;
+    .el-dialog{
+      width: 290px!important;
+      .el-dialog__header{
+        background: #4290f7;
+        line-height: 40px;
+        padding: 0 20px 0;
+        .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;
+        a{
+          display:inline-block;
+          background: #3c7cf5;
+          color:#fff;
+          font-size: 14px;
+          line-height: 30px;
+          height:30px;
+          padding:0 10px;
+          border-radius:5px;
+        }
+      }
+    }
+    .form_dialog{
+      p{
+        width:200px;
+        font-size: 14px;
+        color:#666666;
+        margin:0 auto;
+        padding-top:5px;
+        line-height: 20px;
+        span{
+          color:#eb6054;
+        }
+      }
+    }
+    .title{
+      height:35px;
+      text-align: center;
+      background: #2496f1;
+      margin-bottom:5px;
+      span{
+        line-height: 35px;
+        font-size: 18px;
+        color:#fff;
+      }
+    }
+    ul{
+      li{
+        position:relative;
+        padding: 0 10px;
+        line-height: 50px;
+        height:50px;
+        color:#666;
+        overflow: hidden;
+        margin-bottom:10px;
+        &:hover{
+          cursor:pointer;
+          color:#2496f1;
+        }
+        .img{
+          float:left;
+          width:50px;
+          height:50px;
+          vertical-align: middle;
+          border:1px solid #ccc;
+          img{
+            width:100%;
+            height:100%;
+            vertical-align: top;
+          }
+        }
+        .content_name{
+          margin-left:60px;
+          width:140px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space:nowrap;
+        }
+      }
+    }
+  }
+</style>

components/supplier/banner.vue

@@ -10,7 +10,8 @@
 
 <style type="text/scss" lang="scss" scoped>
 .banner{
-  height:470px;
-  background: url(/images/supplier/bgImg.jpg)no-repeat center center
+  height:400px;
+  background: url(/images/supplier/banner.png)no-repeat center center;
+  margin-bottom:15px;
 }
 </style>

components/supplier/index.js

@@ -2,5 +2,7 @@ import MerchantView from './merchant'
 import Resource from './resource'
 import DetailsView from './details'
 import Banner from './banner'
+import ArticleOne from './articleOne'
+import ArticleTwo from './articleTwo'
 
-export { MerchantView, Resource, DetailsView, Banner }
+export { MerchantView, Resource, DetailsView, Banner, ArticleOne, ArticleTwo }

components/supplier/merchant.vue

@@ -1,66 +1,59 @@
 <template>
 <div class="merchant">
-  <div class="container">
-    <div class="top clearfix">
-      <div class="title">
-        <p>High quality dealer</p>
-        <h2>供应商列表</h2>
-       <!-- <div class="count">
-          <img src="/images/supplier/count.png" alt=""/>
-          <div class="count_num">
-            <span v-for="spCount in all" v-text="spCount"></span>
-          </div>
-        </div>-->
-      </div>
-       <div class="count">
-          <img src="/images/supplier/count1.png" alt=""/>
-          <div class="count_num">
-            <span v-for="spCount in all" v-text="spCount"></span>
-          </div>
-        </div>
-      <div class="search">
-        <search-header :outerKeyword="searchCode" :similarUrl="similarUrl" :type="'supplier'" @searchAction="search" :placeholder="'品牌/类目/型号/公司名'"></search-header>
+  <div class="top clearfix">
+    <div class="title">
+      <span>供应商列表</span>
+    </div>
+    <div class="search">
+      <search-header :outerKeyword="searchCode" :similarUrl="similarUrl" :type="'supplier'" @searchAction="search" :placeholder="'品牌/类目/型号/公司名'"></search-header>
+    </div>
+  </div>
+  <div class="list_info">
+    <div class="empty" v-if="!list.content || list.content.length === 0">
+      <img src="/images/supplier/icon/empty.png">
+      <div class="supplier-empty-info">
+        <p>暂无供应商信息</p>
+        <a href="javascript:history.go(-1)"><i class="fa fa-reply" style="margin-right:5px;"></i>返回上一页</a>
       </div>
     </div>
-    <div class="list_info">
-      <div class="empty" v-if="!list.content || list.content.length === 0">
-        <img src="/images/supplier/icon/empty.png">
-        <div class="supplier-empty-info">
-          <p>暂无供应商信息</p>
-          <a href="javascript:history.go(-1)"><i class="fa fa-reply" style="margin-right:5px;"></i>返回上一页</a>
+    <ul class="list-inline">
+      <li v-for="item in list.content" @click="jumpResource(item.enUU)" class="clearfix">
+        <div class="img">
+          <img :src="item.logoUrl || '/images/all/default.png'">
+          <span class="has_shop" v-if="item.isStore === 1"></span>
         </div>
-      </div>
-      <ul class="list-inline">
-        <li v-for="item in list.content" @click="jumpResource(item.enUU)">
-          <div class="has_shop" v-if="item.isStore === 1">已开店</div>
-          <div class="enterprise_name" v-text="item.enName">深圳英优软科技有限公司</div>
-          <div class="select_btn" v-html="isInFrame ? '添加为<br/>供应商' : '查看<br/>更多'" @mouseleave="hasJump = false" @mouseenter="hasJump = true" @click="addResource(item.enUU)"></div>
-          <div class="popups">
-            <p>企业执照号：</p><p v-text="item.enBusinesscode ? item.enBusinesscode : '暂无信息'">1</p>
-            <p>地址：</p><p v-text="item.enAddress ? item.enAddress : '暂无信息'">1</p>
-            <p>邮箱：</p><p v-text="item.enEmail ? item.enEmail : '暂无信息'">h</p>
-            <p>电话：</p><p v-text="item.enTel ? item.enTel : '暂无信息'">1</p>
-            <p>行业：</p><p v-text="item.enIndustry ? item.enIndustry : '暂无信息'">1</p>
-          </div>
-        </li>
-      </ul>
-      <div style="float: right;">
-        <page :total="list.totalElements" :page-size="pageParams.count"
-              :current="pageParams.page" v-on:childEvent="handleCurrentChange">
-        </page>
-      </div>
+        <div class="content">
+          <h3 class="enterprise_name" v-text="item.enName">深圳英优软科技有限公司</h3>
+          <p>
+            <span>企业执照号：</span><span v-text="item.enBusinesscode ? item.enBusinesscode : '暂无信息'">1</span>
+            <span class="split_line">|</span>
+            <span>地址：</span><span v-text="item.enAddress ? item.enAddress : '暂无信息'">1</span>
+          </p>
+          <p>
+            <span>邮箱：</span><span v-text="item.enEmail ? item.enEmail : '暂无信息'">h</span>
+            <span>电话：</span><span v-text="item.enTel ? item.enTel : '暂无信息'">1</span>
+            <span>行业：</span><span v-text="item.enIndustry ? item.enIndustry : '暂无信息'">1</span>
+          </p>
+        </div>
+        <div class="select_btn" v-html="isInFrame ? '+ 添加为供应商' : '+ 查看更多'" @mouseleave="hasJump = false" @mouseenter="hasJump = true" @click="addResource(item.enUU)"></div>
+      </li>
+    </ul>
+    <div style="float: right;">
+      <page :total="list.totalElements" :page-size="pageParams.count"
+            :current="pageParams.page" v-on:childEvent="handleCurrentChange">
+      </page>
     </div>
-    <el-dialog
-      title="提示"
-      :visible.sync="hasDialog ">
-      <div class="form_dialog">
-        <p><span>供应商正在完善产品信息，</span>暂时不能查看更多。 </p>
-      </div>
-      <span slot="footer" class="dialog-footer">
+  </div>
+  <el-dialog
+    title="提示"
+    :visible.sync="hasDialog ">
+    <div class="form_dialog">
+      <p><span>供应商正在完善产品信息，</span>暂时不能查看更多。 </p>
+    </div>
+    <span slot="footer" class="dialog-footer">
         <a type="button" @click="hasDialog=false">我知道了</a>
       </span>
-    </el-dialog>
-  </div>
+  </el-dialog>
 </div>
 </template>
 
@@ -75,7 +68,7 @@
         hasJump: false,
         searchCode: '',
         pageParams: {
-          count: 20,
+          count: 10,
           page: 1
         },
         similarUrl: '/search/product/similarKeywords',
@@ -89,23 +82,9 @@
     computed: {
       list () {
         return this.$store.state.supplier.merchant.merchant.data
-      },
-      all () {
-        let count = this.$store.state.supplier.merchant.merchantAll.data
-        let supplierCount = count.content ? count.totalElements + '' : '00000'
-        return this.formatNumber(supplierCount, 5)
       }
     },
     methods: {
-      // 供应商数字格式转换
-      formatNumber (num, key) {
-        let count = ('00000' + num).substr(-key)
-        let _arr = []
-        for (var i = 0; i < count.length; i++) {
-          _arr.push(count[i])
-        }
-        return _arr
-      },
       addResource (id) {
         if (this.isInFrame) {
           this.$http.get(`/basic/enterprise /${id}/info`)
@@ -159,10 +138,10 @@
 
 <style type="text/scss" lang="scss">
 .merchant{
-  background: #ecf1f1 url(/images/supplier/banner.jpg)no-repeat;
-  border-top:3px solid #000;
   padding-bottom:25px;
-  margin-top:-1.5em;
+  border-radius:5px;
+  overflow:hidden;
+  background: #fff;
   .el-dialog{
     width: 290px!important;
     .el-dialog__header{
@@ -207,72 +186,26 @@
     }
   }
   .top{
-    padding-top:30px;
-    margin-bottom:40px;
+    border-bottom:1px solid #d3d3d3;
     .title{
-      margin:0 auto;
-      text-align: center;
-      width:215px;
-      border-bottom:1px solid #ff5151;
-      color:#fff;
-      padding-bottom: 3px;
-      p{
-        margin:0;
-      }
-      h2{
-        font-size: 32px;
-        margin:0;
-        line-height: 46px;
-      }
-      &:before{
-        content: '';
-        display:block;
-        position:relative;
-        left:55px;
-        top:63px;
-        width:105px;
-        height:1px;
-        background: #ff8a00;
-      }
-      &:after{
-        content: '';
-        display:block;
-        position:relative;
-        left:55px;
-        top:8px;
-        width:105px;
-        height:1px;
-        background: #fff600;
-      }
-    }
-    .count{
-      position: relative;
-      width: 200px;
-      margin: 20px auto;
-      margin-bottom: 0px;
-      .count_num {
-        position:absolute;
-        top: 9px;
-        left: 24px;
-        span {
-          display:inline-block;
-          text-align: center;
-          width: 20px;
-          font-size: 28px;
-          color: #0066e4;
-          font-family: "Microsoft Yahei", "微软雅黑";
-          font-weight: bold;
-        }
+      background: #2496f1;
+      height:35px;
+      line-height: 35px;
+      span{
+        margin-left:10px;
+        font-size: 18px;
+        color:#fff;
       }
     }
     .search{
       float:right;
+      height:50px;
       width:370px;
-      padding-top:50px;
+      padding-top:7px;
       margin-right:10px;
       .btn{
         width:68px;
-        background: #ffa200;
+        background: #2496f1;
         color:#fff;
       }
       .title{
@@ -282,9 +215,7 @@
     }
   }
   .list_info{
-    padding: 0 10px;
-    min-height:300px;
-    margin-bottom:100px;
+    margin-bottom:50px;
     .empty{
       height:418px;
       border:15px solid #c4e9f9;
@@ -301,122 +232,88 @@
       }
     }
     > ul{
-      margin-left:5px;
+      margin:0;
       li{
         position:relative;
+        width:100%;
         vertical-align: top;
-        width:267px;
-        height:115px;
-        border-radius:5px;
-        margin-right:32px;
-        margin-bottom:60px;
-        background: #ffffff;
-        box-shadow: 0 3px 10px rgba(0,0,0,.8);
-        &:nth-child(4n) {
-          margin-right:0;
-        }
-        &:after{
-          content: '';
-          display:block;
-          position:absolute;
-          top:99%;
-          left:50%;
-          z-index:200;
-          width:88px;
-          height:22px;
-          margin-left:-44px;
-          background: url(/images/supplier/icon/bottom_center_img.png)no-repeat;
-        }
-        .has_shop {
-          position:absolute;
-          right:0;
-          top:0;
-          width:68px;
-          height:22px;
-          background: url(/images/supplier/icon/top_right_img.png)no-repeat;
-          color:#fff;
-          font-weight: bold;
-          text-align: center;
-          line-height: 22px;
+        height:112px;
+        padding:15px;
+        border-bottom:1px solid #d3d3d3;
+        .img{
+          position:relative;
+          float:left;
+          width:80px;
+          height:80px;
+          border:1px solid #ccc;
+          img{
+            width:100%;
+            height:100%;
+            vertical-align: top;
+          }
+          .has_shop {
+            position:absolute;
+            left:0;
+            top:0;
+            width:68px;
+            height:22px;
+            background: url(/images/supplier/icon/top_left.png)no-repeat;
+            color:#fff;
+            font-weight: bold;
+            text-align: center;
+            line-height: 22px;
+          }
         }
-        .enterprise_name{
-          padding-top:15px;
-          width:98%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space:nowrap;
-          border-bottom:1px solid #b9def7;
-          font-weight: bold;
-          color:#1891e4;
-          font-size: 18px;
-          line-height: 48px;
-          text-align: center;
+        .content{
+          margin-left:100px;
+          color:#333;
+          padding-top:2px;
+          .enterprise_name{
+            width:690px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space:nowrap;
+            font-weight: bold;
+            color:#333;
+            font-size: 16px;
+            margin:0 0 10px;
+          }
+          p{
+            width:690px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space:nowrap;
+            font-size: 14px;
+            color:#333;
+            margin:0 0 5px;
+            span{
+              &.split_line{
+                margin:0 5px;
+              }
+            }
+          }
         }
         .select_btn{
           position:absolute;
-          bottom:-10px;
-          left:50%;
+          top:40%;
+          right:20px;
           z-index:250;
-          width:56px;
-          height:56px;
-          padding:10px 0;
-          margin-left:-28px;
+          padding:5px 10px;
           text-align: center;
-          line-height: 18px;
           background: #1891e4;
-          border-radius:50%;
           color:#fff;
+          border-radius:3px;
         }
         &:hover{
           cursor:pointer;
-          .popups{
-            top:99%;
-            opacity:1;
-            z-index:100;
-          }
-        }
-        .popups{
-          position:absolute;
-          top:50px;
-          left:0;
-          background: #6c6c6c;
-          width:267px;
-          min-height:20px;
-          padding:20px 15px 5px 10px;
-          transition: all .5s ease;
-          opacity: 0;
-          color:#fff;
-          overflow: hidden;
-          p{
-            float:left;
-            margin: 0 !important;
-            line-height: 18px;
-            max-height:18px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            &:nth-child(2n-1){
-              width:42px;
-            }
-            &:first-child{
-              width:85px;
-            }
-            &:nth-child(2n){
-              width:200px;
-            }
-            &:nth-child(2){
-              width:155px;
-            }
-            &:nth-child(4){
-              max-height:38px;
-              overflow: hidden;
-              white-space:pre-wrap;
-              word-wrap:break-word;
+          box-shadow: 0 0 5px rgba(0,0,0,.8);
+          .content{
+            color:#2496f1;
+            .enterprise_name{
+              color:#2496f1;
             }
-            &:last-child{
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
+            p{
+              color:#2496f1;
             }
           }
         }

pages/applyPurchase/index.vue

@@ -1,21 +1,34 @@
 <template>
   <div class="seek">
-    <publish-apply></publish-apply>
-    <apply-info></apply-info>
-    <!--<apply-footer></apply-footer>-->
-    <business-opportunities id="opportunities"></business-opportunities>
-    <div class="footer"><img  class="img" src="/images/applyPurchase/apply-footer.png"></div>
+    <div class="container">
+      <div class="article">
+        <article-one></article-one>
+        <article-two></article-two>
+        <article-three></article-three>
+        <article-four></article-four>
+      </div>
+      <div class="section">
+        <publish-apply></publish-apply>
+        <apply-info></apply-info>
+        <!--<business-opportunities id="opportunities"></business-opportunities>-->
+        <!--<div class="footer"><img  class="img" src="/images/applyPurchase/apply-footer.png"></div>-->
+      </div>
+    </div>
   </div>
 </template>
 <script>
-  import { ApplyInfo, PublishApply, ApplyFooter, BusinessOpportunities } from '~components/applyPurchase'
+  import { ApplyInfo, PublishApply, ApplyFooter, BusinessOpportunities, ArticleOne, ArticleTwo, ArticleThree, ArticleFour } from '~components/applyPurchase'
   export default {
     layout: 'main',
     components: {
       ApplyInfo,
       PublishApply,
       ApplyFooter,
-      BusinessOpportunities
+      BusinessOpportunities,
+      ArticleOne,
+      ArticleTwo,
+      ArticleThree,
+      ArticleFour
     },
     fetch ({store}) {
       return Promise.all([

pages/mobile/center/vendor/index.vue

@@ -10,7 +10,7 @@
         <img src="/images/mobile/center/vendor/adv.jpg" alt="">
       </div>
       <div class="block-wrap seek-operation">
-        <p><i></i>产品管理</p>
+        <p><i></i>库存管理</p>
         <ul>
           <nuxt-link tag="li" to="/mobile/center/vendor/product?providerType=enterprise">
             <img src="/images/mobile/center/vendor/material.png" alt="">

pages/supplier/index.vue

@@ -1,23 +1,33 @@
 <template>
-  <div class="supplier">
-    <!--<carousel>-->
-      <!--<kind-category @loadchild="loadProductKinds"></kind-category>-->
-    <!--</carousel>-->
-    <banner/>
-    <merchant-view/>
+  <div class="supplier" style="background: #f2f1f1;padding-top:20px; margin-top:-20px;">
+    <div class="container">
+      <div class="article">
+        <article-one></article-one>
+        <article-two></article-two>
+      </div>
+      <div class="section">
+        <banner/>
+        <!--<carousel>-->
+        <!--<kind-category @loadchild="loadProductKinds"></kind-category>-->
+        <!--</carousel>-->
+        <merchant-view/>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
   import { KindCategory, Carousel } from '~components/home'
-  import { MerchantView, Banner } from '~components/supplier'
+  import { MerchantView, Banner, ArticleOne, ArticleTwo } from '~components/supplier'
   export default {
     name: 'SupplierView',
     layout: 'main',
     fetch ({store}) {
       return Promise.all([
-        store.dispatch('supplier/loadVendorList', {page: 1, size: 20}),
+        store.dispatch('supplier/loadVendorList', {page: 1, size: 10}),
         store.dispatch('supplier/loadVendorAll', {page: 1, size: 20}),
+        store.dispatch('supplier/loadNewMerchant', {filter: 'page', size: 10}),
+        store.dispatch('supplier/loadRecommend', {size: 10}),
         store.dispatch('loadBanners', {type: 'home'}),
         store.dispatch('loadProductKinds', { id: 0 })
       ])
@@ -26,7 +36,9 @@
       KindCategory,
       Carousel,
       MerchantView,
-      Banner
+      Banner,
+      ArticleOne,
+      ArticleTwo
     },
     methods: {
       loadProductKinds (id) {

store/supplier.js

@@ -89,5 +89,25 @@ export const actions = {
       }, (err) => {
         commit('material/GET_ENUSER_FAILURE', err)
       })
+  },
+  // 获取新入驻供应商列表
+  loadNewMerchant ({commit}, params = {}) {
+    commit('merchant/REQUEST_NEWMERCHANT')
+    return axios.get(`/api/store-service/stores`, {params})
+      .then(res => {
+        commit('merchant/GET_NEWMERCHANT_SUCCESS', res.data)
+      }, (err) => {
+        commit('merchant/GET_NEWMERCHANT_FAILURE', err)
+      })
+  },
+  // 获取供应商推荐列表
+  loadRecommend ({commit}, params = {}) {
+    commit('merchant/REQUEST_RECOMMEND')
+    return axios.get(`/vendor/introduction/vendor/recommend`, {params})
+      .then(res => {
+        commit('merchant/GET_RECOMMEND_SUCCESS', res.data)
+      }, (err) => {
+        commit('merchant/GET_RECOMMEND_FAILURE', err)
+      })
   }
 }

store/supplier/merchant.js

@@ -1,11 +1,23 @@
 export const state = () => ({
+  // 供应商列表信息
   merchant: {
     fetching: false,
     data: []
   },
+  // 供应商入驻总数
   merchantAll: {
     fetching: false,
     data: []
+  },
+  // 供应商新入驻列表
+  newMerchant: {
+    fetching: false,
+    data: []
+  },
+  // 供应商推荐列表
+  recommend: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -29,5 +41,25 @@ export const mutations = {
   },
   GET_MERCHANTALL_FAILURE (state) {
     state.merchantAll.fetching = false
+  },
+  REQUEST_NEWMERCHANT (state) {
+    state.newMerchant.fetching = true
+  },
+  GET_NEWMERCHANT_SUCCESS (state, result) {
+    state.newMerchant.fetching = false
+    state.newMerchant.data = result
+  },
+  GET_NEWMERCHANT_FAILURE (state) {
+    state.newMerchant.fetching = false
+  },
+  REQUEST_RECOMMEND (state) {
+    state.recommend.fetching = true
+  },
+  GET_RECOMMEND_SUCCESS (state, result) {
+    state.recommend.fetching = false
+    state.recommend.data = result
+  },
+  GET_RECOMMEND_FAILURE (state) {
+    state.recommend.fetching = false
   }
 }