店铺结构调整

assets/scss/common.scss

@@ -741,3 +741,84 @@ img.new-animate{
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+//企业简介查看更多
+.dialog-description{
+  margin:0 auto;
+  width: 100%;
+  text-align: center;
+  div.el-dialog{
+    width: 814px !important;
+    //height: 252px;
+    .el-dialog__header{
+      display: none;
+    }
+    .el-dialog__body {
+      width: 100%;
+      height: 100%;
+      padding: 0!important;
+      .header{
+        overflow: hidden;
+        padding: 0 15px;
+        width: 100%;
+        height: 50px;
+        line-height: 50px;
+        border-bottom: 1px solid #ddd;
+        span:first-child {
+          position: relative;
+          float: left;
+          font-size: 14px;
+          color: #666;
+          font-weight: bold;
+          img{
+            margin-right: 5px;
+          }
+        }
+        span:last-child {
+          float: right;
+          margin-top: 10px;
+          font-size: 32px;
+        }
+      }
+      .content {
+        padding: 15px 0;
+        margin: 0 auto;
+        width: 768px;
+        height: auto;
+        p{
+          text-align: left;
+          font-size: 12px;
+          font-weight: normal;
+          line-height: 19px;
+          letter-spacing: 0;
+          color: #333333;
+        }
+      }
+    }
+  }
+}
+//资质证明
+.certificate {
+  div.el-dialog.el-dialog--tiny{
+    width: 1070px !important;
+   }
+}
+//产品展示分页器
+.recommend-fragment {
+  background: #fff;
+  .swiper-pagination {
+    bottom: 8px!important;
+    li.swiper-pagination-bullet{
+      width: 8px!important;
+      height: 8px!important;
+      display: inline-block;
+      border-radius: 100%;
+      background: #9c9c9c !important;
+      opacity: 0.2;
+    }
+    li.swiper-pagination-bullet.swiper-pagination-bullet-active{
+      width: 10px!important ;
+      height: 10px!important ;
+      background-color: #4d4d4d!important ;
+    }
+  }
+}

components/store/home/CommodityList.vue

@@ -119,7 +119,7 @@
             </td>
           </tr>
           <tr class="active-empty" v-if="!commodities.content || commodities.content.length == 0">
-            <td colspan="10">
+            <td colspan="10" style="height: 880px;">
               <div class="text-center">
                 <div class="col-xs-offset-3 col-xs-2">
                   <img src="/images/brandList/empty-cart.jpg">
@@ -135,11 +135,11 @@
           </tr>
           </tbody>
         </table>
-        <div class="remind-area">
-          <img src="/images/store/store-reminds.png" alt="">
-          所有报价、库存信息的真实性及准确性均由店铺负责，如有疑问请点击
-          <a @click="goLink" class="link-seller">联系卖家</a>
-        </div>
+        <!--<div class="remind-area">-->
+          <!--<img src="/images/store/store-reminds.png" alt="">-->
+          <!--所有报价、库存信息的真实性及准确性均由店铺负责，如有疑问请点击-->
+          <!--<a @click="goLink" class="link-seller">联系卖家</a>-->
+        <!--</div>-->
         <div style="float: right;margin-right: 12px;">
           <page :total="commodities.totalElements" :page-size="pageParams.count"
                 :current="pageParams.page" @childEvent="handleCurrentChange"></page>
@@ -190,7 +190,7 @@
         },
         pageParams: {
           page: 1,
-          count: 6
+          count: 10
         },
         searchCode: '',
         parentKindId: 0,
@@ -544,7 +544,7 @@
     /*margin-left: 3px;*/
     float: left;
     /*margin-bottom: 30px;*/
-    background: #fff;
+    /*background: #fff;*/
     margin: 0 auto 24px;
   }
 
@@ -788,9 +788,8 @@
     margin-bottom: 24px;
   }
   .remind-area {
-    font-size: 12px;
-    color: #666;
-    padding-left: 12px;
+    position: absolute;
+    top: 1005px;
   }
   .remind-area img {
     margin-right: 12px;
@@ -818,5 +817,8 @@
     border-color: #5078cb !important;
     background-color: #5078cb !important;
   }
+  #goods-list-fragment .goods-area div>.page-wrap{
+    margin: 0;
+  }
 </style>
 

components/store/home/EnterpriseInfo.vue

@@ -35,12 +35,12 @@
               </div>-->
             </div>
             <div class="introduce">
-              <div><h4>企业简介</h4><span>查看更多 <img src="/images/store/home/angle-right.png"></span></div>
+              <div><h4>企业简介</h4><span @click="dialogVisible = true">查看更多 <img src="/images/store/home/angle-right.png"></span></div>
               <p v-if="storeInfo.enterprise.description">{{storeInfo.enterprise.description}}</p>
               <p v-else class="empty-introduce">暂无简介</p>
             </div>
             <div class="introduce qualification">
-              <div><h4 class="prof">资质证明</h4><span>查看更多 <img src="/images/store/home/angle-right.png"></span></div>
+              <div><h4 class="prof">资质证明</h4><span @click="dialogCertificate = true">查看更多 <img src="/images/store/home/angle-right.png"></span></div>
               <!--<qualification-certificate></qualification-certificate>-->
             </div>
             <div class="product-show">
@@ -55,7 +55,38 @@
           </div>
         </li>
       </ul>
+      <div class="remind-area">
+        <img src="/images/store/store-reminds.png" alt="">
+        所有报价、库存信息的真实性及准确性均由店铺负责，如有疑问请点击
+        <a @click="goLink" class="link-seller">联系卖家</a>
+      </div>
     </div>
+    <!--企业简介-->
+    <el-dialog class="dialog-description"
+               :visible.sync="dialogVisible"
+               size="tiny">
+      <div>
+        <div class="header">
+          <span><img src="/images/store/home/blue.png">企业简介</span>
+          <span class="close" @click="dialogVisible = false">&times;</span>
+        </div>
+        <div class='content'>
+          <p v-if="storeInfo.enterprise.description">{{storeInfo.enterprise.description}}</p>
+          <p v-else class="empty-introduce">暂无简介</p>
+        </div>
+      </div>
+    </el-dialog>
+    <!--资质证明-->
+    <el-dialog class="dialog-description certificate"
+               :visible.sync="dialogCertificate"
+               size="tiny">
+      <div>
+        <div class="header">
+          <span><img src="/images/store/home/blue.png">资质证明</span>
+          <span class="close" @click="dialogCertificate = false">&times;</span></div>
+        <div class="content" style="height: 270px; width: 1070px; padding: 0 50px;"><qualification-certificate></qualification-certificate></div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -65,6 +96,12 @@
   import QualificationCertificate from './QualificationCertificate.vue'
   export default {
     name: 'product-recommend-self',
+    data () {
+      return {
+        dialogVisible: false,
+        dialogCertificate: false
+      }
+    },
     components: {
       RecommendList,
       Buy,
@@ -105,6 +142,10 @@
       }
     },
     methods: {
+      // 联系卖家
+      goLink: function () {
+        this.baseUtils.goLinkUser(this, this.storeInfo.enUU)
+      },
       buyNow: function (isBuy, item) {
         if (!this.$store.state.option.user.logged) {
           this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
@@ -260,8 +301,10 @@
     background: #ece9ec;
     margin:-18px 0px 0 0px;
     .recommend-product {
+      position: relative;
       width: 1190px;
       margin: 0 auto;
+      padding-bottom: 30px;
       .main-list {
         width: 100%;
         /*overflow: hidden;*/
@@ -282,7 +325,7 @@
             .information-list {
               font-size: 12px;
               color: #333;
-              background: #fff;
+              /*background: #fff;*/
             &:first-child{
                padding-top: 10px;
              }
@@ -329,6 +372,7 @@
                   padding-right: 5px;
                   font-size: 12px;
                   color: #3c7df5;
+                  cursor: pointer;
                   img{
                     margin-top: -3px;
                   }

components/store/home/QualificationCertificate.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="brand-content-list">
       <ul class="list-unstyled list-inline">
-        <li class="store-box"  v-if="storeInfo.qualifications || storeInfo.qualifications.length !== 0" v-for="(store, index) in storeInfo.qualifications.slice(0,5)">
+        <li class="store-box"  v-if="storeInfo.qualifications || storeInfo.qualifications.length !== 0" v-for="(store, index) in storeInfo.qualifications.slice(0,6)">
           <div><img :src="store.resourceUrl.indexOf('.pdf')>0?'/images/store/common/pdf.jpg':store.resourceUrl"/></div>
           <a @click="showImg(store.resourceUrl)"><div class="Open"><i class="fa fa-search"></i>&nbsp;&nbsp;查看</div></a>
         </li>
@@ -204,19 +204,18 @@
     width: 100%;
     .list-inline {
       width: 100%;
-      max-height: 388px;
       margin: 0;
-      /*margin: 0 auto;*/
-      overflow-y: auto;
-      padding-bottom: 16px;
+      overflow: hidden;
       .store-box {
-        width: 158px;
-        height: 200px;
+        width: 154px;
+        height: 217px;
         text-align: center;
         vertical-align: middle;
-        margin: 16px auto 0;
+        margin: 35px auto 0;
         display: block;
         position: relative;
+        float: left;
+        margin-right: 48px;
         &:hover{
           div:last-child {
             display: block;
@@ -251,6 +250,9 @@
             }
           }
         }
+      &:last-child{
+        margin-right: 0;
+       }
       }
       .active-empty{
         width: 100%;

components/store/home/RecommendList.vue

@@ -2,11 +2,57 @@
   <div class="wrap">
     <div class="reco-title">产品展示</div>
     <div class="recommend-fragment clearfix">
-      <ul class="recommend-list clearfix">
-        <li v-for="commodity in commodities" class="big">
-          <div v-swiper:mySwiper="swiperOption">
-            <div class="swiper-wrapper">
-              <div class="swiper-slide">
+      <div v-if="!commodities || commodities.length === 0" class="empty-show">
+        <div class="empty">
+          <div class="empty-img">
+            <img src="/images/brandList/empty-cart.jpg">
+          </div>
+          <div class="empty-info">
+            <p class="grey f16"> 暂无展示产品</p>
+            <i class="iconfont" v-if="emptyShow === false">&#xe610;</i>&nbsp;<a v-if="emptyShow === false" href="/">返回首页</a>
+            <img v-if="emptyShow === true" src="/images/brandList/upload.png">&nbsp;<a v-if="emptyShow === true" href="/vendor#/store/maintain" target="_blank">马上去上传</a>
+          </div>
+        </div>
+      </div>
+      <div v-swiper:mySwiper="swiperOption" v-if="commodities || commodities.length>0">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide" v-if="commodities.length>0">
+            <ul class="recommend-list clearfix">
+              <li v-for="commodity in commodities.slice(0,3)" class="big">
+                <a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">
+                  <div class="img">
+                    <img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>
+                  </div>
+                  <div class="content">
+                    <p>{{commodity.comCode | comCodeFilter}}</p>
+                    <!-- <p class="color666" v-text="commodity.brandNameCn">PANFAEFQ</p>-->
+                    <p class="price" v-if="commodity.minPriceRMB">¥ {{commodity.minPriceRMB | currency}}</p>
+                    <!-- <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>-->
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="swiper-slide" v-if="commodities.length>=3">
+            <ul class="recommend-list clearfix">
+              <li v-for="commodity in commodities.slice(3,6)" class="big">
+                <a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">
+                  <div class="img">
+                    <img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>
+                  </div>
+                  <div class="content">
+                    <p>{{commodity.comCode | comCodeFilter}}</p>
+                    <!-- <p class="color666" v-text="commodity.brandNameCn">PANFAEFQ</p>-->
+                    <p class="price" v-if="commodity.minPriceRMB">¥ {{commodity.minPriceRMB | currency}}</p>
+                    <!-- <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>-->
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="swiper-slide" v-if="commodities.length>=6">
+            <ul class="recommend-list clearfix">
+              <li v-for="commodity in commodities.slice(6,9)" class="big">
                 <a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">
                   <div class="img">
                     <img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>
@@ -18,39 +64,29 @@
                     <!-- <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>-->
                   </div>
                 </a>
-              </div>
-            </div>
-            <div class="swiper-pagination swiper-pagination-bullets"></div>
+              </li>
+            </ul>
           </div>
-          <!--<a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">-->
-            <!--<div class="img">-->
-              <!--<img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>-->
-            <!--</div>-->
-            <!--<div class="content">-->
-              <!--<p>{{commodity.comCode | comCodeFilter}}</p>-->
-              <!--&lt;!&ndash; <p class="color666" v-text="commodity.brandNameCn">PANFAEFQ</p>&ndash;&gt;-->
-              <!--<p class="price" v-if="commodity.minPriceRMB">¥ {{commodity.minPriceRMB | currency}}</p>-->
-              <!--&lt;!&ndash; <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>&ndash;&gt;-->
-            <!--</div>-->
-          <!--</a>-->
-          <!--<div class="enter-store">-->
-            <!--<a @click="buyNow(false, commodity)">加入购物车</a>-->
-            <!--<a @click="buyNow(true, commodity)">立即购买</a>-->
-          <!--</div>-->
-        </li>
-        <li v-if="!commodities || commodities.length === 0" class="empty-show">
-          <div class="empty">
-            <div class="empty-img">
-              <img src="/images/brandList/empty-cart.jpg">
-            </div>
-            <div class="empty-info">
-              <p class="grey f16"> 暂无展示产品</p>
-              <i class="iconfont" v-if="emptyShow === false">&#xe610;</i>&nbsp;<a v-if="emptyShow === false" href="/">返回首页</a>
-              <img v-if="emptyShow === true" src="/images/brandList/upload.png">&nbsp;<a v-if="emptyShow === true" href="/vendor#/store/maintain" target="_blank">马上去上传</a>
-            </div>
+          <div class="swiper-slide" v-if="commodities.length>=9">
+            <ul class="recommend-list clearfix">
+              <li v-for="commodity in commodities.slice(9,12)" class="big">
+                <a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">
+                  <div class="img">
+                    <img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>
+                  </div>
+                  <div class="content">
+                    <p>{{commodity.comCode | comCodeFilter}}</p>
+                    <!-- <p class="color666" v-text="commodity.brandNameCn">PANFAEFQ</p>-->
+                    <p class="price" v-if="commodity.minPriceRMB">¥ {{commodity.minPriceRMB | currency}}</p>
+                    <!-- <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>-->
+                  </div>
+                </a>
+              </li>
+            </ul>
           </div>
-        </li>
-      </ul>
+        </div>
+        <div class="swiper-pagination swiper-pagination-bullets"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -158,87 +194,6 @@
       }
     },
     methods: {
-      buyNow: function (isBuy, item) {
-        if (!this.$store.state.option.user.logged) {
-          this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
-            if (response.data) {
-              window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
-            }
-          })
-        } else {
-          if (item) {
-            if (isBuy) {
-              this.$http.post('/trade/order/buyNow', [{
-                uuid: item.comUuid,
-                batchCode: item.batchCode,
-                number: item.minBuyQty,
-                storeid: item.storeId,
-                storeUuid: item.storeUuid,
-                currencyName: item.currency,
-                minPackQty: item.minPackQty ? item.minPackQty : item.minBuyQty
-              }])
-                .then(response => {
-                  if (response.data.success) {
-                    if (response.data.message) {
-                      this.$message({
-                        message: response.data.message,
-                        type: 'success'
-                      })
-                      window.setTimeout(function () {
-                        window.location.href = '/user#/order/pay/' + this.baseUtils.enidfilter(response.data.data.orderid)
-                      }, 1000)
-                    } else {
-                      window.location.href = '/user#/order/pay/' + this.baseUtils.enidfilter(response.data.data.orderid)
-                    }
-                  } else {
-                    if (response.data.data && response.data.data.unvailable === 1) {
-                      this.$message.error('产品信息已失效，请刷新界面')
-                    } else {
-                      this.$message.error(response.data.message)
-                    }
-                  }
-                }, err => {
-                  console.log(err)
-                  if (item.minBuyQty > item.reserve) {
-                    this.$message.error('商品' + item.code + '的库存已经不满足最小起订量')
-                  }
-                })
-            } else {
-              // this.$store.dispatch('user/addCar', {uuid: item.uuid, batchCode: item.batchCode, number: item.minBuyQty})
-              this.$http.post('/trade/cart/add', {
-                uuid: item.comUuid,
-                batchCode: item.batchCode,
-                number: item.minBuyQty,
-                storeid: item.storeId,
-                storeUuid: item.storeUuid,
-                currencyName: item.currency,
-                minPackQty: item.minPackQty ? item.minPackQty : item.minBuyQty
-              })
-                .then(response => {
-                  if (response.data.success) {
-                    if (response.data.message) {
-                      this.$message({
-                        message: '添加购物车成功，但商品信息有更新',
-                        type: 'success'
-                      })
-                    } else {
-                      this.$message({
-                        message: '添加购物车成功',
-                        type: 'success'
-                      })
-                    }
-                  } else {
-                    if (response.data.code === 2) {
-                      this.$message.error(response.data.message + '，请刷新页面')
-                    } else {
-                      this.$message.error(response.data.message)
-                    }
-                  }
-                })
-            }
-          }
-        }
-      },
       enidfilter: function (str) {
         if (str) {
           let encryptStr = '' // 最终返回的加密后的字符串
@@ -331,9 +286,39 @@
   }
   .recommend-fragment {
     background: #fff;
+    .empty-show{
+      height: 389px;
+      padding-top: 140px;
+      &:hover{
+         box-shadow: 0px 0px 0px transparent;
+       }
+        .empty{
+          margin: 0 auto;
+          width: 181px;
+          .empty-img{
+            float: left;
+          }
+          .empty-info{
+            float: left;
+            margin: 5px 0px 0px 20px;
+          .grey{
+            color: #999;
+            font-size: 14px;
+          }
+          i{
+            color: #5078cb;
+          }
+          a{
+            font-size: 14px;
+            color: #5078cb;
+          }
+         }
+        }
+    }
   }
   .recommend-fragment ul{
     width: 100%;
+    height: 368px;
     background: #fff;
    /* display: inline-block;*/
     -webkit-padding-start: 0;
@@ -344,12 +329,12 @@
   }
   .recommend-fragment ul li
     .img{
-      height: 90px;
+      height: 42px;
       text-align: center;
-      line-height: 90px;
+      line-height: 42px;
       img{
-        max-width: 80px;
-        max-height: 80px;
+        max-width: 63px;
+        max-height: 42px;
       }
   }
   .recommend-fragment ul li .content{
@@ -364,7 +349,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      margin-bottom: 0;
+      margin: 5px 0;
       padding-left: 10px;
       color: #666;
       &.price{
@@ -409,7 +394,7 @@
   .recommend-fragment ul li.big {
     float: left;
     width: 190px;
-    height: 174px;
+    height: 115px;
     position: relative;
     overflow: hidden;
     margin: 2px 3px 0px 0px;
@@ -424,9 +409,9 @@
         transition: all .3s linear;
       }
       .img, .content{
-        transform:translate(0px,-10px);
-        -ms-transform:translate(0px,-10px); /* IE 9 */
-        -webkit-transform:translate(0px,-10px); /* Safari and Chrome */
+        /*transform:translate(0px,-10px);*/
+        /*-ms-transform:translate(0px,-10px); !* IE 9 *!*/
+        /*-webkit-transform:translate(0px,-10px); !* Safari and Chrome *!*/
       }
     }
   }