供应商商铺首页-main product

src/main/resources/static/css/base/base.pc.css

@@ -172,7 +172,7 @@ body{min-width:1184px;}
 .productItem .btnBox{display:none;position:absolute;width:284px;height:68px;background:#FEF6F3;text-align:center;bottom:0;left:0}
 .productItem .item:hover .btnBox{display:block}
 .productItem .item:hover .name span{color: #e15616;}
-.productItem .item:hover{box-shadow:0px 2px 6px #dedede;}
+.productItem .item:hover{box-shadow:0px 2px 6px #dedede;-moz-transition: all 0.5s;-webkit-transition:all 0.5s;transition:all 0.3s;-webkit-transform:translate3d(0,-2px,0);transform:translate3d(0,-2px,0);}
 .productItem .btn{display:block;width:158px;margin:12px auto;height:42px;line-height:42px;text-align:center;overflow:hidden;color:#F94B4B;background:#FFE6DC;border:1px solid #E15616;border-radius:2px}
 .productItem .btn.add{color:#E15616;}
 .productItem .btn:hover{background:#E15616;color:#FFF}

src/main/resources/static/css/supplier/index.css

@@ -31,8 +31,8 @@ li{list-style:none}
 .supplierInfo .tabTit span{display:inline-block;box-sizing:border-box;min-width:130px;text-align:center;height:100%;padding:0 32px;cursor:pointer}
 .supplierInfo .tabTit span:hover{color:#E15621}
 .supplierInfo .tabTit span.on,.supplierInfo .tabTit span.on:hover{background:#E15621;color:#FFF}
-.supplierInfo .tabCon{width:100%;background:#FFF;}
-.supplierInfo .infoBox{box-sizing:border-box;padding:16px;font-size:16px;line-height:22px;color:#4A4F58}
+.supplierInfo .tabCon{width:100%;}
+.supplierInfo .infoBox{box-sizing:border-box;padding:16px;font-size:16px;line-height:22px;color:#4A4F58;background:#FFF;}
 .supplierInfo .infoBox .part{margin-top:30px}
 .supplierInfo .infoBox .part:first-child{margin-top:0}
 .supplierInfo .infoBox .title{height:24px;line-height:24px;padding-left:10px;border-left:4px solid #E15616;font-size:24px;color:#4A4F58;font-weight:bold;text-align:left;margin-bottom:20px}
@@ -42,6 +42,10 @@ li{list-style:none}
 .supplierInfo .infoBox .cont{text-indent:2em;text-align:justify}
 .supplierInfo .infoBox .photo img{width:240px;height:180px}
 .supplierInfo .infoBox p{margin:5px 0}
+.supplierInfo .productBox{box-sizing:border-box;width:100%;overflow:hidden;}
+.supplierInfo .productList{width:1200px;margin-left:-8px;margin-bottom:18px;}
+.supplierInfo .productBox .title{color:#4A4F58;font-size:20px;height:54px;line-height:54px}
+
 
 
 }
@@ -67,21 +71,24 @@ li{list-style:none}
 .supplierTit .search input{border:none;outline:none;width:100%;height:9.6vw;line-height:9.2vw;font-size:3.7vw;color:#4A4F58;text-indent:2.6vw}
 .supplierTit .searchBtn{position:absolute;right:1.2vw;top:0}
 .supplierTit .searchBtn:before{content:'';display:block;width:9.6vw;height:9.6vw;background-position:33% -1%}
-.supplierInfo{background:#FFF;margin-bottom: 2.7vw;}
-.supplierInfo .tabTit{padding:1.5vw 3.3vw;position:relative;}
+.supplierInfo{margin-bottom: 2.7vw;}
+.supplierInfo .tabTit{padding:1.5vw 3.3vw;background:#FFF;position:relative;}
 .supplierInfo .tabTit span{display:inline-block;height:7.5vw;line-height:7.5vw;border-bottom:2px solid transparent;color:#93979F;font-size:3.4vw;margin-left:8vw;}
 .supplierInfo .tabTit span.on{color:#E15621;border-color:#E15621}
 .supplierInfo .tabTit span:first-child{margin-left:0;}
 .supplierInfo .showSearch{position:absolute;right:3.3vw;bottom:1.5vw;padding:0 2vw;height:7.5vw;line-height:7.5vw;background:#E15621;color:#FFF;font-weight:normal;font-size:3.1vw;border-radius:2px}
-.supplierInfo .tabCon{padding:1.2vw 3.3vw 3.3vw;font-size:3.4vw}
-.supplierInfo .infoBox{border-top:1px solid #F5F5F5;font-size:3.7vw;line-height:5.2vw;color:#93979F;}
-.supplierInfo .infoBox .title{font-size:3.1vw;color:#4A4F58;font-weight:bold;padding-left:1vw;border-left:.4vw solid #E15616;margin:2.7vw 0;}
+.supplierInfo .infoBox{padding:1.2vw 3.3vw 3.3vw;border-top:1px solid #F5F5F5;font-size:3.7vw;line-height:5.2vw;color:#93979F;}
+.supplierInfo .infoBox .title{color:#4A4F58;font-weight:bold;padding-left:1vw;border-left:.4vw solid #E15616;margin:2.7vw 0;}
 .supplierInfo .infoBox .tag{display:inline-block;height:4.4vw;line-height:4.4vw;font-size:2.6vw;font-style:normal;background:#86B2FB;color:#FFF;border-radius:2px;margin-right:2.2vw;padding:0 1vw}
 .supplierInfo .infoBox .part{margin-top:5.4vw}
 .supplierInfo .infoBox .part:first-child{margin-top:0}
 .supplierInfo .infoBox .cont{text-indent:2em;text-align: justify;}
 .supplierInfo .infoBox .photo img{width:45.3vw;height:34vw}
 .supplierInfo .infoBox p{margin:1vw 0;}
+.supplierInfo .productList{width:96.6vw;margin:1.3vw auto;box-sizing:border-box}
+.supplierInfo .productBox .title{width:93.4vw;color:#2D3036;font-size:3.7vw;height:5vw;line-height:5vw;margin:2.7vw auto 0}
+
+
 
 
 

src/main/resources/static/js/base.js

@@ -247,6 +247,7 @@ function updateUrlParam(params) {
 function setProductPrice(productList, userId, callback){
     var productIdArr = [];
     productList.map(function(product){
+        product.priceLoading = true;
         // 0公开价格 1不公开价格 2仅对会员机构公开
         if (product.priceflag != 1){
              productIdArr.push(product.pid)
@@ -264,6 +265,7 @@ function setProductPrice(productList, userId, callback){
                     if(product.pid == item.productId){
                         product.userIdentity = item.userIdentity;
                         product.price = item.price;
+                        product.priceLoading = false;
                     }
                 });
             });

src/main/resources/static/js/index.js

@@ -2,7 +2,6 @@ var homeData = new Vue({
     el: '#container',
     data: {
         userId:'',
-        priceLoading: true,
         images: [],
         recommends: [],
         recommendPage: 1,
@@ -89,9 +88,7 @@ var homeData = new Vue({
                     },500);
                     // 获取价格
                     if(_self.userId && _self.userId>0){
-                        setProductPrice(_self.recommends, _self.userId, function(){
-                            _self.priceLoading = false;
-                        });
+                        setProductPrice(_self.recommends, _self.userId, function(){});
                     }
                 }
             });

src/main/resources/static/js/product/list.js

@@ -3,7 +3,6 @@ var productList = new Vue({
     data: {
         searchFlag: false,
         listLoading: true,
-        priceLoading: true,
         requestFlag: true,
         noMore: false,
         params: {
@@ -79,9 +78,7 @@ var productList = new Vue({
                     var result = JSON.parse(r.data);
                     _self.listRecord = result.total;
                     if(_self.userId && _self.userId>0){
-                        setProductPrice(result.items, _self.userId, function(){
-                            _self.priceLoading = false;
-                        });
+                        setProductPrice(result.items, _self.userId, function(){});
                     }
                     if(isPC){
                         _self.listData = result.items;
@@ -142,9 +139,7 @@ var productList = new Vue({
                     var result = JSON.parse(r.data);
                     _self.listRecord = result.total;
                     if(_self.userId && _self.userId>0){
-                        setProductPrice(result.items, _self.userId, function(){
-                            _self.priceLoading = false;
-                        });
+                        setProductPrice(result.items, _self.userId, function(){});
                     }
                     if(isPC){
                         _self.listData = result.items;

src/main/resources/static/js/supplier/index.js

@@ -1,8 +1,11 @@
 var supplierHome = new Vue({
     el: "#supplierHome",
     data: {
+        userId: 0,
         supplierId: 0,
-        supplierBanner: []
+        supplierBanner: [],
+        mainProducts:[],
+        productLists:[]
     },
     computed: {
 
@@ -10,7 +13,6 @@ var supplierHome = new Vue({
     methods: {
         getBanners: function(){
             var _self = this;
-            if(this.supplierId === 0) {return false;}
             $.getJSON("/supplier/images",{supplierId: this.supplierId}).done(function (r) {
                 if (r.code === 0 && r.data) {
                     _self.supplierBanner = r.data;
@@ -47,11 +49,43 @@ var supplierHome = new Vue({
                     },500);
                 }
             });
+        },
+        getMainProducts: function(){
+            var _self = this;
+            $.getJSON("/supplier/products",{supplierId: this.supplierId}).done(function (r) {
+                if (r.code === 0 && r.data) {
+                    if(_self.userId && _self.userId>0){
+                        setProductPrice(r.data, _self.userId, function(){});
+                    }
+                    _self.mainProducts = r.data;
+                }
+            });
+        },
+        getProductLists: function(){
+            var _self = this;
+            $.getJSON(spiServer+"/search/query/product/shop",{
+                id: this.supplierId,
+                pageSize: 12,
+                pageNum: 1
+            }, function (r) {
+                if (r.code === 0 && r.data) {
+                    var result = JSON.parse(r.data);
+                    _self.listRecord = result.total;
+                    if(_self.userId && _self.userId>0){
+                        setProductPrice(result.items, _self.userId, function(){});
+                    }
+                    _self.productLists = _self.productLists.concat(result.items);
+                }
+            })
         }
     },
     created: function () {
         this.supplierId = getUrlParam("id") ? getUrlParam("id") * 1 : 0;
-        this.getBanners();
+        if(this.supplierId !== 0) {
+            this.getBanners();
+            this.getMainProducts();
+            this.getProductLists();
+        }
     },
     mounted: function () {
         var _self = this;

src/main/resources/templates/index.html

@@ -70,17 +70,15 @@
                                     <div class="price mfhc">
                                         <template v-if="userId && userId>0">
                                             <em v-if="p.priceflag==1">未公开价格</em>
-                                            <template v-else-if="priceLoading">
-                                                <em>正在获取价格...</em>
-                                            </template>
                                             <template v-else>
-                                                <em v-if="p.priceflag==2 && p.userIdentity!=2">价格仅会员可见</em>
+                                                <em v-if="p.priceLoading">正在获取价格...</em>
+                                                <em v-else-if="p.priceflag==2 && p.userIdentity!=2">价格仅会员可见</em>
                                                 <em v-else class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                                <div class="btnBox">
+                                                    <a v-if="p.priceflag==2 && p.userIdentity!=2" href="javascript:void(0)" class="btn">升级成为会员</a>
+                                                    <a v-else href="javascript:void(0)" class="btn add">加入购物车</a>
+                                                </div>
                                             </template>
-                                            <div class="btnBox">
-                                                <a v-if="p.priceflag==2 && p.userIdentity!=2" href="javascript:void(0)" class="btn">升级成为会员</a>
-                                                <a v-else-if="p.priceflag!=1" href="javascript:void(0)" class="btn add">加入购物车</a>
-                                            </div>
                                         </template>
                                         <template v-else>
                                             <em>价格：<i class="icon mIcon" v-for="i in 5">

src/main/resources/templates/product/list.html

@@ -114,12 +114,12 @@
                         <template v-if="userId && userId>0">
                             <em v-if="p.priceflag==1">未公开价格</em>
                             <template v-else>
-                                <em v-if="priceLoading">正在获取价格...</em>
+                                <em v-if="p.priceLoading">正在获取价格...</em>
                                 <em v-else-if="p.priceflag==2 && p.userIdentity!=2">价格仅会员可见</em>
                                 <em v-else class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
                                 <div class="btnBox">
                                     <a v-if="p.priceflag==2 && p.userIdentity!=2" href="javascript:void(0)" class="btn">升级成为会员</a>
-                                    <a v-else-if="p.priceflag!=1" href="javascript:void(0)" class="btn add">加入购物车</a>
+                                    <a v-else href="javascript:void(0)" class="btn add">加入购物车</a>
                                 </div>
                             </template>
                         </template>

src/main/resources/templates/supplier/index.html

@@ -42,7 +42,82 @@
             <a v-if="!isPC" class="showSearch" href="javascript:void(0);">商铺内搜索</a>
         </div>
         <div class="tabCon">
-            <div class="item">1111</div>
+            <div class="item productBox">
+                <div class="part">
+                    <div class="title">主推商品</div>
+                    <!--主推商品列表-->
+                    <ul class="productList clear mfw">
+                        <li class="productItem mfc" v-for="p in mainProducts">
+                            <div class="item">
+                                <a class="image" :href="'/product/detail.html?id='+p.pid" target="_blank">
+                                    <img :src="p.image" :alt="p.name">
+                                    <span v-if="p.acttype==1||p.acttype==2" :class="p.acttype==1?'icon mIcon hot':'icon mIcon new'"></span>
+                                </a>
+                                <a class="name" :href="'/product/detail.html?id='+p.pid" target="_blank">
+                                    <span v-html="p.name"></span>
+                                </a>
+                                <div class="price mfhc">
+                                    <template v-if="userId && userId>0">
+                                        <em v-if="p.priceflag==1">未公开价格</em>
+                                        <template v-else>
+                                            <em v-if="p.priceLoading">正在获取价格...</em>
+                                            <em v-else-if="p.priceflag==2 && p.userIdentity!=2">价格仅会员可见</em>
+                                            <em v-else class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                            <div class="btnBox">
+                                                <a v-if="p.priceflag==2 && p.userIdentity!=2" href="javascript:void(0)" class="btn">升级成为会员</a>
+                                                <a v-else href="javascript:void(0)" class="btn add">加入购物车</a>
+                                            </div>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <em>价格：<i class="icon mIcon" v-for="i in 5">
+                                                <i v-if="i==1||p.pricegrade>=i" class="icon mIcon on"></i>
+                                        </i></em>
+                                        <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">加入购物车</a></div>
+                                    </template>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="part">
+                    <div class="title">供应商产品（这部分等商铺内商品加入阿里云搜索再做！）</div>
+                    <!--主推商品列表-->
+                    <ul class="productList clear mfw">
+                        <li class="productItem mfc" v-for="p in productLists">
+                            <div class="item">
+                                <a class="image" :href="'/product/detail.html?id='+p.pid" target="_blank">
+                                    <img :src="p.image" :alt="p.name">
+                                    <span v-if="p.acttype==1||p.acttype==2" :class="p.acttype==1?'icon mIcon hot':'icon mIcon new'"></span>
+                                </a>
+                                <a class="name" :href="'/product/detail.html?id='+p.pid" target="_blank">
+                                    <span v-html="p.name"></span>
+                                </a>
+                                <div class="price mfhc">
+                                    <template v-if="userId && userId>0">
+                                        <em v-if="p.priceflag==1">未公开价格</em>
+                                        <template v-else>
+                                            <em v-if="p.priceLoading">正在获取价格...</em>
+                                            <em v-else-if="p.priceflag==2 && p.userIdentity!=2">价格仅会员可见</em>
+                                            <em v-else class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                            <div class="btnBox">
+                                                <a v-if="p.priceflag==2 && p.userIdentity!=2" href="javascript:void(0)" class="btn">升级成为会员</a>
+                                                <a v-else href="javascript:void(0)" class="btn add">加入购物车</a>
+                                            </div>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <em>价格：<i class="icon mIcon" v-for="i in 5">
+                                                <i v-if="i==1||p.pricegrade>=i" class="icon mIcon on"></i>
+                                        </i></em>
+                                        <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">加入购物车</a></div>
+                                    </template>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
             <div class="item infoBox">
                 <div class="part">
                     <div class="title">公司基本信息</div>