店铺结构调整

components/store/home/CommodityList.vue

@@ -136,7 +136,7 @@
           </tbody>
         </table>
         <div class="remind-area">
-          <img src="/images/store/store-remind.png" alt="">
+          <img src="/images/store/store-reminds.png" alt="">
           所有报价、库存信息的真实性及准确性均由店铺负责，如有疑问请点击
           <a @click="goLink" class="link-seller">联系卖家</a>
         </div>
@@ -400,7 +400,7 @@
     width: 965px;
     padding: 0;
     /*height: 738px;*/
-    background: #fff;
+    background: #ece9ec;
   }
 
   /*  产品分类调整*/
@@ -593,11 +593,13 @@
   #goods-list-fragment .sendprove {
     width: 110px;
     height: 28px;
-    color: #fff;
-    background-color: #ff9000;
+    color: #3b7cf4;
+    font-size: 14px;
+    background-color: #fff;
     border-radius: 3px;
     float: right;
-    margin-left: 10px
+    margin-left: 10px;
+    border: 1px solid #3b7cf4;
   }
   .btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus {
     outline: none;
@@ -717,12 +719,12 @@
 
   /* 物品列表按钮 */
   #goods-list-fragment .btn-buy-now {
-    background-color: #ffa422;
+    background-color: #3c7cf5;
     color: #fff;
     width: 80px;
     height: 24px;
     font-size: 12px;
-    border: 1px solid #ffa422;
+    border: 1px solid #3c7cf5;
     border-radius: 2px;
   }
 
@@ -799,7 +801,7 @@
     line-height: 20px;
     height: 20px;
     padding: 0 7px;
-    background: #ef7f03;
+    background: #3c7cf7;
     border-radius: 2px;
   }
   @font-face {

components/store/home/EnterpriseInfo.vue

@@ -4,47 +4,52 @@
       <ul class="main-list clearfix">
         <li>
           <div>
-            <div class="information-list">
-              <div>主营产品&nbsp;:</div>
-              <div v-if="storeInfo.description" :title="storeInfo.description">{{storeInfo.description | introduceFilter}}</div>
-              <div v-else>—</div>
+            <div class="list">
+              <div class="information-list">
+                <div>主营产品&nbsp;:</div>
+                <div v-if="storeInfo.description" :title="storeInfo.description">{{storeInfo.description | introduceFilter}}</div>
+                <div v-else>—</div>
+              </div>
+              <div class="information-list">
+                <div>应用领域&nbsp;:</div>
+                <div v-if="storeInfo.storeApplication" :title="storeInfo.storeApplication">{{storeInfo.storeApplication | introduceFilter}}</div>
+                <div v-else>—</div>
+              </div>
+              <div class="information-list">
+                <div>电话&nbsp;:</div><div>{{storeInfo.enterprise.enTel || '—'}}</div>
+              </div>
+              <div class="information-list">
+                <div>传真&nbsp;:</div><div>{{storeInfo.enterprise.enFax || '—'}}</div>
+              </div>
+              <div class="information-list">
+                <div>手机&nbsp;:</div><div>{{storeInfo.enterprise.enPhone || '—'}}</div>
+              </div>
+              <div class="information-list">
+                <div>微信&nbsp;:</div><div>{{storeInfo.enterprise.enWeixin || '—'}}</div>
+              </div>
+              <div class="information-list" style="padding-bottom: 10px;">
+                <div>Q Q&nbsp;:</div><div>{{storeInfo.enterprise.enQQ || '—'}}</div>
+              </div>
+              <!--<div class="information-list">
+                <div>资质审核&nbsp;:</div><div>营业执照&nbsp;&nbsp;<img src="/images/store/home/logo-qualification.jpg"></div>
+              </div>-->
             </div>
-            <div class="information-list">
-              <div>应用领域&nbsp;:</div>
-              <div v-if="storeInfo.storeApplication" :title="storeInfo.storeApplication">{{storeInfo.storeApplication | introduceFilter}}</div>
-              <div v-else>—</div>
-            </div>
-            <div class="information-list">
-              <div>电话&nbsp;:</div><div>{{storeInfo.enterprise.enTel || '—'}}</div>
-            </div>
-            <div class="information-list">
-              <div>传真&nbsp;:</div><div>{{storeInfo.enterprise.enFax || '—'}}</div>
-            </div>
-            <div class="information-list">
-              <div>手机&nbsp;:</div><div>{{storeInfo.enterprise.enPhone || '—'}}</div>
-            </div>
-            <div class="information-list">
-              <div>微信&nbsp;:</div><div>{{storeInfo.enterprise.enWeixin || '—'}}</div>
-            </div>
-            <div class="information-list">
-              <div>Q Q&nbsp;:</div><div>{{storeInfo.enterprise.enQQ || '—'}}</div>
-            </div>
-            <!--<div class="information-list">
-              <div>资质审核&nbsp;:</div><div>营业执照&nbsp;&nbsp;<img src="/images/store/home/logo-qualification.jpg"></div>
-            </div>-->
             <div class="introduce">
-              <h4>企业简介</h4>
+              <div><h4>企业简介</h4><span>查看更多 <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">
-              <h4>资质证明</h4>
-              <qualification-certificate></qualification-certificate>
+            <div class="introduce qualification">
+              <div><h4 class="prof">资质证明</h4><span>查看更多 <img src="/images/store/home/angle-right.png"></span></div>
+              <!--<qualification-certificate></qualification-certificate>-->
+            </div>
+            <div class="product-show">
+              <recommend-list></recommend-list>
             </div>
           </div>
         </li>
         <li>
-          <div style="width: 966px; margin-left: 3px;">
+          <div style="width: 962px; margin-left: 3px;">
             <!--<recommend-list></recommend-list>-->
             <commodity-list></commodity-list>
           </div>
@@ -55,13 +60,13 @@
 </template>
 <script>
   import Buy from '~components/common/buyOrCar/buyComponent.vue'
-//  import RecommendList from './RecommendList.vue'
+  import RecommendList from './RecommendList.vue'
   import CommodityList from './CommodityList.vue'
   import QualificationCertificate from './QualificationCertificate.vue'
   export default {
     name: 'product-recommend-self',
     components: {
-//      RecommendList,
+      RecommendList,
       Buy,
       CommodityList,
       QualificationCertificate
@@ -263,51 +268,79 @@
         > li {
           position: relative;
           float: left;
+          width: 962px;
+          margin-left: 5px;
           &:first-child {
             width: 218px;
             /*height: 356px;*/
-            background: #fff;
-            padding-top: 20px;
+            /*background: #fff;*/
+            margin: -5px 0 0 1px;
             border-radius: 5px;
+           .list{
+             border-radius: 5px;
+             background: #fff;
             .information-list {
               font-size: 12px;
               color: #333;
-              div:first-child {
-                width: 72px;
-                text-align: right;
-                line-height: 20px;
-              }
-              div:last-child {
-                width: 158px;
-                line-height: 20px;
-                padding: 0px 10px 0px 6px;
-              }
+              background: #fff;
+            &:first-child{
+               padding-top: 10px;
+             }
+            div:first-child {
+              width: 72px;
+              text-align: right;
+              line-height: 20px;
+            }
+            div:last-child {
+              width: 158px;
+              line-height: 20px;
+              padding: 0px 10px 0px 6px;
             }
-            .information-list > div {
-              display: table-cell;
             }
+            .information-list > div {
+    display: table-cell;
+  }
+           }
             .introduce {
+              margin-top: 10px;
               width: 100%;
               min-height: 188px;
               font-size: 12px;
               line-height: 15px;
               color: #333;
-              h4 {
-                background: url("/images/store/home/detail1.png") no-repeat 6% 10%;
-                font-size: 14px;
-                padding: 0px 0px 5px 30px;
-                margin:10px 0px;
+              background: #fff;
+              border-radius: 5px;
+              div{
+                overflow: hidden;
+                height: 35px;
+                h4 {
+                  float: left;
+                  background: url(/images/store/home/detail1.png) no-repeat 15% 10%;
+                  font-size: 14px;
+                  padding: 0 0 5px 30px;
+                  margin:10px 0;
+                }
+                h4.prof {
+                  background: url("/images/store/home/prof.png") no-repeat 15% 10%;
+                }
+                span{
+                  float: right;
+                  margin-top: 10px;
+                  padding-right: 5px;
+                  font-size: 12px;
+                  color: #3c7df5;
+                  img{
+                    margin-top: -3px;
+                  }
+                }
               }
               p {
                 margin: -7px 0px 0px 15px;
                 text-indent: 2em;
-                overflow-y: auto;
-                overflow-x: hidden;
                 width: 200px;
                 line-height: 19px;
-                max-height: 153px;
-                word-break:break-all;
-                word-wrap:break-word;
+                height: 308px;
+                overflow: hidden;
               }
               .empty-introduce{
                 text-align: center;
@@ -315,6 +348,10 @@
                 color: #666;
               }
             }
+            .qualification {
+              height: 35px;
+              min-height: 35px;
+            }
           }
         }
       }

components/store/home/RecommendList.vue

@@ -1,26 +1,42 @@
 <template>
   <div class="wrap">
-    <div class="reco-title container">
-      <span>产品展示</span>
-    </div>
-    <div class="recommend-fragment container clearfix">
+    <div class="reco-title">产品展示</div>
+    <div class="recommend-fragment clearfix">
       <ul class="recommend-list clearfix">
         <li v-for="commodity in commodities" 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 v-swiper:mySwiper="swiperOption">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide">
+                <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>
+              </div>
             </div>
-          </a>
-          <div class="enter-store">
-            <a @click="buyNow(false, commodity)">加入购物车</a>
-            <a @click="buyNow(true, commodity)">立即购买</a>
+            <div class="swiper-pagination swiper-pagination-bullets"></div>
           </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">
@@ -35,7 +51,6 @@
           </div>
         </li>
       </ul>
-      <div class="shadow"><img src="/images/store/common/shadow.png"></div>
     </div>
   </div>
 </template>
@@ -76,6 +91,21 @@
           loggedStatus = false
         }
         return loggedStatus
+      },
+      // 产品推荐轮播
+      swiperOption () {
+        return {
+          autoplay: 5000,
+          initialSlide: 0,
+          loop: true,
+          effect: this.effect,
+          lazyLoading: true,
+          // 解决点击分页器后图片就不能轮播的问题
+          autoplayDisableOnInteraction: false,
+          pagination: '.swiper-pagination',
+          paginationClickable: true,
+          paginationElement: 'li'
+        }
       }
     },
     filters: {
@@ -282,23 +312,21 @@
 <style lang="scss" scoped>
   .wrap {
     background: #ece9ec;
-    padding-top: 15px;
-    padding-bottom: 30px;
+    padding-top: 7px;
+    width: 100%;
+    height: 409px;
     .reco-title {
       border-bottom: 1px solid #3975f4;
-      span {
-        display: inline-block;
-        width: 156px;
-        height: 33px;
-        line-height: 33px;
-        color: #fff;
-        background: #3975f4;
-        font-size: 18px;
-        text-align: center;
-        border-top-left-radius: 3px;
-        border-top-right-radius: 3px;
-        margin: 0;
-      }
+      width: 218px;
+      height: 34px;
+      line-height: 34px;
+      color: #fff;
+      background: #3975f4;
+      font-size: 18px;
+      text-align: center;
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+      margin: 0;
     }
   }
   .recommend-fragment {

components/store/home/StoreBanner.vue

@@ -367,8 +367,8 @@ export default {
         margin-left: 12px;
         border-radius: 3px;
         &:first-child {
-          background: #bd0505;
-          border: 1px solid #bd0505;
+          background: #3b7cf4;
+          border: 1px solid #3b7cf4;
           color: #fff;
         }
         &.focus{
@@ -376,9 +376,9 @@ export default {
           border: 1px solid #c1c1c1;
         }
         &:last-child {
-          background: #3c7cf7;
+          background: #fff;
           border: 1px solid #3c7cf7;
-          color: #fff;
+          color: #3b7cf4;
         }
       }
     }

pages/store/_uuid/index.vue

@@ -69,13 +69,13 @@ export default {
         <store-banner></store-banner>
       </div>
       <enterprise-info></enterprise-info>
-      <recommend-list></recommend-list>
+      <!--<recommend-list></recommend-list>-->
       <!--<certificate></certificate>-->
   </div>
 </template>
 <script>
 //  import axios from '~plugins/axios'
-  import { EnterpriseInfo, StoreBanner, RecommendList } from '~components/store'
+  import { EnterpriseInfo, StoreBanner } from '~components/store'
   export default {
     layout: 'main',
     data () {
@@ -98,7 +98,7 @@ export default {
       return Promise.all([
         store.dispatch('shop/findStoreInfoFromUuid', params),
         store.dispatch('shop/findRecommendProducts', params),
-        store.dispatch('shop/pageCommoditiesOfStore', params.uuid, { page: 1, count: 6 }),
+        store.dispatch('shop/pageCommoditiesOfStore', params.uuid, { page: 1, count: 10 }),
         store.dispatch('loadStoreStatus', { op: 'check' })
 
       ])
@@ -110,8 +110,8 @@ export default {
     components: {
 //      Certificate,
       EnterpriseInfo,
-      StoreBanner,
-      RecommendList
+      StoreBanner
+      // RecommendList
     }
   }
 </script>

store/shop.js

@@ -68,7 +68,7 @@ export const actions = {
         commit('recommend/GET_PRODUCTS_FAILURE', err)
       })
   },
-  pageCommoditiesOfStore ({ commit }, uuid = '', pageParams = { page: 1, count: 6 }, code) {
+  pageCommoditiesOfStore ({ commit }, uuid = '', pageParams = { page: 1, count: 10 }, code) {
     let params = { storeid: uuid, origin: 'store', code: code }
     params.page = pageParams.page
     params.count = pageParams.count