shicai/pages/index/index.vue

<template>
	<view class="container">
		<view class="top_header" :style="{ background: header_color }">
			<!-- 顶部导航栏 -->
			<view class="top-address" :style="{ backgroundColor: 'rgba(255,255,255,' + navP + ')' }">
				<view class="header flex">
					<!-- 定位城市 -->
					<view class="addr" @click="Toaddress" :style="{ color: addr_color }">
						<view class="icon location" :style="{ color: addr_color }"></view>
						<view class="clamp">{{ (addressData.detail || '请选择地址') | filterAddress }}</view>
					</view>
					<!-- 右侧图标按钮 -->
					<view class="time-box" :style="{ color: addr_color }" >
						<view class="timeText">营业时间：{{ workstarTime }} - {{ workendTime }},商城满19包邮到家（拼团自提）</view>
					</view>
					<!-- <uni-notice-bar scrollable="true" single="true" text=""></uni-notice-bar> -->
				</view>
				<view class="input-box" @tap="clickSearch()">
					<input placeholder="默认关键字" placeholder-style="color:#c0c0c0;" />
					<view class="icon search"></view>
				</view>
			</view>
			<view class="zhanwei"></view>
			<view class="text-box flex" @click="Toreturned">
				<view v-for="ls in Textlist" class="text-center flex_item" :style="{ backgroundColor: Textlist_color }">
					<view class="img"><image :src="ls.img"></image></view>
					<view class="text">{{ ls.text }}</view>
				</view>
			</view>
			<view class="swiper">
				<view class="swiper-box">
					<swiper circular="true" autoplay="true" @change="swiperChange">
						<swiper-item v-for="swiper in carouselList" @click="bannerNavToUrl(swiper)"><image :src="swiper.pic"></image></swiper-item>
					</swiper>
					<view class="indicator"><view class="dots" v-for="(swiper, index) in carouselList" :class="[swiperCurrent >= index ? 'on' : '']"></view></view>
				</view>
			</view>
		</view>
		<view class="Make-group" @click="ToGroup()">
			<view class="group-title flex">
				<view class="title">邻里拼团</view>
				<view class="tip">|</view>
				<view class="tpl">10:00 ~ 22:00 准时开抢</view>
				<view>
					<view class="detail">
						<text>立即抢购</text>
						<text style="font-size: 32rpx;" class="iconfont iconenter"></text>
					</view>
				</view>
			</view>
			<view class="floor-list">
				<gbro-marquee :groupBookingList='groupBookingList' ref='pinkGoodsBox' broadcastType="mould" :viewHeight="190" direction="left" :broadcastStyle="broadcastStyle" style="width: 100%">
					
				</gbro-marquee>
			</view>
		</view>
		
		<!-- 产品接龙 -->
		<view class="solitaire flex" @click="ToKlon">
			<view class="flex_item">
				<view class="Member-box"><image src="/static/img/img20.png"></image></view>
				<view class="Member-text">预售产品，发起接龙抢先购买</view>
			</view>
			<view class="Member-code">
				点击进入
				<text class="iconfont iconenter"></text>
			</view>
		</view>
		
		<view class="content"><image :src="image" @click="navTo('/pages/notice/poster?id=3')"></image></view>
		
		<!-- 商品分类 -->
		<view class="category-section">
			<view class="category-item" @click="ToCategory(18)">
				<view class="image-wrapper"><image src="http://shicai.liuniu946.com/static/img/img25.png"></image></view>
				<text class="title clamp">每日蔬菜</text>
			</view>
			<view class="category-item" @click="ToCategory(6)">
				<view class="image-wrapper"><image src="http://shicai.liuniu946.com/static/img/img26.png"></image></view>
				<text class="title clamp">肉类禽类</text>
			</view>
			<view class="category-item" @click="ToCategory(1)">
				<view class="image-wrapper"><image src="http://shicai.liuniu946.com/static/img/img27.png"></image></view>
				<text class="title clamp">海鲜水产</text>
			</view>
			<view class="category-item" @click="ToCategory(44)">
				<view class="image-wrapper"><image src="http://shicai.liuniu946.com/static/img/img28.png" mode="scaleToFill"></image></view>
				<text class="title clamp">面点豆腐</text>
			</view>
			<view class="category-item" @click="ToCategory(34)">
				<view class="image-wrapper"><image src="http://shicai.liuniu946.com/static/img/img29.png" mode="scaleToFill"></image></view>
				<text class="title clamp">家庭常用</text>
			</view>
			<view class="category-item" @click="ToCategory(33)">
				<view class="image-wrapper"><image src="http://shicai.liuniu946.com/static/img/img30.png" mode="scaleToFill"></image></view>
				<text class="title clamp">快捷早餐</text>
			</view>
			<view class="category-item" @click="ToCategory(25)">
				<view class="image-wrapper"><image src="http://shicai.liuniu946.com/static/img/img31.png" mode="scaleToFill"></image></view>
				<text class="title clamp">方便速食</text>
			</view>
			<view class="category-item" @click="ToCategory(47)">
				<view class="image-wrapper"><image src="http://shicai.liuniu946.com/static/img/img32.png" mode="scaleToFill"></image></view>
				<text class="title clamp">有机蔬菜</text>
			</view>
			<view class="category-item" @click="ToCategory(48)">
				<view class="image-wrapper"><image src="http://shicai.liuniu946.com/static/img/img33.png" mode="scaleToFill"></image></view>
				<text class="title clamp">分享有礼</text>
			</view>
			<view class="category-item" @click="ToCategory(49)">
				<view class="image-wrapper"><image src="http://shicai.liuniu946.com/static/img/img34.png" mode="scaleToFill"></image></view>
				<text class="title clamp">联系客服</text>
			</view>
		</view>
		<!-- 开通美卡 -->
		<!-- <view class="Member flex" @click="Tomember">
			<view class="flex_item">
				<view class="Member-box"><image src="/static/img/img20.png"></image></view>
				<view class="Member-text">开通美卡，平均可省1588元/年</view>
			</view>
			<view class="Member-code">
				5折开卡
				<text class="iconfont iconenter"></text>
			</view>
		</view> -->
		<!-- 秒杀楼层 -->
		<!-- <view class="seckill-section m-t">
			<view class="s-header">
				<view class="f-left-icon"></view>
				<view class="tit-box"><text class="tit">限时秒杀</text></view>
				<view class="tip-box">
					<text class="tip" v-if="status == 1">{{ showTime }}点场结束</text>
					<text class="tip" v-if="status == 2">距离下场开始</text>
					<text class="tip" v-if="status == 0">当天活动已结束</text>
					<uni-countdown v-if="status == 1 || status == 2" :show-day="false" :hour="stopTimeH" color="#F9F9F8" background-color="#666666" :minute="stopTimeM" :second="stopTimeS"></uni-countdown>
				</view>
				<view class="textNav iconfont iconenter" @click="navTo('/pages/seckill/seckill')">更多</view>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper position-relative" @click="navTo('/pages/seckill/seckill')">
					<view v-for="(item, index) in list" :key="index" class="floor-item">
						<image class="list-image" :src="item.image" mode="aspectFill"></image>
						<text class="title clamp">{{ item.title }}</text>
						<text class="price">￥{{ item.price }}</text>
					</view>
					<view v-if="list.length == 0" class="floor-item ">
						<image class="list-image" mode="aspectFill"></image>
						<text class="title clamp"></text>
						<text class="price"></text>
					</view>
					<view v-if="list.length == 0" class="noGoodsBg"><view>敬请期待</view></view>
				</view>
			</scroll-view>
		</view> -->
		<!-- 今日爆款 -->
		<view class="seckill-section m-t">
			<view class="s-header">
				<view class="f-left-icon"></view>
				<view class="tit-box"><text class="tit">今日秒杀</text></view>
				<view class="tip-box">
					<view class="time flex_item">
						<view class="flex_item time-box" v-show="starting">
							<uni-countdown
								color="#FFFFFF"
								background-color="#334432"
								:show-day="false"
								:hour="starthour"
								:minute="startminute"
								:second="startsecond"
							></uni-countdown>
						</view>
						<view class="flex_item time-box" v-show="Timeing">
							<uni-countdown
								color="#FFFFFF"
								background-color="#334432"
								:show-day="false"
								:hour="Timeinghour"
								:minute="Timeingminute"
								:second="Timeingsecond"
							></uni-countdown>
						</view>
						<view class="flex_item  " v-show="end">
							<uni-countdown color="#FFFFFF" background-color="#334432" :show-day="false" :hour="endhour" :minute="endminute" :second="endsecond"></uni-countdown>
						</view>
					</view>
				</view>
				<view class="textNav" @click="ToSeckill">更多</view>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper position-relative" @click="ToSeckill">
					<view v-for="(item, index) in Productslist" :key="index" class="floor-item">
						<image class="list-image" :src="item.image"></image>
						<view class="tpl">
							<view class="title clamp">{{ item.store_name }}</view>
							<view class="flex">
								<view class="">
									<view class="price">￥{{ item.price }}</view>
									<view class="otPrice">￥{{ item.ot_price }}</view>
								</view>
								<view class="img position-relative" @click.stop="Addcar(item, 2)">
									<image src="/static/img/img21.png"></image>
									<view class="corner" v-if="item.cart_num > 0">
										<text>{{ item.cart_num }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="transition"></view> -->
		<!-- 特色专区 --><!-- @click="openSp()" -->
		<!-- <view class="characteristic">
			<view class="f-header m-t">
				<view class="f-left-icon"></view>
				<view class="tit-box"><text class="tit">特色专区</text></view>
			</view>
			<view class="characteristic-box" @click="Category()">
				<view class="box flex">
					<view class="characteristic-list">
						<view class="list-tpl red">本地小菜</view>
						<view class="list-tip">绿色本地小菜 随心选~</view>
						<view class="list-img flex">
							<view class="img"><image src="http://shicai.liuniu946.com/static/img/img03.png"></image></view>
							<view class="img"><image src="http://shicai.liuniu946.com/static/img/img04.png"></image></view>
						</view>
					</view>
					<view class="characteristic-list">
						<view class="list-tpl pink">光鸡光鸭</view>
						<view class="list-tip">优质禽肉 肉嫩鲜香</view>
						<view class="list-img flex">
							<view class="img"><image src="http://shicai.liuniu946.com/static/img/img05.png"></image></view>
							<view class="img"><image src="http://shicai.liuniu946.com/static/img/img06.png"></image></view>
						</view>
					</view>
				</view>
				<view class="box flex">
					<view class="characteristic-list">
						<view class="list-tpl blue">活鱼活虾</view>
						<view class="list-tip">种类丰富 鲜活到家</view>
						<view class="list-img flex">
							<view class="img"><image src="http://shicai.liuniu946.com/static/img/img07.png"></image></view>
							<view class="img"><image src="http://shicai.liuniu946.com/static/img/img10.png"></image></view>
						</view>
					</view>
					<view class="characteristic-list">
						<view class="list-tpl green">有机农场</view>
						<view class="list-tip">基地直采 生态健康</view>
						<view class="list-img flex">
							<view class="img"><image src="http://shicai.liuniu946.com/static/img/img09.png"></image></view>
							<view class="img"><image src="http://shicai.liuniu946.com/static/img/img08.png"></image></view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="transition"></view>
		<!-- 商品分类切换卡片 -->
		<view class="recommend flex">
			<view class="recommend_list" @click="change(ls.id)" v-for="(ls,index) in recommend" :key='index'>
				<view class="re_title" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_title }}</view>
				<view class="re_name">
					<text v-bind:class="{ active_name: ls.id == checkid }">{{ ls.re_name }}</text>
				</view>
			</view>
		</view>
		<view id="list-box" class="list-box" @change="listChange" :style="{ height: swiperHeight + 'px' }" :current="checkid">
			<view class="guess-section">
				<view v-for="(item, index) in detail" class="guess-item" @click="navToDetailPage(item)">
					<view class="imagewrapper"><image :src="item.image"></image></view>
					<view class="guess-list">
						<text class="title clamp">{{ item.store_name }}</text>
						<view class="info clamp">{{ item.store_info }}</view>
						<view class="tipBox">
							<view class="tipsl" v-if="item.keyword != ''">
								<text v-for="lss in item.keyword">{{ lss }}</text>
							</view>
						</view>
					</view>
					<view class="price margin-c-20 flex">
						<view class="price_list">
							<view class="price-red">
								￥{{ item.price }}
								<text>/份</text>
							</view>
							<view class="price-green" v-if="item.ot_price">
								￥{{ item.ot_price }}
								<text>市场价</text>
							</view>
						</view>
						<view class="img position-relative" @click.stop="Addcar(item)">
							<image src="/static/img/img21.png"></image>
							<view class="corner" v-if="item.cart_num > 0">
								<text>{{ item.cart_num }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="TipsBox" v-show="ShowAddress" @click="ToAddress">
			当前地址不在配送范围内，建议您
			<text>修改地址</text>
		</view>
		<!-- <view class="Mask" v-show="MaskShow"><image @click="Mask" src="http://shicai.liuniu946.com/static/img/shareimg3.png"></image></view> -->
		<view class="Mask" v-show="shareShow">
			<image @click="share" src="http://shicai.liuniu946.com/static/img/shareimg4.png"></image>
			<view class="Toshare" @click="Toshare"></view>
			<view class="Tocancel" @click="Tocancel"></view>
		</view>
	</view>
</template>
<script>
import seckill from './seckill';
import { mapState, mapMutations } from 'vuex';
import { check_address } from '@/api/address.js';
import { category_layer } from '@/api/category.js';
import { getProducts } from '@/api/product.js';
import { loadIndexs } from '@/api/index.js';
import { article, details } from '@/api/notice.js';
import { setCoupons } from '@/api/coupon.js';
import { cartAdd } from '@/api/product.js';
import { getUserInfo } from '@/api/login.js';
import { saveUrl } from '@/utils/loginUtils';
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
import gbroMarquee from '@/components/gbro-marquee/marquee.vue';
import { getList, getClass } from '@/api/seckill.js';
import { share } from '@/api/wx.js';
import { timeComputed } from '@/utils/rocessor.js';
import { GetRequest } from '@/utils/rocessor.js';
// 拼团列表
// import { getCombinationList } from '@/api/groupBooking.js';
export default {
	components: {
		uniCountdown,
		gbroMarquee,
	},
	filters: {
		filterAddress: function(value) {
			let b = value.split(',');
			// console.log(b);
			return b[0];
		},
		returnNub(value) {
			return +value;
		}
	},
	onPageScroll(e) {
		this.navP = e.scrollTop / 200;
		if (e.scrollTop > 10) {
			this.addr_color = '#333333';
		} else {
			this.addr_color = '#ffffff';
		}
	},
	watch: {
		//自适应swiper高度
		checkid(newValue, oldValue) {
			let obj = this;
			if (newValue == 0) {
				let bHeight = Math.ceil(obj.bastList.length / 2);
				obj.swiperHeight = Math.ceil(obj.pageProportion * 550 * bHeight);
			}
			if (newValue == 1) {
				let bHeight = Math.ceil(obj.benefitList.length / 2);
 			}
			if (newValue == 2) {
				let bHeight = Math.ceil(obj.firstList.length / 2);
				
				obj.swiperHeight = Math.ceil(obj.pageProportion * 500 * bHeight);
			}
			if (newValue == 3) {
				let bHeight = Math.ceil(obj.hotList.length / 2);
				obj.swiperHeight = Math.ceil(obj.pageProportion * 500 * bHeight);
			}
		},
		// 初次加载页面高度时修改页面高度
		detail(newValue, oldValue) {
			let obj = this;
			let bHeight = Math.ceil(newValue.length / 2);
			obj.$nextTick(function() {
				uni.createSelectorQuery()
					.select('#list-box')
					.fields(
						{
							size: true
						},
						function(data) {
							obj.pageProportion = data.width / 750;
							obj.swiperHeight = Math.ceil(obj.pageProportion * 550 * bHeight);
						}
					)
					.exec();
			});
		}
	},
	data() {
		return {
			shareShow: false, //分享海报
			ShowAddress: false, //当地址超出配送范围，显示提示
			MaskShow: false, //第一次进入小程序出现弹窗
			navP: 0, // 导航栏透明度
			addr_color: '#FFFFFF', //导航栏字体颜色
			header_color: '', //轮播图背景色渐变
			Textlist_color: '', //送货上门背景色
			pageProportion: 0, //保存页面基于750宽度的比例
			swiperHeight: 0,
			checkid: 0, //商品种类切换
			swiperCurrent: 0, //轮播图
			broadcastStyle: {
				speed: 100 //每秒100px
			},
			Textlist: [
				{
					img: '/static/img/img05.png',
					text: '送货上门'
				},
				{
					img: '/static/img/img06.png',
					text: '放心交易'
				},
				{
					img: '/static/img/img07.png',
					text: '品质保障'
				},
				{
					img: '/static/img/img08.png',
					text: '售后无忧'
				}
			],
			CategoryList: [], //商品一级分类
			Productslist: '', //今日秒杀商品
			groupBookingList: [], //拼团商品
			recommend: [
				{
					id: 0,
					re_title: '随便看看',
					re_name: '猜你喜欢'
				},
				{
					id: 1,
					re_title: '海鲜大咖',
					re_name: '本地特色'
				},
				{
					id: 2,
					re_title: '新货新得',
					re_name: '新品发布'
				},
				{
					id: 3,
					re_title: '方便快捷',
					re_name: '早餐夜宵'
				}
			],
			detail: [], //点击选中的的商品列表
			carouselList: [], //轮播列表
			bastList: [], //随便看看
			benefitList: [], //海鲜大咖
			firstList: [], //新货新得
			hotList: [], //方便快捷
			userServant: [
				{
					image: ''
				}
			], //用户推广服务
			couponArray: [], //可领取优惠券
			// 头部高度
			barHeight: 0,
			cid: 3, //文章分类
			image: '', //海报图片
			userInfo: '',
			workstarTime: '', //营业开始时间
			workendTime: '', //营业结束时间
			page: 1,
			limit: 10,

			starting: false, //判断活动未开始
			end: false, //判断活动结束
			Timeing: false, //判断活动进行中
			starthour: 0, //距离今天开始时间
			startminute: 0,
			startsecond: 0,
			Timeinghour: '',
			Timeingminute: '',
			Timeingsecond: '',
			endhour: 0, //距离今天结束时间
			endminute: 0,
			endsecond: 0,
			startime: '9:00:00' //距离开始时间
		};
	},
	computed: {
		...mapState(['addressData', 'addressPageShow', 'GetInfo']),
		...mapState('user', ['orderInfo', 'hasLogin'])
	},
	onLoad: function(option) {
		// #ifdef MP
		// 获取地图权限
		uni.authorize({
			scope: 'scope.userLocation',
			success: res => {}
		});
		// #endif
		if (option.spread) {
			uni.setStorageSync('spread', option.spread);
		}
		if (uni.getStorageSync('FirstEntry') == '' || uni.getStorageSync('FirstEntry') == null) {
			if (uni.getStorageSync('FirstEntry') == false) {
				this.MaskShow = true;
			} else {
				this.MaskShow = false;
			}
		} else {
			uni.setStorage({
				key: 'FirstEntry',
				data: false,
				success: function() {
					console.log(uni.getStorageSync('FirstEntry'), 'app');
				}
			});
		}
		// 保存传值
		uni.setStorageSync('option', option);
		if (option.scene) {
			if (typeof option.scene == 'string' && isNaN(option.scene)) {
				let da = GetRequest(decodeURIComponent(option.scene));
				uni.setStorageSync('spread', da.spread);
			}
			if (!isNaN(option.scene)) {
				uni.setStorageSync('spread_code', option.scene);
			}
		}
		saveUrl();
		// 判断是否有地址信息
		let address = uni.getStorageSync('addressData') || '';
		// 判断是否有缓存
		if (address.id) {
			this.setAddressData(address);
		}
	},
	onShow: function() {
		this.userInfo = uni.getStorageSync('userInfo');
		// 保存传值
		// this.swiperCurrent = 0;
		this.loadData();
		this.GetList();
		this.GetProducts();
		this.ArticleDate();
		this.checkAddress();
		this.GetShare();
		//加载拼团价商品
		// this.getCombinationList();
		// this.getClass();
	},
	onReady() {
		// 初始化获取页面宽度
		uni.createSelectorQuery()
			.select('.top-address')
			.fields(
				{
					size: true
				},
				data => {
					// 获取头部高度
					this.barHeight = data.height;
				}
			)
			.exec();
	},
	//下拉刷新
	onPullDownRefresh() {
		let obj = this;
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		setTimeout(function() {
			obj.loadData();
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	methods: {
		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
		...mapMutations(['setAddressData', 'upAddressPageShow', 'setGetInfo']),
		// 获取拼团列表
		// getCombinationList() {
		// 	// 请求订单
		// 	getCombinationList({
		// 		page: 1,
		// 		limit: 20
		// 	})
		// 		.then(e => {
		// 			this.groupBookingList = e.data;
		// 		})
		// 		.catch(e => {});
		// },
		//收藏小程序蒙层
		Mask() {
			this.MaskShow = false;
			this.shareShow = true;
			uni.setStorage({
				key: 'FirstEntry',
				data: true,
				success: function() {
					console.log(uni.getStorageSync('FirstEntry'), 'Mask');
				}
			});
		},
		// 扫码查看值
		openSp() {
			let obj = this;
			uni.scanCode({
				complete(e) {
					uni.showModal({
						title: '',
						content: JSON.stringify(e),
						showCancel: false,
						complete() {
							if(obj.erros){
							uni.showModal({
								title: '错误',
								content:JSON.stringify(obj.erros),
								showCancel: false
							});
							}
						}
					});
				}
			});
		},
		
		//检查地址是否在配送区域
		checkAddress() {
			let obj = this;
			check_address({
				address_id: obj.addressData.id
			})
				.then(({ data }) => {
					if (data.shop == -1) {
						obj.ShowAddress = true;
					}
					// if(data.shop == 0){
					// 	obj.$api.msg('请选择配送地址');
					// }
				})
				.catch(e => {
					console.log(e);
				});
		},
		//分享信息
		GetShare() {
			let obj = this;
			share({})
				.then(({ data }) => {
					obj.setGetInfo(data.data);
				})
				.catch(err => {
					console.log(err);
				});
		},
		//当地址不在配送范围内，跳转到选择地址页面
		ToAddress() {
			if (!this.addressPageShow) {
				this.upAddressPageShow();
			}
			uni.navigateTo({
				url: '/pages/index/address'
			});
		},
		//菜佬优惠日
		async ArticleDate() {
			let obj = this;
			article({}, obj.cid).then(function({ data }) {
				obj.image = data[0].image_input[0];
			});
		},
		// 获取商品分类
		async GetList() {
			let obj = this;
			category_layer({})
				.then(({ data }) => {
					this.CategoryList = data.list;
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 请求今日秒杀商品
		GetProducts() {
			let obj = this;
			getProducts({
				type: 1,
				sid: 100 //分类id
			})
				.then(({ data }) => {
					obj.Productslist = data;
				})
				.catch(err => {
					console.log(err);
				});
		},
		//分享
		// #ifdef MP
		onShareAppMessage: function(res) {
			console.log(this.GetInfo);
			// 来自页面内分享按钮
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/pages/index/index?';
			// 保存邀请人
			path += 'spread=' + this.userInfo.uid;
			let data = {
				path: path,
				imageUrl: this.GetInfo.img,
				title: this.GetInfo.title
			};
			console.log(data);
			return data;
		},
		// #endif
		//加入购物车
		Addcar(item, type) {
			let obj = this;
			cartAdd({
				cartNum: '1', //商品数量
				uniqueId: '', //商品标签
				new: 0, //商品是否新增加到购物车1为不加入0为加入
				mer_id: '',
				productId: item.id //商品编号
			})
				.then(function(e) {
					uni.showToast({
						title: '成功加入购物车',
						type: 'top',
						duration: 500,
						icon: 'none'
					});
					if (type == 2) {
						obj.GetProducts();
					} else {
						obj.loadData();
					}
				})
				.catch(e => {
					console.log(e);
				});
		},
		// 请求商品列表
		async loadData() {
			let obj = this;
			loadIndexs({})
				.then(({ data }) => {
					try {
						let goods = data.info;
						obj.carouselList = data.banner;
						let color = obj.carouselList[obj.swiperCurrent].color;
						obj.header_color = 'linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, ' + color + '100%) ';
						obj.Textlist_color = color;
						obj.bastList = goods.bastList;
						obj.benefitList = goods.benefitList;
						obj.firstList = goods.firstList;
						obj.hotList = goods.hotList;
						obj.detail = obj.bastList;
						let arr = data.sell_time.split(',');
						obj.workstarTime = arr[0];
						obj.workendTime = arr[1];
						// 保存拼团商品信息
						obj.groupBookingList = data.latestPink;
						obj.$nextTick(function(){
							obj.getPinkTimeBoxWidth()
						})
						console.log(obj.groupBookingList);
						obj.StartDate();
						obj.GetDate();
					} catch (e) {
						console.log(e);
					}
					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		},
		getPinkTimeBoxWidth(){
			this.$refs.pinkGoodsBox.getBoxWidth()
		},
		
		// 跳转接龙页面
		ToKlon() {
			if( this.userInfo.is_promoter == 0 ) {
				uni.showToast({
					title: '请先成为团长！',
					type: 'top',
					duration: 500,
					icon: 'none',
					success() {
						uni.navigateTo({
							url: '/pages/notice/poster?id=5'
						})
					}
				});
			} else {
				uni.navigateTo({
					url: '/pages/groupBooking/klondike'
				})
			}
		},
		
		//跳转开通美卡页面
		Tomember() {
			uni.showToast({
				title: '敬请期待！',
				type: 'top',
				duration: 500,
				icon: 'none'
			});
			// if(this.userInfo == ''){
			// 	getUserInfo({})
			// 		.then(({ data }) => {
			// 			this.setUserInfo(data);
			// 			this.userInfo = data;
			// 		})
			// 		.catch(e => {});
			// }else{
			// 	if (this.userInfo.level_info.grade > 99) {
			// 		uni.navigateTo({
			// 			url: '/pages/user/renew'
			// 		});
			// 	}
			// 	if (this.userInfo.level_info.grade < 100) {
			// 		uni.navigateTo({
			// 			url: '/pages/user/card'
			// 		});
			// 	}
			// }
		},
		//跳转今日秒杀页面
		ToSeckill() {
			uni.navigateTo({
				url: '/pages/seckill/seckill'
			});
		},
		//跳转退换货协议页面
		Toreturned() {
			// 只允许通过相机扫码
			// uni.scanCode({
			//     onlyFromCamera: true,
			//     success: function (res) {

			//     }
			// });
			uni.navigateTo({
				url: '/pages/index/returned'
			});
		},
		//跳转商品分类页面
		ToCategory(ls) {
			console.log(ls);
			let item = ls;
			// 保存当前选中的分类
			uni.setStorageSync('categoryId', item);
			if (item == '48') {
				uni.navigateTo({
					url: '/pages/shareQrCode/index'
				});
			} else if (item == '49') {
				uni.navigateTo({
					url: '/pages/service/service'
				});
			} else {
				uni.switchTab({
					url: '/pages/category/category'
				});
			}
		},
		//商品分类
		Category() {
			uni.switchTab({
				url: '/pages/category/category'
			});
		},
		// 监听切换事件
		listChange(e) {
			this.checkid = e.detail.current;
		},
		// 點擊搜索框
		clickSearch() {
			uni.navigateTo({
				url: '/pages/product/search'
			});
		},
		//点击切换商品种类
		change(item) {
			let id = item;
			this.checkid = id;
			console.log(this.checkid);
			if (this.checkid == 0) {
				this.detail = this.bastList;
			}
			if (this.checkid == 1) {
				this.detail = this.benefitList;
			}
			if (this.checkid == 2) {
				this.detail = this.firstList;
			}
			if (this.checkid == 3) {
				this.detail = this.hotList;
			}
		},
		// 监听图片加载完成
		onImageError(key, index) {
			this[key][index].image = '/static/error/errorImage.jpg';
		},
		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			let color = this.carouselList[index].color;
			this.swiperCurrent = index;
			this.header_color = 'linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, ' + color + '100%) ';
			this.Textlist_color = color;
		},
		//跳转商品详情页
		navToDetailPage(item) {
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/product?id=' + id
			});
		},
		//跳转拼团商品详情页
		ToGroup() {
			uni.navigateTo({
				url: '/pages/groupBooking/index'
			});
		},
		//选择地址
		Toaddress() {
			if (!this.addressPageShow) {
				this.upAddressPageShow();
			}
			uni.navigateTo({
				url: '/pages/index/address'
			});
		},
		Toshare() {
			if (this.userInfo == '') {
				getUserInfo({})
					.then(({ data }) => {
						this.setUserInfo(data);
						this.userInfo = data;
					})
					.catch(e => {});
			} else {
				this.shareShow = false;
				uni.navigateTo({
					url: '/pages/shareQrCode/index?spread=' + this.userInfo.uid
				});
			}
		},
		Tocancel() {
			this.shareShow = false;
		},
		StartDate() {
			let obj = this;
			console.log(obj.workstarTime);
			console.log(this.workendTime);
			// 获取当前时间
			let now = new Date();
			let year = now.getFullYear(); //得到年份
			let month = now.getMonth(); //得到月份
			let date = now.getDate(); //得到日期
			let hour = now.getHours(); //得到小时
			let minu = now.getMinutes(); //得到分钟
			let sec = now.getSeconds(); //得到秒
			//获取早上开始营业的时间戳
			let aa = this.workstarTime.split(':');
			let bb = aa[0];
			let cc = aa[1];
			let dd = String(cc).split('');
			let ff = dd[0];
			let gg = dd[1];
			console.log(bb, ff, gg);
			let time1 = new Date(year, month, date, bb, ff, gg);
			let morning = time1.getTime();
			//获取现在时间的时间戳
			let time2 = new Date(year, month, date, hour, minu, sec);
			let present = time2.getTime();
			//获取晚上结束营业的时间戳
			let a = this.workendTime.split(':');
			let b = a[0];
			let c = a[1];
			let d = String(c).split('');
			let f = d[0];
			let g = d[1];
			console.log(b, f, g);
			let time3 = new Date(year, month, date, b, f, g);
			console.log(time1, 'time1');
			console.log(time3, 'time3');
			let night = time3.getTime();
			//现在时间大于结束时间，活动结束
			// if(present > time3){
			// 	console.log('现在时间大于结束时间，活动结束')
			// 	obj.end = true;
			// }
			//现在时间大于开始时间小于结束时间，活动进行中
			if (present < time3 && present > time1) {
				console.log('现在时间大于开始时间小于结束时间，活动进行中');
				obj.Timeing = true;
				let starTime = time3 - present;
				console.log(time3,present,'present')
				console.log(starTime,'starTime')
				let hours = Math.floor((starTime / 1000 / 60 / 60) % 24); //获取剩余小时数
				let minutes = Math.floor((starTime / 1000 / 60) % 60); //获取分钟
				let seconds = Math.floor((starTime / 1000) % 60); //获取秒数
				obj.Timeinghour = hours;
				obj.Timeingminute = minutes;
				obj.Timeingsecond = seconds;
				console.log('时间差是: ' + obj.Timeinghour + '小时, ' + obj.Timeingminute + '分钟, ' + obj.Timeingsecond + '秒', '距离晚上22：00点结束');
			}
			//现在时间小于开始时间，活动还未开始
			if (present < time1) {
				console.log('现在时间小于开始时间，活动还未开始');
				obj.starting = true;
				let starTime = time1 - present;
				let hours = Math.floor((starTime / 1000 / 60 / 60) % 24); //获取剩余小时数
				let minutes = Math.floor((starTime / 1000 / 60) % 60); //获取分钟
				let seconds = Math.floor((starTime / 1000) % 60); //获取秒数
				obj.starthour = hours;
				obj.startminute = minutes;
				obj.startsecond = seconds;
				console.log('时间差是: ' + obj.starthour + '小时, ' + obj.startminute + '分钟, ' + obj.startsecond + '秒', '距离早上7：00点开始');
			}
			//现在时间距离第二天开始时间
			// day3.setTime(day3.getTime()+24*60*60*1000);
			// var s3 = day3.getFullYear()+"-" + (day3.getMonth()+1) + "-" + day3.getDate();
		},
		GetDate() {
			let obj = this;
			let now = new Date();
			//现在时间转换成时间戳
			let nowTime = now.getTime();
			now.setTime(now.getTime() + 24 * 60 * 60 * 1000);
			let time = obj.workstarTime;
			let data = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate() + ' ' + time;
			data = data.replace(/-/g, '/');
			let time4 = new Date(data);
			let tomorrow = time4.getTime();
			let starTime = tomorrow - nowTime;
			let hours = Math.floor((starTime / 1000 / 60 / 60) % 24); //获取剩余小时数
			let minutes = Math.floor((starTime / 1000 / 60) % 60); //获取分钟
			let seconds = Math.floor((starTime / 1000) % 60); //获取秒数
			obj.hour = hours;
			obj.minute = minutes;
			obj.second = seconds;
			console.log('时间差是: ' + hours + '小时, ' + minutes + '分钟, ' + seconds + '秒', '距离第二天6：40开始');
		},
		// 计算倒计时时间
		timeComputed(da) {
			let obj = this;
			let stopTime = timeComputed(da);
			obj.stopTimeH = stopTime.hours;
			obj.stopTimeM = stopTime.minutes;
			obj.stopTimeS = stopTime.seconds;
		},
		// 轮播图跳转
		bannerNavToUrl(item) {
			// #ifdef H5
			uni.navigateTo({
				url: item.url
			});
			// #endif
			// #ifdef MP-WEIXIN
			uni.navigateTo({
				url: item.wap_url
			});
			// #endif
			// // #ifdef H5
			// if (item.wap_url.indexOf('http') > 0) {
			// 	window.location.href = item.wap_url;
			// }
			// // #endif
			// //测试数据没有写id，用title代替
			// uni.navigateTo({
			// 	url: item.wap_url
			// });
		},
		//跳转接口
		navTo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #ffffff;
}
.Mask {
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 99999;
	background-color: rgba(0, 0, 0, 0.7);
	top: 0;
	image {
		width: 100%;
		height: 100vh;
	}
}
.Toshare {
	position: absolute;
	width: 100%;
	height: 700rpx;
	top: 200rpx;
}
.Tocancel {
	position: absolute;
	width: 100%;
	height: 100rpx;
	bottom: 50rpx;
}
/*公用边框样式*/
%icon {
	margin-right: 10rpx;
	display: inline-block;
	padding: 2rpx 10rpx;
	border: 1rpx solid $color-yellow;
	color: $color-yellow;
	line-height: 1;
	font-size: $font-base;
	border-radius: 10rpx;
}
.top_header {
	.top-address {
		position: fixed;
		top: 0;
		width: 100% !important;
		z-index: 999;
		padding-bottom: 25rpx;
		//地址
		.header {
			width: 100%;
			padding: 0 4%;
			height: 100rpx;
			display: flex;
			align-items: center;
			.time-box {
				font-size: 26rpx;
				color: #ffffff;
				overflow: hidden; //（超出隐藏）
				width: 45%;
				.timeText {
					isplay: inline-block;
					white-space: nowrap;
					animation: 10s wordsLoop linear infinite normal;
				}
			}
			@keyframes wordsLoop {
				0% {
					transform: translateX(300px);
					-webkit-transform: translateX(300px);
				}
				100% {
					transform: translateX(-200%);
					-webkit-transform: translateX(-200%);
				}
			}

			@-webkit-keyframes wordsLoop {
				0% {
					transform: translateX(300px);
					-webkit-transform: translateX(300px);
				}
				100% {
					transform: translateX(-200%);
					-webkit-transform: translateX(-200%);
				}
			}
			
			.addr {
				height: 60rpx;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				width: 50%;
				color: #ffffff;

				.icon {
					height: 60rpx;
					margin-right: 15rpx;
					display: flex;
					align-items: center;
					font-size: 42rpx;
					color: #ffffff;
				}
			}
			.config {
				width: 120rpx;
				height: 60rpx;
				flex-shrink: 0;
				display: flex;
				.message {
					width: 65rpx;
					height: 65rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 42rpx;
					color: #ffffff;
				}
			}
		}
		//搜索框
		.input-box {
			width: 92%;
			margin: 0rpx auto;
			height: 70rpx;
			background-color: #f5f5f5;
			border-radius: 50rpx;
			position: relative;
			display: flex;
			align-items: center;
			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60rpx;
				height: 80rpx;
				font-size: 34rpx;
				color: #c0c0c0;
			}
			input {
				padding-left: 28rpx;
				height: 28rpx;
				font-size: 28rpx;
			}
		}
	}
	.zhanwei {
		width: 100% !important;
		height: 160rpx;
	}
	.text-box {
		padding: 30rpx 25rpx;
		font-size: 22rpx;
		color: #ffffff;
		.text-center {
			background: #ef747b;
			border-radius: 50rpx;
			padding: 7rpx 20rpx;
			.img {
				width: 25rpx;
				height: 25rpx;
				margin-right: 8rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				font-size: 22rpx;
				margin-top: -3rpx;
			}
		}
	}
	//轮播图
	.swiper {
		width: 100%;
		display: flex;
		justify-content: center;
		.swiper-box {
			width: 92%;
			height: 346rpx;
			overflow: hidden;
			border-radius: 15upx;
			// box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;
			swiper {
				width: 100%;
				height: 346rpx;
				swiper-item {
					image {
						width: 100%;
						height: 346rpx;
					}
				}
			}
			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;
				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;
					&.on {
						width: (100%/3);
					}
				}
			}
		}
	}
}
.floor-item {
	margin: 0rpx 25rpx;
	.list-image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 15rpx;
	}
	.price-list {
		font-size: 20rpx;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 5rpx 10rpx;
		line-height: 1;
		height: 33rpx;
		align-items: flex-end;
		.out-price {
			color: #b25e15;
			text-decoration: line-through;
			font-size: 17rpx;
		}
		.xianprice {
			color: #ffffff;
			font-size: 24rpx !important;
			// padding-bottom: 5rpx;
		}
		.moneyIcon {
			font-size: 17rpx;
		}
	}
}
//拼团列表
.Make-group {
	margin-top: 25rpx !important;
	// color: #157142;
	color: #b33ec5;
	font-size: 26rpx;
	margin: 0rpx 20rpx;
	padding: 10rpx 6rpx;
	// background: linear-gradient(0deg, rgba(124, 224, 128, 1), rgba(220, 250, 196, 1));
	background: linear-gradient(0deg, rgba(141,88,254, 1), rgba(237,224,252, 1));
	border-radius: 21rpx;
	.floor-list {
		.scoll-wrapper {
		}
	}

	.group-title {
		padding-bottom: 20rpx;
		margin: 0 25rpx;
		margin-top: 15rpx;
		.title {
			// color: #157142;
			color: #b33ec5;
			font-size: 36rpx;
			font-weight: bolder;
		}
		.tip {
		}
		.tpl {
			width: 44%;
			font-weight: normal !important;
			font-size: 26rpx !important;
		}
		.detail {
			font-size: 28rpx !important;
			background: linear-gradient(90deg, rgba(255, 116, 0, 1), rgba(254, 5, 0, 1), rgba(254, 10, 0, 1));
			padding: 5rpx 20rpx;
			border-radius: 25rpx;
			color: #ffffff;
		}
	}
}
.content {
	width: 100%;
	height: 220rpx;
	margin: 20rpx 0rpx 45rpx 0rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
/* 秒杀专区 */
.seckill-section {
	padding: 4rpx 30rpx 24rpx;
	.s-header {
		display: flex;
		align-items: center;
		height: 92rpx;
		line-height: 1;
		.tit-box {
			flex-shrink: 0;
		}
		.tit {
			@extend %font-title;
		}
		.f-left-icon {
			@extend %f-left-icon;
		}
		.textNav {
			line-height: 1;
			padding: 15rpx 0;
			flex-shrink: 0;
			flex-grow: 1;
			min-width: 100rpx;
			text-align: right;
		}
		.tip-box {
			flex-grow: 1;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.tip {
			font-size: $font-sm;
			color: $font-color-light;
			padding-left: 10rpx;
			padding-right: 10rpx;
		}
		.timer {
			display: inline-block;
			width: 40rpx;
			height: 36rpx;
			text-align: center;
			line-height: 36rpx;
			margin-right: 14rpx;
			font-size: $font-sm + 2rpx;
			color: #fff;
			border-radius: 2px;
			background: rgba(0, 0, 0, 0.8);
		}
		.iconenter {
			font-size: $font-sm;
			color: $font-color-light;
			flex: 1;
			text-align: right;
		}
	}
}
.floor-list {
	white-space: nowrap;
	background-color: white;
	padding: 20rpx;
	border-radius: 5rpx;
}
.tpl-box {
	position: relative;
	image {
		width: 149rpx;
		height: 33rpx;
	}
}
.scoll-wrapper {
	display: flex;
	align-items: flex-start;
	.noGoodsBg {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		color: $font-color-light;
	}
	.floor-item {
		width: 200rpx;
		margin-right: 20rpx;
		font-size: $font-sm + 2rpx;
		color: $font-color-dark;
		line-height: 1.8;
		.list-image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 6rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.price {
			color: $color-red;
		}
	}
}
//商品分类
.category-section {
	display: flex;
	flex-wrap: wrap;
	padding-left: 40rpx;
	font-size: 24rpx;
	color: #656565;
	.category-item {
		text-align: center;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		width: 112rpx;
		background-color: white;
		&:nth-child(n + 1) {
			margin-right: 4%;
		}
	}
	.image-wrapper {
		width: 100%;
		height: 112rpx;
		border-radius: 100%;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
			border-radius: 100%;
		}
	}
	.title {
		padding-bottom: 15rpx;
	}
}

// 接龙
.solitaire {
	// background: linear-gradient(270deg, rgba(181,116,242, 1) 0%, rgba(139,86,254, 1) 100%);
	background: linear-gradient(90deg, rgba(45,190,89, 1) 0%, rgba(37,215,79, 1) 100%);
	border-radius: 10rpx;
	margin: 20rpx 25rpx;
	font-size: 24rpx;
	padding: 0rpx 20rpx;
	height: 84rpx;
	color: #ffffff;
	.Member-code {
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}
	.Member-box {
		image {
			width: 45rpx;
			height: 38rpx;
		}
	}
	.Member-text {
		margin-left: 15rpx;
		color: rgba(255, 255, 255, 1);
	}
}

//开通美卡
.Member {
	background: linear-gradient(270deg, rgba(37, 214, 79, 1) 0%, rgba(45, 189, 89, 1) 100%);
	border-radius: 10rpx;
	margin: 15rpx 25rpx;
	font-size: 24rpx;
	padding: 0rpx 20rpx;
	height: 84rpx;
	color: #ffffff;
	.Member-code {
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}
	.Member-box {
		image {
			width: 45rpx;
			height: 38rpx;
		}
	}
	.Member-text {
		margin-left: 15rpx;
		color: rgba(255, 255, 255, 1);
	}
}
.time-box {
	position: relative;
}
.seckill-section {
	padding: 4rpx 30rpx 24rpx;
	.s-header {
		display: flex;
		align-items: center;
		height: 92rpx;
		line-height: 1;
		.tit-box {
			flex-shrink: 0;
		}
		.tit {
			@extend %font-title;
			margin-right: 15;
		}
		.f-left-icon {
			@extend %f-left-icon;
			background-image: linear-gradient(#71d094, #5dbc7c);
		}
		.textNav {
			font-size: 28rpx;
			color: #2dbd59;
		}
		.tip-box {
			flex-grow: 1;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.tip {
			font-size: $font-sm;
			color: $font-color-light;
			padding-left: 10rpx;
			padding-right: 10rpx;
		}
		.timer {
			display: inline-block;
			width: 40rpx;
			height: 36rpx;
			text-align: center;
			line-height: 36rpx;
			margin-right: 14rpx;
			font-size: $font-sm + 2rpx;
			color: #fff;
			border-radius: 2px;
			background: rgba(0, 0, 0, 0.8);
		}
		.iconenter {
			font-size: $font-sm;
			color: $font-color-light;
			flex: 1;
			text-align: right;
		}
	}
	.floor-list {
		white-space: nowrap;
		background-color: white;
		padding: 20rpx;
		border-radius: 5rpx;
	}
	.scoll-wrapper {
		display: flex;
		align-items: flex-start;
		.noGoodsBg {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			color: $font-color-light;
		}
		.floor-item {
			width: 200rpx;
			font-size: $font-sm + 2rpx;
			margin-right: 25rpx;
			.list-image {
				width: 200rpx;
				height: 200rpx;
			}
			.tpl {
				padding-left: 15rpx;
				.title {
					font-size: 26rpx !important;
				}
				.img {
					width: 50rpx;
					height: 50rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.price {
					padding-top: 15rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(255, 26, 39, 1);
				}
				.otPrice {
					font-size: 20rpx;
					font-weight: 400;
					text-decoration: line-through;
					color: rgba(153, 153, 153, 1);
				}
				.price-green {
					color: #2dbd59;
					font-size: 28rpx !important;
					text {
						background: #2dbd59;
						color: #ffffff;
						padding: 0rpx 10rpx;
						border-radius: 7rpx;
						font-size: 22rpx !important;
						margin-left: 15rpx;
					}
				}
			}
		}
	}
}
//过渡分割线
.transition {
	background: #f0f0f0;
	width: 100%;
	height: 20rpx;
	margin-bottom: 25rpx;
}
// 特色专区
.characteristic {
	margin-bottom: 25rpx;
	.characteristic-box {
		font-size: 26rpx;
		width: 93%;
		margin: 0rpx auto;
		border-radius: 15rpx;
		border: 1rpx solid #f8f6f6;
		.box {
			border-bottom: 1rpx solid #f8f6f6;
			.characteristic-list {
				padding: 25rpx 25rpx;
				width: 50%;
				border-right: 1rpx solid #f8f6f6;
				.list-tpl {
					font-size: 30rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}
				.red {
					background: linear-gradient(140deg, rgba(254, 74, 50, 1) 0%, rgba(254, 148, 84, 1) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.pink {
					background: linear-gradient(140deg, rgba(243, 42, 60, 1) 0%, rgba(255, 74, 144, 1) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.blue {
					background: linear-gradient(140deg, rgba(1, 115, 213, 1) 0%, rgba(12, 127, 225, 1) 0%, rgba(58, 161, 251, 1) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.green {
					background: linear-gradient(140deg, rgba(18, 159, 55, 1) 0%, rgba(110, 206, 70, 1) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.list-tip {
					font-size: 24rpx;
					padding: 10rpx 0rpx;
					margin-bottom: 10rpx;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);
				}
				.list-img {
					.img {
						width: 140rpx;
						height: 140rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
}
//商品种类卡片切换
.recommend {
	width: 95%;
	height: 155rpx;
	margin: 0rpx auto;
	padding-top: 30rpx;
	font-size: 24rpx;
	text-align: center;
	color: #333333;
	align-items: flex-start;
	.recommend_list {
		width: 33%;
	}
	.re_title {
		font-size: 30rpx;
		font-weight: bold;
	}
	.re_name {
		color: #999999;
		padding-top: 10rpx;
	}
	.selected_icon {
		width: 25rpx;
		height: 10rpx;
		margin: 0px auto;
		display: none;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.active {
		display: block;
	}
	.active_color {
		background: linear-gradient(to right, rgba(106, 242, 46, 1) 0%, #1bcc26);
		-webkit-background-clip: text;
		color: transparent;
	}
	.active_name {
		background: linear-gradient(-21deg, rgba(27, 204, 38, 1), rgba(106, 242, 46, 1));
		border-radius: 16px;
		color: #ffffff;
		padding: 5rpx 15rpx;
	}
}
.f-header {
	display: flex;
	align-items: center;
	height: 92rpx;
	padding: 6rpx 30rpx 8rpx;
	image {
		flex-shrink: 0;
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}
	.tit-box {
		@extend %font-title-box;
	}
	.tit {
		@extend %font-title;
	}
	.iconenter {
		font-size: $font-lg + 2rpx;
		color: $font-color-light;
	}
	.f-left-icon {
		@extend %f-left-icon;
	}
	.iconfont {
		font-size: $font-sm - 2rpx;
	}
}
// 美卡升级礼包
.uservip {
	border-radius: $border-radius-sm;
	background-color: white;
	box-shadow: $box-shadow;
	height: 300rpx;
	margin: 0 30rpx;
	image {
		height: 100%;
		width: 300rpx;
	}
	.detail {
		position: relative;
		padding: 20rpx;
		height: 100%;
		.icon {
			@extend %icon;
		}
		.price-box {
			position: absolute;
			bottom: 20rpx;
			width: calc(100% - 40rpx);
			.price {
				font-size: $font-lg + 2rpx;
				font-weight: bold;
				color: $font-color-base;
			}
			.text {
				color: $color-gray;
				font-size: $font-sm;
			}
		}
		.title {
			font-size: $font-lg;
			font-weight: bold;
		}
	}
}

/* 猜你喜欢 */
.guess-section {
	display: flex;
	flex-wrap: wrap;
	padding: 0 20rpx;
	/* #ifdef H5 */
	padding-bottom: 100rpx;
	/* #endif */
	.guess-item {
		// height: 558rpx;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		border: 2rpx solid #eeeeee;
		width: 343rpx;
		margin-bottom: 4%;
		border-radius: $border-radius-sm;
		background-color: white;
		padding-bottom: 30rpx;
		&:nth-child(2n + 1) {
			margin-right: 24rpx;
		}
	}
	.imagewrapper {
		width: 100%;
		height: 330rpx;
		border-radius: 3px;
		margin-bottom: 15rpx;
		image {
			width: 100%;
			height: 100%;
			// opacity: 1;
		}
	}
	.guess-list {
		height: 130rpx;
		padding: 0rpx 25rpx;
		.title {
			font-size: 28rpx;
			color: $font-color-dark;
		}
		.info {
			color: #999999;
			font-size: 24rpx;
		}
		.tipBox {
			// padding-bottom: 8rpx;
			.tipsl {
				text {
					border: 2rpx solid #ff1a27;
					color: #ff1a27;
					border-radius: 5rpx;
					font-size: 18rpx;
					padding: 2rpx 5rpx;
					margin-right: 15rpx;
				}
			}
		}
	}
	.price {
		font-size: 28rpx;
		width: 303rpx;
		// padding-top: 25rpx;
		position: relative;
		.price_list {
			.price-red {
				font-weight: bold;
				font-size: 32rpx !important;
				color: #ff1a27;
				text {
					color: #9699a0;
					font-size: 24rpx !important;
					font-weight: normal;
					padding: 0rpx 10rpx;
				}
			}
			.price-green {
				color: #2dbd59;
				font-size: 24rpx !important;
				text {
					background: #2dbd59;
					color: #ffffff;
					padding: 0rpx 8 rpx;
					border-radius: 7rpx;
					font-size: 20rpx !important;
					margin-left: 8rpx;
				}
			}
		}
		.img {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 50rpx;
			height: 50rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.icon {
		@extend %icon;
	}

	.detail {
		line-height: 1;
	}
	.tip {
		color: white;
		background-color: $color-yellow;
		line-height: 1.5;
		font-size: $font-sm;
		padding-left: 20rpx;
	}
}
.TipsBox {
	position: fixed;
	bottom: 118rpx;
	width: 100%;
	padding: 50rpx 50rpx;
	font-size: 30rpx;
	background-color: #fdfbcb;
	color: #444025;
	text {
		background-color: #ffbd1e;
		padding: 10rpx 25rpx;
		border-radius: 100rpx;
		color: #ffffff;
		margin-left: 10rpx;
	}
}
</style>