|
@@ -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>
|