浏览代码

首页新品轮播、新品橱窗优化、我的商品新品展示状态修改

zhengjinyi 3 年之前
父节点
当前提交
6f91ccc760

+ 9 - 0
src/main/resources/static/js/index.js

@@ -192,6 +192,15 @@ var homeData = new Vue({
                         scroll:5,
                         vis:5
                     });
+                    $('.swiper-container-floor').slide({
+                        mainCell:".recommendBox-wrapperHot",
+                        titCell:".swiper-pagination-floor span",
+                        effect: "leftLoop",
+                        autoPlay: true,
+                        interTime:8000,
+                        scroll:5,
+                        vis:5
+                    });
                 } else {
                     var swiper = new Swiper('#recommendBox', {
                         slidesPerView: 2,

+ 11 - 5
src/main/resources/static/js/product/product-hot.js

@@ -2,6 +2,7 @@ var productList = new Vue({
     el: "#productList",
     data: {
         // searchFlag: false,
+        isRequest:false,
         listLoading: true,
         requestFlag: true,
         noMore: false,
@@ -77,6 +78,7 @@ var productList = new Vue({
             PublicApi.GetHomeRecommend({ },function(response){
                 if(response.code == 0){
                     _self.topGoodList = response.data;
+                    _self.isRequest = true;
                     // 图片懒加载
                     setTimeout(function(){
                         if (isPC) {
@@ -102,6 +104,8 @@ var productList = new Vue({
                             });
                         }
                     },500);
+                    // 获取列表数据
+                    _self.GetHomeNewFloorList();
                 }else{
                     console.log('获取新品橱窗数据错误')
                 }
@@ -109,6 +113,7 @@ var productList = new Vue({
         },
         GetHomeNewFloorList: function () {
             var _self = this;
+            _self.listLoading = true;
             PublicApi.GetHomeNewFloorList(_self.listQuery,function (response) {
                 if(response.code === 0){
                     var data = response.data
@@ -121,8 +126,10 @@ var productList = new Vue({
                     }else{
                         _self.isListEmpty = true;
                     }
-                    _self.listLoading = false;
-                    _self.requestFlag = true;
+                    setTimeout(function () {
+                        _self.listLoading = false;
+                        _self.requestFlag = true;
+                    },1000)
                 }else {
                     _self.listLoading = false;
                     _self.isListEmpty = true;
@@ -246,8 +253,9 @@ var productList = new Vue({
         handleConfirmScreen:function(){
             this.listQuery.pageNum = 1;
             this.listData = [];
-            this.GetHomeNewFloorList();
             this.isShowAllBrands = false;
+            this.isShowAllBrandsButton = false;
+            this.GetHomeNewFloorList();
         }
     },
     created: function () {
@@ -264,8 +272,6 @@ var productList = new Vue({
             this.shopID = JSON.parse(userInfo).shopId;
         }
         this.GetHomeRecommend();
-        // 获取列表数据
-        this.GetHomeNewFloorList();
         // 获取对应品牌列表
         this.getCommoditySearchQUeryBrand();
     },

+ 8 - 4
src/main/resources/static/js/supplier-center/shop/goods.js

@@ -42,7 +42,9 @@ var myGoods = new Vue({
             const map = {
                 1: '已展示',
                 2: '展示过期',
-                3: '未展示'
+                3: '未展示',
+                4: '审核未通过',
+                5: '已下线'
             }
             return map[value]
         }
@@ -377,9 +379,11 @@ var myGoods = new Vue({
         showFlagColorFn: function(state){
             var stateColor = '',
                 stateColorObject={
-                    1:'#1890f9',
-                    2:'#f9a94b',
-                    3:'#FF2A2A'
+                    1: '#1890f9',
+                    2: '#FF2A2A',
+                    3: '#f9a94b',
+                    4: '#FF2A2A',
+                    5: '#FF2A2A'
                 };
             Object.keys(stateColorObject).forEach(function(key){
                 if(key == state){

+ 2 - 2
src/main/resources/templates/index.html

@@ -140,7 +140,7 @@
                             <a class="section_page_btn" href="/product/hot.html" target="_blank"></a>
                         </div>
                         <div class="swiper-container-floor hotList" id="recommendBox">
-                            <div class="section_page_main type_08 swiper-wrapper recommendBox-wrapper clear mfw section_8 max">
+                            <div class="section_page_main type_08 swiper-wrapper recommendBox-wrapper recommendBox-wrapperHot clear mfw section_8 max">
                                 <!-- 商品/图片 列表 -->
                                 <a :href="'/product-'+pros.product.productId+'.html'" class="page_main_item hot ad_04 swiper-slide" target="_blank" v-for="pros in floor.floorImageList4">
                                     <img class="page_main_image" src="/img/base/placeholder.png" :data-original="pros.product.image" :alt="pros.name">
@@ -387,7 +387,7 @@
                             <a class="section_page_btn" href="/product/hot.html" target="_blank"></a>
                         </div>
                         <div class="hotList swiper-container-floor" id="recommendBox">
-                            <div class="section_page_main type_08 swiper-wrapper recommendBox-wrapper clear mfw section_8">
+                            <div class="section_page_main type_08 swiper-wrapper recommendBox-wrapper recommendBox-wrapperHot clear mfw section_8">
                                 <!-- 商品/图片 列表 -->
                                 <th:block th:each="pros : ${floor.get('floorImageList4')}"  th:object="${pros}">
                                     <a th:href="*{link}" class="page_main_item hot ad_04 swiper-slide" target="_blank">

+ 161 - 157
src/main/resources/templates/product/product-hot.html

@@ -13,189 +13,193 @@
 
 <!-- 商品列表 -->
 <div id="productList" v-cloak>
-  <div v-if="listLoading" class="loading">
-    <img src="/img/base/loading.gif">
-  </div>
-  <template v-else>
     <!--品牌选择-->
-      <div class="product-banner">
-        <div class="product-banner-top">
-          <p class="title">采美新品橱窗</p>
+  <template v-if="isRequest">
+    <div class="product-banner">
+      <div class="product-banner-top">
+        <p class="title">采美新品橱窗</p>
+      </div>
+      <div class="product-banner-bot">
+        <div class="inner">
+          <div id="productHotBanner" class="swiper-container">
+            <ul class="swiper-wrapper">
+              <li class="swiper-slide mfc" v-for="pros in topGoodList">
+                <a :href="'/product-'+pros.productId+'.html'" target="_blank">
+                  <div class="swiper-slide-image">
+                    <img :src="pros.mainImage" alt="">
+                  </div>
+                  <div class="swiper-slide-info">
+                    <div class="swiper-slide-name">
+                      <P v-text="pros.name"></P>
+                    </div>
+                    <div class="swiper-slide-btn">
+                      <div class="slide-btn" >立即购买</div>
+                    </div>
+                  </div>
+                </a>
+              </li>
+            </ul>
+            <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in topGoodList.length"></span></div>
+          </div>
         </div>
-        <div class="product-banner-bot">
-          <div class="inner">
-            <div id="productHotBanner" class="swiper-container">
-              <ul class="swiper-wrapper">
-                  <li class="swiper-slide mfc" v-for="pros in topGoodList">
-                    <a :href="'/product-'+pros.productId+'.html'" target="_blank">
-                      <div class="swiper-slide-image">
-                        <img :src="pros.mainImage" alt="">
-                      </div>
-                      <div class="swiper-slide-info">
-                        <div class="swiper-slide-name">
-                          <P v-text="pros.name"></P>
-                        </div>
-                        <div class="swiper-slide-btn">
-                          <div class="slide-btn" >立即购买</div>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-              </ul>
-              <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in topGoodList.length"></span></div>
+      </div>
+    </div>
+    <template v-if="isPC">
+      <div class="product-brand clear">
+        <div class="product-brand-name" :class="isShowAllBrands ? 'show' : ''">
+          <p class="title">品牌</p>
+        </div>
+        <template v-if="!isShowAllBrands" :class="isShowAllBrands ? 'show' : ''">
+          <div class="product-brand-list" >
+            <div class="brand-list" v-if="!isShowAllBrandsButton" @click="choiceBrandAll" :class="isAllcheckedBrand ? 'checked' : ''"><a href="javascript:void(0)">全部</a></div>
+            <div class="brand-list" @click="choiceBrandSearchIndex(brand, index)" v-for="(brand,index) in brandLists"
+                 :key="index" :class="choiceBrandIndex === index ? 'checked' : ''">
+              <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="product-brand-list" :class="isShowAllBrands ? 'show' : ''">
+            <div class="brand-list" v-if="!isShowAllBrandsButton" @click="choiceBrandAll" :class="isAllcheckedBrand ? 'checked' : ''"><a href="javascript:void(0)">全部</a></div>
+            <div class="brand-list" @click="choiceBrandSearch(brand, index)" v-for="(brand,index) in brandLists"
+                 :key="index" :class="choiceBrandSearchClass(brand,index)">
+              <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
             </div>
           </div>
+        </template>
+        <div class="product-brand-oper" v-if="!isShowAllBrandsButton">
+          <div class="product-brand-more" v-if="defaultBrandLists.length>7" :class="isShowAllBrands ? 'show' : ''"
+               @click="showMoreItem">{{
+            isShowAllBrands ? '收起' : '更多' }} <i class="icon mIcon"></i></div>
+          <div class="product-brand-add" v-if="defaultBrandLists.length>2" @click="showMoreItemCheckedAll">+多选</div>
+        </div>
+        <div class="product-brand-button" v-if="isShowAllBrandsButton">
+          <div class="brand-button">
+            <div class="btn confirm" :class="checkedBrandList.length>0 ? '' : 'disabled'" @click="handleConfirmScreen">确定</div>
+            <div class="btn cancel" @click="handleCancel">取消</div>
+          </div>
         </div>
       </div>
-      <template v-if="isPC">
+    </template>
+    <template v-else>
+      <div class="product-brand-content">
         <div class="product-brand clear">
-          <div class="product-brand-name" :class="isShowAllBrands ? 'show' : ''">
-            <p class="title">品牌</p>
-          </div>
-          <template v-if="!isShowAllBrands" :class="isShowAllBrands ? 'show' : ''">
-            <div class="product-brand-list" >
-              <div class="brand-list" v-if="!isShowAllBrandsButton" @click="choiceBrandAll" :class="isAllcheckedBrand ? 'checked' : ''"><a href="javascript:void(0)">全部</a></div>
-              <div class="brand-list" @click="choiceBrandSearchIndex(brand, index)" v-for="(brand,index) in brandLists"
-                   :key="index" :class="choiceBrandIndex === index ? 'checked' : ''">
-                <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
-              </div>
-            </div>
-          </template>
-          <template v-else>
-            <div class="product-brand-list" :class="isShowAllBrands ? 'show' : ''">
-              <div class="brand-list" v-if="!isShowAllBrandsButton" @click="choiceBrandAll" :class="isAllcheckedBrand ? 'checked' : ''"><a href="javascript:void(0)">全部</a></div>
-              <div class="brand-list" @click="choiceBrandSearch(brand, index)" v-for="(brand,index) in brandLists"
-                   :key="index" :class="choiceBrandSearchClass(brand,index)">
-                <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
-              </div>
+          <div class="product-brand-name">品牌</div>
+          <div class="product-brand-list" v-if="!isShowAllBrands">
+            <div class="brand-list" @click="choiceBrandAll" :class="isAllcheckedBrand ? 'checked' : ''"><a href="javascript:void(0)">全部</a></div>
+            <div class="brand-list" v-for="(brand,index) in brandLists" :key="index"  v-if="index < 2" @click="showMoreItem">
+              <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
             </div>
-          </template>
-          <div class="product-brand-oper" v-if="!isShowAllBrandsButton">
-            <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''"
-                 @click="showMoreItem">{{
-              isShowAllBrands ? '收起' : '更多' }} <i class="icon mIcon"></i></div>
-            <div class="product-brand-add" v-if="defaultBrandLists.length>2" @click="showMoreItemCheckedAll">+多选</div>
           </div>
-          <div class="product-brand-button" v-if="isShowAllBrandsButton">
-            <div class="brand-button">
-              <div class="btn confirm" :class="checkedBrandList.length>0 ? '' : 'disabled'" @click="handleConfirmScreen">确定</div>
-              <div class="btn cancel" @click="handleCancel">取消</div>
-            </div>
+          <div class="product-brand-more" :class="isShowAllBrands ? 'show' : ''" @click="showMoreItem">
+            <i class="icon mIcon"></i>
           </div>
         </div>
-      </template>
-      <template v-else>
-        <div class="product-brand-content">
-          <div class="product-brand clear">
-            <div class="product-brand-name">品牌</div>
-            <div class="product-brand-list" v-if="!isShowAllBrands">
-              <div class="brand-list" @click="choiceBrandAll" :class="isAllcheckedBrand ? 'checked' : ''"><a href="javascript:void(0)">全部</a></div>
-              <div class="brand-list" v-for="(brand,index) in brandLists" :key="index"  v-if="index < 2" @click="showMoreItem">
+        <div class="product-brand-fiexd" v-if="isShowAllBrands">
+          <div class="product-brand-fiexdcontent">
+            <div class="product-brand-scroll">
+              <!--                <div class="brand-list" @click="choiceBrandAll" :class="isAllcheckedBrand ? 'checked' : ''"><a href="javascript:void(0)">全部</a></div>-->
+              <div class="brand-list" v-for="(brand,index) in brandLists" :key="index"
+                   @click="choiceBrand(brand, index)" :class="brand.isChecked ? 'checked' : ''">
                 <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
               </div>
             </div>
-            <div class="product-brand-more" :class="isShowAllBrands ? 'show' : ''" @click="showMoreItem">
-              <i class="icon mIcon"></i>
+            <div class="product-screen-btn" @click="handleConfirmScreen">
+              <div class="sub-button">确定</div>
             </div>
           </div>
-          <div class="product-brand-fiexd" v-if="isShowAllBrands">
-            <div class="product-brand-fiexdcontent">
-              <div class="product-brand-scroll">
-<!--                <div class="brand-list" @click="choiceBrandAll" :class="isAllcheckedBrand ? 'checked' : ''"><a href="javascript:void(0)">全部</a></div>-->
-                <div class="brand-list" v-for="(brand,index) in brandLists" :key="index"
-                     @click="choiceBrand(brand, index)" :class="brand.isChecked ? 'checked' : ''">
-                  <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
-                </div>
-              </div>
-              <div class="product-screen-btn" @click="handleConfirmScreen">
-                <div class="sub-button">确定</div>
-              </div>
-            </div>
 
-          </div>
         </div>
-      </template>
-    <!--数据为空-->
-    <div v-if="isListEmpty" class="empty">
-      <img src="/img/common/empty.png">
-      <div class="msg">
-        <p>暂未找到你搜索的商品,去<a href="/">商城</a>,逛逛吧~</p>
       </div>
+    </template>
+  </template>
+  <div>
+    <div v-if="listLoading" class="loading">
+      <img src="/img/base/loading.gif">
     </div>
     <template v-else>
-      <!--商品列表-->
-      <ul class="productList clear mfw">
-        <li class="productItem " v-for="p in listData">
-          <div class="page_main_type" v-if="p.productType === 2">医疗器械</div>
-          <a class="image" :href="'/product-'+p.productId+'.html'">
-            <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
-            <p class="name" v-html="addhtml + p.name" v-if="p.beautyActFlag==1"></p>
-            <p class="name" v-html="p.name" v-else></p>
-            <div class="price">
-              <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
-              <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
-                <div class="price_text_tag clear">
-                  <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
-                  <template v-if="p.svipProductFlag === 1">
-                    <div class="svip-tag">
-                      <div class="svip-icon">SVIP</div>
-                      <template v-if="showVipPriceTag(p)">
-                        <div class="svip-price">
-                          <span v-html="p.svipPriceTag"></span>
-                        </div>
-                      </template>
+      <!--数据为空-->
+      <div v-if="isListEmpty" class="empty">
+        <img src="/img/common/empty.png">
+        <div class="msg">
+          <p>暂未找到你搜索的商品,去<a href="/">商城</a>,逛逛吧~</p>
+        </div>
+      </div>
+      <template v-else>
+        <!--商品列表-->
+        <ul class="productList clear mfw">
+          <li class="productItem " v-for="p in listData">
+            <div class="page_main_type" v-if="p.productType === 2">医疗器械</div>
+            <a class="image" :href="'/product-'+p.productId+'.html'">
+              <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+              <p class="name" v-html="addhtml + p.name" v-if="p.beautyActFlag==1"></p>
+              <p class="name" v-html="p.name" v-else></p>
+              <div class="price">
+                <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                  <div class="price_text_tag clear">
+                    <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
+                    <template v-if="p.svipProductFlag === 1">
+                      <div class="svip-tag">
+                        <div class="svip-icon">SVIP</div>
+                        <template v-if="showVipPriceTag(p)">
+                          <div class="svip-price">
+                            <span v-html="p.svipPriceTag"></span>
+                          </div>
+                        </template>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}
+                        <span v-if="p.priceFlag != 1 && PromotionsFormat(p.promotions)">:¥{{p.price | NumFormat}}</span>
+                      </p>
+                    </template>
+                  </div>
+                  <!--0公开价格 1不公开价格 2仅对会员机构公开-->
+                  <div class="main_price_unde" v-if="p.priceFlag==1">¥价格未公开</div>
+                  <!--机构价仅会员可见 && 用户是普通机构-->
+                  <div class="main_price_unde" v-else-if="p.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
+                    ¥会员可见
+                  </div>
+                  <!--机构价仅会员可见 && 用户是普通机构-->
+                  <div class="main_price_unde" v-else-if="p.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
+                    ¥仅医美机构可见
+                  </div>
+                  <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
+                  <template
+                          v-else-if="GLOBAL_USER_IDENTITY === 2 || (p.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && p.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
+                    <div class="main_price_show"
+                         :class="{none: PromotionsFormat(p.promotions) || (p.svipProductFlag === 1 && showVipPriceTag(p))}">
+                      ¥{{ (PromotionsFormat(p.promotions) || showVipPriceTag(p) ? p.originalPrice :
+                      p.price ) | NumFormat }}
                     </div>
                   </template>
-                  <template v-else>
-                    <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}
-                      <span v-if="p.priceFlag != 1 && PromotionsFormat(p.promotions)">:¥{{p.price | NumFormat}}</span>
-                    </p>
-                  </template>
-                </div>
-                <!--0公开价格 1不公开价格 2仅对会员机构公开-->
-                <div class="main_price_unde" v-if="p.priceFlag==1">¥价格未公开</div>
-                <!--机构价仅会员可见 && 用户是普通机构-->
-                <div class="main_price_unde" v-else-if="p.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
-                  ¥会员可见
-                </div>
-                <!--机构价仅会员可见 && 用户是普通机构-->
-                <div class="main_price_unde" v-else-if="p.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
-                  ¥仅医美机构可见
-                </div>
-                <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
-                <template
-                        v-else-if="GLOBAL_USER_IDENTITY === 2 || (p.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && p.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
-                  <div class="main_price_show"
-                       :class="{none: PromotionsFormat(p.promotions) || (p.svipProductFlag === 1 && showVipPriceTag(p))}">
-                    ¥{{ (PromotionsFormat(p.promotions) || showVipPriceTag(p) ? p.originalPrice :
-                    p.price ) | NumFormat }}
+                  <!--供应商除自己的商品外,也显示价格等级-->
+                  <div class="price_grade" v-else><span class="bold">¥</span><i
+                          :class="'icon mIcon i'+p.priceGrade"></i></div>
+                </template>
+                <template v-else>
+                  <div class="price_text_tag">
+                    <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
+                    <template v-if="p.svipProductFlag === 1">
+                      <div class="svip-tag">
+                        <div class="svip-icon">SVIP</div>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                    </template>
                   </div>
+                  <div class="price_grade"><span class="bold">¥</span><i
+                          :class="'icon mIcon i'+p.priceGrade"></i></div>
                 </template>
-                <!--供应商除自己的商品外,也显示价格等级-->
-                <div class="price_grade" v-else><span class="bold">¥</span><i
-                        :class="'icon mIcon i'+p.priceGrade"></i></div>
-              </template>
-              <template v-else>
-                <div class="price_text_tag">
-                  <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
-                  <template v-if="p.svipProductFlag === 1">
-                    <div class="svip-tag">
-                      <div class="svip-icon">SVIP</div>
-                    </div>
-                  </template>
-                  <template v-else>
-                    <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
-                  </template>
-                </div>
-                <div class="price_grade"><span class="bold">¥</span><i
-                        :class="'icon mIcon i'+p.priceGrade"></i></div>
-              </template>
-            </div>
-          </a>
-        </li>
-      </ul>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </template>
     </template>
-  </template>
+  </div>
 </div>
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>