2021-8-24

pages/index/index.vue

@@ -1,1251 +1,1243 @@
-<template>
+<template>
-	<view class="container">
+	<view class="container">
-		<!-- 小程序头部兼容 -->
+		<!-- 小程序头部兼容 -->
-		<!-- #ifdef MP -->
+		<!-- #ifdef MP -->
-		<view class="input-box flex" @click="clickSearch">
+		<view class="input-box flex" @click="clickSearch">
-			<view class=" input-content flex">
+			<view class=" input-content flex">
-				<view class="iconfont iconsearch"></view>
+				<view class="iconfont iconsearch"></view>
-				<view class="input"><input type="text" disabled placeholder="搜索关键字"></view>
+				<view class="input"><input type="text" disabled placeholder="搜索关键字"></view>
-			</view>
+			</view>
-		</view>
+		</view>
-		<view class="mp-height"></view>
+		<view class="mp-height"></view>
-			<!-- #endif -->
+			<!-- #endif -->
-			<!-- 背景色区域 -->
+			<!-- 背景色区域 -->
-			<view class="bg-contain">
+			<view class="bg-contain">
-				<image src="./contain.png" mode="scaleToFill"></image>
+				<image src="./contain.png" mode="scaleToFill">
-				<image class="lunbo" src="./lunbo.png" mode="scaleToFill"></image>
+				</image>
-			</view>
+				<!-- 头部轮播 -->
-			<!-- 头部轮播 -->
+					<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
-				<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
+						<swiper-item v-for="(item,index) in carouselList" class="carousel-item" @click="bannerNavToUrl(item)">
-				<!-- <view class="lunbo">
+							<image src="./lunbo.png" mode="scaleToFill"></image>
-					<image src="./lunbo.png" mode=""></image>
+						</swiper-item>
-				</view> -->
+					</swiper>
-					<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="bannerNavToUrl(item)">
+			</view>
-					</swiper-item>
+				<!-- 自定义swiper指示器 -->
-				</swiper>
+				<!-- <view class="swiper-dots">
-				<!-- 自定义swiper指示器 -->
+					<text class="num">{{ swiperCurrent + 1 }}</text>
-				<!-- <view class="swiper-dots">
+					<text class="sign">/</text>
-					<text class="num">{{ swiperCurrent + 1 }}</text>
+					<text class="num">{{ swiperLength }}</text>
-					<text class="sign">/</text>
+				</view> -->
-					<text class="num">{{ swiperLength }}</text>
+		<!-- 分类 -->
-				</view> -->
+		<view class="cate-section">
-		<!-- 分类 -->
+			<view class="cate-item">
-		<view class="cate-section">
+				<image src="/static/icon/c3.png"></image>
-			<view class="cate-item">
+				<text>联盟礼包</text>
-				<image src="/static/icon/c3.png"></image>
+			</view>
-				<text>联盟礼包</text>
+			<navigator url="/pages/product/groupBooking/index">
-			</view>
+				<view class="cate-item">
-			<navigator url="/pages/product/groupBooking/index">
+					<image src="/static/icon/c5.png"></image>
-				<view class="cate-item">
+					<text>超值拼团</text>
-					<image src="/static/icon/c5.png"></image>
+				</view>
-					<text>超值拼团</text>
+			</navigator>
-				</view>
+			<navigator url="/pages/product/seckill">
-			</navigator>
+				<view class="cate-item">
-			<navigator url="/pages/product/seckill">
+					<image src="/static/icon/c7.png"></image>
-				<view class="cate-item">
+					<text>限时秒杀</text>
-					<image src="/static/icon/c7.png"></image>
+				</view>
-					<text>限时秒杀</text>
+			</navigator>
-				</view>
+			<navigator url="/pages/index/sign">
-			</navigator>
+				<view class="cate-item">
-			<navigator url="/pages/index/sign">
+					<image src="/static/icon/c8.png"></image>
-				<view class="cate-item">
+					<text>每日签到</text>
-					<image src="/static/icon/c8.png"></image>
+				</view>
-					<text>每日签到</text>
+			</navigator>
-				</view>
+		</view>
-			</navigator>
+		
-		</view>
+		<view class="ad-1"><image src="/static/temp/ad1.jpg" mode="scaleToFill"></image></view>
-		
+		<!-- 可领取优惠券 -->
-		<view class="ad-1"><image src="/static/temp/ad1.jpg" mode="scaleToFill"></image></view>
+		<!-- <scroll-view class="coupon-box clamp" :scroll-x="true">
-		<!-- 可领取优惠券 -->
+			<view v-for="(item, index) in couponArray" :key="item.id" class="coupon-list">
-		<!-- <scroll-view class="coupon-box clamp" :scroll-x="true">
+				<view class="row flex">
-			<view v-for="(item, index) in couponArray" :key="item.id" class="coupon-list">
+					<view class="list-money flex">
-				<view class="row flex">
+						<image :src="item.is_use ? '/static/img/img02.png' : '/static/img/img03.png'" mode="scaleToFill"></image>
-					<view class="list-money flex">
+						<view class="list-money-text">
-						<image :src="item.is_use ? '/static/img/img02.png' : '/static/img/img03.png'" mode="scaleToFill"></image>
+							<view class="tit" :class="{ noAction: item.is_use }">
-						<view class="list-money-text">
+								<text>{{ item.coupon_price }}</text>
-							<view class="tit" :class="{ noAction: item.is_use }">
+							</view>
-								<text>{{ item.coupon_price }}</text>
+						</view>
-							</view>
+					</view>
-						</view>
+					<view class="list-interval position-relative">
-					</view>
+						<view class="bottom"></view>
-					<view class="list-interval position-relative">
+						<view class="top"></view>
-						<view class="bottom"></view>
+					</view>
-						<view class="top"></view>
+					<view class="row_list_right">
-					</view>
+						<view class="right_top"><text class="right_title" :class="{ noAction: item.is_use }">满减券</text></view>
-					<view class="row_list_right">
+						<view class="right_time">
-						<view class="right_top"><text class="right_title" :class="{ noAction: item.is_use }">满减券</text></view>
+							<text>满{{ item.use_min_price }}使用</text>
-						<view class="right_time">
+						</view>
-							<text>满{{ item.use_min_price }}使用</text>
+					</view>
-						</view>
+					<view class="right_use" :class="{ noAction: item.is_use }" @click="setCoupons(item)">
-					</view>
+						<text>{{ item.is_use ? '已领取' : '立即领取' }}</text>
-					<view class="right_use" :class="{ noAction: item.is_use }" @click="setCoupons(item)">
+					</view>
-						<text>{{ item.is_use ? '已领取' : '立即领取' }}</text>
+				</view>
-					</view>
+			</view>
-				</view>
+		</scroll-view> -->
-			</view>
+
-		</scroll-view> -->
+		<!-- 秒杀楼层 -->
-
+		<seckill></seckill>
-		<!-- 秒杀楼层 -->
+		<!-- 砍价 -->
-		<seckill></seckill>
+		<view class="hot-goods">
-		<!-- 砍价 -->
+			<view class="hot-headers flex-upDown-center">
-		<view class="hot-goods">
+				<!-- <image class="img" src="../../static/img/img44.png"></image> -->
-			<view class="hot-headers flex-upDown-center">
+				<view class="hot-title">超值砍价</view>
-				<!-- <image class="img" src="../../static/img/img44.png"></image> -->
+				<view><view class="more" @click.stop="navTo('/pages/activity/goods_bargain/index')">更多</view></view>
-				<view class="hot-title">超值砍价</view>
+			</view>
-				<view><view class="more" @click.stop="navTo('/pages/activity/goods_bargain/index')">更多</view></view>
+			<view class="hot-lists" v-for="(baritem, barindex) in bargainlist" :key="barindex" @click.stop="navToDetailPages(baritem)">
-			</view>
+				<view class="hot-produce">
-			<view class="hot-lists" v-for="(baritem, barindex) in bargainlist" :key="barindex" @click.stop="navToDetailPages(baritem)">
+					<view class="produce-image"><image :src="baritem.image"></image></view>
-				<view class="hot-produce">
+					<view class="produce-content">
-					<view class="produce-image"><image :src="baritem.image"></image></view>
+						<view class="produce-price1 ">
-					<view class="produce-content">
+							<view class="produce-name line2">{{ baritem.title }}</view>
-						<view class="produce-price1 ">
+							<!-- <view class="produce-info">
-							<view class="produce-name line2">{{ baritem.title }}</view>
+								已抢
-							<!-- <view class="produce-info">
+								<text style="color: #FF383E">{{ baritem.sales }}</text>
-								已抢
+								箱/仅剩
-								<text style="color: #FF383E">{{ baritem.sales }}</text>
+								<text style="color:#FF383E">{{ baritem.stock }}</text>
-								箱/仅剩
+								箱
-								<text style="color:#FF383E">{{ baritem.stock }}</text>
+							</view> -->
-								箱
+							<view class="produce-center">
-							</view> -->
+								<view class="kanjia_word">
-							<view class="produce-center">
+									<view class="word-1">原价:￥{{ baritem.price }}</view>
-								<view class="kanjia_word">
+									<view class="word-2">
-									<view class="word-1">原价:￥{{ baritem.price }}</view>
+										砍后价
-									<view class="word-2">
+										<text style="font-size: 24rpx;">￥</text>
-										砍后价
+										<text style="font-size: 36rpx;">{{ baritem.min_price }}</text>
-										<text style="font-size: 24rpx;">￥</text>
+									</view>
-										<text style="font-size: 36rpx;">{{ baritem.min_price }}</text>
+								</view>
-									</view>
+								<view
-								</view>
+									class="kanjia_button flex-center"
-								<view
+									@tap.stop="openSubscribe('/pages/activity/goods_bargain_details/index?id=' + baritem.id + '&bargain=' + userInfo.uid)"
-									class="kanjia_button flex-center"
+								>
-									@tap.stop="openSubscribe('/pages/activity/goods_bargain_details/index?id=' + baritem.id + '&bargain=' + userInfo.uid)"
+									<view>查看详情</view>
-								>
+								</view>
-									<view>查看详情</view>
+							</view>
-								</view>
+						</view>
-							</view>
+					</view>
-						</view>
+				</view>
-					</view>
+			</view>
-				</view>
+		</view>
-			</view>
+		<!-- 拼团楼层 -->
-		</view>
+
-		<!-- 拼团楼层 -->
+		<view class="recommend flex">
-
+			<view class="recommend_list" @click="change(ls.id)" v-for="ls in recommend">
-		<view class="recommend flex">
+				<view class="re_title" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_title }}</view>
-			<view class="recommend_list" @click="change(ls.id)" v-for="ls in recommend">
+				<view class="re_name" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_name }}</view>
-				<view class="re_title" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_title }}</view>
+				<image class="selected_icon" v-bind:class="{ active: ls.id == checkid }" src="/static/img/img04.png"></image>
-				<view class="re_name" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_name }}</view>
+			</view>
-				<image class="selected_icon" v-bind:class="{ active: ls.id == checkid }" src="/static/img/img04.png"></image>
+		</view>
-			</view>
+		<swiper id="list-box" @change="listChange" :style="{ height: swiperHeight + 'px' }" :current="checkid">
-		</view>
+			<swiper-item>
-		<swiper id="list-box" @change="listChange" :style="{ height: swiperHeight + 'px' }" :current="checkid">
+				<!-- <scroll-view scroll-y="true" class="list-box-h"> -->
-			<swiper-item>
+				<view class="guess-section">
-				<!-- <scroll-view scroll-y="true" class="list-box-h"> -->
+					<view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-				<view class="guess-section">
+						<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-					<view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
+						<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-						<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
+						<view class="cmy-hr"></view>
-						<text class="title clamp margin-c-20">{{ item.store_name }}</text>
+						<view class="price margin-c-20 flex">
-						<view class="cmy-hr"></view>
+							<view>
-						<view class="price margin-c-20 flex">
+								<text class="font-size-sm ">￥</text>
-							<view>
+								{{ item.price }}
-								<text class="font-size-sm ">￥</text>
+							</view>
-								{{ item.price }}
+							<view class="font-size-sm">
-							</view>
+								<text class="font-color-gray">{{ item.sales }}人购买</text>
-							<view class="font-size-sm">
+							</view>
-								<text class="font-color-gray">{{ item.sales }}人购买</text>
+						</view>
-							</view>
+					</view>
-						</view>
+				</view>
-					</view>
+				<!-- </scroll-view> -->
-				</view>
+			</swiper-item>
-				<!-- </scroll-view> -->
+			<swiper-item>
-			</swiper-item>
+				<scroll-view scroll-y="true" class="list-box-h">
-			<swiper-item>
+					<view class="guess-section">
-				<scroll-view scroll-y="true" class="list-box-h">
+						<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-					<view class="guess-section">
+							<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-						<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
+							<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-							<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
+							<view class="cmy-hr"></view>
-							<text class="title clamp margin-c-20">{{ item.store_name }}</text>
+							<view class="price margin-c-20 flex">
-							<view class="cmy-hr"></view>
+								<view>
-							<view class="price margin-c-20 flex">
+									<text class="font-size-sm ">￥</text>
-								<view>
+									{{ item.price }}
-									<text class="font-size-sm ">￥</text>
+								</view>
-									{{ item.price }}
+								<view class="font-size-sm">
-								</view>
+									<text class="font-color-gray">{{ item.sales }}人购买</text>
-								<view class="font-size-sm">
+								</view>
-									<text class="font-color-gray">{{ item.sales }}人购买</text>
+							</view>
-								</view>
+						</view>
-							</view>
+					</view>
-						</view>
+				</scroll-view>
-					</view>
+			</swiper-item>
-				</scroll-view>
+			<swiper-item>
-			</swiper-item>
+				<scroll-view scroll-y="true">
-			<swiper-item>
+					<view class="guess-section">
-				<scroll-view scroll-y="true">
+						<view v-for="(item, index) in bastBanner" :key="index" class="guess-item" @click="navToDetailPage(item)">
-					<view class="guess-section">
+							<navigator :url="item.link">
-						<view v-for="(item, index) in bastBanner" :key="index" class="guess-item" @click="navToDetailPage(item)">
+								<view class="image-wrappe r"><image :src="item.image" mode="scaleToFill"></image></view>
-							<navigator :url="item.link">
+								<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-								<view class="image-wrappe r"><image :src="item.image" mode="scaleToFill"></image></view>
+								<view class="cmy-hr"></view>
-								<text class="title clamp margin-c-20">{{ item.store_name }}</text>
+								<view class="price margin-c-20 flex">
-								<view class="cmy-hr"></view>
+									<view>
-								<view class="price margin-c-20 flex">
+										<text class="font-size-sm ">￥</text>
-									<view>
+										{{ item.price }}
-										<text class="font-size-sm ">￥</text>
+									</view>
-										{{ item.price }}
+									<view class="font-size-sm">
-									</view>
+										<text class="font-color-gray">库存{{ item.stock + item.unit_name }}</text>
-									<view class="font-size-sm">
+									</view>
-										<text class="font-color-gray">库存{{ item.stock + item.unit_name }}</text>
+								</view>
-									</view>
+							</navigator>
-								</view>
+						</view>
-							</navigator>
+					</view>
-						</view>
+				</scroll-view>
-					</view>
+			</swiper-item>
-				</scroll-view>
+		</swiper>
-			</swiper-item>
+
-		</swiper>
+		<!-- 精品 商品 -->
-
+		<view class="f-header m-t">
-		<!-- 精品 商品 -->
+			<view class="f-left-icon"></view>
-		<view class="f-header m-t">
+			<view class="tit-box"><text class="tit">精品推荐</text></view>
-			<view class="f-left-icon"></view>
+			<navigator url="/pages/product/classify?type=1"><text class="iconfont iconenter">更多</text></navigator>
-			<view class="tit-box"><text class="tit">精品推荐</text></view>
+		</view>
-			<navigator url="/pages/product/classify?type=1"><text class="iconfont iconenter">更多</text></navigator>
+		<view class="guess-section">
-		</view>
+			<view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-		<view class="guess-section">
+				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-			<view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
+				<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
+				<view class="cmy-hr"></view>
-				<text class="title clamp margin-c-20">{{ item.store_name }}</text>
+				<view class="price margin-c-20 flex">
-				<view class="cmy-hr"></view>
+					<view>
-				<view class="price margin-c-20 flex">
+						<text class="font-size-sm ">￥</text>
-					<view>
+						{{ item.price }}
-						<text class="font-size-sm ">￥</text>
+					</view>
-						{{ item.price }}
+					<view class="font-size-sm">
-					</view>
+						<text class="font-color-gray">{{ item.sales }}人购买</text>
-					<view class="font-size-sm">
+					</view>
-						<text class="font-color-gray">{{ item.sales }}人购买</text>
+				</view>
-					</view>
+			</view>
-				</view>
+		</view>
-			</view>
+		<!-- 最新 商品 -->
-		</view>
+		<view class="f-header m-t">
-		<!-- 最新 商品 -->
+			<view class="f-left-icon"></view>
-		<view class="f-header m-t">
+			<view class="tit-box"><text class="tit">最新商品</text></view>
-			<view class="f-left-icon"></view>
+			<navigator url="/pages/product/classify?type=3"><text class="iconfont iconenter">更多</text></navigator>
-			<view class="tit-box"><text class="tit">最新商品</text></view>
+		</view>
-			<navigator url="/pages/product/classify?type=3"><text class="iconfont iconenter">更多</text></navigator>
+		<view class="guess-section">
-		</view>
+			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-		<view class="guess-section">
+				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
+				<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
+				<view class="cmy-hr"></view>
-				<text class="title clamp margin-c-20">{{ item.store_name }}</text>
+				<view class="price margin-c-20 flex">
-				<view class="cmy-hr"></view>
+					<view>
-				<view class="price margin-c-20 flex">
+						<text class="font-size-sm ">￥</text>
-					<view>
+						{{ item.price }}
-						<text class="font-size-sm ">￥</text>
+					</view>
-						{{ item.price }}
+					<view class="font-size-sm">
-					</view>
+						<text class="font-color-gray">{{ item.sales }}人购买</text>
-					<view class="font-size-sm">
+					</view>
-						<text class="font-color-gray">{{ item.sales }}人购买</text>
+				</view>
-					</view>
+			</view>
-				</view>
+		</view>
-			</view>
+		<!-- 促销 商品 -->
-		</view>
+		<view class="f-header m-t">
-		<!-- 促销 商品 -->
+			<view class="f-left-icon"></view>
-		<view class="f-header m-t">
+			<view class="tit-box"><text class="tit">促销商品</text></view>
-			<view class="f-left-icon"></view>
+			<navigator url="/pages/product/classify?type=4"><text class="iconfont iconenter">更多</text></navigator>
-			<view class="tit-box"><text class="tit">促销商品</text></view>
+		</view>
-			<navigator url="/pages/product/classify?type=4"><text class="iconfont iconenter">更多</text></navigator>
+		<view class="guess-section">
-		</view>
+			<view v-for="(item, index) in bastBanner" :key="index" class="guess-item" @click="navToDetailPage(item)">
-		<view class="guess-section">
+				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-			<view v-for="(item, index) in bastBanner" :key="index" class="guess-item" @click="navToDetailPage(item)">
+				<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
+				<view class="cmy-hr"></view>
-				<text class="title clamp margin-c-20">{{ item.store_name }}</text>
+				<view class="price margin-c-20 flex">
-				<view class="cmy-hr"></view>
+					<view>
-				<view class="price margin-c-20 flex">
+						<text class="font-size-sm ">￥</text>
-					<view>
+						{{ item.price }}
-						<text class="font-size-sm ">￥</text>
+					</view>
-						{{ item.price }}
+					<view class="font-size-sm">
-					</view>
+						<text class="font-color-gray">{{ item.sales }}人购买</text>
-					<view class="font-size-sm">
+					</view>
-						<text class="font-color-gray">{{ item.sales }}人购买</text>
+				</view>
-					</view>
+			</view>
-				</view>
+		</view>
-			</view>
+		<!-- 会员升级专区 -->
-		</view>
+		<!-- <view class="f-header m-t">
-		<!-- 会员升级专区 -->
+			<view class="f-left-icon"></view>
-		<!-- <view class="f-header m-t">
+			<view class="tit-box"><text class="tit">会员升级专区</text></view>
-			<view class="f-left-icon"></view>
+			<text class="iconfont iconenter">更多</text>
-			<view class="tit-box"><text class="tit">会员升级专区</text></view>
+		</view> -->
-			<text class="iconfont iconenter">更多</text>
+		<!-- <view class="uservip flex">
-		</view> -->
+			<image @error="onImageError('userServant', 0)" lazy-load :src="userServant[0].image" mode="aspectFill"></image>
-		<!-- <view class="uservip flex">
+			<view class="detail">
-			<image @error="onImageError('userServant', 0)" lazy-load :src="userServant[0].image" mode="aspectFill"></image>
+				<view class="title">满园春1999元会员升级礼包</view>
-			<view class="detail">
+				<view class="icon">自营</view>
-				<view class="title">满园春1999元会员升级礼包</view>
+				<view class="flex price-box">
-				<view class="icon">自营</view>
+					<view class="price">
-				<view class="flex price-box">
+						<text class="font-size-sm">￥</text>
-					<view class="price">
+						18888
-						<text class="font-size-sm">￥</text>
+					</view>
-						18888
+					<view class="text">115人购买</view>
-					</view>
+				</view>
-					<view class="text">115人购买</view>
+			</view>
-				</view>
+		</view> -->
-			</view>
+
-		</view> -->
+		<!-- 精品推荐 -->
-
+		<!-- <view class="f-header m-t">
-		<!-- 精品推荐 -->
+			<view class="f-left-icon"></view>
-		<!-- <view class="f-header m-t">
+			<view class="tit-box"><text class="tit">精品推荐</text></view>
-			<view class="f-left-icon"></view>
+			<text class="iconfont iconenter">更多</text>
-			<view class="tit-box"><text class="tit">精品推荐</text></view>
+		</view> -->
-			<text class="iconfont iconenter">更多</text>
+		<!-- <view class="guess-section">
-		</view> -->
+			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-		<!-- <view class="guess-section">
+				<view class="image-wrapper"><image @error="onImageError('goodsList', index)" lazy-load :src="item.image" mode="aspectFill"></image></view>
-			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
+				<text class="title clamp margin-c-20">
-				<view class="image-wrapper"><image @error="onImageError('goodsList', index)" lazy-load :src="item.image" mode="aspectFill"></image></view>
+					<text class="icon">自营</text>
-				<text class="title clamp margin-c-20">
+					{{ item.title }}
-					<text class="icon">自营</text>
+				</text>
-					{{ item.title }}
+				<view class="hr"></view>
-				</text>
+				<view class="price margin-c-20 flex">
-				<view class="hr"></view>
+					<view>
-				<view class="price margin-c-20 flex">
+						<text class="font-size-sm ">￥</text>
-					<view>
+						{{ item.price }}
-						<text class="font-size-sm ">￥</text>
+					</view>
-						{{ item.price }}
+					<view class="font-size-sm">
-					</view>
+						<view class='detail'>
-					<view class="font-size-sm">
+							<text class="icon">代理价</text>
-						<view class='detail'>
+							<text></text>
-							<text class="icon">代理价</text>
+						</view>
-							<text></text>
+						<view class="detail">
-						</view>
+							<text class="font-color-yellow">会员价</text>
-						<view class="detail">
+							<text class="font-color-yellow">7.5折</text>
-							<text class="font-color-yellow">会员价</text>
+						</view>
-							<text class="font-color-yellow">7.5折</text>
+					</view>
-						</view>
+				</view>
-					</view>
+				<view class="tip">兑换价￥44+44积分</view>
-				</view>
+			</view>
-				<view class="tip">兑换价￥44+44积分</view>
+		</view> -->
-			</view>
+		<view class="Mask" v-show="shareShow">
-		</view> -->
+			<image @click="share" src="http://shicai.liuniu946.com/static/img/shareimg4.png"></image>
-		<view class="Mask" v-show="shareShow">
+			<view class="Toshare" @click="Toshare"></view>
-			<image @click="share" src="http://shicai.liuniu946.com/static/img/shareimg4.png"></image>
+			<view class="Tocancel" @click="Tocancel"></view>
-			<view class="Toshare" @click="Toshare"></view>
+		</view>
-			<view class="Tocancel" @click="Tocancel"></view>
+	</view>
-		</view>
+</template>
-	</view>
+
-</template>
+<script>
-
+import seckill from '../../components/seckill/seckill.vue';
-<script>
+import { loadIndexs } from '@/api/index.js';
-import seckill from '../../components/seckill/seckill.vue';
+import { getUserInfo } from '@/api/user.js';
-import { loadIndexs } from '@/api/index.js';
+import { setCoupons } from '@/api/functionalUnit.js';
-import { getUserInfo } from '@/api/user.js';
+import { getBargainList } from '@/api/product.js';
-import { setCoupons } from '@/api/functionalUnit.js';
+import { interceptor } from '@/utils/loginUtils';
-import { getBargainList } from '@/api/product.js';
+import { mapState } from 'vuex';
-import { interceptor } from '@/utils/loginUtils';
+
-import { mapState } from 'vuex';
+export default {
-
+	components: {
-export default {
+		seckill
-	components: {
+	},
-		seckill
+	watch: {
-	},
+		//自适应swiper高度
-	watch: {
+		checkid(newValue, oldValue) {
-		//自适应swiper高度
+			let obj = this;
-		checkid(newValue, oldValue) {
+			if (newValue == 0) {
-			let obj = this;
+				let bHeight = Math.ceil(obj.bastList.length / 2);
-			if (newValue == 0) {
+				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
-				let bHeight = Math.ceil(obj.bastList.length / 2);
+			}
-				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
+			if (newValue == 1) {
-			}
+				let bHeight = Math.ceil(obj.goodsList.length / 2);
-			if (newValue == 1) {
+				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
-				let bHeight = Math.ceil(obj.goodsList.length / 2);
+			}
-				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
+			if (newValue == 2) {
-			}
+				let bHeight = Math.ceil(obj.bastBanner.length / 2);
-			if (newValue == 2) {
+				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
-				let bHeight = Math.ceil(obj.bastBanner.length / 2);
+			}
-				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
+		},
-			}
+		// 初次加载页面高度时修改页面高度
-		},
+		bastList(newValue, oldValue) {
-		// 初次加载页面高度时修改页面高度
+			let obj = this;
-		bastList(newValue, oldValue) {
+			let bHeight = Math.ceil(newValue.length / 2);
-			let obj = this;
+			obj.$nextTick(function() {
-			let bHeight = Math.ceil(newValue.length / 2);
+				uni.createSelectorQuery()
-			obj.$nextTick(function() {
+					.select('#list-box')
-				uni.createSelectorQuery()
+					.fields(
-					.select('#list-box')
+						{
-					.fields(
+							size: true
-						{
+						},
-							size: true
+						function(data) {
-						},
+							obj.pageProportion = data.width / 750;
-						function(data) {
+							obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
-							obj.pageProportion = data.width / 750;
+						}
-							obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
+					)
-						}
+					.exec();
-					)
+			});
-					.exec();
+		}
-			});
+	},
-		}
+	data() {
-	},
+		return {
-	data() {
+			shareShow: false, //分享海报
-		return {
+			pageProportion: 0, //保存页面基于750宽度的比例
-			shareShow: false, //分享海报
+			swiperHeight: 0,
-			pageProportion: 0, //保存页面基于750宽度的比例
+			checkid: 0,
-			swiperHeight: 0,
+			titleNViewBackground: '',
-			checkid: 0,
+			swiperCurrent: 0,
-			titleNViewBackground: '',
+			swiperLength: 0,
-			swiperCurrent: 0,
+			bargainlist: [], //砍价商品
-			swiperLength: 0,
+			carouselList: [{},{},{}], //轮播列表
-			bargainlist: [], //砍价商品
+			goodsList: [], //最新商品列表
-			carouselList: [], //轮播列表
+			bastList: [], //精品推荐列表
-			goodsList: [], //最新商品列表
+			bastBanner: [], //促销商品列表
-			bastList: [], //精品推荐列表
+			menusList: [], //头部菜单
-			bastBanner: [], //促销商品列表
+			page: 1,
-			menusList: [], //头部菜单
+			limit: 5,
-			page: 1,
+			userServant: [
-			limit: 5,
+				{
-			userServant: [
+					image: ''
-				{
+				}
-					image: ''
+			], //用户推广服务
-				}
+			couponArray: [], //可领取优惠券
-			], //用户推广服务
+			
-			couponArray: [], //可领取优惠券
+			recommend: [
-			
+				{
-			recommend: [
+					id: 0,
-				{
+					re_title: '精选',
-					id: 0,
+					re_name: '为你推荐'
-					re_title: '精选',
+				},
-					re_name: '为你推荐'
+				{
-				},
+					id: 1,
-				{
+					re_title: '最新',
-					id: 1,
+					re_name: '最新好货优选'
-					re_title: '最新',
+				},
-					re_name: '最新好货优选'
+				{
-				},
+					id: 2,
-				{
+					re_title: '便宜好货',
-					id: 2,
+					re_name: '90天便宜好货'
-					re_title: '便宜好货',
+				}
-					re_name: '90天便宜好货'
+			],
-				}
+			actTime: new Date()
-			],
+		};
-			actTime: new Date()
+	},
-		};
+	computed: {
-	},
+		...mapState(['loginInterceptor']),
-	computed: {
+		...mapState('user', ['hasLogin','userInfo'])
-		...mapState(['loginInterceptor']),
+	},
-		...mapState('user', ['hasLogin','userInfo'])
+	onLoad: function(option) {
-	},
+		// #ifndef MP
-	onLoad: function(option) {
+		if (option.spread) {
-		// #ifndef MP
+			// 存储其他邀请人
-		if (option.spread) {
+			uni.setStorageSync('spread', option.spread);
-			// 存储其他邀请人
+		}
-			uni.setStorageSync('spread', option.spread);
+		// #endif
-		}
+		// #ifdef MP
-		// #endif
+		if (option.scene) {
-		// #ifdef MP
+			// 存储小程序邀请人
-		if (option.scene) {
+			uni.setStorage({
-			// 存储小程序邀请人
+				key: 'spread_code',
-			uni.setStorage({
+				data: option.scene
-				key: 'spread_code',
+			});
-				data: option.scene
+		}
-			});
+		// #endif
-		}
+	},
-		// #endif
+	onShow: function() {
-	},
+		// 判断是否强制登录
-	onShow: function() {
+		if (this.loginInterceptor && !this.hasLogin) {
-		// 判断是否强制登录
+			// 登录拦截
-		if (this.loginInterceptor && !this.hasLogin) {
+			interceptor();
-			// 登录拦截
+		}
-			interceptor();
+		this.loadData();
-		}
+		this.getBargainList();
-		this.loadData();
+	},
-		this.getBargainList();
+	//下拉刷新
-	},
+	onPullDownRefresh() {
-	//下拉刷新
+		this.loadData();
-	onPullDownRefresh() {
+	},
-		this.loadData();
+	// #ifndef MP
-	},
+	// 监听导航栏输入框点击事件
-	// #ifndef MP
+	onNavigationBarSearchInputClicked(e) {
-	// 监听导航栏输入框点击事件
+		//跳转到搜索页面
-	onNavigationBarSearchInputClicked(e) {
+		this.clickSearch();
-		//跳转到搜索页面
+	},
-		this.clickSearch();
+	//点击导航栏 buttons 时触发
-	},
+	onNavigationBarButtonTap(e) {
-	//点击导航栏 buttons 时触发
+		const index = e.index;
-	onNavigationBarButtonTap(e) {
+		if (index === 0) {
-		const index = e.index;
+			this.$api.msg('点击了扫描');
-		if (index === 0) {
+		} else if (index === 1) {
-			this.$api.msg('点击了扫描');
+			// #ifdef APP-PLUS
-		} else if (index === 1) {
+			const pages = getCurrentPages();
-			// #ifdef APP-PLUS
+			const page = pages[pages.length - 1];
-			const pages = getCurrentPages();
+			const currentWebview = page.$getAppWebview();
-			const page = pages[pages.length - 1];
+			currentWebview.hideTitleNViewButtonRedDot({
-			const currentWebview = page.$getAppWebview();
+				index
-			currentWebview.hideTitleNViewButtonRedDot({
+			});
-				index
+			// #endif
-			});
+			uni.navigateTo({
-			// #endif
+				url: '/pages/user/notice'
-			uni.navigateTo({
+			});
-				url: '/pages/user/notice'
+		}
-			});
+	},
-		}
+	// #endif
-	},
+	methods: {
-	// #endif
+		//砍价商品推荐详情页
-	methods: {
+		navToDetailPages(item) {
-		//砍价商品推荐详情页
+			let id = item.product_id;
-		navToDetailPages(item) {
+			//let type = 2;
-			let id = item.product_id;
+		
-			//let type = 2;
+			uni.navigateTo({
-		
+				url: '/pages/product/product?id=' + id
-			uni.navigateTo({
+			});
-				url: '/pages/product/product?id=' + id
+		},
-			});
+		openSubscribe: function(e) {
-		},
+			let page = e;
-		openSubscribe: function(e) {
+			// #ifndef MP
-			let page = e;
+			uni.navigateTo({
-			// #ifndef MP
+				url: page
-			uni.navigateTo({
+			});
-				url: page
+			// #endif
-			});
+			// #ifdef MP
-			// #endif
+			uni.showLoading({
-			// #ifdef MP
+				title: '正在加载'
-			uni.showLoading({
+			});
-				title: '正在加载'
+			openBargainSubscribe()
-			});
+				.then(res => {
-			openBargainSubscribe()
+					uni.hideLoading();
-				.then(res => {
+					uni.navigateTo({
-					uni.hideLoading();
+						url: page
-					uni.navigateTo({
+					});
-						url: page
+				})
-					});
+				.catch(err => {
-				})
+					uni.hideLoading();
-				.catch(err => {
+				});
-					uni.hideLoading();
+			// #endif
-				});
+		},
-			// #endif
+		getBargainList() {
-		},
+			let that = this;
-		getBargainList() {
+		
-			let that = this;
+			getBargainList({
-		
+				page: that.page,
-			getBargainList({
+				limit: that.limit
-				page: that.page,
+			})
-				limit: that.limit
+				.then(function(res) {
-			})
+					that.$set(that, 'bargainlist', res.data.slice(0, 2));
-				.then(function(res) {
+				})
-					that.$set(that, 'bargainlist', res.data.slice(0, 2));
+				.catch(res => {
-				})
+					console.log(res, 'getBargainList');
-				.catch(res => {
+				});
-					console.log(res, 'getBargainList');
+		},
-				});
+		Mask() {
-		},
+			this.MaskShow = false;
-		Mask() {
+			this.shareShow = true;
-			this.MaskShow = false;
+			uni.setStorage({
-			this.shareShow = true;
+				key: 'FirstEntry',
-			uni.setStorage({
+				data: true,
-				key: 'FirstEntry',
+				success: function() {
-				data: true,
+					console.log(uni.getStorageSync('FirstEntry'), 'Mask');
-				success: function() {
+				}
-					console.log(uni.getStorageSync('FirstEntry'), 'Mask');
+			});
-				}
+		},
-			});
+		Toshare() {
-		},
+			if (this.userInfo == '') {
-		Toshare() {
+				getUserInfo({})
-			if (this.userInfo == '') {
+					.then(({ data }) => {
-				getUserInfo({})
+						this.setUserInfo(data);
-					.then(({ data }) => {
+						this.userInfo = data;
-						this.setUserInfo(data);
+					})
-						this.userInfo = data;
+					.catch(e => {});
-					})
+			} else {
-					.catch(e => {});
+				this.shareShow = false;
-			} else {
+				uni.navigateTo({
-				this.shareShow = false;
+					url: '/pages/user/shareQrCode?spread=' + this.userInfo.uid
-				uni.navigateTo({
+				});
-					url: '/pages/user/shareQrCode?spread=' + this.userInfo.uid
+			}
-				});
+		},
-			}
+		Tocancel() {
-		},
+			this.shareShow = false;
-		Tocancel() {
+		},
-			this.shareShow = false;
+		// 监听切换事件
-		},
+		listChange(e) {
-		// 监听切换事件
+			this.checkid = e.detail.current;
-		listChange(e) {
+		},
-			this.checkid = e.detail.current;
+		// 點擊搜索框
-		},
+		clickSearch() {
-		// 點擊搜索框
+			uni.navigateTo({
-		clickSearch() {
+				url: '/pages/product/search'
-			uni.navigateTo({
+			});
-				url: '/pages/product/search'
+		},
-			});
+		// 点击触发领取优惠券
-		},
+		setCoupons(item) {
-		// 点击触发领取优惠券
+			// 判断是否已经领取了优惠券
-		setCoupons(item) {
+			let obj = this;
-			// 判断是否已经领取了优惠券
+			uni.showModal({
-			let obj = this;
+				title: '领取提示',
-			uni.showModal({
+				content: '是否领取优惠券',
-				title: '领取提示',
+				success(e) {
-				content: '是否领取优惠券',
+					if (e.confirm) {
-				success(e) {
+						setCoupons({ couponId: item.id }).then(e => {
-					if (e.confirm) {
+							item.is_use = true;
-						setCoupons({ couponId: item.id }).then(e => {
+							uni.showToast({
-							item.is_use = true;
+								title: '领取成功',
-							uni.showToast({
+								type: 'top',
-								title: '领取成功',
+								duration: 2000
-								type: 'top',
+							});
-								duration: 2000
+						});
-							});
+					}
-						});
+				}
-					}
+			});
-				}
+		},
-			});
+		//商品种类切换
-		},
+		change(item) {
-		//商品种类切换
+			let id = item;
-		change(item) {
+			this.checkid = id;
-			let id = item;
+			if (this.checkid == 1) {
-			this.checkid = id;
+				// console.log(1);
-			if (this.checkid == 1) {
+				this.detail = this.selected_detail;
-				// console.log(1);
+			} else if (this.checkid == 2) {
-				this.detail = this.selected_detail;
+				// console.log(2);
-			} else if (this.checkid == 2) {
+				this.detail = this.new_product;
-				// console.log(2);
+			} else {
-				this.detail = this.new_product;
+				this.detail = this.cheap_good;
-			} else {
+			}
-				this.detail = this.cheap_good;
+		},
-			}
+		// 监听图片加载完成
-		},
+		onImageError(key, index) {
-		// 监听图片加载完成
+			this[key][index].image = '/static/error/errorImage.jpg';
-		onImageError(key, index) {
+		},
-			this[key][index].image = '/static/error/errorImage.jpg';
+		// 请求载入数据
-		},
+		async loadData() {loadIndexs({})
-		// 请求载入数据
+				.then(({ data }) => {
-		async loadData() {loadIndexs({})
+					let goods = data.info;
-				.then(({ data }) => {
+					// this.carouselList = data.banner;
-					let goods = data.info;
+					// this.swiperLength = this.carouselList.length;
-					this.carouselList = data.banner;
+					this.menusList = data.menus;
-					this.swiperLength = this.carouselList.length;
+					this.goodsList = goods.firstList; //最新商品
-					this.menusList = data.menus;
+					this.bastList = goods.bastList; //精品推荐
-					this.goodsList = goods.firstList; //最新商品
+					this.bastBanner = data.benefit; //促销单品
-					this.bastList = goods.bastList; //精品推荐
+					this.$set(this, 'couponArray', data.couponList); //保存卡包券
-					this.bastBanner = data.benefit; //促销单品
+
-					this.$set(this, 'couponArray', data.couponList); //保存卡包券
+					uni.stopPullDownRefresh();
-
+				})
-					uni.stopPullDownRefresh();
+				.catch(e => {
-				})
+					uni.stopPullDownRefresh();
-				.catch(e => {
+				});
-					uni.stopPullDownRefresh();
+			
-				});
+		},
-			
+		//轮播图切换修改背景色
-		},
+		swiperChange(e) {
-		//轮播图切换修改背景色
+			const index = e.detail.current;
-		swiperChange(e) {
+			this.swiperCurrent = index;
-			const index = e.detail.current;
+			this.titleNViewBackground = this.carouselList[index].background;
-			this.swiperCurrent = index;
+		},
-			this.titleNViewBackground = this.carouselList[index].background;
+		//详情页
-		},
+		navToDetailPage(item) {
-		//详情页
+			let id = item.id;
-		navToDetailPage(item) {
+			uni.navigateTo({
-			let id = item.id;
+				url: '/pages/product/product?id=' + id
-			uni.navigateTo({
+			});
-				url: '/pages/product/product?id=' + id
+		},
-			});
+
-		},
+		// 轮播图跳转
-
+		bannerNavToUrl(item) {
-		// 轮播图跳转
+			// #ifdef H5
-		bannerNavToUrl(item) {
+			if (item.wap_url.indexOf('http') > 0) {
-			// #ifdef H5
+				window.location.href = item.wap_url;
-			if (item.wap_url.indexOf('http') > 0) {
+			}
-				window.location.href = item.wap_url;
+			// #endif
-			}
+			//测试数据没有写id，用title代替
-			// #endif
+			uni.navigateTo({
-			//测试数据没有写id，用title代替
+				url: item.wap_url
-			uni.navigateTo({
+			});
-				url: item.wap_url
+		}
-			});
+	}
-		}
+};
-	}
+</script>
-};
+
-</script>
+<style lang="scss">
-
+	.container {
-<style lang="scss">
+		background-color: #D4FDF9;
-	.container {
+	}
-		background-color: #D4FDF9;
+.Mask {
-	}
+	width: 100%;
-.Mask {
+	height: 100vh;
-	width: 100%;
+	position: fixed;
-	height: 100vh;
+	z-index: 99999;
-	position: fixed;
+	background-color: rgba(0, 0, 0, 0.7);
-	z-index: 99999;
+	top: 0;
-	background-color: rgba(0, 0, 0, 0.7);
+	image {
-	top: 0;
+		width: 100%;
-	image {
+		height: 100vh;
-		width: 100%;
+	}
-		height: 100vh;
+}
-	}
+// 热销商品
-}
+	.hot-goods {
-// 热销商品
+		margin: 0 25rpx;
-	.hot-goods {
+		padding: 5rpx 25rpx 30rpx 25rpx;
-		margin: 0 25rpx;
+		background-color: #fff;
-		padding: 5rpx 25rpx 30rpx 25rpx;
+		border-radius: 10rpx;
-		background-color: #fff;
+		.hot-headers {
-		border-radius: 10rpx;
+			margin: 25rpx 0;
-		.hot-headers {
+			width: 100%;
-			margin: 25rpx 0;
+			display: flex;
-			width: 100%;
+			.img {
-			display: flex;
+				width: 32rpx;
-			.img {
+				height: 32rpx;
-				width: 32rpx;
+				margin-right: 10rpx;
-				height: 32rpx;
+			}
-				margin-right: 10rpx;
+			.hot-title {
-			}
+				font-size: 30rpx;
-			.hot-title {
+				margin-right: 15rpx;
-				font-size: 30rpx;
+			}
-				margin-right: 15rpx;
+			.more {
-			}
+				line-height: 1;
-			.more {
+				padding: 5rpx 10rpx 5rpx 15rpx;
-				line-height: 1;
+				text-align: center;
-				padding: 5rpx 10rpx 5rpx 15rpx;
+				font-size: 20rpx;
-				text-align: center;
+				border-radius: 15rpx;
-				font-size: 20rpx;
+				color: #ffffff;
-				border-radius: 15rpx;
+				background: linear-gradient(90deg, rgba(250, 52, 38, 1) 0%, rgba(249, 30, 83, 1) 100%);
-				color: #ffffff;
+				image {
-				background: linear-gradient(90deg, rgba(250, 52, 38, 1) 0%, rgba(249, 30, 83, 1) 100%);
+					width: 20rpx;
-				image {
+					height: 20rpx;
-					width: 20rpx;
+				}
-					height: 20rpx;
+			}
-				}
+		}
-			}
+		.hot-lists {
-		}
+			line-height: 1;
-		.hot-lists {
+			display: flex;
-			line-height: 1;
+			.hot-produce {
-			display: flex;
+				width: 100%;
-			.hot-produce {
+				height: 260rpx;
-				width: 100%;
+				border-top: 1px solid #f0f0f0;
-				height: 260rpx;
+				display: flex;
-				border-top: 1px solid #f0f0f0;
+				padding-top: 28rpx;
-				display: flex;
+				.produce-image {
-				padding-top: 28rpx;
+					width: 200rpx;
-				.produce-image {
+					height: 200rpx;
-					width: 200rpx;
+					image {
-					height: 200rpx;
+						width: 200rpx;
-					image {
+						height: 200rpx;
-						width: 200rpx;
+						border: 1px solid #f0f0f0;
-						height: 200rpx;
+					}
-						border: 1px solid #f0f0f0;
+				}
-					}
+				.produce-content {
-				}
+					// flex-direction: column;
-				.produce-content {
+					margin-left: 30rpx;
-					// flex-direction: column;
+					height: 200rpx;
-					margin-left: 30rpx;
+					position: relative;
-					height: 200rpx;
+					width: calc(100% - 200rpx - 30rpx);
-					position: relative;
+					.produce-name {
-					width: calc(100% - 200rpx - 30rpx);
+						font-size: 28rpx;
-					.produce-name {
+						font-weight: bold;
-						font-size: 28rpx;
+						line-height: 35rpx;
-						font-weight: bold;
+						color: #343434;
-						line-height: 35rpx;
+					}
-						color: #343434;
+					.produce-info {
-					}
+						font-size: 20rpx;
-					.produce-info {
+						margin-top: 25rpx;
-						font-size: 20rpx;
+					}
-						margin-top: 25rpx;
+					.produce-price {
-					}
+						display: flex;
-					.produce-price {
+						align-items: flex-end;
-						display: flex;
+						color: #ff383e;
-						align-items: flex-end;
+						font-size: 24rpx;
-						color: #ff383e;
+						margin-top: 70rpx;
-						font-size: 24rpx;
+						font-weight: bold;
-						margin-top: 70rpx;
+						text {
-						font-weight: bold;
+							font-size: 36rpx;
-						text {
+						}
-							font-size: 36rpx;
+						.produce-price-1 {
-						}
+							font-size: 22rpx;
-						.produce-price-1 {
+							font-weight: 500;
-							font-size: 22rpx;
+							text-decoration: line-through;
-							font-weight: 500;
+							color: rgba(170, 170, 170, 1);
-							text-decoration: line-through;
+							margin-left: 20rpx;
-							color: rgba(170, 170, 170, 1);
+						}
-							margin-left: 20rpx;
+					}
-						}
+					.produce-price1 {
-					}
+						height: 100%;
-					.produce-price1 {
+						letter-spacing: 3rpx;
-						height: 100%;
+						color: #ff383e;
-						letter-spacing: 3rpx;
+						font-size: 24rpx;
-						color: #ff383e;
+						font-weight: bold;
-						font-size: 24rpx;
+						.produce-center {
-						font-weight: bold;
+							width: 100%;
-						.produce-center {
+							position: absolute;
-							width: 100%;
+							bottom: 0;
-							position: absolute;
+							display: flex;
-							bottom: 0;
+							justify-content: space-between;
-							display: flex;
+							align-items: center;
-							justify-content: space-between;
+							.kanjia_word {
-							align-items: center;
+								.word-1 {
-							.kanjia_word {
+									font-size: 22rpx;
-								.word-1 {
+									color: #666666;
-									font-size: 22rpx;
+								}
-									color: #666666;
+								.word-2 {
-								}
+									font-size: 28rpx;
-								.word-2 {
+									color: #ff383e;
-									font-size: 28rpx;
+									margin-top: 10rpx;
-									color: #ff383e;
+								}
-									margin-top: 10rpx;
+							}
-								}
+							.kanjia_button {
-							}
+								height: 50rpx;
-							.kanjia_button {
+								width: 150rpx;
-								height: 50rpx;
+								border-radius: 25rpx;
-								width: 150rpx;
+								font-size: 26rpx;
-								border-radius: 25rpx;
+								font-weight: 500;
-								font-size: 26rpx;
+								color: #ff383e;
-								font-weight: 500;
+								border: 1px solid rgba(255, 56, 62, 1);
-								color: #ff383e;
+							}
-								border: 1px solid rgba(255, 56, 62, 1);
+						}
-							}
+					}
-						}
+				}
-					}
+			}
-				}
+		}
-			}
+	}
-		}
+/* #ifdef MP */
-	}
+.mp-height {
-/* #ifdef MP */
+	height: 44px;
-.mp-height {
+}
-	height: 44px;
+.input-box {
-}
+	position: fixed;
-.input-box {
+	top: 0;
-	position: fixed;
+	left: 0;
-	top: 0;
+	width: 100%;
-	left: 0;
+	padding: 25rpx;
-	width: 100%;
+	background-color: #ffffff;
-	padding: 25rpx;
+	z-index: 999;
-	background-color: #ffffff;
+	height: 44px;
-	z-index: 999;
+	.iconsearch {
-	height: 44px;
+		font-size: 50rpx;
-	.iconsearch {
+	}
-		font-size: 50rpx;
+	.input-content {
-	}
+		border-radius: 99rpx;
-	.input-content {
+		flex-grow: 1;
-		border-radius: 99rpx;
+		padding: 10rpx 30rpx;
-		flex-grow: 1;
+		background-color: rgba(231, 231, 231, 0.7);
-		padding: 10rpx 30rpx;
+		.input {
-		background-color: rgba(231, 231, 231, 0.7);
+			flex-grow: 1;
-		.input {
+			input {
-			flex-grow: 1;
+				font-size: $font-lg;
-			input {
+			}
-				font-size: $font-lg;
+		}
-			}
+	}
-		}
+	.input-button {
-	}
+		padding-left: 20rpx;
-	.input-button {
+		font-size: $font-lg;
-		padding-left: 20rpx;
+		height: 100%;
-		font-size: $font-lg;
+	}
-		height: 100%;
+}
-	}
+page {
-}
+	.cate-section {
-page {
+		position: relative;
-	.cate-section {
+		z-index: 5;
-		position: relative;
+		border-radius: 16rpx 16rpx 0 0;
-		z-index: 5;
+		margin-top: -20rpx;
-		border-radius: 16rpx 16rpx 0 0;
+	}
-		margin-top: -20rpx;
+}
-	}
+/* #endif */
-}
+.bg-contain {
-/* #endif */
+	height: 460rpx;
-.bg-contain {
+	width: 750rpx;
-	height: 460rpx;
+	image {
-	width: 750rpx;
+		width: 100%;
-	position: relative;
+		height: 100%;
-	image {
+	}
-		width: 100%;
+}
-		height: 100%;
+page {
-	}
+	background: #f7f8f7;
-	.lunbo {
+}
-		width: 700rpx;
+.m-t {
-		height: 370rpx;
+	margin-top: 16rpx;
-		position: absolute;
+}
-		top: 175rpx;
+/* 头部 轮播图 */
-		left: 0;
+.carousel-section {
-		right: 0;
+	position: relative;
-		margin: 0 auto;
+	padding-top: 10px;
-	}
+	overflow: hidden;
-}
+
-page {
+	.titleNview-placing {
-	background: #f7f8f7;
+		height: var(--status-bar-height);
-}
+		padding-top: 44px;
-.m-t {
+		box-sizing: content-box;
-	margin-top: 16rpx;
+	}
-}
+
-/* 头部 轮播图 */
+	.titleNview-background {
-.carousel-section {
+		position: absolute;
-	position: relative;
+		top: 0;
-	padding-top: 10px;
+		left: 0;
-	overflow: hidden;
+		width: 100%;
-
+		height: 426rpx;
-	.titleNview-placing {
+		transition: 0.4s;
-		height: var(--status-bar-height);
+	}
-		padding-top: 44px;
+	.carousel {
-		box-sizing: content-box;
+		width: 100%;
-	}
+		height: 240rpx;
-
+		image {
-	.titleNview-background {
+			width: 700rpx;
-		position: absolute;
+			height: 370rpx;
-		top: 0;
+		}
-		left: 0;
+		.carousel-item {
-		width: 100%;
+			width: 100%;
-		height: 426rpx;
+			height: 100%;
-		transition: 0.4s;
+			padding: 0 28rpx;
-	}
+			overflow: hidden;
-	.carousel {
+		}
-		width: 100%;
+
-		height: 240rpx;
+		image {
-		.carousel-item {
+			width: 100%;
-			width: 100%;
+			height: 100%;
-			height: 100%;
+			border-radius: $border-radius-sm;
-			padding: 0 28rpx;
+		}
-			overflow: hidden;
+	}
-		}
+}
-
+.swiper-dots {
-		image {
+	display: flex;
-			width: 100%;
+	position: absolute;
-			height: 100%;
+	left: 60rpx;
-			border-radius: $border-radius-sm;
+	bottom: 15rpx;
-		}
+	width: 72rpx;
-	}
+	height: 36rpx;
-}
+	background-size: 100% 100%;
-.swiper-dots {
+	.num {
-	display: flex;
+		width: 36rpx;
-	position: absolute;
+		height: 36rpx;
-	left: 60rpx;
+		border-radius: 50px;
-	bottom: 15rpx;
+		font-size: 24rpx;
-	width: 72rpx;
+		color: #fff;
-	height: 36rpx;
+		text-align: center;
-	background-size: 100% 100%;
+		line-height: 36rpx;
-	.num {
+	}
-		width: 36rpx;
+
-		height: 36rpx;
+	.sign {
-		border-radius: 50px;
+		position: absolute;
-		font-size: 24rpx;
+		top: 0;
-		color: #fff;
+		left: 50%;
-		text-align: center;
+		line-height: 36rpx;
-		line-height: 36rpx;
+		font-size: 12rpx;
-	}
+		color: #fff;
-
+		transform: translateX(-50%);
-	.sign {
+	}
-		position: absolute;
+}
-		top: 0;
+/* 分类 */
-		left: 50%;
+.cate-section {
-		line-height: 36rpx;
+	display: flex;
-		font-size: 12rpx;
+	justify-content: space-around;
-		color: #fff;
+	align-items: center;
-		transform: translateX(-50%);
+	flex-wrap: wrap;
-	}
+	padding: 30rpx 22rpx;
-}
+	.cate-item {
-/* 分类 */
+		display: flex;
-.cate-section {
+		flex-direction: column;
-	display: flex;
+		align-items: center;
-	justify-content: space-around;
+		font-size: $font-sm + 2rpx;
-	align-items: center;
+		color: $font-color-dark;
-	flex-wrap: wrap;
+	}
-	padding: 30rpx 22rpx;
+	/* 原图标颜色太深,不想改图了,所以加了透明度 */
-	.cate-item {
+	image {
-		display: flex;
+		width: 88rpx;
-		flex-direction: column;
+		height: 88rpx;
-		align-items: center;
+		margin-bottom: 14rpx;
-		font-size: $font-sm + 2rpx;
+		border-radius: 50%;
-		color: $font-color-dark;
+		opacity: 0.7;
-	}
+	}
-	/* 原图标颜色太深,不想改图了,所以加了透明度 */
+}
-	image {
+// 中间广告图片
-		width: 88rpx;
+.ad-1 {
-		height: 88rpx;
+	width: 100%;
-		margin-bottom: 14rpx;
+	height: 210rpx;
-		border-radius: 50%;
+	padding: 10rpx 0;
-		opacity: 0.7;
+	background: #fff;
-	}
+	image {
-}
+		width: 100%;
-// 中间广告图片
+		height: 100%;
-.ad-1 {
+	}
-	width: 100%;
+}
-	height: 210rpx;
+/*公用边框样式*/
-	padding: 10rpx 0;
+%icon {
-	background: #fff;
+	margin-right: 10rpx;
-	image {
+	display: inline-block;
-		width: 100%;
+	padding: 2rpx 10rpx;
-		height: 100%;
+	border: 1rpx solid $color-yellow;
-	}
+	color: $color-yellow;
-}
+	line-height: 1;
-/*公用边框样式*/
+	font-size: $font-base;
-%icon {
+	border-radius: 10rpx;
-	margin-right: 10rpx;
+}
-	display: inline-block;
+.f-header {
-	padding: 2rpx 10rpx;
+	display: flex;
-	border: 1rpx solid $color-yellow;
+	align-items: center;
-	color: $color-yellow;
+	height: 92rpx;
-	line-height: 1;
+	padding: 6rpx 30rpx 8rpx;
-	font-size: $font-base;
+	image {
-	border-radius: 10rpx;
+		flex-shrink: 0;
-}
+		width: 80rpx;
-.f-header {
+		height: 80rpx;
-	display: flex;
+		margin-right: 20rpx;
-	align-items: center;
+	}
-	height: 92rpx;
+	.tit-box {
-	padding: 6rpx 30rpx 8rpx;
+		@extend %font-title-box;
-	image {
+	}
-		flex-shrink: 0;
+	.tit {
-		width: 80rpx;
+		@extend %font-title;
-		height: 80rpx;
+	}
-		margin-right: 20rpx;
+	.iconenter {
-	}
+		font-size: $font-lg + 2rpx;
-	.tit-box {
+		color: $font-color-light;
-		@extend %font-title-box;
+	}
-	}
+	.f-left-icon {
-	.tit {
+		@extend %f-left-icon;
-		@extend %font-title;
+	}
-	}
+	.iconfont {
-	.iconenter {
+		font-size: $font-sm - 2rpx;
-		font-size: $font-lg + 2rpx;
+	}
-		color: $font-color-light;
+}
-	}
+// 会员升级礼包
-	.f-left-icon {
+.uservip {
-		@extend %f-left-icon;
+	border-radius: $border-radius-sm;
-	}
+	background-color: white;
-	.iconfont {
+	box-shadow: $box-shadow;
-		font-size: $font-sm - 2rpx;
+	height: 300rpx;
-	}
+	margin: 0 30rpx;
-}
+	image {
-// 会员升级礼包
+		height: 100%;
-.uservip {
+		width: 300rpx;
-	border-radius: $border-radius-sm;
+	}
-	background-color: white;
+	.detail {
-	box-shadow: $box-shadow;
+		position: relative;
-	height: 300rpx;
+		padding: 20rpx;
-	margin: 0 30rpx;
+		height: 100%;
-	image {
+		.icon {
-		height: 100%;
+			@extend %icon;
-		width: 300rpx;
+		}
-	}
+		.price-box {
-	.detail {
+			position: absolute;
-		position: relative;
+			bottom: 20rpx;
-		padding: 20rpx;
+			width: calc(100% - 40rpx);
-		height: 100%;
+			.price {
-		.icon {
+				font-size: $font-lg + 2rpx;
-			@extend %icon;
+				font-weight: bold;
-		}
+				color: $font-color-base;
-		.price-box {
+			}
-			position: absolute;
+			.text {
-			bottom: 20rpx;
+				color: $color-gray;
-			width: calc(100% - 40rpx);
+				font-size: $font-sm;
-			.price {
+			}
-				font-size: $font-lg + 2rpx;
+		}
-				font-weight: bold;
+		.title {
-				color: $font-color-base;
+			font-size: $font-lg;
-			}
+			font-weight: bold;
-			.text {
+		}
-				color: $color-gray;
+	}
-				font-size: $font-sm;
+}
-			}
+
-		}
+/* 猜你喜欢 */
-		.title {
+.guess-section {
-			font-size: $font-lg;
+	display: flex;
-			font-weight: bold;
+	flex-wrap: wrap;
-		}
+	padding: 0 30rpx;
-	}
+	.guess-item {
-}
+		overflow: hidden;
-
+		display: flex;
-/* 猜你喜欢 */
+		flex-direction: column;
-.guess-section {
+		width: 48%;
-	display: flex;
+		margin-bottom: 4%;
-	flex-wrap: wrap;
+		border-radius: $border-radius-sm;
-	padding: 0 30rpx;
+		background-color: white;
-	.guess-item {
+		box-shadow: $box-shadow;
-		overflow: hidden;
+		&:nth-child(2n + 1) {
-		display: flex;
+			margin-right: 4%;
-		flex-direction: column;
+		}
-		width: 48%;
+	}
-		margin-bottom: 4%;
+	.image-wrapper {
-		border-radius: $border-radius-sm;
+		width: 100%;
-		background-color: white;
+		height: 330rpx;
-		box-shadow: $box-shadow;
+		border-radius: 3px;
-		&:nth-child(2n + 1) {
+		overflow: hidden;
-			margin-right: 4%;
+		image {
-		}
+			width: 100%;
-	}
+			height: 100%;
-	.image-wrapper {
+			opacity: 1;
-		width: 100%;
+		}
-		height: 330rpx;
+	}
-		border-radius: 3px;
+	.title {
-		overflow: hidden;
+		font-size: $font-base;
-		image {
+		color: $font-color-dark;
-			width: 100%;
+		font-weight: bold;
-			height: 100%;
+		line-height: 80rpx;
-			opacity: 1;
+	}
-		}
+	.price {
-	}
+		font-size: $font-lg;
-	.title {
+		color: $font-color-base;
-		font-size: $font-base;
+		font-weight: bold;
-		color: $font-color-dark;
+		line-height: 1;
-		font-weight: bold;
+		line-height: 80rpx;
-		line-height: 80rpx;
+	}
-	}
+
-	.price {
+	.icon {
-		font-size: $font-lg;
+		@extend %icon;
-		color: $font-color-base;
+	}
-		font-weight: bold;
+
-		line-height: 1;
+	.detail {
-		line-height: 80rpx;
+		line-height: 1;
-	}
+	}
-
+	.tip {
-	.icon {
+		color: white;
-		@extend %icon;
+		background-color: $color-yellow;
-	}
+		line-height: 1.5;
-
+		font-size: $font-sm;
-	.detail {
+		padding-left: 20rpx;
-		line-height: 1;
+	}
-	}
+}
-	.tip {
+
-		color: white;
+// 推荐
-		background-color: $color-yellow;
+.recommend {
-		line-height: 1.5;
+	width: 95%;
-		font-size: $font-sm;
+	height: 155rpx;
-		padding-left: 20rpx;
+	margin: 0rpx auto;
-	}
+	padding-top: 30rpx;
-}
+	font-size: 26rpx;
-
+	text-align: center;
-// 推荐
+	color: #333333;
-.recommend {
+	align-items: flex-start;
-	width: 95%;
+
-	height: 155rpx;
+	.recommend_list {
-	margin: 0rpx auto;
+		width: 33%;
-	padding-top: 30rpx;
+	}
-	font-size: 26rpx;
+	.re_title {
-	text-align: center;
+		font-size: 32rpx;
-	color: #333333;
+		font-weight: bold;
-	align-items: flex-start;
+	}
-
+	.re_name {
-	.recommend_list {
+		color: #999999;
-		width: 33%;
+		padding-top: 10rpx;
-	}
+	}
-	.re_title {
+	.selected_icon {
-		font-size: 32rpx;
+		width: 25rpx;
-		font-weight: bold;
+		height: 10rpx;
-	}
+		margin: 0px auto;
-	.re_name {
+		display: none;
-		color: #999999;
+		image {
-		padding-top: 10rpx;
+			width: 100%;
-	}
+			height: 100%;
-	.selected_icon {
+		}
-		width: 25rpx;
+	}
-		height: 10rpx;
+	.active {
-		margin: 0px auto;
+		display: block;
-		display: none;
+	}
-		image {
+	.active_color {
-			width: 100%;
+		color: #dc4d46 !important;
-			height: 100%;
+	}
-		}
+}
-	}
+
-	.active {
+// 列表
-		display: block;
+.list-box-h {
-	}
+	height: 1550rpx;
-	.active_color {
+}
-		color: #dc4d46 !important;
+// 优惠券
-	}
+.coupon-list {
-}
+	display: inline-block;
-
+}
-// 列表
+.row {
-.list-box-h {
+	border-radius: 15rpx;
-	height: 1550rpx;
+	margin: 25rpx;
-}
+	height: 155rpx;
-// 优惠券
+	// width: 552rpx;
-.coupon-list {
+	overflow: hidden;
-	display: inline-block;
+	background-color: #ffffff;
-}
+	padding-right: 25rpx;
-.row {
+	.list-interval {
-	border-radius: 15rpx;
+		border: 1px dashed $border-color-light;
-	margin: 25rpx;
+		height: 100%;
-	height: 155rpx;
+		.top,
-	// width: 552rpx;
+		.bottom {
-	overflow: hidden;
+			border-radius: 100rpx;
-	background-color: #ffffff;
+			width: 30rpx;
-	padding-right: 25rpx;
+			height: 30rpx;
-	.list-interval {
+			position: absolute;
-		border: 1px dashed $border-color-light;
+			background-color: $page-color-base;
-		height: 100%;
+			right: -15rpx;
-		.top,
+		}
-		.bottom {
+		.top {
-			border-radius: 100rpx;
+			top: -18rpx;
-			width: 30rpx;
+		}
-			height: 30rpx;
+		.bottom {
-			position: absolute;
+			bottom: -18rpx;
-			background-color: $page-color-base;
+		}
-			right: -15rpx;
+	}
-		}
+	.list-money {
-		.top {
+		height: 100%;
-			top: -18rpx;
+		min-width: 155rpx;
-		}
+		text-align: center;
-		.bottom {
+		image {
-			bottom: -18rpx;
+			height: 100%;
-		}
+			width: 20rpx;
-	}
+		}
-	.list-money {
+		.list-money-text {
-		height: 100%;
+			flex-grow: 1;
-		min-width: 155rpx;
+			padding: 0 25rpx;
-		text-align: center;
+			.tit {
-		image {
+				text-align: center;
-			height: 100%;
+				padding: 15rpx 0rpx;
-			width: 20rpx;
+				font-size: 55rpx;
-		}
+				color: $color-red;
-		.list-money-text {
+				font-weight: bold;
-			flex-grow: 1;
+				&.noAction {
-			padding: 0 25rpx;
+					color: $font-color-light;
-			.tit {
+				}
-				text-align: center;
+			}
-				padding: 15rpx 0rpx;
+			.price {
-				font-size: 55rpx;
+				padding-bottom: 25rpx;
-				color: $color-red;
+				color: $font-color-light;
-				font-weight: bold;
+			}
-				&.noAction {
+		}
-					color: $font-color-light;
+	}
-				}
+	.row_list_right {
-			}
+		// flex-grow: 1;
-			.price {
+		min-width: 200rpx;
-				padding-bottom: 25rpx;
+		padding-left: 25rpx;
-				color: $font-color-light;
+		line-height: 1;
-			}
+		.right_time {
-		}
+			padding: 10rpx 0rpx;
-	}
+			color: $font-color-light;
-	.row_list_right {
+			font-size: $font-sm;
-		// flex-grow: 1;
+		}
-		min-width: 200rpx;
+		.right_top {
-		padding-left: 25rpx;
+			margin: 15rpx 0;
-		line-height: 1;
+			.right_name {
-		.right_time {
+				font-size: $font-base;
-			padding: 10rpx 0rpx;
+				color: #bc253a;
-			color: $font-color-light;
+				font-weight: bold;
-			font-size: $font-sm;
+			}
-		}
+			.right_title {
-		.right_top {
+				font-size: $font-base;
-			margin: 15rpx 0;
+				color: $font-base;
-			.right_name {
+				font-weight: bold;
-				font-size: $font-base;
+				&.noAction {
-				color: #bc253a;
+					color: $font-color-light;
-				font-weight: bold;
+				}
-			}
+			}
-			.right_title {
+		}
-				font-size: $font-base;
+	}
-				color: $font-base;
+	.right_use {
-				font-weight: bold;
+		margin: 15rpx 0;
-				&.noAction {
+		padding: 10rpx;
-					color: $font-color-light;
+		width: 160rpx;
-				}
+		text-align: center;
-			}
+		color: #fff;
-		}
+		background-color: #bc253a;
-	}
+		border-radius: 50rpx;
-	.right_use {
+		font-size: $font-sm;
-		margin: 15rpx 0;
+		&.noAction {
-		padding: 10rpx;
+			background-color: $font-color-light;
-		width: 160rpx;
+		}
-		text-align: center;
+	}
-		color: #fff;
+	.iconlocation {
-		background-color: #bc253a;
+		font-size: 36rpx;
-		border-radius: 50rpx;
+		color: $font-color-light;
-		font-size: $font-sm;
+	}
-		&.noAction {
+}
-			background-color: $font-color-light;
+</style>
-		}
-	}
-	.iconlocation {
-		font-size: 36rpx;
-		color: $font-color-light;
-	}
-}
-</style>