<template>
	<div :data-theme="theme" class="store-home productSort"
		:style="{backgroundImage: `linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.9) 100%),url(${merchantInfo.backImage})`}">
		<tui-skeleton v-if="skeletonShow"></tui-skeleton>
		<view class="sys-head skeleton-rect" :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="fixed-top">
			<view class='navbarCon acea-row' :style="{ paddingRight: navbarRight + 'px',width:leftWindowWidth+ 'px' }">
				<view class="select_nav acea-row row-around tui-skeleton-rect homeBox" id="home" ref="selectNav">
					<text class="iconfont icon-fanhui2" @tap="returns"></text>
					<text class="nav_line"></text>
					<text class="iconfont icon-shouye4" @tap="goIndex"></text>
				</view>

				<navigator :url="'/pages/goods/goods_list/index?merId='+merid" class="input tui-skeleton-rect searchIpt"
					hover-class="none" :style="{ top: homeTop + 'rpx',width:searchIptWindowWidth+ 'px' }"><text
						class="iconfont icon-xiazai5"></text>
					输入商品名称搜索</navigator>
			</view>
		</view>

		<view v-if="navShow && tabActive === 0" class="nav acea-row">
			<view class="nav-cont">
				<view :class="{ active: navActive === 0 }" class="item" @click='set_where(1)'>
					<view class="cont">默认</view>
				</view>
				<view :class="{ active: navActive === 1 }" class="item" @click="set_where(2)">
					<view class="cont">
						价格
						<image v-if="price==1" :src='upPng'></image>
						<image v-else-if="price==2" :src='downPng'></image>
						<image v-else :src="urlDomain+'crmebimage/presets/horn.png'"></image>
					</view>
				</view>
				<view :class="{ active: navActive === 2 }" class="item" @click="set_where(3)">
					<view class="cont">
						销量
						<image v-if="stock==1" :src='upPng'></image>
						<image v-else-if="stock==2" :src='downPng'></image>
						<image v-else :src="urlDomain+'crmebimage/presets/horn.png'"></image>
					</view>
				</view>
			</view>
			<view class="item" @click="navActive = 3;isColumn = !isColumn" style="margin-left: 80rpx;">
				<view class="conts">
					<text :class="['layout-icon', 'iconfont', isColumn ? 'icon-pailie' : 'icon-tupianpailie']"></text>
				</view>
			</view>
		</view>

		<scroll-view class="main" scroll-y="true" @scroll="scrollHome">
			<merHome class="tui-skeleton-rect" :merchantInfo="merchantInfo" :merid="merid" type="detail"
				@merHomeHeight="merHomeHeight"></merHome>
			<view v-if="!navShow && tabActive === 0" class="nav acea-row">
				<view class="nav-cont">
					<view :class="{ active: navActive === 0 }" class="item" @click='set_where(1)'>
						<view class="cont tui-skeleton-rect">默认</view>
					</view>
					<view :class="{ active: navActive === 1 }" class="item" @click="set_where(2)">
						<view class="cont tui-skeleton-rect">
							价格
							<image v-if="price==1" :src='upPng'></image>
							<image v-else-if="price==2" :src='downPng'></image>
							<image v-else :src="urlDomain+'crmebimage/presets/horn.png'"></image>
						</view>
					</view>
					<view :class="{ active: navActive === 2 }" class="item" @click="set_where(3)">
						<view class="cont tui-skeleton-rect">
							销量
							<image v-if="stock==1" :src='upPng'></image>
							<image v-else-if="stock==2" :src='downPng'></image>
							<image v-else :src="urlDomain+'crmebimage/presets/horn.png'"></image>
						</view>
					</view>
				</view>
				<view class="item" @click="navActive = 3;isColumn = !isColumn" style="margin-left: 80rpx;">
					<view class="conts tui-skeleton-rect">
						<text
							:class="['layout-icon', 'iconfont', isColumn ? 'icon-pailie' : 'icon-tupianpailie']"></text>
					</view>
				</view>
			</view>
			<view class="tab-cont">
				<!-- 商品 -->
				<view v-show="tabActive === 0" class="productList">
					<view v-if="productList.length" id="goods" @touchmove="onTouchmove">
						<view v-if="!isColumn" class='list acea-row row-between-wrapper'
							:class='isColumn==true?"":"on"'>
							<view class='item' :class='isColumn==true?"":"on"' hover-class='none'
								v-for="(item,index) in productList" :key="index" @click="godDetail(item)">
								<view class='proPic' :class='isColumn==true?"":"on"'>
									<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
									<view v-if="item.activityStyle"
										:style="{ backgroundImage: `url(${item.activityStyle})` }"
										class="border-picture"></view>
								</view>
								<view class='text' :class='isColumn==true?"":"on"'>
									<view class='name line2'>
										<span v-if="item.productTags && item.productTags.locationLeftTitle.length"
											class="mr10 bg-color merType">{{item.productTags.locationLeftTitle[0].tagName}}</span>
										{{item.name}}
									</view>
									<view v-if="item.productTags && item.productTags.locationUnderTitle.length">
										<text
											v-for="items in item.productTags.locationUnderTitle.length>3?item.productTags.locationUnderTitle.slice(0,3):item.productTags.locationUnderTitle"
											:key="items.id" class="mr10 tagSolid">{{items.tagName}}</text>
									</view>
									<view class='money' :class='isColumn==true?"":"on"'>
										<svip-price :svipIconStyle="svipIconStyle" :productPrice="item"
											:svipPriceStyle="svipPriceStyle"></svip-price>
										<!-- 	<text class='num'>￥{{item.price}}</text> -->
										<view class="sold">
											<text v-if="Math.floor(item.replyNum)>0">{{item.replyNum}}条评论</text>
											<text v-else class="m-l-8">暂无评论</text>
											<text v-if="Number(item.positiveRatio)>0"
												class="m-l-8">好评{{$util.$h.Mul(item.positiveRatio,100)}}%</text>
										</view>
										<text class="buyed m-l-8">{{`已售${item.sales}${item.unitName}`}}</text>
									</view>
								</view>
							</view>
						</view>
						<view v-else class="goods">
							<WaterfallsFlow :wfList='productList' :type="1">
								<template slot-scope="{item}">
									<WaterfallsFlowItem :item="item" :type="1" :isStore="1" />
								</template>
							</WaterfallsFlow>
						</view>
					</view>
					<view class='loadingicon acea-row row-center-wrapper'>
						<text class='loading iconfont icon-jiazai'
							:hidden='goodsLoading==false'></text>{{productList.length?loadTitle:''}}
					</view>
					<emptyPage v-if="productList.length == 0 && !goodsLoading" mTop="35%" title="暂无商品~"
						:imgSrc="urlDomain+'crmebimage/presets/noShopper.png'"></emptyPage>
				</view>
				<!-- 分类 -->
				<view v-show="tabActive === 1">
					<view class="category">
						<view v-for="item in category" :key="item.id" class="section">
							<view class="head" @click="goCategoryGoods(item)">
								<view class="title">{{ item.name }}</view>
								<view class="iconfont icon-xiangyou"></view>
							</view>
							<view v-if="item.childList" class="body">
								<view v-for="value in item.childList" :key="value.id" class="item"
									@click="goCategoryGoods(value)">{{ value.name }}</view>
							</view>
						</view>
					</view>
					<view :hidden="!categoryLoading" class="acea-row row-center-wrapper loadingicon">
						<text class="iconfont icon-jiazai loading"></text>{{category.length?loadTitle:''}}
					</view>
					<emptyPage v-if="category.length == 0 && !categoryLoading" mTop="35%" title="暂无商品分类~"
						:imgSrc="urlDomain+'crmebimage/presets/noSearch.png'"></emptyPage>
				</view>

				<!-- 优惠券 -->
				<view v-show="tabActive === 2" class="couponBox">
					<view class="acea-row row-around navCoupon" :class="navShow ? 'headerfixed' : ''" :style="{ top: statusBarHeight+44 + 'px' }">
						<template>
							<view v-for="(item,index) in navList" :key="index"
								:class="['acea-row', 'row-middle', type === item.type ? 'on' : '']">
								<text @click="setType(item.type)">{{item.name}}</text>
							</view>
						</template>
					</view>
					<view v-if="couponsList.length" class="coupon coupon-list">
						<view v-for="(item,index) in couponsList" :key="index" class="item">
							<!-- :class="{gary:item.isUse}" -->
							<view class="left main_bg">
								<view class="money">
									<text>￥{{ item.money }}</text>
									<view class="pic-num" v-if="parseFloat(item.minPrice)>0">
										满{{ item.minPrice?Number(item.minPrice):'' }}可用</view>
								</view>

							</view>
							<view class="right">
								<view class="name line2">
									<text>{{item.category===1?'商家券':'商品券'}}</text>

									{{ item.name }}
								</view>
								<view class="time-wrap" style="justify-content: space-between;">
									<block v-if="item.isFixedTime">
										<view class="time">
											{{ item.useStartTimeStr | dateFormat }}-{{ item.useEndTimeStr | dateFormat }}
										</view>
									</block>
									<block v-else>
										<view>{{'领取后'+ item.day+ '天内可用'}}</view>
									</block>
									<block v-if="item.isUse">
										<view class='getgray iconfont icon-yilingqu1'></view>
									</block>
									<block v-else>
										<view class="button" @click="receiveCoupon(item)">领取</view>
									</block>
								</view>
							</view>
						</view>
					</view>
					<view class='loadingicon acea-row row-center-wrapper'>
						<text class='loading iconfont icon-jiazai'
							:hidden='loadingcoupon==false'></text>{{couponsList.length?loadTitle:''}}
					</view>
					<emptyPage v-if="couponsList.length == 0 && !loadingcoupon" title="暂无可用优惠券~"
						:imgSrc="urlDomain+'crmebimage/presets/noCoupon.png'"></emptyPage>
				</view>
			</view>
		</scroll-view>

		<view class="footer">
			<view v-for="(item, index) in tabs" :key="index" :class="{ active: tabActive === index }" class="item"
				@click="tab(index)">
				<view :class="['iconfont', item.icon]"></view>
				<view>{{ item.name }}</view>
			</view>
			<view class="item" @click="call">
				<view class="iconfont icon-kefu_o"></view>
				<view>联系客服</view>
			</view>
		</view>
	</div>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		getMerCategoryApi,
		getMerDetailApi,
		getMerCollectAddApi,
		getMerCollectCancelApi,
		getMerIndexInfoApi,
		getMerProListApi
	} from '@/api/merchant.js';
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
	import WaterfallsFlowItem from '@/components/WaterfallsFlowItem/WaterfallsFlowItem.vue'
	import svipPrice from '@/components/svipPrice.vue';
	import {
		mapGetters
	} from "vuex";
	import {
		getCoupons,
		setCouponReceive,
	} from '@/api/api.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import emptyPage from '@/components/emptyPage.vue'
	import Cache from '@/utils/cache';
	import merHome from '@/components/merHome/index.vue'
	import {
    goProductDetail
	} from '@/libs/order.js'
	import {
		chatConfig
	} from '@/utils/consumerType.js'
	import tuiSkeleton from '@/components/base/tui-skeleton.vue';
	import easyLoadimage from '@/components/base/easy-loadimage.vue';
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	let app = getApp();
	export default {
		components: {
			WaterfallsFlow,
			emptyPage,
			merHome,
			tuiSkeleton,
			easyLoadimage,
			WaterfallsFlowItem,
			svipPrice
		},
		data() {
			return {
				//普通价格
				svipPriceStyle: {
					svipBox: {
						height: '26rpx',
						borderRadius: '12rpx 56rpx 56rpx 20rpx',
					},
					icon: {
						height: '26rpx',
						fontSize: '18rpx',
						borderRadius: '12rpx 0 12rpx 2rpx'
					},
					price: {
						fontSize: '38rpx'
					},
					svipPrice: {
						fontSize: '22rpx'
					},
          topStyle:{
            top: '0'
          }
				},
				//svip价格
				svipIconStyle: {
					svipBox: {
						height: '26rpx',
						borderRadius: '24rpx 40rpx 40rpx 0.4rpx',
					},
					price: {
						fontSize: '38rpx'
					},
					svipPrice: {
						fontSize: '18rpx'
					}
				},
				urlDomain: this.$Cache.get("imgHost"),
				statusBarHeight: 0,
				navList: [{
						type: 1,
						name: '商家券',
						count: 0
					},
					{
						type: 2,
						name: '商品券',
						count: 0
					}
				],
				type: 1,
				mer_banner: '../images/store.png',
				couponsList: [],
				loadTitle: '加载更多',
				categoryLoading: false,
				category: [],
				// 底部菜单
				tabs: [{
						icon: 'icon-yizhan_o',
						name: '首页',
					},
					{
						icon: 'icon-yingyongAPP_o',
						name: '分类'
					},
					{
						icon: 'icon-huobiliu_o',
						name: '领券'
					}
				],
				productList: [],
				scrollTop: 0,
				merchantInfo: {},
				sortPrice: '',
				skeletonShow: true, //骨架屏显示隐藏
				navShow: false,
				navActive: 0,
				tabActive: 0, // 底部切换
				isColumn: true, // 商品列表排列方式
				stock: 0,
				merid: 0,
				price: 0,
				where: {
					keyword: '',
					priceOrder: '',
					salesOrder: '',
					page: 1,
					limit: 10,
					cid: 0,
					merId: 0
				},
				loading: false,
				loadend: false,
				goodsLoading: false,
				loadendcoupon: false,
				loadingcoupon: false,
				page: 1,
				limit: 10,
				homeTop: 20,
				navbarRight: 0,
				theme: app.globalData.theme,
				upPng: '',
				downPng: '',
				storeHeight: 0, //商户信息高度
				rightSafeArea: 0, // 微信小程序右上角的胶囊菜单宽度
				leftWindowWidth: 0, //小程序头部左侧除去右上角的胶囊菜单宽度的长度
				searchIptWindowWidth: 0 ,//小程序端搜索框长度
				isShowTop: false //控制头部是否固定
			}
		},
		computed: {
			...mapGetters(["merchantClassify", "merchantType", 'isLogin', 'uid']),
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
			window.addEventListener('scroll', this.handleScroll)
		},
		watch: {
			tabActive: function(value, old) {
				switch (value) {
					case 0:
						this.getGoods();
						break;
					case 1:
						if (this.service_open) {
							this.get_service_list();
						}
						break;
					case 2:
						this.getCoupon();
						break;
				}
			}

		},
		onShow() {
			// #ifdef MP || APP-PLUS
			this.statusBarHeight = statusBarHeight;
			// #endif
			// #ifdef H5
			this.statusBarHeight = 20;
			// #endif
		},

		created() {
			// #ifdef MP 
			// 获取窗口信息
			const windowInfo = uni.getWindowInfo()
			// 获取胶囊左边界坐标
			this.leftWindowWidth = uni.getMenuButtonBoundingClientRect().left;
			const query = uni.createSelectorQuery().in(this);
			const homeWidth = 0
			//搜索框宽度
			query.select('#home').boundingClientRect(data => {
				this.searchIptWindowWidth = this.leftWindowWidth - data.width - 50
			}).exec();
			// #endif
		},
		onLoad(options) {
			this.downPng = `${this.urlDomain}crmebimage/presets/down_red.png`;
			this.upPng = `${this.urlDomain}crmebimage/presets/up_red.png`;
			this.merid = parseInt(options.id)
			// #ifdef MP || APP-PLUS
			this.statusBarHeight = statusBarHeight;
			// #endif
			// #ifdef H5
			this.statusBarHeight = 20;
			// #endif
			switch (this.theme) {
				case 'theme2':
					this.upPng = `${this.urlDomain}crmebimage/presets/up_orange.png`;
					this.downPng = `${this.urlDomain}crmebimage/presets/down_orange.png`;
					break;
				case 'theme3':
					this.upPng = `${this.urlDomain}crmebimage/presets/up_green.png`;
					this.downPng = `${this.urlDomain}crmebimage/presets/down_green.png`;
					break;
				case 'theme4':
					this.upPng = `${this.urlDomain}crmebimage/presets/up_blue.png`;
					this.downPng = `${this.urlDomain}crmebimage/presets/down_blue.png`;
					break;
				case 'theme5':
					this.upPng = `${this.urlDomain}crmebimage/presets/up_pink.png`;
					this.downPng = `${this.urlDomain}crmebimage/presets/down_pink.png`;
					break;
				default:
					this.upPng = `${this.urlDomain}crmebimage/presets/up_red.png`;
					this.downPng = `${this.urlDomain}crmebimage/presets/down_red.png`;
					break;
			}
		},
		mounted: function() {
			// #ifdef MP || APP-PLUS
			this.statusBarHeight = statusBarHeight;
			// #endif
			// #ifdef H5
			this.statusBarHeight = 20;
			// #endif
			this.$store.dispatch('MerTypeList');
			this.getMerIndexInfo();
			this.getGoods();
			this.getMerCategory();
		},
		methods: {
			handleScroll() {
				const t = document.documentElement.scrollTop || document.body.scrollTop
				if (t > 100) {
					this.isShowTop = true
				} else {
					this.isShowTop = false
				}
			},
			//头部商户信息高度
			merHomeHeight(e) {
				this.storeHeight = e;
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 后退
			returns: function() {
				uni.navigateBack()
			},
			// 领取优惠券
			receiveCoupon(item) {
				let that = this;
				if (that.isLogin === false) {
					toLogin();
				} else {
					uni.showLoading({
						title: '加载中...'
					});

					setCouponReceive(item.id).then(res => {
						uni.showToast({
							title: '领取成功',
							icon: 'none'
						})
						uni.hideLoading();
						item.isUse = !item.isUse
					}).catch(err => {
						uni.showToast({
							title: err,
							icon: 'none'
						})
						uni.hideLoading();
					})
				}
			},
			setType: function(type) {
				if (this.type !== type) {
					this.type = type;
					this.couponsList = [];
					this.page = 1;
					this.loadendcoupon = false;
					this.getCoupon();
				}
			},
			onTouchmove(e) {
				if (this.loadend) return;
				if (this.loading) return;
				if (this.goodsLoading) return;
				const query = uni.createSelectorQuery().in(this);
				query.select('#goods').boundingClientRect(data => {
					if (data.bottom < 1500 && data.top < 0) {

						this.getGoods();
					}
				}).exec();
				// 模拟触底刷新
			},
			getMerIndexInfo() {
				let that = this;
				getMerIndexInfoApi(this.merid).then(res => {
					this.merchantInfo = res.data
					uni.setNavigationBarTitle({
						title: res.data.name
					})
					this.$store.commit('MERCHANTJINFO', res.data);
					this.skeletonShow = false;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
					this.skeletonShow = false;
				});
			},
			getMerCategory() {
				getMerCategoryApi(this.merid).then(res => {
					this.category = res.data
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				});
			},
			goCategoryGoods(item) {
				uni.navigateTo({
					url: '/pages/goods/goods_list/index?merId=' + this.merid + '&cid=' +
						item.id
				})
			},
			// 去详情页
			godDetail(item) {
        goProductDetail(item.id, 0, '');
			},
			// 获取商铺优惠券
			getCoupon: function() {
				let that = this
				if (that.loadendcoupon) return false;
				if (that.loadingcoupon) return false;
				that.loadingcoupon = true;
				getCoupons({
					page: that.page,
					limit: that.limit,
					category: this.type,
					merId: this.merid
				}).then(res => {
					let list = res.data.list,
						loadend = list.length < that.limit;
					let couponsList = that.$util.SplitArray(list, that.couponsList);
					that.$set(that, 'couponsList', couponsList);
					that.loadendcoupon = loadend;
					that.loadTitle = loadend ? '我也是有底线的' : '显示更多';
					that.page = that.page + 1;
					that.loadingcoupon = false;
					that.isShow = true;
				}).catch(err => {
					that.loadingcoupon = false;
					that.loadTitle = '显示更多';
				});
			},
			// 选择条件展示商品
			set_where: function(param) {
				this.clear();
				switch (param) {
					case 1:
						this.price = 0;
						this.stock = 0;
						this.navActive = 0;
						break;
					case 2:
						if (this.price == 0) this.price = 1;
						else if (this.price == 1) this.price = 2;
						else if (this.price == 2) this.price = 1;
						this.stock = 0;
						this.navActive = 1;
						break;
					case 3:
						if (this.stock == 0) this.stock = 1;
						else if (this.stock == 1) this.stock = 2;
						else if (this.stock == 2) this.stock = 1;
						this.price = 0
						this.navActive = 2;
						break;
					case 4:
						this.price = 0;
						this.stock = 0;
						this.navActive = 3;
						break;
				}
				this.getGoods();
			},
			clear() {
				this.loading = false;
				this.loadend = false;
				this.where = {
					keyword: '',
					priceOrder: '',
					salesOrder: '',
					page: 1,
					limit: 20,
					cid: 0
				};
				this.productList = [];
			},
			getGoods() {
				let that = this;
				if (that.loadend) return;
				if (that.goodsLoading) return;
				that.goodsLoading = true;
				this.where.merId = this.merid
				if (this.price == 0) this.where.priceOrder = '';
				else if (this.price == 1) this.where.priceOrder = 'asc';
				else if (this.price == 2) this.where.priceOrder = 'desc';
				if (this.stock == 0) this.where.salesOrder = '';
				else if (this.stock == 1) this.where.salesOrder = 'asc';
				else if (this.stock == 2) this.where.salesOrder = 'desc';
				that.loadTitle = '';
				getMerProListApi(that.where).then(res => {
					let list = res.data.list;
					let goodsList = that.$util.SplitArray(list, that.productList);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.goodsLoading = false;
					that.loadTitle = loadend ? '我也是有底线的' : '显示更多';
					that.$set(that, 'productList', goodsList);
					that.$set(that.where, 'page', that.where.page + 1);
				}).catch(err => {
					that.goodsLoading = false;
					uni.showToast({
						title: err,
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 1000);
				});
			},
			// 商铺底部切换
			tab: function(param) {
				this.tabActive = param;
			},
			//客服跳转
			call: function() {
				chatConfig(this.merchantInfo);
			},
			stickyChange: function(e) {
				let index = e.index;
				this.lists[index].stickyTop = e.top;
			},
			// 商铺首页滚动 navbar 吸顶
			scrollHome: function(e) {
				uni.$emit('scroll');
				this.navShow = e.detail.scrollTop >= this.storeHeight - 20;
			},
			search() {
				uni.navigateTo({
					url: '/pages/goods/goods_list/index?merId=' + this.merid
				})
			},
			returns() {
				uni.navigateBack()
			},
		},
		onPullDownRefresh() {
			// 模拟上拉刷新
			setTimeout(() => {
				const newList = this.productList.reverse();
				this.productList = newList;
				uni.stopPullDownRefresh();
			}, 500)
		}
	}
</script>

<style lang="scss" scoped>
	.headerfixed {
    /* #ifdef H5 */
    top: 88rpx;
    /* #endif */
	  z-index: 99;
	  position: fixed;
	}
	.iconfont {
		font-size: 28rpx !important;
	}

	.select_nav {
		width: 140rpx;
		height: 54rpx;
		border-radius: 33rpx;
		border: 1px solid rgba(255, 255, 255, .5);
		color: #fff;
		font-size: 18px;
		line-height: 54rpx;
		align-items: center;
	}

	.px-20 {
		padding: 0 20rpx 0;
	}

	.nav_line {
		content: '';
		display: inline-block;
		width: 1px;
		height: 34rpx;
		background: #b3b3b3 !important;
		color: #b3b3b3 !important;
	}

	.navbarCon {
		padding: 10rpx 20rpx 0 20rpx;
		/* #ifdef H5 || APP */
		width: 800rpx !important;
		/* #endif */
	}

	.h5_back {
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		width: 140rpx;
		height: 54rpx;
		background: #3B3F41;
		border-radius: 27rpx;

		.iconfont {
			color: #fff;
		}
	}

	.input {
		display: flex;
		align-items: center;
		/* #ifdef MP */
		//width: 42%;
		/* #endif */
		/* #ifndef MP */
		width: 538rpx;
		/* #endif */
		height: 55rpx;
		padding: 0 0 0 30rpx;
		border: 1px solid rgba(0, 0, 0, 0.07);
		border-radius: 33rpx;
		color: #D9D9D9;
		font-size: 26rpx;
		// margin: auto;
		background: rgba(255, 255, 255, 0.3);
		margin-left: 20rpx;

		.iconfont {
			margin-right: 20rpx;
			font-size: 26rpx;
			color: #D9D9D9;
		}
	}

	.main_bg {
		@include main_bg_color(theme);
	}

	.select {
		@include main_color(theme);
		@include coupons_border_color(theme);
	}

	.sold {
		font-size: 20rpx;
		color: #888888;
	}

	.navCoupon {
		width: 100%;
		height: 80rpx;
		color: #999999;
		background-color: #fff;
	}

	.navCoupon .acea-row {
		border-top: 5rpx solid transparent;
		border-bottom: 5rpx solid transparent;
		cursor: pointer;
	}

	.navCoupon .acea-row.on {
		@include tab_border_bottom(theme);
		@include main_color(theme);
	}

	.tab-cont {
		background: #f5f5f5;
		min-height: 500rpx;
	}

	.couponBox {
		/deep/.empty-box {
			padding-top: 200rpx;
			margin-top: 0 !important;
		}
	}

	.main {
		flex: 1;
		min-height: 0rpx;
		height: calc(100vh - var(--window-top)); //calc()是动态计算函数

		/deep/.store {
			padding: 0 24rpx 24rpx 24rpx;
		}

		/deep/.noCheck {
			color: #666;
		}

		/deep/.pictrue {
			width: 74rpx;
			height: 74rpx;
			border-radius: 6rpx;
			overflow: hidden;
		}
	}

	.font-bg-red {
		padding: 4rpx;
		@include main_bg_color(theme);
		color: #fff;
		font-size: 18rpx;
		display: inline-block;
		border-radius: 4rpx;
	}

	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-left: 24rpx;
		background-color: #F5F5F5;
		width: 100%;
	}

	.coupon-list {
		margin-top: 0;

		.right {
			position: relative;
			overflow: hidden;
		}
	}

	.coupon {
		padding: 24rpx;
		background-color: #F5F5F5;

		.item {
			display: flex;
			margin-bottom: 16rpx;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 240rpx;
				font-weight: 500;
				font-size: 24rpx;
				line-height: 1;
				color: #FFFFFF;

				&.gary {
					background-image: url('data:image/png;base64, ');
				}

				.money {
					text {
						margin-left: 10rpx;
						font-size: 60rpx;
					}

				}
			}

			.right {
				flex: 1;
				min-width: 0;
				padding: 0 20rpx;
				background-color: #FFFFFF;

				.name {
					border-bottom: 1rpx solid #F0F0F0;
					font-weight: 500;
					height: 115rpx;
					font-size: 30;
					line-height: 46rpx;
					color: #282828;
					padding: 15rpx 0;

					text {
						display: inline-block;
						// width: 84rpx;
						// height: 28rpx;
						padding: 0 10rpx;
						border-radius: 14rpx;
						margin-right: 15rpx;
						background-color: #FFF4F3;
						font-weight: 500;
						font-size: 20rpx;
						line-height: 26rpx;
						text-align: center;
						@include main_color(theme);
						@include coupons_border_color(theme);

						&.gary {
							border-color: #BBB;
							color: #bbb;
							background-color: #F5F5F5;
						}
					}
				}

				.time-wrap {
					display: flex;
					align-items: center;
					padding-top: 16rpx;
					padding-bottom: 16rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;

					.time {
						flex: 1;
						min-width: 0;
					}

					.button {
						width: 136rpx;
						height: 44rpx;
						border-radius: 22rpx;
						@include main_bg_color(theme);
						font-weight: 500;
						font-size: 22rpx;
						line-height: 44rpx;
						text-align: center;
						color: #FFFFFF;

						&.gary {
							background-color: #999;
						}
					}
				}
			}
		}

		.disabled {
			.left {
				background-image: url(../static/images/coupon2.png);
			}

			.right {
				.name {
					text {
						border-color: #C1C1C1;
						color: #C1C1C1;
					}
				}

				.time-wrap {
					.button {
						background-color: #CCCCCC;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.category {
		padding-top: 34rpx;
		padding-right: 20rpx;
		padding-left: 20rpx;

		.section {
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			background-color: #FFFFFF;

			.head {
				position: relative;
				display: flex;
				align-items: center;
				height: 90rpx;
				padding-right: 20rpx;
				padding-left: 36rpx;
				font-weight: bold;
				color: #282828;

				&::before {
					content: " ";
					position: absolute;
					top: 50%;
					left: 20rpx;
					width: 6rpx;
					height: 24rpx;
					@include main_bg_color(theme);
					transform: translateY(-50%);
				}

				.title {
					flex: 1;
					min-width: 0;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 30rpx;
				}

				.iconfont {
					font-size: 22rpx;
					line-height: 1;
				}
			}

			.body {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				padding: 9rpx 36rpx 14rpx;

				.item {
					width: 314rpx;
					height: 84rpx;
					padding-right: 30rpx;
					padding-left: 30rpx;
					border-radius: 10rpx;
					background-color: #F5F5F5;
					margin-bottom: 10rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 500;
					font-size: 26rpx;
					line-height: 84rpx;
					color: #282828;
				}
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		display: flex;
		width: 100%;
		padding-top: 12rpx;
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
		background-color: #FFFFFF;
		opacity: 0.96;

		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-weight: 500;
			font-size: 20rpx;
			color: #282828;

			.iconfont {
				font-size: 43rpx !important;
			}
		}

		.active {
			@include main_color(theme);
		}
	}

	.productList {
		background: #f5f5f5;
	}

	.productList .list.on {
		border-radius: 14rpx;
		margin-top: 0 !important;
		background-color: #fff;
		padding: 40rpx 0 0 0;

	}

	.productList .list .item {
		width: 335rpx;
		background-color: #fff;
		border-radius: 14rpx;
		margin-bottom: 20rpx;
	}

	.productList .list.item {
		&::before {
			content: " ";
			position: absolute;
			top: 0;
			right: 10px;
			left: 125px;
			border-top: 0.5px solid #f5f5f5;
		}
	}

	.productList .list .item.on {
		width: 100%;
		display: flex;
		padding: 0 24rpx 50rpx 24rpx;
		margin: 0;
		border-radius: 14rpx;
		overflow: hidden;
	}

	.productList .list .item .proPic,
	/deep/.easy-loadimage,
	uni-image {
		position: relative;
	}

	.productList .list .item .proPic.on /deep/.easy-loadimage,
	uni-image uni-image {
		width: 240rpx;
		height: 240rpx;
		border-radius: 14rpx;
		overflow: hidden;
	}

	.productList .list .item .proPic image.on {
		border-radius: 6rpx;
		overflow: hidden;
	}

	.productList .list .item .text.on {

		width: 456rpx;
		padding: 0 0 0 20rpx;
		position: relative;

		&::after {
			content: '';
			display: block;
			width: 94%;
			border-bottom: 1rpx solid #f6f6f6;
			position: absolute;
			right: 2rpx;
			bottom: -24rpx;
		}
	}

	.productList .list .item .text .name {
		font-size: 28rpx;
		font-weight: bold;
		margin-top: 8rpx;
		color: #333333;
		margin-bottom: 30rpx;
	}

	.productList .list .item .text .money.on {
		//margin-top: 80rpx;
	}

	.productList .list .item .text .money .num {
		font-size: 38rpx;
		font-weight: 900;
		@include price_color(theme);
	}

	.productList .list .item .text .y-money {
		font-size: 26rpx;
		color: #888888;
		text-decoration: line-through;
		margin-left: 14rpx;
	}

	.store-home-top {
		width: 100%;
		height: 360rpx;
		position: relative;
	}

	.store-home {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		padding-bottom: 100rpx;
		background: left top/750rpx 390rpx no-repeat fixed;
		overflow: hidden;
	}

	.fixed-top {
		top: 0;
		left: 0;
		z-index: 9;
		margin-bottom: 24rpx;
	}

	.nav.fixed {
		position: fixed;
		left: 0;
		width: 100%;
		display: flex;

		.nav-cont {
			position: absolute;
			width: 80%;
			justify-content: space-between;
		}
	}

	.nav {
		position: relative;
		padding: 0 30rpx;
		margin-bottom: 20rpx;

		.nav-cont {
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// height: 84rpx;
		}

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			min-width: 0;

			.cont {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 12rpx;
				height: 44rpx;
				border-radius: 22rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;

				.arrow-icon {
					margin-left: 10rpx;
					font-size: 18rpx;
				}

				.layout-icon {
					font-size: 32rpx;
				}

				.icon-pailie {
					font-size: 32rpx;
				}

				image {
					width: 15rpx;
					height: 21rpx;
					margin-left: 7rpx;
				}
			}
		}

		.active {
			.cont {
				background-color: #FFFFFF;
				font-weight: bold;
				@include main_color(theme);
			}
		}

		.select {
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 2;
			width: 100%;
			padding-right: 40rpx;
			padding-bottom: 28rpx;
			padding-left: 74rpx;
			border-bottom-right-radius: 24rpx;
			border-bottom-left-radius: 24rpx;
			background-color: #FFFFFF;

			.item {
				margin-top: 28rpx;
				font-size: 24rpx;
				color: #454545;
			}

			.active {
				//background: url(../../../static/images/active.png) right center/20rpx no-repeat;
				color: #E93323;
			}
		}
	}


	.icon-dingbufanhui,
	.icon-more {
		color: #fff;
	}

	.searchIpt {
		/* #ifdef H5 || APP */
		width: 550rpx !important;
		height: 54rpx;
		line-height: 54rpx;
		/* #endif */
	}

	.productSort .header .input {
		width: 558rpx;
		height: 60rpx;
		background-color: #3F4244;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
	}

	.productSort .header .input .iconfont {
		font-size: 26rpx;
		color: #666;
	}

	.productSort .header .input .place {
		padding-left: 12rpx;
		color: #ccc;
		font-size: 26rpx;
	}

	.getgray {
		font-size: 134rpx !important;
		@include main_color(theme);
		position: absolute;
		right: -20rpx;
		bottom: -20rpx;
		opacity: .36;
	}

	.pic-num {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.m-l-8 {
		margin-left: 8rpx;
	}

	.conts {
		color: #fff;
	}

	.buyed {
		font-size: 20rpx;
		color: #888888;
	}
</style>