caimei-applets-caimei/pages/supplier/user/my-shop.vue

<template>
	<view class="container shop clearfix" :style="{ paddingTop: isScrollTop ? (CustomBar+40+'px') : CustomBar +'px' }">
		<custom
			:systeminfo="systeminfo"
			:navbar-data="nvabarData"
			:headerBtnPosi="headerBtnPosi"
			:headerColor="headerColor"
			:page="backPage"
		/>
		<!-- 主页内容 -->
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		/>
		<template v-else>
			<!-- <view class="shop-search-main">
				<view class="shop-search">
					<text class="iconfont icon-sousuo"></text>
					<input
						class="input"
						maxlength="20"
						type="text"
						value=""
						@focus="onFocus"
						@input="onShowClose"
						v-model.trim="listQuery.keyword"
						confirm-type="search"
						@confirm="SubMitSearch"
						placeholder="搜索本店铺商品"
					/>
					<text class="iconfont icon-shanchu1" v-if="isShowClose" @click.stop="delInputText"></text>
				</view>
			</view> -->
			<view class="container-shop tui-skeleton">
				<!-- 轮播 -->
				<view class="product-supplier" @click="goSupplier">
					<view class="logo"
						><img
							:src="shopLogo ? shopLogo : 'https://static.caimei365.com/app/img/icon/icon-shoplogo.png'"
							alt=""
					/></view>
					<view class="main">
						<view class="name">{{ shopName }}</view>
						<view class="massgs">
							<view class="label">满意度:</view>
							<view class="p-stars">
								<uni-stars
									:stars="6"
									:iconClass="iconClass"
									:iconColor="iconColor"
									:fontSize="36"
									:widthInfo="176"
								></uni-stars>
							</view>
						</view>
					</view>
					<view class="right"><text class="iconfont icon-xiayibu"></text></view>
				</view>
				<banner :list="bannerImageList" />
			</view>
			<view class="swiper-banner-nav" 
				  v-if="shopCategory.length > 0"
				  :class="isScrollTop ? 'flexd' : ''" 
				  :style="{ top: isScrollTop ? (CustomBar + 'px')  : '0px'}"
				  >
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="tui-goods__item"  
						  :class="choiceIndex === '' ? 'active' : ''"
						  @click="handleChangeAll">
						  全部
					</view>
					<view class="tui-goods__item" 
						  v-for="(category, index) in shopCategory" 
						  :key="index"
						  :class="choiceIndex === index ? 'active' : ''"
						  @click="handleCategory(category, index)">
						 {{ category.category }}
					</view>
				</scroll-view>
			</view>
			<template v-if="!isShopAll">
				<view class="container-section tui-skeleton">
					<view class="section-product clearfix">
						<view
							class="floor-item"
							v-for="(prop, index) in categoryProducts"
							:key="index"
							@click.stop="navToDetailPage(prop.productId)"
						>
							<image class="item-img tui-skeleton-fillet" :src="prop.image" mode="aspectFill"></image>
							<view class="floor-item-type" v-if="prop.productType == 2">医疗器械</view>
							<view class="floor-item-content">
								<view class="title tui-skeleton-rect">
									<text class="mclap-tag" v-if="prop.beautyActFlag == 1">美博会</text>
									<text class="mclap" :class="prop.beautyActFlag == 1 ? 'indent' : ''">{{
										prop.name
									}}</text>
								</view>
								<view class="floor-item-act">
									<template v-if="userIdentity === 3">
										<view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
										<template v-if="prop.actStatus === 1">
											<view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
												{{ prop.promotions.name }}
												<text v-if="hasLogin && prop.priceFlag != 1 && prop.shopId == shopId"
													>:￥{{ prop.price | NumFormat }}</text
												>
											</view>
											<view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
										</template>
										<template v-if="prop.svipProductFlag == 1">
											<template v-if="prop.priceFlag != 1">
												<view class="svip-tags">
													<view class="tags">SVIP</view>
													<view class="price" v-if="prop.shopId == shopId">{{
														prop.svipPriceTag
													}}</view>
												</view>
											</template>
											<template v-else>
												<view class="svip-tags"> <view class="tags none">SVIP</view> </view>
											</template>
										</template>
									</template>
									<template v-else>
										<view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
										<template v-if="prop.actStatus === 1">
											<view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
												{{ prop.promotions.name }}
												<text v-if="hasLogin && prop.priceFlag != 1"
													>:￥{{ prop.price | NumFormat }}</text
												>
											</view>
											<view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
										</template>
										<template v-if="prop.svipProductFlag == 1">
											<view class="svip-tags">
												<view class="tags" :class="{ none: !isShowVipFlag(prop) }">SVIP</view>
												<view class="price" v-if="isShowVipFlag(prop)">{{
													prop.svipPriceTag
												}}</view>
											</view>
										</template>
									</template>
								</view>
								<view class="" v-if="hasLogin">
									<template v-if="userIdentity == 3">
										<template v-if="prop.shopId == shopId">
											<view class="title-none" v-if="prop.priceFlag === 1">
												<text class="p big">￥未公开价格</text>
											</view>
											<view
												class="price tui-skeleton-rect"
												v-else
												:class="
													PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
														? 'none'
														: ''
												"
											>
												<text class="p sm">￥</text>
												<text class="p big">{{
													(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
														? prop.originalPrice
														: prop.price) | NumFormat
												}}</text>
											</view>
										</template>
										<template v-else>
											<view class="no-price">
												<view class="p-stars">
													<text class="p-no">￥</text>
													<uni-grader :grade="Number(prop.priceGrade)" :margin="14"></uni-grader>
												</view>
											</view>
										</template>
									</template>
									<template v-else-if="userIdentity === 4 && vipFlag != 1">
										<view class="title-none" v-if="prop.priceFlag === 1">
											<text class="p big">￥未公开价格</text>
										</view>
										<view class="title-none" v-else-if="prop.priceFlag === 2">
											<text class="p big">￥价格仅会员可见</text>
										</view>
										<view class="title-none" v-else-if="prop.priceFlag === 3">
											<text class="p big">￥仅医美机构可见</text>
										</view>
										<view
											class="price tui-skeleton-rect"
											v-if="prop.priceFlag === 0"
											:class="
												PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''
											"
										>
											<text class="p sm">￥</text>
											<text class="p big">{{
												(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
													? prop.originalPrice
													: prop.price) | NumFormat
											}}</text>
										</view>
									</template>
									<template v-else-if="userIdentity === 2 || (userIdentity == 4 && vipFlag == 1)">
										<view class="title-none" v-if="prop.priceFlag === 1">
											<text class="p big">￥未公开价格</text>
										</view>
										<view class="title-none" v-else-if="prop.priceFlag === 3 && firstClubType != 1">
											<text class="p big">￥仅医美机构可见</text>
										</view>
										<view
											class="price tui-skeleton-rect"
											v-else
											:class="
												PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''
											"
										>
											<text class="p sm">￥</text>
											<text class="p big">{{
												(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
													? prop.originalPrice
													: prop.price) | NumFormat
											}}</text>
										</view>
									</template>
									<template v-else>
										<view class="title-none" v-if="prop.priceFlag === 1">
											<text class="p big">￥未公开价格</text>
										</view>
										<view
											class="price tui-skeleton-rect"
											v-else
											:class="
												PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''
											"
										>
											<text class="p sm">￥</text>
											<text class="p big">{{
												(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
													? prop.originalPrice
													: prop.price) | NumFormat
											}}</text>
										</view>
									</template>
								</view>
								<view v-else class="no-price">
									<view class="p-stars">
										<text class="p-no">￥</text>
										<uni-grader :grade="Number(prop.priceGrade)"></uni-grader>
										<template v-if="prop.actStatus == 1">
											<view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
												{{ prop.promotions.name
												}}<text v-if="hasLogin && prop.priceFlag != 1"
													>:￥{{ prop.price | NumFormat }}</text
												>
											</view>
											<view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
										</template>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="container-section tui-skeleton" v-if="recommendList.length > 0">
					<view class="tab-title">主推商品</view>
					<view class="section-product clearfix">
						<view class="floor-item-none" v-if="isHomeProduct">
							<image class="none-image" :src="iconNoneData" mode=""></image>
							<view class="none-text">暂无商品~</view>
						</view>
						<view
							v-else
							class="floor-item"
							v-for="(prop, index) in recommendList"
							:key="index"
							@click.stop="navToDetailPage(prop.productId)"
						>
							<image class="item-img tui-skeleton-fillet" :src="prop.image" mode="aspectFill"></image>
							<view class="floor-item-type" v-if="prop.productType == 2">医疗器械</view>
							<view class="floor-item-content">
								<view class="title tui-skeleton-rect">
									<text class="mclap-tag" v-if="prop.beautyActFlag == 1">美博会</text>
									<text class="mclap" :class="prop.beautyActFlag == 1 ? 'indent' : ''">{{
										prop.name
									}}</text>
								</view>
								<view class="floor-item-act">
									<template v-if="userIdentity === 3">
										<view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
										<template v-if="prop.actStatus === 1">
											<view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
												{{ prop.promotions.name }}
												<text v-if="hasLogin && prop.priceFlag != 1 && prop.shopId == shopId"
													>:￥{{ prop.price | NumFormat }}</text
												>
											</view>
											<view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
										</template>
										<template v-if="prop.svipProductFlag == 1">
											<template v-if="prop.priceFlag != 1">
												<view class="svip-tags">
													<view class="tags">SVIP</view>
													<view class="price" v-if="prop.shopId == shopId">{{
														prop.svipPriceTag
													}}</view>
												</view>
											</template>
											<template v-else>
												<view class="svip-tags"> <view class="tags none">SVIP</view> </view>
											</template>
										</template>
									</template>
									<template v-else>
										<view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
										<template v-if="prop.actStatus === 1">
											<view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
												{{ prop.promotions.name }}
												<text v-if="hasLogin && prop.priceFlag != 1"
													>:￥{{ prop.price | NumFormat }}</text
												>
											</view>
											<view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
										</template>
										<template v-if="prop.svipProductFlag == 1">
											<view class="svip-tags">
												<view class="tags" :class="{ none: !isShowVipFlag(prop) }">SVIP</view>
												<view class="price" v-if="isShowVipFlag(prop)">{{
													prop.svipPriceTag
												}}</view>
											</view>
										</template>
									</template>
								</view>
								<view class="" v-if="hasLogin">
									<template v-if="userIdentity == 3">
										<template v-if="prop.shopId == shopId">
											<view class="title-none" v-if="prop.priceFlag === 1">
												<text class="p big">￥未公开价格</text>
											</view>
											<view
												class="price tui-skeleton-rect"
												v-else
												:class="
													PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
														? 'none'
														: ''
												"
											>
												<text class="p sm">￥</text>
												<text class="p big">{{
													(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
														? prop.originalPrice
														: prop.price) | NumFormat
												}}</text>
											</view>
										</template>
										<template v-else>
											<view class="no-price">
												<view class="p-stars">
													<text class="p-no">￥</text>
													<uni-grader :grade="Number(prop.priceGrade)" :margin="14"></uni-grader>
												</view>
											</view>
										</template>
									</template>
									<template v-else-if="userIdentity === 4 && vipFlag != 1">
										<view class="title-none" v-if="prop.priceFlag === 1">
											<text class="p big">￥未公开价格</text>
										</view>
										<view class="title-none" v-else-if="prop.priceFlag === 2">
											<text class="p big">￥价格仅会员可见</text>
										</view>
										<view class="title-none" v-else-if="prop.priceFlag === 3">
											<text class="p big">￥仅医美机构可见</text>
										</view>
										<view
											class="price tui-skeleton-rect"
											v-if="prop.priceFlag === 0"
											:class="
												PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''
											"
										>
											<text class="p sm">￥</text>
											<text class="p big">{{
												(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
													? prop.originalPrice
													: prop.price) | NumFormat
											}}</text>
										</view>
									</template>
									<template v-else-if="userIdentity === 2 || (userIdentity == 4 && vipFlag == 1)">
										<view class="title-none" v-if="prop.priceFlag === 1">
											<text class="p big">￥未公开价格</text>
										</view>
										<view class="title-none" v-else-if="prop.priceFlag === 3 && firstClubType != 1">
											<text class="p big">￥仅医美机构可见</text>
										</view>
										<view
											class="price tui-skeleton-rect"
											v-else
											:class="
												PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''
											"
										>
											<text class="p sm">￥</text>
											<text class="p big">{{
												(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
													? prop.originalPrice
													: prop.price) | NumFormat
											}}</text>
										</view>
									</template>
									<template v-else>
										<view class="title-none" v-if="prop.priceFlag === 1">
											<text class="p big">￥未公开价格</text>
										</view>
										<view
											class="price tui-skeleton-rect"
											v-else
											:class="
												PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''
											"
										>
											<text class="p sm">￥</text>
											<text class="p big">{{
												(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
													? prop.originalPrice
													: prop.price) | NumFormat
											}}</text>
										</view>
									</template>
								</view>
								<view v-else class="no-price">
									<view class="p-stars">
										<text class="p-no">￥</text>
										<uni-grader :grade="Number(prop.priceGrade)"></uni-grader>
										<template v-if="prop.actStatus == 1">
											<view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
												{{ prop.promotions.name
												}}<text v-if="hasLogin && prop.priceFlag != 1"
													>:￥{{ prop.price | NumFormat }}</text
												>
											</view>
											<view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
										</template>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="container-section tui-skeleton">
					<view class="tab-title" v-if="!isEmpty">全部商品</view>
					<view class="section-product clearfix">
						<view class="floor-item-none" v-if="isEmpty">
							<image class="none-image" :src="iconNoneData1" mode=""></image>
							<view class="none-text">暂未发布任何商品~</view>
						</view>
						<view
							v-else
							class="floor-item"
							v-for="(prop, index) in productList"
							:key="index"
							@click.stop="navToDetailPage(prop.productId)"
						>
							<image class="item-img tui-skeleton-fillet" :src="prop.image" mode="aspectFill"></image>
							<view class="floor-item-type" v-if="prop.productType == 2">医疗器械</view>
							<view class="floor-item-content">
								<view class="title tui-skeleton-rect">
									<text class="mclap-tag" v-if="prop.beautyActFlag == 1">美博会</text>
									<text class="mclap" :class="prop.beautyActFlag == 1 ? 'indent' : ''">{{
										isInterceptHtmlFn(prop.name)
									}}</text>
								</view>
								<view class="floor-item-act">
									<template v-if="userIdentity === 3">
										<view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
										<template v-if="prop.actStatus === 1">
											<view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
												{{ prop.promotions.name }}
												<text v-if="hasLogin && prop.priceFlag != 1 && prop.shopId == shopId"
													>:￥{{ prop.price | NumFormat }}</text
												>
											</view>
											<view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
										</template>
										<template v-if="prop.svipProductFlag == 1">
											<template v-if="prop.priceFlag != 1">
												<view class="svip-tags">
													<view class="tags">SVIP</view>
													<view class="price" v-if="prop.shopId == shopId">{{
														prop.svipPriceTag
													}}</view>
												</view>
											</template>
											<template v-else>
												<view class="svip-tags"> <view class="tags none">SVIP</view> </view>
											</template>
										</template>
									</template>
									<template v-else>
										<view class="coupon-tags" v-if="prop.couponsLogo">优惠券</view>
										<template v-if="prop.actStatus === 1">
											<view class="floor-tags" v-if="PromotionsFormat(prop.promotions)">
												{{ prop.promotions.name }}
												<text v-if="hasLogin && prop.priceFlag != 1"
													>:￥{{ prop.price | NumFormat }}</text
												>
											</view>
											<view class="floor-tags" v-else>{{ prop.promotions.name }}</view>
										</template>
										<template v-if="prop.svipProductFlag == 1">
											<view class="svip-tags">
												<view class="tags" :class="{ none: !isShowVipFlag(prop) }">SVIP</view>
												<view class="price" v-if="isShowVipFlag(prop)">{{
													prop.svipPriceTag
												}}</view>
											</view>
										</template>
									</template>
								</view>
								<view class="" v-if="hasLogin">
									<template v-if="userIdentity == 3">
										<template v-if="prop.shopId == shopId">
											<view class="title-none" v-if="prop.priceFlag === 1">
												<text class="p big">￥未公开价格</text>
											</view>
											<view
												class="price tui-skeleton-rect"
												v-else
												:class="
													PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
														? 'none'
														: ''
												"
											>
												<text class="p sm">￥</text>
												<text class="p big">{{
													(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
														? prop.originalPrice
														: prop.price) | NumFormat
												}}</text>
											</view>
										</template>
										<template v-else>
											<view class="no-price">
												<view class="p-stars">
													<text class="p-no">￥</text>
													<uni-grader :grade="Number(prop.priceGrade)" :margin="14"></uni-grader>
												</view>
											</view>
										</template>
									</template>
									<template v-else-if="userIdentity === 4 && vipFlag != 1">
										<view class="title-none" v-if="prop.priceFlag === 1">
											<text class="p big">￥未公开价格</text>
										</view>
										<view class="title-none" v-else-if="prop.priceFlag === 2">
											<text class="p big">￥价格仅会员可见</text>
										</view>
										<view class="title-none" v-else-if="prop.priceFlag === 3">
											<text class="p big">￥仅医美机构可见</text>
										</view>
										<view
											class="price tui-skeleton-rect"
											v-if="prop.priceFlag === 0"
											:class="
												PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''
											"
										>
											<text class="p sm">￥</text>
											<text class="p big">{{
												(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
													? prop.originalPrice
													: prop.price) | NumFormat
											}}</text>
										</view>
									</template>
									<template v-else-if="userIdentity === 2 || (userIdentity == 4 && vipFlag == 1)">
										<view class="title-none" v-if="prop.priceFlag === 1">
											<text class="p big">￥未公开价格</text>
										</view>
										<view class="title-none" v-else-if="prop.priceFlag === 3 && firstClubType != 1">
											<text class="p big">￥仅医美机构可见</text>
										</view>
										<view
											class="price tui-skeleton-rect"
											v-else
											:class="
												PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''
											"
										>
											<text class="p sm">￥</text>
											<text class="p big">{{
												(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
													? prop.originalPrice
													: prop.price) | NumFormat
											}}</text>
										</view>
									</template>
									<template v-else>
										<view class="title-none" v-if="prop.priceFlag === 1">
											<text class="p big">￥未公开价格</text>
										</view>
										<view
											class="price tui-skeleton-rect"
											v-else
											:class="
												PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1 ? 'none' : ''
											"
										>
											<text class="p sm">￥</text>
											<text class="p big">{{
												(PromotionsFormat(prop.promotions) || prop.svipProductFlag == 1
													? prop.originalPrice
													: prop.price) | NumFormat
											}}</text>
										</view>
									</template>
								</view>
								<view v-else class="no-price">
									<view class="p-stars">
										<text class="p-no">￥</text>
										<uni-grader :grade="Number(prop.priceGrade)"></uni-grader>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</template>
		<!-- 供应商收集用户信息弹窗 -->
		<cmRossPopup v-if="showRossHtml" :popupShow="showRossHtml" :advertisInfo="advertisement" />
		<!-- 侧边 -->
		<scroll-top :isScrollTop="isScrollTop" :bottom="200" />
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import custom from './components/custom.vue' //自定义导航
import banner from '../components/banner.vue'
import uniGrader from '@/components/uni-grade/uni-grade.vue'
import cmRossPopup from '@/components/cm-module/cm-ross/cm-ross-popup'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
import cmSrsMixins from '@/utils/cmSrsMixins.js'
export default {
	components: {
		custom,
		banner,
		uniGrader,
		cmRossPopup
	},
	mixins: [cmSrsMixins],
	data() {
		return {
			CustomBar: this.CustomBar,
			headerBtnPosi: this.setHeaderBtnPosi(), // 获取设备顶部胶囊高度
			systeminfo: this.setSysteminfo(), // 获取设备信息
			headerColor: false,
			backPage: 1,
			userId: 0,
			supplierId: 0,
			shopId: 0,
			iconClass: 'icon-aixin',
			iconColor: '#ff9100',
			iconNoneData: 'https://static.caimei365.com/app/img/icon/icon-prnone.png',
			iconNoneData1: 'https://static.caimei365.com/app/img/icon/icon-pbnone.png',
			isScrollTop: false,
			isScrollTop: false,
			shopName: '',
			shopLogo: '',
			normalNum: 0,
			isFocus: false,
			isEmpty: false,
			isShowClose: false, //是否显示清空输入框图标
			skeletonShow: true,
			bannerImageList: [],
			shopCategory: [],
			recommendList: [],
			categoryProducts: [],
			productList: [],
			userIdentity: 0,
			firstClubType: 0,
			listQuery: {
				keyword: '',
				pageSize: 10,
				pageNum: 1,
				id: 0,
				identity: 0
			},
			choiceIndex:'',
			isShopAll:true,
			isHomeProduct: false,
			total: 0
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'isActivity', 'identity', 'clubType'])
	},
	onLoad(option) {
		if (option.type == 'share') {
			wxLogin.wxLoginAuthorize()
		}
		this.listQuery.id = this.supplierId = this.handleShopId = option.shopId
		this.initGetStotage()
	},
	filters: {
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		}
	},
	methods: {
		...mapMutations(['login', 'logout']),
		setHeaderBtnPosi() {
			// 获得胶囊按钮位置信息
			let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
			return headerBtnPosi
		},
		setSysteminfo() {
			let systeminfo
			uni.getSystemInfo({
				// 获取设备信息
				success: res => {
					systeminfo = res
				}
			})
			return systeminfo
		},
		async initGetStotage(option) {
			const userInfo = await this.$api.getStorage()
			this.shopId = userInfo.shopId ? userInfo.shopId : 0
			this.userId = userInfo.userId ? userInfo.userId : 0
			this.listQuery.identity = this.identity
			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
			this.firstClubType = this.clubType
			//初始化请求数据
			this.GetSupplierHomeDeatils()
			this.GetSupplierHomeProduct()
			this.GetSupplierHomeProductList()
			this.checkedIsRossSet()
			this.skeletonShow = false
		},
		async GetSupplierHomeDeatils() {
			//商铺详情
			try {
				const res = await this.ShopService.GetSupplierHomeDeatils({ shopId: this.supplierId })
				const data = res.data
				this.normalNum = data.normalNum
				this.shopName = data.name
				this.shopLogo = data.logo
				this.bannerImageList = data.shopHomeImages
				this.shopCategory = data.shopCategory
			} catch (e) {
				//TODO handle the exception
				console.log('获取供应商信息异常~')
			}
		},
		async GetSupplierHomeProduct() {
			//主推商品
			try {
				const res = await this.ShopService.GetSupplierHomeProduct({
					shopId: this.supplierId,
					identity: this.identity
				})
				const data = res.data
				if (data.length > 0) {
					this.isHomeProduct = false
					this.QueryProductPrice(data)
				}
			} catch (e) {
				//TODO handle the exception
				console.log('获取主推商品异常~')
			}
		},
		handleChangeAll(){
			this.choiceIndex = ''
			this.isShopAll = true
			this.GetSupplierHomeProduct()
			this.GetSupplierHomeProductList()
		},
		handleCategory(category, index){
			this.isShopAll = false
			this.choiceIndex = index
			this.getCategoryProducts({ shopId:this.supplierId,categoryId:category.id })
		},
		async getCategoryProducts(params) {
			//主推商品
			try {
				const res = await this.ShopService.getCategoryProducts(params)
				const data = res.data
				if (data.length > 0) {
					this.queryCategoryProductsPrice(data)
				}
			} catch (e) {
				//TODO handle the exception
				console.log('获取主推商品异常~')
			}
		},
		async GetSupplierHomeProductList() {
			//全部商品
			try {
				const res = await this.ShopService.GetSupplierHomeProductList(this.listQuery)
				if (res.data) {
					const data = JSON.parse(res.data)
					this.isEmpty = false
					this.total = data.total
					this.productList = data.items
					this.QueryProductPrice1(this.productList)
				} else {
					this.isEmpty = true
				}
			} catch (e) {
				//TODO handle the exception
				console.log('获取全部商品异常~')
			}
		},
		async GetMoreSupplierHomeProductList() {
			//加载分页
			try {
				this.listQuery.pageNum += 1
				const res = await this.ShopService.GetSupplierHomeProductList(this.listQuery)
				const data = JSON.parse(res.data)
				this.total = data.total
				this.productList = this.productList.concat(data.items)
				this.QueryProductPrice1(this.productList)
			} catch (e) {
				//TODO handle the exception
				console.log('获取供应商全部商品异常~')
			}
		},
		async queryCategoryProductsPrice(data) {
			//处理供应商分类商品价格
			try {
				let productIdArr = []
				let productIds = ''
				data.map(item => {
					// 0公开价格 1不公开价格 2仅对资质机构公开
					productIdArr.push(item.productId)
				})
				productIds = productIdArr.join(',')
				const res = await this.ProductService.querySearchProductPrice({
					userId: this.userId,
					productIds: productIds,
					source: 2
				})
				this.categoryProducts = this.ReturnNewProducts(data, res.data)
			} catch (e) {
				//TODO handle the exception
				console.log('获取供应商分类商品价格异常~')
			}
		},
		async QueryProductPrice(data) {
			//处理主推商品商品或者活动价格
			try {
				let productIdArr = []
				let productIds = ''
				data.map(item => {
					// 0公开价格 1不公开价格 2仅对资质机构公开
					productIdArr.push(item.productId)
				})
				productIds = productIdArr.join(',')
				const res = await this.ProductService.querySearchProductPrice({
					userId: this.userId,
					productIds: productIds,
					source: 2
				})
				this.recommendList = this.ReturnNewProducts(data, res.data)
				console.log('recommendList', this.recommendList)
			} catch (e) {
				//TODO handle the exception
				console.log('获取供应商全部商品价格异常~')
			}
		},
		async QueryProductPrice1(data) {
			//处理主推商品商品或者活动价格
			try {
				let productIdArr = []
				let productIds = ''
				data.map(item => {
					// 0公开价格 1不公开价格 2仅对资质机构公开
					productIdArr.push(item.productId)
				})
				productIds = productIdArr.join(',')
				const res = await this.ProductService.querySearchProductPrice({
					userId: this.userId,
					productIds: productIds,
					source: 2
				})
				this.productList = this.ReturnNewProducts(data, res.data)
			} catch (e) {
				//TODO handle the exception
				console.log('获取供应商全部商品价格异常~')
			}
		},
		ReturnNewProducts(listA, listB) {
			let NewArray = []
			listA.map(item => {
				for (let i = 0; i < listB.length; i++) {
					if (item.productId == listB[i].productId) {
						NewArray.push(Object.assign(item, listB[i]))
					}
				}
			})
			return NewArray
		},
		SubMitSearch() {
			//搜索
			this.listQuery.pageNum = 1
			this.handleChangeAll()
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		},
		onShowClose() {
			//输入框输入时触发
			this.inputEmpty(this.listQuery.keyword)
		},
		onFocus() {
			//输入框获取焦点时触发
			this.inputEmpty(this.listQuery.keyword)
		},
		delInputText() {
			//清除输入框内容
			this.listQuery.keyword = ''
			this.isShowClose = false
			this.isShowWrapper = false
			this.inputEmpty(this.listQuery.keyword)
			this.initGetSerachRecord()
		},
		inputEmpty(val) {
			if (val != '') {
				this.isShowClose = true
				this.isFocus = true
			} else {
				this.isShowClose = false
				this.isFocus = true
			}
		},
		isInterceptHtmlFn(text) {
			let name = this.$reg.interceptHtmlFn(text)
			return name
		},
		goSupplier() {
			//跳供应商资料页
			this.$api.navigateTo('/pages/supplier/user/supplier?shopId=' + this.supplierId)
		},
		navToDetailPage(id) {
			//跳转商品详情页
			this.$api.navigateTo(`/pages/goods/product?id=${id}`)
		},
		isShowVipFlag(pros) {
			/**
			 *显示SVIP和超级会员价格：
			 * 	个人机构（不是超级会员，但价格所有机构可见），
			 *	资质机构（不是超级会员，但价格所有机构可见或仅会员可见），
			 * 	超级会员（价格所有机构可见或仅会员可见），超级会员（是医美机构，价格仅医美可见）
			 *商品价格是否可见：priceFlag  0:所有机构可见 1：未公开价格 2：仅会员可见 3：仅医美机构可见
			 *	普通机构
			 * 		超级会员 && priceFlag === 0
			 * 	资质机构
			 * 		priceFlag !== 1 ||
			 * 		超级会员
			 * 			商品priceFlag === 3 && 是否是医美机构
			 */
			// 未登录 || 非会员
			if (!this.hasLogin || !this.vipFlag === 1) return false
			// 商品所有机构可见
			if (pros.priceFlag === 0) return true
			// 商品价格仅资质机构可见
			if ((pros.priceFlag === 2 && this.userIdentity === 2) || this.userIdentity === 1) return true
			// 商品价格仅医美机构可见
			if ((pros.priceFlag === 3 && this.userIdentity === 2 && this.firstClubType == 1) || this.userIdentity === 1)
				return true
			// 其它
			return false
		}
	},
	onPageScroll(e) {
		//实时获取到滚动的值
		if (e.scrollTop > 400) {
			this.isScrollTop = true
		} else {
			this.isScrollTop = false
		}
	},
	onReachBottom() {
		//上滑加载分页
		if (this.total > this.productList.length) {
			this.loadding = true
			this.pullUpOn = true
			this.GetMoreSupplierHomeProductList()
		}
	},
	onShareAppMessage(res) {
		//分享转发
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: '进入店铺，发现惊喜',
			path: `pages/supplier/user/my-shop?type=share&shopId=${this.listQuery.id}`
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.shop {
	width: 100%;
	height: auto;
}
.swiper-banner-nav {
	width: 100%;
	height: 80rpx;
	box-sizing: border-box;
	padding: 15rpx 24rpx;
	overflow: hidden;
	display: flex;
	align-items: center;
	position: relative;
	background: #ffffff;
	&.flexd{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		.tui-goods__item {
			display: inline-block;
			margin: 0 20rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-size: $font-size-26;
			color: #333333;
			text-align: center;
			&.active {
				color: #ff5b00;
				font-weight: bold;
				position: relative;
				&::before {
					content: '';
					width: 20rpx;
					height: 4rpx;
					border-radius: 2rpx;
					background: #ff5b00;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -10rpx;
				}
			}
		}
	}
}
.shop-search-main {
	width: 100%;
	height: 86rpx;
	background-color: #ffffff;
	box-sizing: border-box;
	padding: 10rpx 24rpx;
	.shop-search {
		width: 100%;
		height: 66rpx;
		border-radius: 33rpx;
		background-color: #f7f7f7;
		box-sizing: border-box;
		position: relative;
		.icon-sousuo {
			width: 80rpx;
			height: 66rpx;
			display: block;
			float: left;
			color: #707070;
			line-height: 66rpx;
			text-align: center;
			font-size: 36rpx;
		}
		.icon-shanchu1 {
			width: 80rpx;
			height: 66rpx;
			display: block;
			color: #8a8a8a;
			line-height: 66rpx;
			text-align: center;
			font-size: 36rpx;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 100;
		}
		.input {
			width: 580rpx;
			height: 66rpx;
			box-sizing: border-box;
			color: #666666;
			overflow: hidden;
			font-size: $font-size-24;
		}
	}
}
.container-shop {
	width: 100%;
	height: auto;
	padding:0 24rpx 10rpx 24rpx;
	box-sizing: border-box;
	background-color: #ffffff;
}
.product-supplier {
	width: 100%;
	height: 140rpx;
	padding: 30rpx 0 10rpx 0;
	box-sizing: border-box;
	background-color: #ffffff;
	position: relative;
	box-sizing: border-box;
	.logo {
		width: 100rpx;
		height: 100rpx;
		float: left;
		border: 1px solid #efefef;
		border-radius: 50%;
		image {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 50%;
		}
	}
	.main {
		width: 470rpx;
		height: 92rpx;
		float: left;
		margin-left: 20rpx;
		.name {
			width: 100%;
			line-height: 46rpx;
			float: left;
			font-size: $font-size-28;
			color: $text-color;
			float: right;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: left;
		}
		.massgs {
			width: 100%;
			line-height: 46rpx;
			float: left;
			font-size: $font-size-24;
			color: #999999;
			.label {
				float: left;
			}
			.p-stars {
				float: left;
				margin-left: 20rpx;
			}
			.acount {
				float: right;
				text {
					color: $color-system;
				}
			}
		}
	}
	.icon-xiayibu {
		line-height: 154rpx;
		display: inline-block;
		position: absolute;
		width: 48rpx;
		top: 0;
		right: 0;
		color: #b2b2b2;
	}
}
.container-section {
	width: 100%;
	height: auto;
	background-color: #f7f7f7;
	box-sizing: border-box;
	padding: 0 24rpx;
	.tab-title {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: $font-size-30;
		font-weight: bold;
	}
	.section-product {
		width: 100%;
		height: auto;
		margin-top: 24rpx;
		.floor-item-none {
			min-height: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.none-image {
				width: 260rpx;
				height: 260rpx;
			}
			.none-text {
				text-align: center;
				font-size: $font-size-28;
				color: #999999;
				line-height: 40rpx;
			}
		}
		.floor-item {
			width: 341rpx;
			height: auto;
			margin-right: 20rpx;
			font-size: $font-size-24;
			color: $text-color;
			background: #ffffff;
			line-height: 36rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			float: left;
			box-sizing: border-box;
			padding-bottom: 10rpx;
			position: relative;
			&:nth-child(2n) {
				margin-right: 0;
			}
			.floor-item-type {
				width: 64rpx;
				height: 64rpx;
				text-align: justify;
				box-sizing: border-box;
				padding: 10rpx;
				border-radius: 0 0 8rpx 8rpx;
				background-color: #33ccbf;
				font-size: $font-size-22;
				color: #ffffff;
				line-height: 25rpx;
				position: absolute;
				top: 0;
				right: 16rpx;
			}
			.item-img {
				width: 341rpx;
				height: 341rpx;
				border-radius: 20rpx 20rpx 0 0;
				display: block;
				margin-bottom: 20rpx;
			}
			.floor-item-content {
				width: 311rpx;
				padding: 0 15rpx;
			}
			.floor-item-act {
				display: block;
				width: 100%;
				height: 68rpx;
				text-align: center;
				box-sizing: border-box;
				padding: 16rpx 0;
				margin-top: 8rpx;
			}
			.title-none {
				font-size: $font-size-26;
				color: #ff2a2a;
				line-height: 54rpx;
				.btn {
					display: inline-block;
					float: right;
					width: 112rpx;
					height: 44rpx;
					background: $btn-confirm;
					line-height: 44rpx;
					font-size: $font-size-24;
					color: #ffffff;
					text-align: center;
					border-radius: 22rpx;
					margin-top: 17rpx;
				}
			}
			.title {
				width: 100%;
				height: 72rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 15rpx;
				padding: 0;
				position: relative;
				.mclap {
					width: 100%;
					line-height: 40rpx;
					text-overflow: ellipsis;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					font-size: 26rpx;
					&.indent {
						text-indent: 95rpx;
					}
				}
				.mclap-tag {
					display: block;
					width: 84rpx;
					height: 32rpx;
					background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
					border-radius: 4rpx 48rpx 4px 4px;
					line-height: 32rpx;
					font-size: $font-size-22;
					color: #ffffff;
					text-align: center;
					position: absolute;
					left: 0;
					top: 0;
				}
			}
			.no-price {
				height: 54rpx;
				line-height: 54rpx;
				display: flex;
				box-sizing: border-box;
				.p-no {
					font-size: $font-size-30;
					color: $text-color;
					display: block;
					float: left;
				}
				.p-stars {
					float: left;
				}
			}
			.price {
				color: #ff2a2a;
				line-height: 54rpx;
				&.none {
					text-decoration: line-through;
					color: #999999;
				}
				.sm {
					font-size: $font-size-24;
				}
				.big {
					font-size: $font-size-28;
				}
			}
		}
	}
}
</style>