2021-8-24

pages/index/index.vue

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