上传文件至 'pages/index/components'

pages/index/components/all.vue

@@ -0,0 +1,269 @@
+<template>
+	<view class="app-container">
+		<view class="top-container">
+			<view class="tab">
+				<view class="item" :class="screenType === 0 ? 'current':''" @tap="changeScreen(0)">综合</view>
+				<view class="item" :class="screenType === 1 ? 'current':''" @tap="changeScreen(1)">销量</view>
+				<view class="item" :class="screenType === 2 || screenType === 3 ? 'current':''"  @tap="changeScreen(2)">价格
+					<image src="@/static/icon/price_1.png" v-if="screenType === 2"></image>
+					<image src="@/static/icon/price_2.png" v-if="screenType === 3"></image>
+					<image src="@/static/icon/price_0.png" v-if="screenType != 2 && screenType != 3"></image>
+				</view>
+				<view class="item" :class="screenType === 4 ? 'current':''" @tap="changeScreen(4)">上架时间</view>
+			</view>
+			<view class="icon">
+				<image src="@/static/icon/show_1.png" v-if="showType == 1" @tap="showType = 2"></image>
+				<image src="@/static/icon/show_2.png" v-if="showType == 2" @tap="showType = 1"></image>
+			</view>
+		</view>
+		<view class="goods-waterfall-list" v-show="showType == 1">
+			<view class="left">
+				<block v-for="(item, index) in goodsList" :key='index'>
+					<view class="item" v-if="index%2==0" @tap="toGoodsDetail(item.goodsId)">
+						<view class="image">
+							<image :src="item.imgUrl" mode="aspectFill" class="img"></image>
+							<image :src="item.logo" mode="aspectFill" class="water" v-if="item.isShowWater"></image>
+						</view>
+						<view class="content">
+							<view class="title ellipsis-2">{{item.goodsName}}</view>
+							<view class="tags" v-if="item.tags1 && item.tags1.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{it}}</view>
+							</view>
+							<view class="price">
+								<view class="price-1">¥{{item.goodsPrice | numToFixed}}</view>
+								<view class="price-2">¥{{item.orgGoodsPrice | numToFixed}}</view>
+							</view>
+							<view class="tags2" v-if="item.tags2 && item.tags2.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags2" :key="idx">{{it}}</view>
+							</view>
+							<view class="text">销量：{{item.soldNum}}</view>
+						</view>
+					</view>
+				</block>
+			</view>
+			<view class="right">
+				<block v-for="(item, index) in goodsList" :key='index'>
+					<view class="item" v-if="index%2==1" @tap="toGoodsDetail(item.goodsId)">
+						<view class="image">
+							<image :src="item.imgUrl" mode="aspectFill" class="img"></image>
+							<image :src="item.logo" mode="aspectFill" class="water" v-if="item.isShowWater"></image>
+						</view>
+						<view class="content">
+							<view class="title ellipsis-2">{{item.goodsName}}</view>
+							<view class="tags" v-if="item.tags1 && item.tags1.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{it}}</view>
+							</view>
+							<view class="price">
+								<view class="price-1">¥{{item.goodsPrice | numToFixed}}</view>
+								<view class="price-2">¥{{item.orgGoodsPrice | numToFixed}}</view>
+							</view>
+							<view class="tags2" v-if="item.tags2 && item.tags2.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags2" :key="idx">{{it}}</view>
+							</view>
+							<view class="text">销量：{{item.soldNum}}</view>
+						</view>
+					</view>
+				</block>
+			</view>
+		</view>
+		
+		<view class="goods-row-list" v-show="showType == 2">
+			<block v-for="(item, index) in goodsList" :key='index'>
+				<view class="item" @tap="toGoodsDetail(item.goodsId)">
+					<view class="image">
+						<image :src="item.imgUrl" mode="aspectFill" class="img"></image>
+						<image :src="item.logo" mode="aspectFill" class="water" v-if="item.isShowWater"></image>
+					</view>
+					<view class="right">
+						<view>
+							<view class="title ellipsis-2">{{item.goodsName}}</view>
+							<view class="tags" v-if="item.tags1 && item.tags1.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{it}}</view>
+							</view>
+						</view>
+						<view>
+							<view class="bottom">
+								<view class="price">
+									<view class="price-1">¥{{item.goodsPrice | numToFixed}}</view>
+									<view class="price-2">¥{{item.orgGoodsPrice | numToFixed}}</view>
+								</view>
+								<view class="text">销量：{{item.soldNum}}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</block>
+		</view>
+		<no-data v-if="!goodsList.length" :showText="'暂无商品'"></no-data>
+		<loading-text v-if="goodsList.length"  :loading="loading" :noMore="noMore" ></loading-text>
+		
+		<!-- <drag-button :isDock="true" :customBar="true" ref="dragButton"></drag-button> -->
+	</view>
+</template>
+
+<script>
+	// import dragButton from '@/components/drag-button.vue';
+	
+	export default {
+		// components:{
+		// 	dragButton
+		// },
+		data() {
+			return {
+				screenType: '',
+				goodsList: [],
+				pageNum: 1,
+				pageSize: 8,
+				noMore: false,
+				loading: false,
+				showType: 1
+			}
+		},
+		
+		onShow() {
+			// this.$refs.dragButton.init();
+		},
+		
+		onLoad() {
+			this.getGoodsList();
+		},
+		
+		// 下拉刷新
+		onPullDownRefresh() {
+			this.pageNum = 1;
+			this.getGoodsList();
+		},
+		
+		// 上拉加载
+		onReachBottom() {
+			this.getGoodsList(1);
+		},
+		
+		methods: {
+			// 切换筛选类型
+			changeScreen(type) {
+				if(type != 2) {
+					if(this.screenType !== type) {
+						this.screenType = type;
+					}else {
+						this.screenType = '';
+					}
+				}else {
+					if(this.screenType != 2 && this.screenType != 3) {
+						this.screenType = 2;
+					}else if(this.screenType == 2) {
+						this.screenType = 3;
+					}else {
+						this.screenType = '';
+					}
+				}
+				this.pageNum = 1;
+				this.getGoodsList();
+			},
+			
+			// 获取商品列表
+			getGoodsList(loadMore) {
+				if(this.noMore && loadMore)return;
+				this.noMore = false
+				if(!loadMore){
+					this.pageNum = 1;
+				}else{
+					this.loading = true;
+				}
+				this.$axios({
+					url: '/goods/list/sort/page',
+					method: 'get',
+					params: {
+						pageNum: this.pageNum,
+						pageSize: this.pageSize,
+						categoryId: '',
+						sort: this.screenType
+					},
+					isLoading: !loadMore
+				}).then(res => {
+					res.data.records.forEach(item => {
+						if(item.logo && item.logoStartTime) {
+							item.isShowWater = this.$compareTime(item.logoStartTime, item.logoEndTime);
+						}else {
+							item.isShowWater = false;
+						}
+					})
+					let _list = res.data.records;
+					let pageTotal = res.data.pages;
+					if(this.pageNum >= pageTotal){
+						this.noMore = true;
+					}
+					if (_list.length) {
+						this.pageNum += 1
+					}
+					if (loadMore) {
+						this.goodsList = this.goodsList.concat(_list);
+						this.loading = false;
+					} else {
+						this.goodsList = _list;
+					}
+					
+					uni.stopPullDownRefresh();
+				})
+			},
+			
+			toGoodsDetail(id) {
+				uni.navigateTo({
+					url: '/packageGoods/pages/detail?id=' + id
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.app-container {
+		background: #F4F2F2;
+		padding-top: 88rpx;
+		box-sizing: border-box;
+	}
+	.top-container {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		background: #FFFFFF;
+		display: flex;
+		padding: 0 20rpx;
+		align-items: center;
+		box-sizing: border-box;
+		.tab {
+			flex: 1;
+			display: flex;
+			padding: 0 80rpx 0 30rpx;
+			box-sizing: border-box;
+			justify-content: space-between;
+			.item {
+				height: 88rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 30rpx;
+				color: #666666;
+				&.current {
+					color: #FF3F42;
+				}
+				image {
+					width: 18rpx;
+					height: 30rpx;
+					display: block;
+					margin-left: 10rpx;
+				}
+			}
+		}
+		.icon {
+			padding-right: 10rpx;
+			image {
+				width: 36rpx;
+				height: 36rpx;
+				display: block;
+			}
+		}
+	}
+	
+</style>

pages/index/components/home-page-a.vue

@@ -0,0 +1,1553 @@
+<template>
+	<view class="home-container">
+		
+		<block v-show="isLoaded">
+			<custom :bgColor="'bg-them'" :backColor="'#FFFFFF'" :isBack="false" v-show="scrollTop > 100">
+				<text slot="content" style="color: #FFFFFF; font-size: 36rpx;">{{configInfo.minAppName}}</text>
+			</custom>
+			
+			<view class="top-container">
+				<image src="@/static/home/top_bg.png" mode="widthFix" class="bg"></image>
+				
+				<view class="content">
+					<view class="title" :style="cuStyle">{{configInfo.minAppName}}</view>
+					
+					<view class="search">
+						<image src="/static/icon/search.png" class=""></image>
+						<input type="text" confirm-type="search" placeholder="搜索商品名称或型号" v-model="keyword" @confirm="searchSubmit">
+					</view>
+				</view>
+			</view>
+			
+			<view class="classify-container">
+				<view class="content">
+					<block v-for="(item, index) in classifyList" :key='index'>
+						<view class="item" @tap="toClassifyLst(item.categoryId)">
+							<image :src="item.imgUrl" mode="aspectFill"></image>
+							<text class="ellipsis">{{item.name}}</text>
+						</view>
+					</block>
+					<view class="item" @tap="toClassifyLst(0)">
+						<image src="@/static/home/class_more.png" mode="aspectFill"></image>
+						<text>更多分类</text>
+					</view>
+				</view>
+			</view>
+			
+			<view class="swiper-container" v-if="isShow_banner && bannerList.length > 0">
+				<swiper @change="changeBanner" :autoplay="true">
+					<block v-for="(item, index) in bannerList" :key='index'>
+						<swiper-item>
+							<image :src="item.imgSrc" mode="aspectFill" @tap="toMiniProgram(item.appId, item.linkUrl)" v-if="item.type === 2"></image>
+							<image :src="item.imgSrc" mode="aspectFill" @tap="toActivityList(item.goodsId)" v-if="item.type === 3"></image>
+							<image :src="item.imgSrc" mode="aspectFill" @tap="toGoodsDetail(item.goodsId)" v-else></image>
+						</swiper-item>
+					</block>
+				</swiper>
+				<view class="dots-conatiner">
+					<view class="con" :style="'width:'+(bannerList.length * 20)+'rpx;'" >
+						<view class="dot" :style=" 'transform:translateX('+ (bannerCurrent * 100) +'%)' "  ></view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="notice-container" v-if="isShow_notice && noticeList.length > 0 && userInfo.type === 'SERVICE'">
+				<view class="content">
+					<view class="left">
+						<image src="@/static/home/notice.png" ></image>
+					</view>
+					<swiper class="swiper" :autoplay="true" :vertical="true" :circular="true" :disable-touch="true">
+						<block v-for="(item,index) in noticeList" :key='index' >
+							<swiper-item @touchmove.stop='stopTouchMove'>
+								<view class="ellipsis">{{item.workUserName}}成功分享商城，获得收益{{item.amount}}元</view>
+							</swiper-item>
+						</block>
+					</swiper>
+				</view>
+			</view>
+			
+			<view class="coupon-container" v-if="isShow_coupon && couponList.length > 0">
+				<image src="@/static/home/cp_bg1.png" mode="widthFix" class="bg" v-if="couponList.length == 1"></image>
+				<image src="@/static/home/cp_bg2.png" mode="widthFix" class="bg" v-if="couponList.length > 1"></image>
+				
+				<view class="list list1" v-if="couponList.length == 1">
+					<block v-for="(item, index) in couponList" :key='index'>
+						<view class="item" @tap="handleCoupon(item)">
+							<image class="cp" src="@/static/home/coupon_bg1.png"></image>
+							<view class="content">
+								<view class="left">
+									<view class="price">¥{{item.couponValue}}</view>
+									<view class="text" v-if="item.couponType == 'SATISFY'">满{{item.orderAmount}}可用</view>
+								</view>
+								<view class="right">
+									<view class="main">
+										<view class="row1 ellipsis-2">{{item.couponName}}</view>
+										<view class="row2">
+											<view class="date" v-if="item.obtainType == 0 || item.obtainType == 1">
+												<view>领取时间：</view>
+												<view>{{item.obtainStartTime | dateToYYmmdd2}}-{{item.obtainEndTime | dateToYYmmdd2}}</view>
+											</view>
+											<view class="date" v-if="item.obtainType == 2">
+												<view>使用时间：</view>
+												<view>{{item.activeStartTime | dateToYYmmdd2}}-{{item.activeEndTime | dateToYYmmdd2}}</view>
+											</view>
+											<view class="button gary" v-if="item.obtainType == 0">待开始</view>
+											<view class="button red" v-if="item.obtainType == 1">立即领取</view>
+											<view class="button white" v-if="item.obtainType == 2">去使用</view>
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</block>
+				</view>
+				
+				<view class="list list2" v-if="couponList.length == 2">
+					<block v-for="(item, index) in couponList" :key='index'>
+						<view class="item" @tap="handleCoupon(item)">
+							<image class="cp" src="@/static/home/coupon_bg2.png"></image>
+							<view class="content">
+								<view class="top">
+									<view class="price">¥{{item.couponValue}}</view>
+									<view class="text">满{{item.orderAmount}}可用</view>
+								</view>
+								<view class="bottom">
+									<view class="name ellipsis">{{item.couponName}}</view>
+									<view class="date ellipsis" v-if="item.obtainType == 0 || item.obtainType == 1">领取时间：{{item.obtainStartTime | dateToYYmmdd2}}-{{item.obtainEndTime | dateToYYmmdd2}}</view>
+									<view class="date ellipsis" v-if="item.obtainType == 2">使用时间：{{item.activeStartTime | dateToYYmmdd2}}-{{item.activeEndTime | dateToYYmmdd2}}</view>
+									<view class="button gary" v-if="item.obtainType == 0">待开始</view>
+									<view class="button red" v-if="item.obtainType == 1">立即领取</view>
+									<view class="button white" v-if="item.obtainType == 2">去使用</view>
+								</view>
+							</view>
+						</view>
+					</block>
+				</view>
+				
+				<view class="list list3" v-if="couponList.length > 2">
+					<view class="left">
+						<block v-for="(item, index) in couponList" :key='index'>
+							<view class="item" @tap="handleCoupon(item)">
+								<image class="cp" src="@/static/home/coupon_bg3.png"></image>
+								<view class="content">
+									<view class="top">
+										<view class="price">¥{{item.couponValue}}</view>
+										<view class="text">满{{item.orderAmount}}可用</view>
+									</view>
+									<view class="bottom">
+										<view class="name ellipsis">{{item.couponName}}</view>
+										<view class="date ellipsis" v-if="item.obtainType == 0 || item.obtainType == 1">领取时间：{{item.obtainStartTime | dateToYYmmdd2}}-{{item.obtainEndTime | dateToYYmmdd2}}</view>
+										<view class="date ellipsis" v-if="item.obtainType == 2">使用时间：{{item.activeStartTime | dateToYYmmdd2}}-{{item.activeEndTime | dateToYYmmdd2}}</view>
+										<view class="button gary" v-if="item.obtainType == 0">待开始</view>
+										<view class="button red" v-if="item.obtainType == 1">立即领取</view>
+										<view class="button white" v-if="item.obtainType == 2">去使用</view>
+									</view>
+								</view>
+							</view>
+						</block>
+					</view>
+					<view class="right">
+						<view class="text" @tap="toReceiveCoupon">
+							<text>查</text>
+							<text>看</text>
+							<text>更</text>
+							<text>多</text>
+							<image src="@/static/home/cp_more.png"></image>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="myManager-container" v-if="isShow_manager && myManagerDetail && !userInfo.promotionGroupLeader && !userInfo.type === 'SERVICE'">
+				<view class="content">
+					<view class="left">
+						<image :src="myManagerDetail.avatar" mode="aspectFill" v-if="myManagerDetail.avatar.indexOf('http') >= 0"></image>
+						<image :src="imageUrl + myManagerDetail.avatar" mode="aspectFill" v-else></image>
+						<view class="main">
+							<view>客户经理：{{myManagerDetail.workName}}</view>
+							<view>{{myManagerDetail.workPhone}}</view>
+						</view>
+					</view>
+					<view class="right" @tap="callPhone(myManagerDetail.workPhone)">拨打电话</view>
+				</view>
+			</view>
+			
+			<view class="seckill-container" v-if="isShow_seckill && seckillTimeList.length > 0">
+				<image src="@/static/home/seckill_bg.png" mode="widthFix" class="bg"></image>
+				
+				<view class="content">
+					<view class="time-list">
+						<block v-for="(item, index) in seckillTimeList" :key='index'>
+							<view class="item" :class="seckillTimeCurrent == index ? 'current':''" @tap="changeSeckillTime(index)">
+								<view class="time">{{item.startHour}}:00</view>
+								<view class="tag" v-if="item.type == 'yjs'">已结束</view>
+								<view class="tag" v-if="item.type == 'jxz'">{{countdownTime}}</view>
+								<view class="tag" v-if="item.type == 'wks'">即将开始</view>
+							</view>
+						</block>
+					</view>
+					<view class="product-list">
+						<block v-for="(item, index) in seckillGoodsList" :key='index'>
+							<div class="item" @tap="toSeckillGoodsDetail(item.goodsId)">
+								<image :src="item.imgUrl" mode="aspectFill"></image>
+								<view class="right">
+									<view class="title ellipsis-2">{{item.goodsName}}</view>
+									<view class="des ellipsis-2">{{item.describeText ? item.describeText : ''}}</view>
+									<view class="stock-sales">
+										<view class="stock">
+											<text>剩余{{item.secStockNum}}件</text>
+											<view class="progress-box">
+												<!-- 库存 / 总数 * 100 = 剩余百分比 -->
+												<progress :percent="item.secStockNum / item.limitBuy * 100" activeColor="#FF3F42" active stroke-width="6" />
+											</view>
+										</view>
+										<view class="sales">销量：{{item.salesVolume}}</view>
+									</view>
+									<view class="bottom">
+										<view class="price">
+											<view class="price-1">¥{{item.price | numToFixed}}</view>
+											<view class="price-2">¥{{item.goodsPrice | numToFixed}}</view>
+										</view>
+										<view class="btn" v-if="seckillTimeList[seckillTimeCurrent].type == 'jxz'">马上抢</view>
+										<view class="btn2" v-else>马上抢</view>
+									</view>
+								</view>
+							</div>
+						</block>
+					</view>
+					<view class="loadmore" v-if="!seckillGoodsNoMore" @tap="loadMoreSeckillGoods">点击加载更多商品</view>
+				</view>
+			</view>
+			
+			<view class="recom-container" v-if="isShow_recom">
+				<view class="top">
+					<view class="title"><image src="@/static/home/recom.png"></image></view>
+					<scroll-view
+						:scroll-x="true"
+						:scroll-left="scrollLeft"
+						scroll-with-animation
+						:show-scrollbar="false"
+						class="tabs-view"
+						ref="tabs-view">
+						<view class="tab">
+							<block v-for="(item, index) in tabList" :key='index'>
+								<view class="item" :ref="`tabs-item-${index}`" :class="[`tabs-item-${index}`, item.categoryId == tabCurrent ? 'current':'']" @tap="changeTab(item.categoryId)">{{item.name}}</view>
+							</block>
+						</view>
+					</scroll-view>
+				</view>
+				<view class="list">
+					<block v-for="(item, index) in recomList" :key='index'>
+						<view class="item" @tap="toGoodsDetail(item.goodsId)">
+							<view class="image">
+								<image :src="item.imgUrl" mode="aspectFill" class="img"></image>
+								<image :src="item.logo" mode="aspectFill" class="water" v-if="item.isShowWater"></image>
+							</view>
+							<view class="content">
+								<view class="title ellipsis-2">{{item.goodsName}}</view>
+								<view class="bottom">
+									<view class="price">
+										<view class="price-1">¥{{item.goodsPrice | numToFixed}}</view>
+										<view class="price-2">¥{{item.orgGoodsPrice | numToFixed}}</view>
+									</view>
+									<view class="btn"><image src="@/static/icon/cart.png" mode="aspectFill"></image></view>
+								</view>
+							</view>
+						</view>
+					</block>
+				</view>
+				<no-data v-if="!recomList.length" :showText="'暂无商品'"></no-data>
+			</view>
+			
+		</block>
+	</view>
+</template>
+
+<script>
+	import {mapState} from 'vuex';
+	
+	export default {
+		props:{
+			homePage: {
+				type: Number,
+				default: 0
+			},
+			templateInfo: {
+				type: Object,
+				default: {}
+			}
+		},
+		data() {
+			return {
+				thisHomePage: 1, // 当前首页页面模版
+				
+				imageUrl: this.$imageUrl,
+				configInfo: uni.getStorageSync('configInfo'),
+				isShow_banner: false,
+				isShow_notice: false,
+				isShow_classify: false,
+				isShow_seckill: false,
+				isShow_coupon: false,
+				isShow_manager: false,
+				isShow_recom: false,
+				
+				scrollTop: 0, // 滚动高度（用于控制自定义导航）
+				keyword: '', // 搜索关键词
+				classifyList: [], // 分类列表
+				bannerList: [], // 轮播图列表
+				bannerCurrent: 0, // 轮播图当前值
+				noticeList: [],
+				couponList: [], // 可领取优惠券列表
+				myManagerDetail: null, // 我的客户经理信息
+				seckillTimeList: [], // 秒杀时间段列表
+				seckillTimeCurrent: 0, // 秒杀时间段选择
+				seckillGoodsList: [], // 秒杀商品列表
+				seckillGoodsPage: 1, // 秒杀商品分页
+				seckillGoodsNoMore: false, // 
+				countdownTime: '', // 倒计时
+				endDatetime: '', // 倒计时结束时间
+				nowDate: null, // 当前时间
+				dateInterval: null, // 时间定时器
+				tabList: [], // 好物推荐分类列表
+				tabCurrent: 1, // 好物推荐分类当前值
+				recomList: [], // 好物推荐列表
+				
+				isLoaded_banner: false,
+				isLoaded_coupon: false,
+				isLoaded_seckill: false,
+				isLoaded_tab: false,
+				isLoaded_myManager: false,
+				
+				scrollLeft: 50,
+				scrollViewWidth: 0,
+				tabsRect: {
+					left: 0
+				},
+			}
+		},
+		computed:{
+			cuStyle(){
+				return `height:${this.CustomBar-this.StatusBar}px; padding-top:${this.StatusBar}px;`
+			},
+			...mapState(['userInfo', 'isLogin', 'userId']),
+			isLoaded() {
+				uni.hideLoading();
+				return (!this.isShow_banner || (this.isShow_banner && this.isLoaded_banner))
+					&& (!this.isShow_coupon || (this.isShow_coupon && this.isLoaded_coupon))
+					&& (!this.isShow_seckill || (this.isShow_seckill && this.isLoaded_seckill))
+					&& (!this.isShow_classify || (this.isShow_classify && this.isLoaded_tab))
+					&& (!this.isShow_manager || (this.isShow_manager && this.isLoaded_myManager))
+			}
+		},
+		watch: {
+			nowDate() {
+				let hh = this.nowDate.getHours(),
+					mm = this.nowDate.getMinutes(),
+					ss = this.nowDate.getSeconds();
+				let hs = [10, 12, 15, 18, 20];
+				if(mm == 0 && ss == 0 && hs.indexOf(hh) >= 0) {
+					setTimeout(() => {
+						this.getSeckillTimeList();
+					}, 1000)
+				}
+			},
+			tabList() {
+				this.$nextTick(() => {
+					this.resize()
+				})
+			},
+			templateInfo: {
+				handler(newValue, oldValue) {
+					const templateInfo = this.templateInfo;
+					this.isShow_banner = templateInfo.carouseStatus;
+					this.isShow_classify = templateInfo.categoryStatus;
+					this.isShow_seckill = templateInfo.killStatus;
+					this.isShow_coupon = templateInfo.couponStatus;
+					this.isShow_manager = templateInfo.customerStatus;
+					this.isShow_notice = templateInfo.notiveStatus;
+					this.isShow_recom = templateInfo.okStatus;
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		mounted() {
+			uni.$on('onPageScroll', (data) => {
+				if(this.homePage !== this.thisHomePage) return false;
+				
+				this.scrollTop = data;
+			});
+			
+			uni.$on('onPullDownRefresh', (data) => {
+				if(this.homePage !== this.thisHomePage) return false;
+				
+				this.keyword = '';
+				this.getTabList();
+				this.getBannerList();
+				this.getNoticeList();
+				this.getCouponList();
+				this.getMyManager();
+				this.getSeckillTimeList();
+			});
+			
+			uni.$on('onShow', (data) => {
+				if(this.homePage !== this.thisHomePage) return false;
+				
+				console.log('onShow page ' + this.thisHomePage);
+				this.keyword = '';
+				this.getTabList();
+				this.getBannerList();
+				this.getNoticeList();
+				this.getCouponList();
+				this.getMyManager();
+				this.getSeckillTimeList();
+				
+				this.dateInterval = setInterval(() => {
+				   this.nowDate = new Date();
+				}, 1000)
+			});
+			
+			uni.$on('onHide', (data) => {
+				if(this.homePage !== this.thisHomePage) return false;
+				
+				clearInterval(this.dateInterval);
+			})
+		},
+		methods: {
+			// 搜索商品
+			searchSubmit() {
+				uni.navigateTo({
+					url: '/packageGoods/pages/search?keyword=' + this.keyword
+				})
+			},
+			
+			// 获取一级菜单
+			getTabList() {
+				this.$axios({
+					url: '/goods/category/list',
+					method: 'get',
+					params: {}
+				}).then(res => {
+					this.tabList = res.data;
+					this.classifyList = res.data.slice(0, 9);
+					this.tabCurrent = res.data.length > 0 ? res.data[0].categoryId : 0;
+					this.getRecomList();
+					
+					uni.stopPullDownRefresh();
+				}).finally(res => {
+					this.isLoaded_tab = true;
+				})
+			},
+			
+			// 去分类列表
+			toClassifyLst(categoryId) {
+				uni.setStorageSync('categoryId', categoryId);
+				uni.switchTab({
+					url:'/pages/goods/classify'
+				})
+			},
+			
+			// 获取轮播图列表
+			getBannerList() {
+				this.$axios({
+					url: '/common/list/page',
+					method: 'get',
+					params: {
+						pageNum: 1,
+						pageSize: 10,
+						state: true
+					}
+				}).then(res => {
+					this.bannerList = res.data.records;
+				}).finally(res => {
+					this.isLoaded_banner = true;
+					uni.stopPullDownRefresh();
+				})
+			},
+			
+			// 切换广告图
+			changeBanner(e) {
+				this.bannerCurrent = e.detail.current;
+			},
+			
+			// 获取公告列表
+			getNoticeList() {
+				this.$axios({
+					url: '/renovation/settle/list',
+					method: 'get',
+					params: {
+						
+					}
+				}).then(res => {
+					if(res.data) {
+						res.data.forEach(item => {
+							item.workUserName = item.workUserName.slice(0, 1) + '师傅';
+						})
+						this.noticeList = res.data;
+					}
+				})
+			},
+			
+			// 获取可领优惠券列表
+			getCouponList() {
+				this.$axios({
+					url: '/coupon/list/all',
+					method: 'get',
+					params: {
+						userId: this.userId
+					}
+				}).then(res => {
+					this.couponList = res.data;
+				}).finally(res => {
+					this.isLoaded_coupon = true;
+				})
+			},
+			
+			// 处理优惠券
+			handleCoupon(item) {
+				if(item.obtainType == 0) {
+					return this.$toast('该优惠券不可领取');
+				}else if(item.obtainType == 1) {
+					this.$axios({
+						url: '/coupon/obtain',
+						method: 'get',
+						params: {
+							userId: this.userId,
+							couponId: item.couponId
+						}
+					}).then(res => {
+						this.$successToast('领取成功');
+						this.getCouponList();
+					})
+				}else if(item.obtainType == 2) {
+					uni.switchTab({
+					    url: '/pages/goods/classify'
+					});
+				}
+			},
+			
+			// 去可领取优惠券
+			toReceiveCoupon() {
+				uni.navigateTo({
+					url:'/pages/index/coupon'
+				})
+			},
+			
+			// 获取我的客户经理
+			getMyManager() {
+				this.$axios({
+					url: '/user/parent',
+					method: 'get',
+					params: {
+						userId: this.userId
+					}
+				}).then(res => {
+					if(res.data) {
+						this.myManagerDetail = res.data;
+					}
+				}).finally(res => {
+					this.isLoaded_myManager = true;
+				})
+			},
+			
+			// 拨打电话
+			callPhone(val) {
+				uni.makePhoneCall({
+				    phoneNumber: val
+				});
+			},
+			
+			findElem(array, attr, val) {
+			    for (var i = 0; i < array.length; i++) {
+			        if (array[i][attr] == val) {
+			            return i; //返回当前索引值
+			        }
+			    }
+			    return -1;
+			},
+			
+			// 计算倒计时
+			countTime() {
+				let endDatetime = this.endDatetime.replace(/\-/g, '/');
+				// console.log(endDatetime)
+			    var nowtime = new Date(),  //获取当前时间
+			        endtime = new Date(endDatetime);  //定义结束时间
+			    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
+			        hh = Math.floor(lefttime/(1000*60*60)),  //计算小时数
+			        mm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
+			        ss = Math.floor(lefttime/1000%60);  //计算秒数
+				// console.log(new Date(endDatetime))
+				function checkTime(i){
+					if (i<10) {
+						i = "0"+i;
+					}
+					return i;
+				}
+				setTimeout(() => {
+					this.countTime();
+				}, 1000);
+				this.countdownTime = checkTime(hh) + ":" + checkTime(mm) + ":" + checkTime(ss);
+				// console.log(this.countdownTime)
+			},
+			
+			// 获取秒杀时间列表
+			getSeckillTimeList() {
+				this.$axios({
+					url: '/goods/sec/time',
+					method: 'get',
+					params: {}
+				}).then(res => {
+					if(res.data.length < 1) {return false;}
+					this.seckillTimeList = res.data;
+					this.seckillTimeCurrent = this.findElem(this.seckillTimeList, 'type', 'jxz');
+					if(this.seckillTimeCurrent == -1) {
+						this.seckillTimeCurrent = 0;
+						this.getSeckillGoodsList();
+					}else {
+						this.endDatetime = this.seckillTimeList[this.seckillTimeCurrent].endDatetime;
+						this.countTime();
+						this.getSeckillGoodsList();
+					}
+				}).finally(res => {
+					this.isLoaded_seckill = true;
+				})
+			},
+			
+			// 切换秒杀时间
+			changeSeckillTime(index) {
+				this.seckillTimeCurrent = index;
+				this.getSeckillGoodsList();
+			},
+			
+			// 获取秒杀商品列表
+			getSeckillGoodsList(loadMore) {
+				if(this.seckillGoodsNoMore && loadMore)return;
+				if(!loadMore) {
+					this.seckillGoodsNoMore = false;
+					this.seckillGoodsPage = 1;
+				}
+				let secKillId = this.seckillTimeList[this.seckillTimeCurrent].secKillId;
+				this.$axios({
+					url: '/goods/sec/goods/list',
+					method: 'get',
+					params: {
+						pageNum: this.seckillGoodsPage,
+						pageSize: 5,
+						secKillId: secKillId,
+					}
+				}).then(res => {
+					let _list = res.data.records;
+					let pageTotal = res.data.pages;
+					if(this.seckillGoodsPage >= pageTotal){
+						this.seckillGoodsNoMore = true;
+					}
+					if (_list.length) {
+						this.seckillGoodsPage += 1;
+					}
+					if (loadMore) {
+						this.seckillGoodsList = this.seckillGoodsList.concat(_list);
+					} else {
+						this.seckillGoodsList = _list;
+					}
+				})
+			},
+			
+			// 加载更多秒杀商品
+			loadMoreSeckillGoods() {
+				this.getSeckillGoodsList(true);
+			},
+			
+			// 进入秒杀商品详情
+			toSeckillGoodsDetail(id) {
+				if(!id) {
+					return false;
+				}
+				if(this.seckillTimeList[this.seckillTimeCurrent].type == 'wks') {
+					return this.$toast('活动未开始');
+				}
+				if(this.seckillTimeList[this.seckillTimeCurrent].type == 'yjs') {
+					return this.$toast('活动已结束');
+				}
+				uni.navigateTo({
+					url: '/packageGoods/pages/detail?id=' + id
+				})
+			},
+			
+			// 切换一级菜单
+			changeTab(current) {
+				this.tabCurrent = current;
+				this.getRecomList();
+				this.resize();
+			},
+			
+			// 获取好物推荐商品列表
+			getRecomList() {
+				this.$axios({
+					url: '/goods/list/level1',
+					method: 'get',
+					params: {
+						pageNum: 1,
+						pageSize: 6,
+						categoryId: this.tabCurrent,
+					},
+				}).then(res => {
+					res.data.records.forEach(item => {
+						if(item.logo && item.logoStartTime) {
+							item.isShowWater = this.$compareTime(item.logoStartTime, item.logoEndTime);
+						}else {
+							item.isShowWater = false;
+						}
+					})
+					this.recomList = res.data.records;
+				})
+			},
+			
+			// 进入商品详情
+			toGoodsDetail(id) {
+				if(!id) {
+					return false;
+				}
+				uni.navigateTo({
+					url: '/packageGoods/pages/detail?id=' + id
+				})
+			},
+			
+			// 跳转小程序
+			toMiniProgram(appId, path) {
+				wx.navigateToMiniProgram({
+					appId,
+					path,
+					extraData: {},
+					envVersion: 'release',
+					success(res) {}
+				});
+			},
+			
+			// 进入活动列表
+			toActivityList(type) {
+				uni.navigateTo({
+					url: '/packageGoods/pages/activity?type=' + type
+				})
+			},
+			
+			setScrollLeft() {
+				// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
+				const index = this.findElem(this.tabList, 'categoryId', this.tabCurrent);
+				const tabRect = this.tabList[index]
+				// 累加得到当前item到左边的距离
+				const offsetLeft = this.tabList
+					.slice(0, index)
+					.reduce((total, curr) => {
+						return total + curr.rect.width
+					}, 0)
+				// 此处为屏幕宽度
+				const res = uni.getSystemInfoSync();
+				const windowWidth = res.windowWidth;
+				// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
+				let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect.right) / 2 + this.tabsRect.left / 2
+				
+				// 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
+				scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
+				this.scrollLeft = Math.max(0, scrollLeft)
+			},
+			// 获取所有标签的尺寸
+			resize() {
+				// 如果不存在list，则不处理
+				if(this.tabList.length === 0) {
+					return
+				}
+				Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
+					this.tabsRect = tabsRect
+					this.scrollViewWidth = 0
+					itemRect.map((item, index) => {
+						// 计算scroll-view的宽度，这里
+						this.scrollViewWidth += item.width
+						// 另外计算每一个item的中心点X轴坐标
+						this.tabList[index].rect = item
+					})
+					// 获取了tabs的尺寸之后，设置滑块的位置
+					this.setScrollLeft()
+				})
+			},
+			// 获取导航菜单的尺寸
+			getTabsRect() {
+				return new Promise(resolve => {
+					this.queryRect('tabs-view').then(size => resolve(size))
+				})
+			},
+			// 获取所有标签的尺寸
+			getAllItemRect() {
+				return new Promise(resolve => {
+					const promiseAllArr = this.tabList.map((item, index) => this.queryRect(
+						`tabs-item-${index}`, true))
+					Promise.all(promiseAllArr).then(sizes => resolve(sizes))
+				})
+			},
+			// 获取各个标签的尺寸
+			queryRect(el, item) {
+				const query = uni.createSelectorQuery().in(this);
+				return new Promise(resolve => {
+					query.select(`.${el}`).boundingClientRect(data => {
+						resolve(data)
+					}).exec();
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.top-container {
+		position: relative;
+		.bg {
+			display: block;
+			width: 750rpx;
+			position: absolute;
+			top: 0;
+			z-index: 0;
+		}
+		.content {
+			width: 710rpx;
+			padding: 0 20rpx;
+			position: relative;
+			z-index: 1;
+		}
+		.title {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #FFFFFF;
+			font-size: 36rpx;
+		}
+		.search {
+			background: #FFFFFF;
+			height: 64rpx;
+			display: flex;
+			align-items: center;
+			border-radius: 64rpx;
+			padding: 0 20rpx;
+			margin-top: 20rpx;
+			image {
+				width: 28rpx;
+				height: 28rpx;
+			}
+			input {
+				width: 100%;
+				padding-left: 15rpx;
+			}
+		}
+	}
+	.classify-container {
+		margin-top: 40rpx;
+		position: relative;
+		z-index: 1;
+		padding: 0 20rpx;
+		.content {
+			border-radius: 20rpx;
+			padding-top: 30rpx;
+			display: flex;
+			flex-wrap: wrap;
+			background: #FFFFFF;
+			.item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				width: 142rpx;
+				margin-bottom: 30rpx;
+				image {
+					width: 78rpx;
+					height: 78rpx;
+					display: block;
+					border-radius: 50%;
+					overflow: hidden;
+				}
+				text {
+					font-size: 24rpx;
+					color: #666666;
+					margin-top: 10rpx;
+					width: 150rpx;
+					text-align: center;
+				}
+			}
+		}
+	}
+	.swiper-container {
+		position: relative;
+		margin-top: 20rpx;
+		swiper {
+			height: 350rpx;
+		}
+		image {
+			height: 350rpx;
+			width: 710rpx;
+			display: block;
+			margin: 0 auto 0;
+			border-radius: 15rpx;
+			overflow: hidden;
+		}
+		.dots-conatiner {
+			position: absolute;
+			width: 100%;
+			bottom: 40rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			.con {
+				border-radius: 4rpx;
+				overflow: hidden;
+				height: 4rpx;
+				background-color: rgba($color: #FFFFFF, $alpha: 0.3);
+			}
+			.dot {
+				width: 20rpx;
+				height: 4rpx;
+				background-color: #FFFFFF;
+				transition: all .3s;
+			}
+		}
+	}
+	.notice-container {
+		padding: 0 20rpx;
+		margin-top: 20rpx;
+		.content {
+			display: flex;
+			align-items: center;
+			height: 100rpx;
+			background: #FFFFFF;
+			border-radius: 20rpx;
+		}
+		.left{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 96rpx;
+			height: 48rpx;
+			margin-right: 20rpx;
+			border-right: 2rpx solid #E5E5E5;
+			image {
+				width: 60rpx;
+				height: 30rpx;
+				display: block;
+			}
+		}
+		.swiper{
+			height: 100rpx;
+			flex: 1;
+			padding-right: 20rpx;
+			::v-deep swiper-item {
+				display: block;
+				height: 100rpx;
+				width: 100%;
+				line-height: 100rpx;
+			}
+		}
+	}
+	.coupon-container {
+		position: relative;
+		margin-top: 20rpx;
+		padding: 0 20rpx;
+		.bg {
+			display: block;
+			width: 100%;
+		}
+		.list {
+			position: absolute;
+			top: 80rpx;
+			z-index: 1;
+		}
+		.list1 {
+			.item {
+				position: relative;
+				margin-bottom: 20rpx;
+				margin-left: 16rpx;
+				.cp {
+					width: 688rpx;
+					height: 178rpx;
+					display: block;
+				}
+				.content {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 710rpx;
+					height: 160rpx;
+					display: flex;
+					align-items: center;
+					.left {
+						width: 210rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-direction: column;
+						.price {
+							font-size: 48rpx;
+							color: #FFFFFF;
+						}
+						.text {
+							color: #FFFFFF;
+							font-size: 28rpx;
+						}
+					}
+					.right {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						padding: 0 20rpx;
+						width: 470rpx;
+						height: 150rpx;
+						box-sizing: border-box;
+						.main {
+							width: 430rpx;
+							height: 150rpx;
+							padding: 16rpx 0 8rpx;
+							box-sizing: border-box;
+							display: flex;
+							flex-direction: column;
+							justify-content: space-between;
+							.row1 {
+								font-size: 28rpx;
+								line-height: 32rpx;
+								height: 64rpx;
+							}
+							.row2 {
+								font-size: 24rpx;
+								line-height: 28rpx;
+								color: #999999;
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+							}
+						}
+					}
+				}
+			}
+		}
+		.list2 {
+			display: flex;
+			.item {
+				position: relative;
+				margin-bottom: 20rpx;
+				&:first-child {
+					margin-left: 16rpx;
+				}
+				.cp {
+					width: 342rpx;
+					height: 308rpx;
+					display: block;
+				}
+				.content {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 342rpx;
+					height: 328rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					.top {
+						width: 324rpx;
+						height: 130rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-direction: column;
+						.price {
+							font-size: 48rpx;
+							color: #FFFFFF;
+							line-height: 48rpx;
+							margin-top: 16rpx;
+						}
+						.text {
+							color: #FFFFFF;
+							font-size: 28rpx;
+							line-height: 28rpx;
+							margin-top: 10rpx;
+						}
+					}
+					.bottom {
+						width: 324rpx;
+						height: 160rpx;
+						padding: 16rpx;
+						box-sizing: border-box;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						align-items: center;
+						.name {
+							font-size: 28rpx;
+							text-align: left;
+							line-height: 32rpx;
+							width: 100%;
+						}
+						.date {
+							font-size: 24rpx;
+							color: #999999;
+							text-align: left;
+							width: 100%;
+							line-height: 28rpx;
+						}
+					}
+				}
+			}
+		}
+		.list3 {
+			display: flex;
+			align-items: center;
+			.left {
+				display: flex;
+				width: 630rpx;
+				overflow-x: scroll;
+			}
+			.right {
+				width: 80rpx;
+				display: flex;
+				justify-content: center;
+				.text {
+					width: 48rpx;
+					height: 200rpx;
+					border-radius: 48rpx;
+					background: #FFFFFF;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					text {
+						font-size: 28rpx;
+						color: #FF3F42;
+						line-height: 32rpx;
+					}
+					image {
+						width: 32rpx;
+						height: 32rpx;
+						display: block;
+						flex-shrink: 0;
+						margin-top: 10rpx;
+					}
+				}
+			}
+			.item {
+				position: relative;
+				margin-bottom: 20rpx;
+				&:first-child {
+					margin-left: 16rpx;
+				}
+				.cp {
+					width: 278rpx;
+					height: 308rpx;
+					display: block;
+				}
+				.content {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 278rpx;
+					height: 328rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					.top {
+						width: 260rpx;
+						height: 130rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-direction: column;
+						.price {
+							font-size: 48rpx;
+							color: #FFFFFF;
+							line-height: 48rpx;
+							margin-top: 16rpx;
+						}
+						.text {
+							color: #FFFFFF;
+							font-size: 28rpx;
+							line-height: 28rpx;
+							margin-top: 10rpx;
+						}
+					}
+					.bottom {
+						width: 260rpx;
+						height: 160rpx;
+						padding: 16rpx;
+						box-sizing: border-box;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						align-items: center;
+						.name {
+							font-size: 28rpx;
+							text-align: left;
+							line-height: 32rpx;
+							width: 100%;
+						}
+						.date {
+							font-size: 24rpx;
+							color: #999999;
+							text-align: left;
+							width: 100%;
+							line-height: 28rpx;
+						}
+					}
+				}
+			}
+		}
+		.button {
+			width: 120rpx;
+			height: 40rpx;
+			border-radius: 40rpx;
+			font-size: 24rpx;
+			flex-shrink: 0;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			&.gary {
+				background: #AAAAAA;
+				color: #FFFFFF;
+				border: 1px solid #AAAAAA;
+			}
+			&.red {
+				background: #C434FF;
+				color: #FFFFFF;
+				border: 1px solid #C434FF;
+			}
+			&.white {
+				color: #FF3F42;
+				border: 1px solid #FF3F42;
+			}
+		}
+	}
+	.myManager-container {
+		padding: 0 20rpx;
+		.content {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			padding: 20rpx;
+			.left {
+				display: flex;
+				align-items: center;
+				image {
+					width: 100rpx;
+					height: 100rpx;
+					border-radius: 50%;
+				}
+				.main {
+					font-size: 28rpx;
+					line-height: 48rpx;
+					margin-left: 20rpx;
+				}
+			}
+			.right {
+				width: 160rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				border-radius: 60rpx;
+				text-align: center;
+				font-size: 28rpx;
+				color: #E43B38;
+				border: 1px solid #E43B38;
+			}
+		}
+	}
+	.seckill-container {
+		position: relative;
+		margin-top: 20rpx;
+		min-height: 340rpx;
+		.bg {
+			display: block;
+			width: 750rpx;
+			position: absolute;
+			top: 0;
+			z-index: 0;
+		}
+		.content {
+			width: 710rpx;
+			padding: 0 20rpx;
+			position: relative;
+			z-index: 1;
+		}
+		.time-list {
+			display: flex;
+			overflow-x: scroll;
+			padding-top: 90rpx;
+			padding-bottom: 40rpx;
+			.item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				flex-shrink: 0;
+				width: 140rpx;
+				margin-right: 48rpx;
+				.time {
+					font-size: 32rpx;
+					color: #FFFFFF;
+				}
+				.tag {
+					width: 140rpx;
+					height: 44rpx;
+					border-radius: 44rpx;
+					border: 1px solid #FFFFFF;
+					font-size: 24rpx;
+					color: #FFFFFF;
+					box-sizing: border-box;
+					margin-top: 12rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+				&.current {
+					.tag {
+						background: #FFFFFF;
+						color: #FF3F42;
+					}
+				}
+			}
+		}
+		.product-list {
+			.item {
+				background: #FFFFFF;
+				border-radius: 10rpx;
+				display: flex;
+				padding: 20rpx;
+				margin-bottom: 20rpx;
+				image {
+					display: block;
+					width: 180rpx;
+					height: 180rpx;
+					flex-shrink: 0;
+				}
+				.right {
+					width: 490rpx;
+					box-sizing: border-box;
+					padding-left: 20rpx;
+					.title {
+						font-size: 30rpx;
+						color: #333333;
+						line-height: 36rpx;
+						font-weight: 600;
+					}
+					.des {
+						font-size: 24rpx;
+						line-height: 30rpx;
+						color: #999999;
+						margin-top: 6rpx;
+					}
+					.stock-sales {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin-top: 10rpx;
+						font-size: 24rpx;
+						color: #666666;
+						.stock {
+							display: flex;
+							align-items: center;
+							text {
+								font-size: 24rpx;
+								color: #666666;
+							}
+							.progress-box {
+								width: 140rpx;
+								border-radius: 6px;
+								overflow: hidden;
+								margin-left: 10rpx;
+							}
+						}
+					}
+					.bottom {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin-top: 10rpx;
+						.price {
+							display: flex;
+							flex-direction: column;
+						}
+						.price-1 {
+							font-size: 32rpx;
+							color: #FF3F42;
+							line-height: 36rpx;
+						}
+						.price-2 {
+							font-size: 26rpx;
+							color: #666666;
+							line-height: 30rpx;
+							text-decoration: line-through;
+						}
+						.btn {
+							width: 110rpx;
+							height: 44rpx;
+							background: #FF3F42;
+							border-radius: 5rpx;
+							font-size: 28rpx;
+							color: #FFFFFF;
+							text-align: center;
+							line-height: 44rpx;
+						}
+						.btn2 {
+							width: 110rpx;
+							height: 44rpx;
+							background: #AAAAAA;
+							border-radius: 5rpx;
+							font-size: 28rpx;
+							color: #FFFFFF;
+							text-align: center;
+							line-height: 44rpx;
+						}
+					}
+				}
+			}
+		}
+		.loadmore {
+			background: #FFFFFF;
+			border-radius: 10rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 88rpx;
+		}
+	}
+	.recom-container {
+		margin-top: 30rpx;
+		.top {
+			background: #FFFFFF;
+			padding: 30rpx 0 0;
+			.title {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-bottom: 10rpx;
+				image {
+					width: 300rpx;
+					height: 40rpx;
+					display: block;
+				}
+			}
+			.tab {
+				display: flex;
+				margin-left: -10rpx;
+				.item {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					flex-shrink: 0;
+					font-size: 28rpx;
+					color: #666666;
+					height: 80rpx;
+					line-height: 80rpx;
+					position: relative;
+					padding: 0 30rpx;
+					&.current {
+						color: #FF3F42;
+						font-weight: 600;
+						&::after {
+							content: '';
+							display: block;
+							width: 50rpx;
+							height: 6rpx;
+							background: #FF3F42;
+							position: absolute;
+							bottom: 0;
+							left: 50%;
+							margin-left: -25rpx;
+						}
+					}
+				}
+			}
+		}
+		.list {
+			display: flex;
+			flex-wrap: wrap;
+			padding: 20rpx;
+			.item {
+				width: 348rpx;
+				background: #FFFFFF;
+				margin-right: 14rpx;
+				margin-bottom: 20rpx;
+				border-radius: 20rpx;
+				overflow: hidden;
+				&:nth-child(2n) {
+					margin-right: 0;
+				}
+				.image {
+					width: 348rpx;
+					height: 348rpx;
+					flex-shrink: 0;
+					position: relative;
+					.img {
+						width: 348rpx;
+						height: 348rpx;
+						display: block;
+					}
+					.water {
+						width: 348rpx;
+						height: 348rpx;
+						display: block;
+						position: absolute;
+						left: 0;
+						top: 0;
+						z-index: 1;
+					}
+				}
+				.content {
+					padding: 15rpx 20rpx;
+					.title {
+						font-size: 30rpx;
+						color: #333333;
+						line-height: 36rpx;
+						font-weight: 600;
+						height: 72rpx;
+					}
+					.bottom {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin-top: 10rpx;
+						.price {
+							display: flex;
+							flex-direction: column;
+						}
+						.price-1 {
+							font-size: 32rpx;
+							color: #FF3F42;
+							line-height: 36rpx;
+						}
+						.price-2 {
+							font-size: 26rpx;
+							color: #666666;
+							line-height: 30rpx;
+							text-decoration: line-through;
+						}
+						.btn {
+							width: 60rpx;
+							height: 60rpx;
+							background: #FE781F;
+							border-radius: 50%;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							image {
+								width: 41rpx;
+								height: 36rpx;
+								display: block;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
+<style>
+	::-webkit-scrollbar {
+		display: none;
+		width: 0 !important;
+		height: 0 !important;
+		-webkit-appearance: none;
+		background: transparent;
+		color: transparent;
+	}
+</style>

pages/index/components/home-page-b.vue

@@ -0,0 +1,1666 @@
+<template>
+	<view class="home-container">
+		
+		<block v-show="isLoaded">
+			<custom :bgColor="'bg-them'" :backColor="'#FFFFFF'" :isBack="false" v-show="scrollTop > 100">
+				<text slot="content" style="color: #FFFFFF; font-size: 36rpx;">{{configInfo.minAppName}}</text>
+			</custom>
+			
+			<view class="top-container">
+				<image src="@/static/home/top_bg_2.png" mode="widthFix" class="bg"></image>
+				
+				<view class="content">
+					<view class="title" :style="cuStyle">{{configInfo.minAppName}}</view>
+					
+					<view class="search">
+						<image src="/static/icon/search.png" class=""></image>
+						<input type="text" confirm-type="search" placeholder="搜索商品名称或型号" v-model="keyword" @confirm="searchSubmit">
+					</view>
+				</view>
+			</view>
+			
+			<view class="swiper-container" v-if="isShow_banner && bannerList.length > 0">
+				<swiper @change="changeBanner" :autoplay="true">
+					<block v-for="(item, index) in bannerList" :key='index'>
+						<swiper-item>
+							<image :src="item.imgSrc" mode="aspectFill" @tap="toMiniProgram(item.appId, item.linkUrl)" v-if="item.type === 2"></image>
+							<image :src="item.imgSrc" mode="aspectFill" @tap="toActivityList(item.goodsId)" v-if="item.type === 3"></image>
+							<image :src="item.imgSrc" mode="aspectFill" @tap="toGoodsDetail(item.goodsId)" v-else></image>
+						</swiper-item>
+					</block>
+				</swiper>
+				<view class="dots-conatiner">
+					<view class="con" :style="'width:'+(bannerList.length * 20)+'rpx;'" >
+						<view class="dot" :style=" 'transform:translateX('+ (bannerCurrent * 100) +'%)' "  ></view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="bigActivity-container" v-if="isShow_activity1 && bigActivityImgUrl">
+				<image :src="bigActivityImgUrl" mode="widthFix" @tap="toActivityList(3)"></image>
+			</view>
+			
+			<view class="classify-container" v-if="isShow_classify"
+				:class="(!isShow_banner || (isShow_banner && bannerList.length < 1)) 
+					&& (!isShow_activity1 || (isShow_activity1 && !bigActivityImgUrl)) ? 'whiteBg':''">
+				<view class="content">
+					<block v-for="(item, index) in classifyList" :key='index'>
+						<view class="item" @tap="toClassifyLst(item.categoryId)">
+							<image :src="item.imgUrl" mode="aspectFill"></image>
+							<text class="ellipsis">{{item.name}}</text>
+						</view>
+					</block>
+					<view class="item" @tap="toClassifyLst(0)">
+						<image src="@/static/home/class_more2.png" mode="aspectFill"></image>
+						<text>更多分类</text>
+					</view>
+				</view>
+			</view>
+			
+			<view class="other-container" v-if="isShow_activity2 && leftActivityImgUrl && rightActivityImgUrl">
+				<image :src="leftActivityImgUrl" mode="aspectFill" @tap="toActivityList(4)"></image>
+				<image :src="rightActivityImgUrl" mode="aspectFill" @tap="toActivityList(5)"></image>
+			</view>
+			
+			<view class="smallActivity-container" v-if="isShow_special">
+				<view class="content">
+					<view class="title">专场专区</view>
+					<view class="list">
+						<view class="item">
+							<image :src="smallActivity1ImgUrl" mode="aspectFill" @tap="toActivityList(6)"></image>
+						</view>
+						<view class="item">
+							<image :src="smallActivity2ImgUrl" mode="aspectFill" @tap="toActivityList(7)"></image>
+						</view>
+						<view class="item">
+							<image :src="smallActivity3ImgUrl" mode="aspectFill" @tap="toActivityList(8)"></image>
+						</view>
+						<view class="item">
+							<image :src="smallActivity4ImgUrl" mode="aspectFill" @tap="toActivityList(9)"></image>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="coupon-container" v-if="isShow_coupon && couponList.length > 0">
+				<image src="@/static/home/cp_bg1.png" mode="widthFix" class="bg" v-if="couponList.length == 1"></image>
+				<image src="@/static/home/cp_bg2.png" mode="widthFix" class="bg" v-if="couponList.length > 1"></image>
+				
+				<view class="list list1" v-if="couponList.length == 1">
+					<block v-for="(item, index) in couponList" :key='index'>
+						<view class="item" @tap="handleCoupon(item)">
+							<image class="cp" src="@/static/home/coupon_bg1.png"></image>
+							<view class="content">
+								<view class="left">
+									<view class="price">¥{{item.couponValue}}</view>
+									<view class="text" v-if="item.couponType == 'SATISFY'">满{{item.orderAmount}}可用</view>
+								</view>
+								<view class="right">
+									<view class="main">
+										<view class="row1 ellipsis-2">{{item.couponName}}</view>
+										<view class="row2">
+											<view class="date" v-if="item.obtainType == 0 || item.obtainType == 1">
+												<view>领取时间：</view>
+												<view>{{item.obtainStartTime | dateToYYmmdd2}}-{{item.obtainEndTime | dateToYYmmdd2}}</view>
+											</view>
+											<view class="date" v-if="item.obtainType == 2">
+												<view>使用时间：</view>
+												<view>{{item.activeStartTime | dateToYYmmdd2}}-{{item.activeEndTime | dateToYYmmdd2}}</view>
+											</view>
+											<view class="button gary" v-if="item.obtainType == 0">待开始</view>
+											<view class="button red" v-if="item.obtainType == 1">立即领取</view>
+											<view class="button white" v-if="item.obtainType == 2">去使用</view>
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</block>
+				</view>
+				
+				<view class="list list2" v-if="couponList.length == 2">
+					<block v-for="(item, index) in couponList" :key='index'>
+						<view class="item" @tap="handleCoupon(item)">
+							<image class="cp" src="@/static/home/coupon_bg2.png"></image>
+							<view class="content">
+								<view class="top">
+									<view class="price">¥{{item.couponValue}}</view>
+									<view class="text">满{{item.orderAmount}}可用</view>
+								</view>
+								<view class="bottom">
+									<view class="name ellipsis">{{item.couponName}}</view>
+									<view class="date ellipsis" v-if="item.obtainType == 0 || item.obtainType == 1">领取时间：{{item.obtainStartTime | dateToYYmmdd2}}-{{item.obtainEndTime | dateToYYmmdd2}}</view>
+									<view class="date ellipsis" v-if="item.obtainType == 2">使用时间：{{item.activeStartTime | dateToYYmmdd2}}-{{item.activeEndTime | dateToYYmmdd2}}</view>
+									<view class="button gary" v-if="item.obtainType == 0">待开始</view>
+									<view class="button red" v-if="item.obtainType == 1">立即领取</view>
+									<view class="button white" v-if="item.obtainType == 2">去使用</view>
+								</view>
+							</view>
+						</view>
+					</block>
+				</view>
+				
+				<view class="list list3" v-if="couponList.length > 2">
+					<view class="left">
+						<block v-for="(item, index) in couponList" :key='index'>
+							<view class="item" @tap="handleCoupon(item)">
+								<image class="cp" src="@/static/home/coupon_bg3.png"></image>
+								<view class="content">
+									<view class="top">
+										<view class="price">¥{{item.couponValue}}</view>
+										<view class="text">满{{item.orderAmount}}可用</view>
+									</view>
+									<view class="bottom">
+										<view class="name ellipsis">{{item.couponName}}</view>
+										<view class="date ellipsis" v-if="item.obtainType == 0 || item.obtainType == 1">领取时间：{{item.obtainStartTime | dateToYYmmdd2}}-{{item.obtainEndTime | dateToYYmmdd2}}</view>
+										<view class="date ellipsis" v-if="item.obtainType == 2">使用时间：{{item.activeStartTime | dateToYYmmdd2}}-{{item.activeEndTime | dateToYYmmdd2}}</view>
+										<view class="button gary" v-if="item.obtainType == 0">待开始</view>
+										<view class="button red" v-if="item.obtainType == 1">立即领取</view>
+										<view class="button white" v-if="item.obtainType == 2">去使用</view>
+									</view>
+								</view>
+							</view>
+						</block>
+					</view>
+					<view class="right">
+						<view class="text" @tap="toReceiveCoupon">
+							<text>查</text>
+							<text>看</text>
+							<text>更</text>
+							<text>多</text>
+							<image src="@/static/home/cp_more.png"></image>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="myManager-container" v-if="isShow_manager && myManagerDetail && !userInfo.promotionGroupLeader && !userInfo.type === 'SERVICE'">
+				<view class="content">
+					<view class="left">
+						<image :src="myManagerDetail.avatar" mode="aspectFill" v-if="myManagerDetail.avatar.indexOf('http') >= 0"></image>
+						<image :src="imageUrl + myManagerDetail.avatar" mode="aspectFill" v-else></image>
+						<view class="main">
+							<view>客户经理：{{myManagerDetail.workName}}</view>
+							<view>{{myManagerDetail.workPhone}}</view>
+						</view>
+					</view>
+					<view class="right" @tap="callPhone(myManagerDetail.workPhone)">拨打电话</view>
+				</view>
+			</view>
+			
+			<view class="notice-container" v-if="isShow_notice && noticeList.length > 0 && userInfo.type === 'SERVICE'">
+				<view class="content">
+					<view class="left">
+						<image src="@/static/home/notice.png" ></image>
+					</view>
+					<swiper class="swiper" :autoplay="true" :vertical="true" :circular="true" :disable-touch="true">
+						<block v-for="(item,index) in noticeList" :key='index' >
+							<swiper-item @touchmove.stop='stopTouchMove'>
+								<view class="ellipsis">{{item.workUserName}}成功分享商城，获得收益{{item.amount}}元</view>
+							</swiper-item>
+						</block>
+					</swiper>
+				</view>
+			</view>
+			
+			<view class="seckill2-container" v-if="isShow_seckill && seckillTimeList.length > 0">
+				<view class="content">
+					<view class="top">
+						<view class="left">
+							<view class="title">秒杀专区</view>
+							<view class="timeout">
+								<view class="text">{{countdownText}}</view>
+								<view class="time">{{countdownTime}}</view>
+							</view>
+						</view>
+						<view class="right" @tap="toSeckillGoodsList()">更多<image src="@/static/icon/right.png"></image></view>
+					</view>
+					<view class="list">
+						<block v-for="(item, index) in seckillGoodsList" :key='index'>
+							<view class="item" @tap="toSeckillGoodsDetail(item.goodsId)">
+								<image :src="item.imgUrl" mode="aspectFill"></image>
+								<view class="title ellipsis-2">{{item.goodsName}}</view>
+								<view class="price">¥{{item.price | numToFixed}}</view>
+							</view>
+						</block>
+					</view>
+				</view>
+			</view>
+			
+			<view class="recom-container" v-if="isShow_newclassify">
+				<view class="top">
+					<scroll-view
+						:scroll-x="true"
+						:scroll-left="scrollLeft"
+						scroll-with-animation
+						:show-scrollbar="false"
+						class="tabs-view"
+						ref="tabs-view">
+						<view class="tab">
+							<block v-for="(item, index) in tabList" :key='index'>
+								<view class="item" :ref="`tabs-item-${index}`" :class="[`tabs-item-${index}`, item.goodsNewsCategoryId == tabCurrent ? 'current':'']" @tap="changeTab(item.goodsNewsCategoryId)">
+									<view class="name">{{item.mainTitle}}</view>
+									<view class="text">{{item.subTitle}}</view>
+								</view>
+							</block>
+						</view>
+					</scroll-view>
+				</view>
+				<view class="goods-row-list" v-if="recomList.length > 0">
+					<block v-for="(item, index) in recomList" :key='index'>
+						<view class="item" @tap="toGoodsDetail(item.goodsId)">
+							<view class="image">
+								<image :src="item.imgUrl" mode="aspectFill" class="img"></image>
+								<image :src="item.logo" mode="heightFix" class="water" v-if="item.isShowWater"></image>
+							</view>
+							
+							<view class="right">
+								<view>
+									<view class="title ellipsis-2">{{item.goodsName}}</view>
+									<view class="tags" v-if="item.tags1 && item.tags1.length > 0">
+										<view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{it}}</view>
+									</view>
+								</view>
+								<view>
+									<view class="bottom">
+										<view class="price">
+											<view class="price-1">¥{{item.goodsPrice | numToFixed}}</view>
+											<view class="price-2">¥{{item.orgGoodsPrice | numToFixed}}</view>
+										</view>
+										<view class="text">销量：{{item.soldNum}}</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</block>
+				</view>
+				<no-data v-if="!recomList.length" :showText="'暂无商品'"></no-data>
+				<loading-text v-if="recomList.length"  :loading="loading" :noMore="noMore" ></loading-text>
+			</view>
+			
+			<view class="dialog-container" v-if="isShow_dialog && dialogImgUrl && isShowDialog">
+				<uni-transition ref="dialog" mode-class="zoom-in" :duration="500" :show="isShow_dialog && dialogImgUrl && isShowDialog">
+					<image class="image" :src="dialogImgUrl" mode="widthFix" @tap="toActivityList(2)"></image>
+				</uni-transition>
+				<uni-transition ref="dialogBtn" mode-class="fade" :duration="500" :show="isShow_dialog && dialogImgUrl && isShowDialog">
+					<image class="close" src="@/static/icon/close4.png" @tap="closeDialog()"></image>
+				</uni-transition>
+			</view>
+			
+			<view class="dialog-container" v-if="couponDialogImgUrl && isShowCouponDialog">
+				<uni-transition ref="dialog2" mode-class="zoom-in" :duration="500" :show="couponDialogImgUrl && isShowCouponDialog">
+					<image class="image" :src="couponDialogImgUrl" mode="widthFix"></image>
+				</uni-transition>
+				<uni-transition ref="dialogBtn2" mode-class="fade" :duration="500" :show="couponDialogImgUrl && isShowCouponDialog">
+					<image class="close" src="@/static/icon/close4.png" @tap="closeDialog2()"></image>
+				</uni-transition>
+			</view>
+			
+			<modal-dialog showTitle="提示" showText="优惠券领取成功，请及时使用!" :isShowDialog="isShowCouponSuccessDialog" @cancel="isShowCouponSuccessDialog = false" :isShowConfirm="false"></modal-dialog>
+		</block>
+	</view>
+</template>
+
+<script>
+	import {mapState} from 'vuex';
+	
+	export default {
+		props:{
+			homePage: {
+				type: Number,
+				default: 0
+			},
+			templateInfo: {
+				type: Object,
+				default: {}
+			}
+		},
+		data() {
+			return {
+				thisHomePage: 2, // 当前首页页面模版
+				
+				imageUrl: this.$imageUrl,
+				configInfo: uni.getStorageSync('configInfo'),
+				isShow_dialog: false,
+				isShow_banner: false,
+				isShow_activity1: false,
+				isShow_classify: false,
+				isShow_activity2: false,
+				isShow_special: false,
+				isShow_seckill: false,
+				isShow_coupon: false,
+				isShow_manager: false,
+				isShow_notice: false,
+				isShow_newclassify: false,
+				
+				scrollTop: 0, // 滚动高度（用于控制自定义导航）
+				keyword: '', // 搜索关键词
+				classifyList: [], // 分类列表
+				bannerList: [], // 轮播图列表
+				bannerCurrent: 0, // 轮播图当前值
+				dialogImgUrl: '',
+				bigActivityImgUrl: '',
+				leftActivityImgUrl: '',
+				rightActivityImgUrl: '',
+				smallActivity1ImgUrl: '',
+				smallActivity2ImgUrl: '',
+				smallActivity3ImgUrl: '',
+				smallActivity4ImgUrl: '',
+				noticeList: [],
+				couponList: [], // 可领取优惠券列表
+				myManagerDetail: null, // 我的客户经理信息
+				seckillTimeList: [], // 秒杀时间段列表
+				seckillGoodsList: [], // 秒杀商品列表
+				seckillGoodsPage: 1, // 秒杀商品分页
+				seckillGoodsNoMore: false, // 
+				countdownText: '', // 倒计时文字
+				countdownTime: '', // 倒计时时间
+				endDatetime: '', // 倒计时结束时间
+				nowDate: null, // 当前时间
+				dateInterval: null, // 时间定时器
+				tabList: [], // 好物推荐分类列表
+				tabCurrent: 1, // 好物推荐分类当前值
+				pageNum: 1,
+				pageSize: 8,
+				recomList: [], // 好物推荐列表
+				noMore: false,
+				loading: false,
+				
+				isLoaded_banner: false,
+				isLoaded_coupon: false,
+				isLoaded_seckill: false,
+				isLoaded_classify: false,
+				isLoaded_manager: false,
+				isLoaded_classfly: false,
+				isLoaded_newclassify: false,
+				
+				scrollLeft: 50,
+				scrollViewWidth: 0,
+				tabsRect: {
+					left: 0
+				},
+				
+				isShowDialog: true,
+				
+				couponDialogImgUrl: '',
+				isShowCouponDialog: true,
+				isShowCouponSuccessDialog: false,
+			}
+		},
+		computed:{
+			cuStyle(){
+				return `height:${this.CustomBar-this.StatusBar}px; padding-top:${this.StatusBar}px;`
+			},
+			...mapState(['userInfo', 'isLogin', 'userId']),
+			isLoaded() {
+				uni.hideLoading();
+				return (!this.isShow_banner || (this.isShow_banner && this.isLoaded_banner))
+					&& (!this.isShow_coupon || (this.isShow_coupon && this.isLoaded_coupon))
+					&& (!this.isShow_seckill || (this.isShow_seckill && this.isLoaded_seckill))
+					&& (!this.isShow_classify || (this.isShow_classify && this.isLoaded_classify))
+					&& (!this.isShow_manager || (this.isShow_manager && this.isLoaded_manager))
+					&& (!this.isShow_newclassify || (this.isShow_newclassify && this.isLoaded_newclassify))
+			}
+		},
+		watch: {
+			nowDate() {
+				let hh = this.nowDate.getHours(),
+					mm = this.nowDate.getMinutes(),
+					ss = this.nowDate.getSeconds();
+				let hs = [10, 12, 15, 18, 20];
+				if(mm == 0 && ss == 0 && hs.indexOf(hh) >= 0) {
+					setTimeout(() => {
+						this.getSeckillTimeList();
+					}, 1000)
+				}
+			},
+			tabList() {
+				this.$nextTick(() => {
+					this.resize()
+				})
+			},
+			templateInfo: {
+				handler(newValue, oldValue) {
+					const templateInfo = this.templateInfo;
+					this.isShow_dialog = templateInfo.popupStatus;
+					this.isShow_banner = templateInfo.carouseStatus;
+					this.isShow_activity1 = templateInfo.active1Status;
+					this.isShow_classify = templateInfo.categoryStatus;
+					this.isShow_activity2 = templateInfo.active2Status;
+					this.isShow_special = templateInfo.onlyStatus;
+					this.isShow_seckill = templateInfo.killStatus;
+					this.isShow_coupon = templateInfo.couponStatus;
+					this.isShow_manager = templateInfo.customerStatus;
+					this.isShow_notice = templateInfo.notiveStatus;
+					this.isShow_newclassify = templateInfo.newsStatus;
+					
+					this.dialogImgUrl = templateInfo.popupImage;
+					this.bigActivityImgUrl = templateInfo.active1Image;
+					this.leftActivityImgUrl = templateInfo.active2LeftImage;
+					this.rightActivityImgUrl = templateInfo.active2RightImage;
+					this.smallActivity1ImgUrl = templateInfo.only1Image;
+					this.smallActivity2ImgUrl = templateInfo.only2Image;
+					this.smallActivity3ImgUrl = templateInfo.only3Image;
+					this.smallActivity4ImgUrl = templateInfo.only4Image;
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		mounted() {
+			uni.$on('onPageScroll', (data) => {
+				this.scrollTop = data;
+			});
+			
+			uni.$on('onPullDownRefresh', (data) => {
+				this.keyword = '';
+				this.getTabList();
+				this.getBannerList();
+				this.getCouponList();
+				this.getMyManager();
+				this.getNoticeList();
+				this.getSeckillTimeList();
+				this.getClassflyList();
+			});
+			
+			uni.$on('onReachBottom', (data) => {
+				this.getRecomList(1);
+			});
+			
+			uni.$on('onShow', (data) => {
+				console.log('onShow page ' + this.thisHomePage);
+				this.keyword = '';
+				this.getTabList();
+				this.getBannerList();
+				this.getCouponList();
+				this.getMyManager();
+				this.getNoticeList();
+				this.getSeckillTimeList();
+				if(this.tabList.length < 1) {
+					this.getClassflyList();
+				}
+				
+				this.dateInterval = setInterval(() => {
+				   this.nowDate = new Date();
+				}, 1000)
+			});
+			
+			uni.$on('onHide', (data) => {
+				if(this.homePage !== this.thisHomePage) return false;
+				
+				clearInterval(this.dateInterval);
+			})
+			
+		},
+		methods: {
+			// 搜索商品
+			searchSubmit() {
+				uni.navigateTo({
+					url: '/packageGoods/pages/search?keyword=' + this.keyword
+				})
+			},
+			
+			// 获取一级菜单
+			getTabList() {
+				this.$axios({
+					url: '/goods/category/list',
+					method: 'get',
+					params: {}
+				}).then(res => {
+					this.classifyList = res.data.slice(0, 9);
+					
+					uni.stopPullDownRefresh();
+				}).finally(res => {
+					this.isLoaded_classify = true;
+				})
+			},
+			
+			// 去分类列表
+			toClassifyLst(categoryId) {
+				uni.setStorageSync('categoryId', categoryId);
+				uni.switchTab({
+					url:'/pages/goods/classify'
+				})
+			},
+			
+			// 获取轮播图列表
+			getBannerList() {
+				this.$axios({
+					url: '/common/list/page',
+					method: 'get',
+					params: {
+						pageNum: 1,
+						pageSize: 10,
+						state: true
+					}
+				}).then(res => {
+					this.bannerList = res.data.records;
+				}).finally(res => {
+					this.isLoaded_banner = true;
+					uni.stopPullDownRefresh();
+				})
+			},
+			
+			// 切换广告图
+			changeBanner(e) {
+				this.bannerCurrent = e.detail.current;
+			},
+			
+			stopTouchMove() {
+				return true;
+			},
+			
+			// 获取可领优惠券列表
+			getCouponList() {
+				this.$axios({
+					url: '/coupon/list/all',
+					method: 'get',
+					params: {
+						userId: this.userId
+					}
+				}).then(res => {
+					this.couponList = res.data;
+					let couponList = res.data.filter(item => {
+						return item.obtainType === 1;
+					});
+					if(couponList && couponList.length > 0) {
+						this.couponDialogImgUrl = couponList[0].imgSrc;
+						this.isShow_coupon = true;
+					}
+				}).finally(res => {
+					this.isLoaded_coupon = true;
+				})
+			},
+			
+			// 处理优惠券
+			handleCoupon(item) {
+				if(item.obtainType == 0) {
+					return this.$toast('该优惠券不可领取');
+				}else if(item.obtainType == 1) {
+					this.$axios({
+						url: '/coupon/obtain',
+						method: 'get',
+						params: {
+							userId: this.userId,
+							couponId: item.couponId
+						}
+					}).then(res => {
+						this.$successToast('领取成功');
+						this.getCouponList();
+					})
+				}else if(item.obtainType == 2) {
+					uni.switchTab({
+					    url: '/pages/goods/classify'
+					});
+				}
+			},
+			
+			// 去可领取优惠券
+			toReceiveCoupon() {
+				uni.navigateTo({
+					url:'/pages/index/coupon'
+				})
+			},
+			
+			// 获取我的客户经理
+			getMyManager() {
+				this.$axios({
+					url: '/user/parent',
+					method: 'get',
+					params: {
+						userId: this.userId
+					}
+				}).then(res => {
+					if(res.data) {
+						this.myManagerDetail = res.data;
+					}
+				}).finally(res => {
+					this.isLoaded_manager = true;
+				})
+			},
+			
+			// 获取公告列表
+			getNoticeList() {
+				this.$axios({
+					url: '/renovation/settle/list',
+					method: 'get',
+					params: {
+						
+					}
+				}).then(res => {
+					if(res.data) {
+						res.data.forEach(item => {
+							item.workUserName = item.workUserName.slice(0, 1) + '师傅';
+						})
+						this.noticeList = res.data;
+					}
+				})
+			},
+			
+			// 拨打电话
+			callPhone(val) {
+				uni.makePhoneCall({
+				    phoneNumber: val
+				});
+			},
+			
+			findElem(array, attr, val) {
+			    for (var i = 0; i < array.length; i++) {
+			        if (array[i][attr] == val) {
+			            return i; //返回当前索引值
+			        }
+			    }
+			    return -1;
+			},
+			
+			// 计算倒计时
+			countTime() {
+				let endDatetime = this.endDatetime.replace(/\-/g, '/');
+				// console.log(endDatetime)
+			    var nowtime = new Date(),  //获取当前时间
+			        endtime = new Date(endDatetime);  //定义结束时间
+			    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
+					dd = Math.floor(lefttime/(1000*60*60)/24),  //计算天数
+			        hh = Math.floor(lefttime/(1000*60*60)),  //计算小时数
+			        mm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
+			        ss = Math.floor(lefttime/1000%60);  //计算秒数
+				// console.log(new Date(endDatetime))
+				function checkTime(i){
+					if (i<10) {
+						i = "0"+i;
+					}
+					return i;
+				}
+				setTimeout(() => {
+					this.countTime();
+				}, 1000);
+				this.countdownTime = (dd > 0 ? dd + '天 ' : '') + checkTime(hh) + ":" + checkTime(mm) + ":" + checkTime(ss);
+				// console.log(this.countdownTime)
+			},
+			
+			// 获取秒杀时间列表
+			getSeckillTimeList() {
+				this.$axios({
+					url: '/goods/sec/time',
+					method: 'get',
+					params: {}
+				}).then(res => {
+					if(res.data.length < 1) {return false;}
+					this.seckillTimeList = res.data;
+					this.endDatetime = this.seckillTimeList[0].endDatetime;
+					this.countdownText = this.seckillTimeList[0].type == 'jxz' ? '距离结束':'即将开始';
+					this.countTime();
+					this.getSeckillGoodsList();
+				}).finally(res => {
+					this.isLoaded_seckill = true;
+				})
+			},
+			
+			// 获取秒杀商品列表
+			getSeckillGoodsList(loadMore) {
+				if(this.seckillGoodsNoMore && loadMore)return;
+				if(!loadMore) {
+					this.seckillGoodsNoMore = false;
+					this.seckillGoodsPage = 1;
+				}
+				let secKillId = this.seckillTimeList[0].secKillId;
+				this.$axios({
+					url: '/goods/sec/goods/list',
+					method: 'get',
+					params: {
+						pageNum: this.seckillGoodsPage,
+						pageSize: 3,
+						secKillId: secKillId,
+					}
+				}).then(res => {
+					let _list = res.data.records;
+					let pageTotal = res.data.pages;
+					if(this.seckillGoodsPage >= pageTotal){
+						this.seckillGoodsNoMore = true;
+					}
+					if (_list.length) {
+						this.seckillGoodsPage += 1;
+					}
+					if (loadMore) {
+						this.seckillGoodsList = this.seckillGoodsList.concat(_list);
+					} else {
+						this.seckillGoodsList = _list;
+					}
+				})
+			},
+			
+			// 加载更多秒杀商品
+			loadMoreSeckillGoods() {
+				this.getSeckillGoodsList(true);
+			},
+			
+			// 进入秒杀商品详情
+			toSeckillGoodsDetail(id) {
+				if(!id) {
+					return false;
+				}
+				if(this.seckillTimeList[0].type == 'wks') {
+					return this.$toast('活动未开始');
+				}
+				uni.navigateTo({
+					url: '/packageGoods/pages/detail?id=' + id
+				})
+			},
+			
+			// 进入秒杀商品列表
+			toSeckillGoodsList() {
+				uni.navigateTo({
+					url: '/packageGoods/pages/seckill'
+				})
+			},
+			
+			// 获取推荐分类
+			getClassflyList() {
+				this.$axios({
+					url: '/renovation/category/list',
+					method: 'get',
+					params: {
+						pageNo: 1,
+						pageSize: 10
+					}
+				}).then(res => {
+					this.tabList = res.data.records;
+					this.tabCurrent = res.data.records.length > 0 ? res.data.records[0].goodsNewsCategoryId : 0;
+					this.getRecomList();
+					
+					uni.stopPullDownRefresh();
+				}).finally(res => {
+					this.isLoaded_newclassify = true;
+				})
+			},
+			
+			// 切换一级菜单
+			changeTab(current) {
+				this.tabCurrent = current;
+				this.getRecomList();
+				this.resize();
+			},
+			
+			// 获取好物推荐商品列表
+			getRecomList(loadMore) {
+				if(this.noMore && loadMore)return;
+				this.noMore = false
+				if(!loadMore){
+					this.pageNum = 1;
+				}else{
+					this.loading = true;
+				}
+				this.$axios({
+					url: '/renovation/goods/list',
+					method: 'get',
+					params: {
+						pageNo: this.pageNum,
+						pageSize: this.pageSize,
+						type: 1,
+						objId: this.tabCurrent,
+						sort: 1
+					},
+				}).then(res => {
+					res.data.records.forEach(item => {
+						if(item.logo && item.logoStartTime) {
+							item.isShowWater = this.$compareTime(item.logoStartTime, item.logoEndTime);
+						}else {
+							item.isShowWater = false;
+						}
+					})
+					
+					let _list = res.data.records;
+					let pageTotal = res.data.pages;
+					if(this.pageNum >= pageTotal){
+						this.noMore = true;
+					}
+					if (_list.length) {
+						this.pageNum += 1
+					}
+					if (loadMore) {
+						this.recomList = this.recomList.concat(_list);
+						this.loading = false;
+					} else {
+						this.recomList = _list;
+					}
+					
+					uni.stopPullDownRefresh();
+				})
+			},
+			
+			// 进入商品详情
+			toGoodsDetail(id) {
+				if(!id) {
+					return false;
+				}
+				uni.navigateTo({
+					url: '/packageGoods/pages/detail?id=' + id
+				})
+			},
+			
+			// 跳转小程序
+			toMiniProgram(appId, path) {
+				wx.navigateToMiniProgram({
+					appId,
+					path,
+					extraData: {},
+					envVersion: 'release',
+					success(res) {}
+				});
+			},
+			
+			setScrollLeft() {
+				// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
+				const index = this.findElem(this.tabList, 'goodsNewsCategoryId', this.tabCurrent);
+				const tabRect = this.tabList[index]
+				// 累加得到当前item到左边的距离
+				const offsetLeft = this.tabList
+					.slice(0, index)
+					.reduce((total, curr) => {
+						return total + curr.rect.width
+					}, 0)
+				// 此处为屏幕宽度
+				const res = uni.getSystemInfoSync();
+				const windowWidth = res.windowWidth;
+				// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
+				let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect.right) / 2 + this.tabsRect.left / 2
+				
+				// 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
+				scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
+				this.scrollLeft = Math.max(0, scrollLeft)
+			},
+			// 获取所有标签的尺寸
+			resize() {
+				// 如果不存在list，则不处理
+				if(this.tabList.length === 0) {
+					return
+				}
+				Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
+					this.tabsRect = tabsRect
+					this.scrollViewWidth = 0
+					itemRect.map((item, index) => {
+						// 计算scroll-view的宽度，这里
+						this.scrollViewWidth += item.width
+						// 另外计算每一个item的中心点X轴坐标
+						this.tabList[index].rect = item
+					})
+					// 获取了tabs的尺寸之后，设置滑块的位置
+					this.setScrollLeft()
+				})
+			},
+			// 获取导航菜单的尺寸
+			getTabsRect() {
+				return new Promise(resolve => {
+					this.queryRect('tabs-view').then(size => resolve(size))
+				})
+			},
+			// 获取所有标签的尺寸
+			getAllItemRect() {
+				return new Promise(resolve => {
+					const promiseAllArr = this.tabList.map((item, index) => this.queryRect(
+						`tabs-item-${index}`, true))
+					Promise.all(promiseAllArr).then(sizes => resolve(sizes))
+				})
+			},
+			// 获取各个标签的尺寸
+			queryRect(el, item) {
+				const query = uni.createSelectorQuery().in(this);
+				return new Promise(resolve => {
+					query.select(`.${el}`).boundingClientRect(data => {
+						resolve(data)
+					}).exec();
+				})
+			},
+			
+			// 关闭弹窗
+			closeDialog() {
+				this.$refs.dialog.step({
+					scale: 0
+				}, {
+					duration: 400
+				})
+				this.$refs.dialog.run(()=>{
+					this.isShowDialog = false;
+				})
+				this.$refs.dialogBtn.step({
+					scale: 0
+				}, {
+					duration: 400
+				})
+				this.$refs.dialogBtn.run(()=>{
+					this.isShowDialog = false;
+				})
+			},
+			
+			// 进入活动列表
+			toActivityList(type) {
+				if(type == 2) {
+					this.closeDialog();
+				}
+				uni.navigateTo({
+					url: '/packageGoods/pages/activity?type=' + type
+				})
+			},
+			
+			// 关闭弹窗
+			closeDialog2() {
+				this.$refs.dialog2.step({
+					scale: 0
+				}, {
+					duration: 400
+				})
+				this.$refs.dialog2.run(()=>{
+					this.isShowCouponDialog = false;
+				})
+				this.$refs.dialogBtn2.step({
+					scale: 0
+				}, {
+					duration: 400
+				})
+				this.$refs.dialogBtn2.run(()=>{
+					this.isShowCouponDialog = false;
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.top-container {
+		position: relative;
+		margin-bottom: 40rpx;
+		.bg {
+			display: block;
+			width: 750rpx;
+			position: absolute;
+			top: 0;
+			z-index: 0;
+		}
+		.content {
+			width: 710rpx;
+			padding: 0 20rpx;
+			position: relative;
+			z-index: 1;
+		}
+		.title {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #FFFFFF;
+			font-size: 36rpx;
+		}
+		.search {
+			background: #FFFFFF;
+			height: 64rpx;
+			display: flex;
+			align-items: center;
+			border-radius: 64rpx;
+			padding: 0 20rpx;
+			margin-top: 20rpx;
+			image {
+				width: 28rpx;
+				height: 28rpx;
+			}
+			input {
+				width: 100%;
+				padding-left: 15rpx;
+			}
+		}
+	}
+	.classify-container {
+		margin-top: 20rpx;
+		position: relative;
+		z-index: 1;
+		padding: 0 20rpx;
+		&.whiteBg {
+			.content {
+				background: #ffffff;
+				text {
+					color: #666666;
+				}
+			}
+		}
+		.content {
+			border-radius: 20rpx;
+			padding-top: 30rpx;
+			display: flex;
+			flex-wrap: wrap;
+			.item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				width: 142rpx;
+				margin-bottom: 30rpx;
+				image {
+					width: 78rpx;
+					height: 78rpx;
+					display: block;
+					border-radius: 30rpx;
+					overflow: hidden;
+				}
+				text {
+					font-size: 24rpx;
+					color: #333333;
+					margin-top: 10rpx;
+					width: 150rpx;
+					text-align: center;
+				}
+			}
+		}
+	}
+	.swiper-container {
+		position: relative;
+		margin-top: 20rpx;
+		swiper {
+			height: 350rpx;
+		}
+		image {
+			height: 350rpx;
+			width: 710rpx;
+			display: block;
+			margin: 0 auto 0;
+			border-radius: 15rpx;
+			overflow: hidden;
+		}
+		.dots-conatiner {
+			position: absolute;
+			width: 100%;
+			bottom: 40rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			.con {
+				border-radius: 4rpx;
+				overflow: hidden;
+				height: 4rpx;
+				background-color: rgba($color: #FFFFFF, $alpha: 0.3);
+			}
+			.dot {
+				width: 20rpx;
+				height: 4rpx;
+				background-color: #FFFFFF;
+				transition: all .3s;
+			}
+		}
+	}
+	.bigActivity-container {
+		position: relative;
+		z-index: 9;
+		margin-top: 40rpx;
+		padding: 0 20rpx;
+		image {
+			width: 710rpx;
+			display: block;
+		}
+	}
+	.other-container {
+		display: flex;
+		padding: 0 20rpx;
+		margin-top: 20rpx;
+		justify-content: space-between;
+		image {
+			display: block;
+			width: 350rpx;
+			height: 240rpx;
+			border-radius: 20rpx;
+		}
+	}
+	.smallActivity-container {
+		margin-top: 20rpx;
+		padding: 0 20rpx;
+		.content {
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			.title {
+				font-size: 32rpx;
+				color: #333333;
+				line-height: 74rpx;
+				padding-left: 20rpx;
+				font-weight: 600;
+			}
+			.list {
+				display: flex;
+				flex-wrap: wrap;
+				padding: 0 20rpx;
+				.item {
+					width: 320rpx;
+					margin-right: 30rpx;
+					margin-bottom: 20rpx;
+					&:nth-child(2n) {
+						margin-right: 0;
+					}
+					image {
+						width: 320rpx;
+						height: 200rpx;
+						display: block;
+						border-radius: 20rpx;
+					}
+				}
+			}
+		}
+	}
+	.notice-container {
+		padding: 0 20rpx;
+		margin-top: 20rpx;
+		.content {
+			display: flex;
+			align-items: center;
+			height: 100rpx;
+			background: #FFFFFF;
+			border-radius: 20rpx;
+		}
+		.left{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 96rpx;
+			height: 48rpx;
+			margin-right: 20rpx;
+			border-right: 2rpx solid #E5E5E5;
+			image {
+				width: 60rpx;
+				height: 30rpx;
+				display: block;
+			}
+		}
+		.swiper{
+			height: 100rpx;
+			flex: 1;
+			padding-right: 20rpx;
+			::v-deep swiper-item {
+				display: block;
+				height: 100rpx;
+				width: 100%;
+				line-height: 100rpx;
+			}
+		}
+	}
+	.coupon-container {
+		position: relative;
+		margin-top: 20rpx;
+		padding: 0 20rpx;
+		.bg {
+			display: block;
+			width: 100%;
+		}
+		.list {
+			position: absolute;
+			top: 80rpx;
+			z-index: 1;
+		}
+		.list1 {
+			.item {
+				position: relative;
+				margin-bottom: 20rpx;
+				margin-left: 16rpx;
+				.cp {
+					width: 688rpx;
+					height: 178rpx;
+					display: block;
+				}
+				.content {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 710rpx;
+					height: 160rpx;
+					display: flex;
+					align-items: center;
+					.left {
+						width: 210rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-direction: column;
+						.price {
+							font-size: 48rpx;
+							color: #FFFFFF;
+						}
+						.text {
+							color: #FFFFFF;
+							font-size: 28rpx;
+						}
+					}
+					.right {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						padding: 0 20rpx;
+						width: 470rpx;
+						height: 150rpx;
+						box-sizing: border-box;
+						.main {
+							width: 430rpx;
+							height: 150rpx;
+							padding: 16rpx 0 8rpx;
+							box-sizing: border-box;
+							display: flex;
+							flex-direction: column;
+							justify-content: space-between;
+							.row1 {
+								font-size: 28rpx;
+								line-height: 32rpx;
+								height: 64rpx;
+							}
+							.row2 {
+								font-size: 24rpx;
+								line-height: 28rpx;
+								color: #999999;
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+							}
+						}
+					}
+				}
+			}
+		}
+		.list2 {
+			display: flex;
+			.item {
+				position: relative;
+				margin-bottom: 20rpx;
+				&:first-child {
+					margin-left: 16rpx;
+				}
+				.cp {
+					width: 342rpx;
+					height: 308rpx;
+					display: block;
+				}
+				.content {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 342rpx;
+					height: 328rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					.top {
+						width: 324rpx;
+						height: 130rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-direction: column;
+						.price {
+							font-size: 48rpx;
+							color: #FFFFFF;
+							line-height: 48rpx;
+							margin-top: 16rpx;
+						}
+						.text {
+							color: #FFFFFF;
+							font-size: 28rpx;
+							line-height: 28rpx;
+							margin-top: 10rpx;
+						}
+					}
+					.bottom {
+						width: 324rpx;
+						height: 160rpx;
+						padding: 16rpx;
+						box-sizing: border-box;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						align-items: center;
+						.name {
+							font-size: 28rpx;
+							text-align: left;
+							line-height: 32rpx;
+							width: 100%;
+						}
+						.date {
+							font-size: 24rpx;
+							color: #999999;
+							text-align: left;
+							width: 100%;
+							line-height: 28rpx;
+						}
+					}
+				}
+			}
+		}
+		.list3 {
+			display: flex;
+			align-items: center;
+			.left {
+				display: flex;
+				width: 630rpx;
+				overflow-x: scroll;
+			}
+			.right {
+				width: 80rpx;
+				display: flex;
+				justify-content: center;
+				.text {
+					width: 48rpx;
+					height: 200rpx;
+					border-radius: 48rpx;
+					background: #FFFFFF;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					text {
+						font-size: 28rpx;
+						color: #FF3F42;
+						line-height: 32rpx;
+					}
+					image {
+						width: 32rpx;
+						height: 32rpx;
+						display: block;
+						flex-shrink: 0;
+						margin-top: 10rpx;
+					}
+				}
+			}
+			.item {
+				position: relative;
+				margin-bottom: 20rpx;
+				&:first-child {
+					margin-left: 16rpx;
+				}
+				.cp {
+					width: 278rpx;
+					height: 308rpx;
+					display: block;
+				}
+				.content {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 278rpx;
+					height: 328rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					.top {
+						width: 260rpx;
+						height: 130rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-direction: column;
+						.price {
+							font-size: 48rpx;
+							color: #FFFFFF;
+							line-height: 48rpx;
+							margin-top: 16rpx;
+						}
+						.text {
+							color: #FFFFFF;
+							font-size: 28rpx;
+							line-height: 28rpx;
+							margin-top: 10rpx;
+						}
+					}
+					.bottom {
+						width: 260rpx;
+						height: 160rpx;
+						padding: 16rpx;
+						box-sizing: border-box;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						align-items: center;
+						.name {
+							font-size: 28rpx;
+							text-align: left;
+							line-height: 32rpx;
+							width: 100%;
+						}
+						.date {
+							font-size: 24rpx;
+							color: #999999;
+							text-align: left;
+							width: 100%;
+							line-height: 28rpx;
+						}
+					}
+				}
+			}
+		}
+		.button {
+			width: 120rpx;
+			height: 40rpx;
+			border-radius: 40rpx;
+			font-size: 24rpx;
+			flex-shrink: 0;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			&.gary {
+				background: #AAAAAA;
+				color: #FFFFFF;
+				border: 1px solid #AAAAAA;
+			}
+			&.red {
+				background: #C434FF;
+				color: #FFFFFF;
+				border: 1px solid #C434FF;
+			}
+			&.white {
+				color: #FF3F42;
+				border: 1px solid #FF3F42;
+			}
+		}
+	}
+	.myManager-container {
+		padding: 0 20rpx;
+		.content {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			padding: 20rpx;
+			.left {
+				display: flex;
+				align-items: center;
+				image {
+					width: 100rpx;
+					height: 100rpx;
+					border-radius: 50%;
+				}
+				.main {
+					font-size: 28rpx;
+					line-height: 48rpx;
+					margin-left: 20rpx;
+				}
+			}
+			.right {
+				width: 160rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				border-radius: 60rpx;
+				text-align: center;
+				font-size: 28rpx;
+				color: #E43B38;
+				border: 1px solid #E43B38;
+			}
+		}
+	}
+	.seckill2-container {
+		padding: 0 20rpx;
+		margin-top: 20rpx;
+		.content {
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			padding: 0 20rpx;
+			.top {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				height: 86rpx;
+				.left {
+					display: flex;
+					align-items: center;
+					.title {
+						font-size: 32rpx;
+						color: #333333;
+						line-height: 74rpx;
+						font-weight: 600;
+					}
+					.timeout {
+						display: flex;
+						align-items: center;
+						margin-left: 20rpx;
+						border-radius: 40rpx;
+						height: 40rpx;
+						overflow: hidden;
+						.text {
+							font-size: 24rpx;
+							color: #FFFFFF;
+							width: 120rpx;
+							text-align: center;
+							background: #FF3F42;
+							border-radius: 40rpx;
+							position: relative;
+							z-index: 1;
+						}
+						.time {
+							padding: 0 20rpx 0 32rpx;
+							background: #FFD3B5;
+							font-size: 24rpx;
+							color: #FF3F42;
+							margin-left: -20rpx;
+							position: relative;
+							z-index: 0;
+						}
+					}
+				}
+				.right {
+					display: flex;
+					align-items: center;
+					font-size: 28rpx;
+					color: #999999;
+					image {
+						width: 12rpx;
+						height: 26rpx;
+						display: block;
+						margin-left: 8rpx;
+					}
+				}
+			}
+			.list {
+				display: flex;
+				.item {
+					width: 210rpx;
+					margin-right: 20rpx;
+					padding-bottom: 20rpx;
+					&:last-child {
+						margin-right: 0;
+					}
+					image {
+						width: 210rpx;
+						height: 210rpx;
+						display: block;
+					}
+					.title {
+						font-size: 28rpx;
+						color: #333333;
+						line-height: 36rpx;
+						font-weight: 600;
+						margin-top: 6rpx;
+					}
+					.price {
+						font-size: 32rpx;
+						color: #FF3F42;
+						line-height: 36rpx;
+						margin-top: 6rpx;
+					}
+				}
+			}
+		}
+	}
+	.recom-container {
+		margin-top: 20rpx;
+		.top {
+			.tab {
+				display: flex;
+				.item {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					flex-shrink: 0;
+					width: 187.5rpx;
+					font-size: 28rpx;
+					color: #666666;
+					position: relative;
+					height: 130rpx;
+					.name {
+						font-size: 36rpx;
+						color: #333333;
+					}
+					.text {
+						font-size: 24rpx;
+						color: #666666;
+						margin-top: 8rpx;
+					}
+					&.current {
+						.name {
+							color: #FF3F42;
+							font-weight: 600;
+						}
+						.text {
+							color: #FF3F42;
+						}
+						&::after {
+							content: '';
+							display: block;
+							width: 48rpx;
+							height: 6rpx;
+							background: #FF3F42;
+							position: absolute;
+							bottom: 0;
+							left: 50%;
+							margin-left: -24rpx;
+						}
+					}
+				}
+			}
+		}
+	}
+	.dialog-container {
+		position: fixed;
+		z-index: 1000000;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		background: rgba($color: #000000, $alpha: .6);
+		.image {
+			width: 600rpx;
+			display: block;
+			border-radius: 20rpx;
+			margin-top: 40rpx;
+		}
+		.close {
+			width: 68rpx;
+			height: 68rpx;
+			display: block;
+			margin-top: 40rpx;
+		}
+	}
+	
+</style>
+<style>
+	::-webkit-scrollbar {
+		display: none;
+		width: 0 !important;
+		height: 0 !important;
+		-webkit-appearance: none;
+		background: transparent;
+		color: transparent;
+	}
+</style>

pages/index/components/home-page-c.vue

@@ -0,0 +1,1781 @@
+<template>
+	<view class="home-container">
+		
+		<block v-show="isLoaded">
+			<custom :bgColor="'bg-them'" :backColor="'#FFFFFF'" :isBack="false" v-show="scrollTop > 100">
+				<text slot="content" style="color: #FFFFFF; font-size: 36rpx;">{{configInfo.minAppName}}</text>
+			</custom>
+			
+			<view class="top-container">
+				<image src="@/static/home/top_bg_2.png" mode="widthFix" class="bg"></image>
+				
+				<view class="content">
+					<view class="title" :style="cuStyle">{{configInfo.minAppName}}</view>
+					
+					<view class="search">
+						<image src="/static/icon/search.png" class=""></image>
+						<input type="text" confirm-type="search" placeholder="搜索商品名称或型号" v-model="keyword" @confirm="searchSubmit">
+					</view>
+				</view>
+			</view>
+			
+			<view class="swiper-container" v-if="isShow_banner && bannerList.length > 0">
+				<swiper @change="changeBanner" :autoplay="true">
+					<block v-for="(item, index) in bannerList" :key='index'>
+						<swiper-item>
+							<image :src="item.imgSrc" mode="aspectFill" @tap="toMiniProgram(item.appId, item.linkUrl)" v-if="item.type === 2"></image>
+							<image :src="item.imgSrc" mode="aspectFill" @tap="toActivityList(item.goodsId)" v-if="item.type === 3"></image>
+							<image :src="item.imgSrc" mode="aspectFill" @tap="toGoodsDetail(item.goodsId)" v-else></image>
+						</swiper-item>
+					</block>
+				</swiper>
+				<view class="dots-conatiner">
+					<view class="con" :style="'width:'+(bannerList.length * 20)+'rpx;'" >
+						<view class="dot" :style=" 'transform:translateX('+ (bannerCurrent * 100) +'%)' "  ></view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="bigActivity-container" v-if="isShow_activity1 && bigActivityImgUrl">
+				<image :src="bigActivityImgUrl" mode="widthFix" @tap="toActivityList(3)"></image>
+			</view>
+			
+			<view class="classify-container" v-if="isShow_classify"
+				:class="(!isShow_banner || (isShow_banner && bannerList.length < 1)) 
+					&& (!isShow_activity1 || (isShow_activity1 && !bigActivityImgUrl)) ? 'whiteBg':''">
+				<view class="content">
+					<block v-for="(item, index) in classifyList" :key='index'>
+						<view class="item" @tap="toClassifyLst(item.categoryId)">
+							<image :src="item.imgUrl" mode="aspectFill"></image>
+							<text class="ellipsis">{{item.name}}</text>
+						</view>
+					</block>
+					<view class="item" @tap="toClassifyLst(0)">
+						<image src="@/static/home/class_more2.png" mode="aspectFill"></image>
+						<text>更多分类</text>
+					</view>
+				</view>
+			</view>
+			
+			<view class="smallActivity-container" v-if="isShow_activity2 && leftActivityImgUrl && rightActivityImgUrl">
+				<view class="content">
+					<view class="list">
+						<view class="item">
+							<image :src="leftActivityImgUrl" mode="aspectFill" @tap="toActivityList(4)"></image>
+						</view>
+						<view class="item">
+							<image :src="rightActivityImgUrl" mode="aspectFill" @tap="toActivityList(5)"></image>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="smallActivity-container" v-if="isShow_special">
+				<view class="content">
+					<view class="list">
+						<view class="item">
+							<image :src="smallActivity1ImgUrl" mode="aspectFill" @tap="toActivityList(6)"></image>
+						</view>
+						<view class="item">
+							<image :src="smallActivity2ImgUrl" mode="aspectFill" @tap="toActivityList(7)"></image>
+						</view>
+						<view class="item">
+							<image :src="smallActivity3ImgUrl" mode="aspectFill" @tap="toActivityList(8)"></image>
+						</view>
+						<view class="item">
+							<image :src="smallActivity4ImgUrl" mode="aspectFill" @tap="toActivityList(9)"></image>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="coupon-container" v-if="isShow_coupon && couponList.length > 0">
+				<image src="@/static/home/cp_bg1.png" mode="widthFix" class="bg" v-if="couponList.length == 1"></image>
+				<image src="@/static/home/cp_bg2.png" mode="widthFix" class="bg" v-if="couponList.length > 1"></image>
+				
+				<view class="list list1" v-if="couponList.length == 1">
+					<block v-for="(item, index) in couponList" :key='index'>
+						<view class="item" @tap="handleCoupon(item)">
+							<image class="cp" src="@/static/home/coupon_bg1.png"></image>
+							<view class="content">
+								<view class="left">
+									<view class="price">¥{{item.couponValue}}</view>
+									<view class="text" v-if="item.couponType == 'SATISFY'">满{{item.orderAmount}}可用</view>
+								</view>
+								<view class="right">
+									<view class="main">
+										<view class="row1 ellipsis-2">{{item.couponName}}</view>
+										<view class="row2">
+											<view class="date" v-if="item.obtainType == 0 || item.obtainType == 1">
+												<view>领取时间：</view>
+												<view>{{item.obtainStartTime | dateToYYmmdd2}}-{{item.obtainEndTime | dateToYYmmdd2}}</view>
+											</view>
+											<view class="date" v-if="item.obtainType == 2">
+												<view>使用时间：</view>
+												<view>{{item.activeStartTime | dateToYYmmdd2}}-{{item.activeEndTime | dateToYYmmdd2}}</view>
+											</view>
+											<view class="button gary" v-if="item.obtainType == 0">待开始</view>
+											<view class="button red" v-if="item.obtainType == 1">立即领取</view>
+											<view class="button white" v-if="item.obtainType == 2">去使用</view>
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</block>
+				</view>
+				
+				<view class="list list2" v-if="couponList.length == 2">
+					<block v-for="(item, index) in couponList" :key='index'>
+						<view class="item" @tap="handleCoupon(item)">
+							<image class="cp" src="@/static/home/coupon_bg2.png"></image>
+							<view class="content">
+								<view class="top">
+									<view class="price">¥{{item.couponValue}}</view>
+									<view class="text">满{{item.orderAmount}}可用</view>
+								</view>
+								<view class="bottom">
+									<view class="name ellipsis">{{item.couponName}}</view>
+									<view class="date ellipsis" v-if="item.obtainType == 0 || item.obtainType == 1">领取时间：{{item.obtainStartTime | dateToYYmmdd2}}-{{item.obtainEndTime | dateToYYmmdd2}}</view>
+									<view class="date ellipsis" v-if="item.obtainType == 2">使用时间：{{item.activeStartTime | dateToYYmmdd2}}-{{item.activeEndTime | dateToYYmmdd2}}</view>
+									<view class="button gary" v-if="item.obtainType == 0">待开始</view>
+									<view class="button red" v-if="item.obtainType == 1">立即领取</view>
+									<view class="button white" v-if="item.obtainType == 2">去使用</view>
+								</view>
+							</view>
+						</view>
+					</block>
+				</view>
+				
+				<view class="list list3" v-if="couponList.length > 2">
+					<view class="left">
+						<block v-for="(item, index) in couponList" :key='index'>
+							<view class="item" @tap="handleCoupon(item)">
+								<image class="cp" src="@/static/home/coupon_bg3.png"></image>
+								<view class="content">
+									<view class="top">
+										<view class="price">¥{{item.couponValue}}</view>
+										<view class="text">满{{item.orderAmount}}可用</view>
+									</view>
+									<view class="bottom">
+										<view class="name ellipsis">{{item.couponName}}</view>
+										<view class="date ellipsis" v-if="item.obtainType == 0 || item.obtainType == 1">领取时间：{{item.obtainStartTime | dateToYYmmdd2}}-{{item.obtainEndTime | dateToYYmmdd2}}</view>
+										<view class="date ellipsis" v-if="item.obtainType == 2">使用时间：{{item.activeStartTime | dateToYYmmdd2}}-{{item.activeEndTime | dateToYYmmdd2}}</view>
+										<view class="button gary" v-if="item.obtainType == 0">待开始</view>
+										<view class="button red" v-if="item.obtainType == 1">立即领取</view>
+										<view class="button white" v-if="item.obtainType == 2">去使用</view>
+									</view>
+								</view>
+							</view>
+						</block>
+					</view>
+					<view class="right">
+						<view class="text" @tap="toReceiveCoupon">
+							<text>查</text>
+							<text>看</text>
+							<text>更</text>
+							<text>多</text>
+							<image src="@/static/home/cp_more.png"></image>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="myManager-container" v-if="isShow_manager && myManagerDetail && !userInfo.promotionGroupLeader && !userInfo.type === 'SERVICE'">
+				<view class="content">
+					<view class="left">
+						<image :src="myManagerDetail.avatar" mode="aspectFill" v-if="myManagerDetail.avatar.indexOf('http') >= 0"></image>
+						<image :src="imageUrl + myManagerDetail.avatar" mode="aspectFill" v-else></image>
+						<view class="main">
+							<view>客户经理：{{myManagerDetail.workName}}</view>
+							<view>{{myManagerDetail.workPhone}}</view>
+						</view>
+					</view>
+					<view class="right" @tap="callPhone(myManagerDetail.workPhone)">拨打电话</view>
+				</view>
+			</view>
+			
+			<view class="notice-container" v-if="isShow_notice && noticeList.length > 0 && userInfo.type === 'SERVICE'">
+				<view class="content">
+					<view class="left">
+						<image src="@/static/home/notice.png" ></image>
+					</view>
+					<swiper class="swiper" :autoplay="true" :vertical="true" :circular="true" :disable-touch="true">
+						<block v-for="(item,index) in noticeList" :key='index' >
+							<swiper-item @touchmove.stop='stopTouchMove'>
+								<view class="ellipsis">{{item.workUserName}}成功分享商城，获得收益{{item.amount}}元</view>
+							</swiper-item>
+						</block>
+					</swiper>
+				</view>
+			</view>
+			
+			<view class="seckill2-container" v-if="isShow_seckill && seckillTimeList.length > 0">
+				<view class="content">
+					<view class="top">
+						<view class="left">
+							<view class="title">秒杀专区</view>
+							<view class="timeout">
+								<view class="text">{{countdownText}}</view>
+								<view class="time">{{countdownTime}}</view>
+							</view>
+						</view>
+						<view class="right" @tap="toSeckillGoodsList()">更多<image src="@/static/icon/right.png"></image></view>
+					</view>
+					<view class="list">
+						<block v-for="(item, index) in seckillGoodsList" :key='index'>
+							<view class="item" @tap="toSeckillGoodsDetail(item.goodsId)">
+								<image :src="item.imgUrl" mode="aspectFill"></image>
+								<view class="title ellipsis-2">{{item.goodsName}}</view>
+								<view class="price">¥{{item.price | numToFixed}}</view>
+							</view>
+						</block>
+					</view>
+				</view>
+			</view>
+			
+			<view class="selected-container" v-if="isShow_selected">
+				<view class="content">
+					<view class="title">专题精选</view>
+					<view class="list">
+						<view class="item">
+							<image :src="selected1ImgUrl" mode="aspectFill" @tap="toActivityList(10)"></image>
+							<view class="text1 ellipsis">{{selected1Title1}}</view>
+							<view class="text2 ellipsis">{{selected1Title2}}</view>
+						</view>
+						<view class="item">
+							<image :src="selected2ImgUrl" mode="aspectFill" @tap="toActivityList(11)"></image>
+							<view class="text1 ellipsis">{{selected2Title1}}</view>
+							<view class="text2 ellipsis">{{selected2Title2}}</view>
+						</view>
+						<view class="item">
+							<image :src="selected3ImgUrl" mode="aspectFill" @tap="toActivityList(12)"></image>
+							<view class="text1 ellipsis">{{selected3Title1}}</view>
+							<view class="text2 ellipsis">{{selected3Title2}}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="recom-container" v-if="isShow_newclassify">
+				<view class="top">
+					<scroll-view
+						:scroll-x="true"
+						:scroll-left="scrollLeft"
+						scroll-with-animation
+						:show-scrollbar="false"
+						class="tabs-view"
+						ref="tabs-view">
+						<view class="tab">
+							<block v-for="(item, index) in tabList" :key='index'>
+								<view class="item" :ref="`tabs-item-${index}`" :class="[`tabs-item-${index}`, item.goodsNewsCategoryId == tabCurrent ? 'current':'']" @tap="changeTab(item.goodsNewsCategoryId)">
+									<view class="name">{{item.mainTitle}}</view>
+									<view class="text">{{item.subTitle}}</view>
+								</view>
+							</block>
+						</view>
+					</scroll-view>
+				</view>
+				<view class="goods-row-list" v-if="recomList.length > 0">
+					<block v-for="(item, index) in recomList" :key='index'>
+						<view class="item" @tap="toGoodsDetail(item.goodsId)">
+							<view class="image">
+								<image :src="item.imgUrl" mode="aspectFill" class="img"></image>
+								<image :src="item.logo" mode="heightFix" class="water" v-if="item.isShowWater"></image>
+							</view>
+							
+							<view class="right">
+								<view>
+									<view class="title ellipsis-2">{{item.goodsName}}</view>
+									<view class="tags" v-if="item.tags1 && item.tags1.length > 0">
+										<view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{it}}</view>
+									</view>
+								</view>
+								<view>
+									<view class="bottom">
+										<view class="price">
+											<view class="price-1">¥{{item.goodsPrice | numToFixed}}</view>
+											<view class="price-2">¥{{item.orgGoodsPrice | numToFixed}}</view>
+										</view>
+										<view class="text">销量：{{item.soldNum}}</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</block>
+				</view>
+				<no-data v-if="!recomList.length" :showText="'暂无商品'"></no-data>
+				<loading-text v-if="recomList.length"  :loading="loading" :noMore="noMore" ></loading-text>
+			</view>
+			
+			<view class="dialog-container" v-if="isShow_dialog && dialogImgUrl && isShowDialog">
+				<uni-transition ref="dialog" mode-class="zoom-in" :duration="500" :show="isShow_dialog && dialogImgUrl && isShowDialog">
+					<image class="image" :src="dialogImgUrl" mode="widthFix" @tap="toActivityList(2)"></image>
+				</uni-transition>
+				<uni-transition ref="dialogBtn" mode-class="fade" :duration="500" :show="isShow_dialog && dialogImgUrl && isShowDialog">
+					<image class="close" src="@/static/icon/close4.png" @tap="closeDialog()"></image>
+				</uni-transition>
+			</view>
+			
+			<view class="bottom-container" v-if="isShow_bottom && bottomImgUrl && isShowBottom">
+				<uni-transition ref="bottomBtn" mode-class="fade" :duration="500" :show="isShow_bottom && bottomImgUrl && isShowBottom">
+					<image class="close" src="@/static/icon/close5.png" @tap="closeBottom()"></image>
+				</uni-transition>
+				<uni-transition ref="bottom" mode-class="zoom-in" :duration="500" :show="isShow_bottom && bottomImgUrl && isShowBottom">
+					<image class="image" :src="bottomImgUrl" mode="aspectFill" @tap="toActivityList(13)"></image>
+				</uni-transition>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	import {mapState} from 'vuex';
+	
+	export default {
+		props:{
+			homePage: {
+				type: Number,
+				default: 0
+			},
+			templateInfo: {
+				type: Object,
+				default: {}
+			}
+		},
+		data() {
+			return {
+				thisHomePage: 3, // 当前首页页面模版
+				
+				imageUrl: this.$imageUrl,
+				configInfo: uni.getStorageSync('configInfo'),
+				isShow_dialog: false,
+				isShow_banner: false,
+				isShow_activity1: false,
+				isShow_classify: false,
+				isShow_activity2: false,
+				isShow_special: false,
+				isShow_seckill: false,
+				isShow_coupon: false,
+				isShow_manager: false,
+				isShow_notice: false,
+				isShow_newclassify: false,
+				isShow_selected: false,
+				isShow_bottom: false,
+				
+				scrollTop: 0, // 滚动高度（用于控制自定义导航）
+				keyword: '', // 搜索关键词
+				classifyList: [], // 分类列表
+				bannerList: [], // 轮播图列表
+				bannerCurrent: 0, // 轮播图当前值
+				dialogImgUrl: '',
+				bigActivityImgUrl: '',
+				leftActivityImgUrl: '',
+				rightActivityImgUrl: '',
+				smallActivity1ImgUrl: '',
+				smallActivity2ImgUrl: '',
+				smallActivity3ImgUrl: '',
+				smallActivity4ImgUrl: '',
+				selected1ImgUrl: '',
+				selected2ImgUrl: '',
+				selected3ImgUrl: '',
+				selected1Title1: '',
+				selected2Title1: '',
+				selected3Title1: '',
+				selected1Title2: '',
+				selected2Title2: '',
+				selected3Title2: '',
+				bottomImgUrl: '',
+				noticeList: [],
+				couponList: [], // 可领取优惠券列表
+				myManagerDetail: null, // 我的客户经理信息
+				seckillTimeList: [], // 秒杀时间段列表
+				seckillGoodsList: [], // 秒杀商品列表
+				seckillGoodsPage: 1, // 秒杀商品分页
+				seckillGoodsNoMore: false, // 
+				countdownText: '', // 倒计时文字
+				countdownTime: '', // 倒计时时间
+				endDatetime: '', // 倒计时结束时间
+				nowDate: null, // 当前时间
+				dateInterval: null, // 时间定时器
+				tabList: [], // 好物推荐分类列表
+				tabCurrent: 1, // 好物推荐分类当前值
+				pageNum: 1,
+				pageSize: 8,
+				recomList: [], // 好物推荐列表
+				noMore: false,
+				loading: false,
+				
+				isLoaded_banner: false,
+				isLoaded_coupon: false,
+				isLoaded_seckill: false,
+				isLoaded_classify: false,
+				isLoaded_manager: false,
+				isLoaded_classfly: false,
+				isLoaded_newclassify: false,
+				
+				scrollLeft: 50,
+				scrollViewWidth: 0,
+				tabsRect: {
+					left: 0
+				},
+				
+				isShowDialog: true,
+				isShowBottom: true,
+			}
+		},
+		computed:{
+			cuStyle(){
+				return `height:${this.CustomBar-this.StatusBar}px; padding-top:${this.StatusBar}px;`
+			},
+			...mapState(['userInfo', 'isLogin', 'userId']),
+			isLoaded() {
+				uni.hideLoading();
+				return (!this.isShow_banner || (this.isShow_banner && this.isLoaded_banner))
+					&& (!this.isShow_coupon || (this.isShow_coupon && this.isLoaded_coupon))
+					&& (!this.isShow_seckill || (this.isShow_seckill && this.isLoaded_seckill))
+					&& (!this.isShow_classify || (this.isShow_classify && this.isLoaded_classify))
+					&& (!this.isShow_manager || (this.isShow_manager && this.isLoaded_manager))
+					&& (!this.isShow_newclassify || (this.isShow_newclassify && this.isLoaded_newclassify))
+			}
+		},
+		watch: {
+			nowDate() {
+				let hh = this.nowDate.getHours(),
+					mm = this.nowDate.getMinutes(),
+					ss = this.nowDate.getSeconds();
+				let hs = [10, 12, 15, 18, 20];
+				if(mm == 0 && ss == 0 && hs.indexOf(hh) >= 0) {
+					setTimeout(() => {
+						this.getSeckillTimeList();
+					}, 1000)
+				}
+			},
+			tabList() {
+				this.$nextTick(() => {
+					this.resize()
+				})
+			},
+			templateInfo: {
+				handler(newValue, oldValue) {
+					const templateInfo = this.templateInfo;
+					this.isShow_dialog = templateInfo.popupStatus;
+					this.isShow_banner = templateInfo.carouseStatus;
+					this.isShow_activity1 = templateInfo.active1Status;
+					this.isShow_classify = templateInfo.categoryStatus;
+					this.isShow_activity2 = templateInfo.active2Status;
+					this.isShow_special = templateInfo.onlyStatus;
+					this.isShow_seckill = templateInfo.killStatus;
+					this.isShow_coupon = templateInfo.couponStatus;
+					this.isShow_manager = templateInfo.customerStatus;
+					this.isShow_notice = templateInfo.notiveStatus;
+					this.isShow_newclassify = templateInfo.newsStatus;
+					this.isShow_selected = templateInfo.topicsStatus;
+					this.isShow_bottom = templateInfo.bottomBannerStatus;
+					
+					this.dialogImgUrl = templateInfo.popupImage;
+					this.bigActivityImgUrl = templateInfo.active1Image;
+					this.leftActivityImgUrl = templateInfo.active2LeftImage;
+					this.rightActivityImgUrl = templateInfo.active2RightImage;
+					this.smallActivity1ImgUrl = templateInfo.only1Image;
+					this.smallActivity2ImgUrl = templateInfo.only2Image;
+					this.smallActivity3ImgUrl = templateInfo.only3Image;
+					this.smallActivity4ImgUrl = templateInfo.only4Image;
+					this.selected1ImgUrl = templateInfo.topics1Image;
+					this.selected2ImgUrl = templateInfo.topics2Image;
+					this.selected3ImgUrl = templateInfo.topics3Image;
+					this.selected1Title1 = templateInfo.topics1Title;
+					this.selected1Title2 = templateInfo.topics1Title2;
+					this.selected2Title1 = templateInfo.topics2Title;
+					this.selected2Title2 = templateInfo.topics2Title2;
+					this.selected3Title1 = templateInfo.topics3Title;
+					this.selected3Title2 = templateInfo.topics3Title2;
+					this.bottomImgUrl = templateInfo.bottomBannerImage;
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		mounted() {
+			uni.$on('onPageScroll', (data) => {
+				this.scrollTop = data;
+			});
+			
+			uni.$on('onPullDownRefresh', (data) => {
+				this.keyword = '';
+				this.getTabList();
+				this.getBannerList();
+				this.getCouponList();
+				this.getMyManager();
+				this.getNoticeList();
+				this.getSeckillTimeList();
+				this.getClassflyList();
+			});
+			
+			uni.$on('onReachBottom', (data) => {
+				this.getRecomList(1);
+			});
+			
+			uni.$on('onShow', (data) => {
+				console.log('onShow page ' + this.thisHomePage);
+				this.keyword = '';
+				this.getTabList();
+				this.getBannerList();
+				this.getCouponList();
+				this.getMyManager();
+				this.getNoticeList();
+				this.getSeckillTimeList();
+				if(this.tabList.length < 1) {
+					this.getClassflyList();
+				}
+				
+				this.dateInterval = setInterval(() => {
+				   this.nowDate = new Date();
+				}, 1000)
+			});
+			
+			uni.$on('onHide', (data) => {
+				if(this.homePage !== this.thisHomePage) return false;
+				
+				clearInterval(this.dateInterval);
+			})
+			
+		},
+		methods: {
+			// 搜索商品
+			searchSubmit() {
+				uni.navigateTo({
+					url: '/packageGoods/pages/search?keyword=' + this.keyword
+				})
+			},
+			
+			// 获取一级菜单
+			getTabList() {
+				this.$axios({
+					url: '/goods/category/list',
+					method: 'get',
+					params: {}
+				}).then(res => {
+					this.classifyList = res.data.slice(0, 9);
+					
+					uni.stopPullDownRefresh();
+				}).finally(res => {
+					this.isLoaded_classify = true;
+				})
+			},
+			
+			// 去分类列表
+			toClassifyLst(categoryId) {
+				uni.setStorageSync('categoryId', categoryId);
+				uni.switchTab({
+					url: '/pages/goods/classify'
+				})
+			},
+			
+			// 获取轮播图列表
+			getBannerList() {
+				this.$axios({
+					url: '/common/list/page',
+					method: 'get',
+					params: {
+						pageNum: 1,
+						pageSize: 10,
+						state: true
+					}
+				}).then(res => {
+					this.bannerList = res.data.records;
+				}).finally(res => {
+					this.isLoaded_banner = true;
+					uni.stopPullDownRefresh();
+				})
+			},
+			
+			// 切换广告图
+			changeBanner(e) {
+				this.bannerCurrent = e.detail.current;
+			},
+			
+			stopTouchMove() {
+				return true;
+			},
+			
+			// 获取可领优惠券列表
+			getCouponList() {
+				this.$axios({
+					url: '/coupon/list/all',
+					method: 'get',
+					params: {
+						userId: this.userId
+					}
+				}).then(res => {
+					this.couponList = res.data;
+				}).finally(res => {
+					this.isLoaded_coupon = true;
+				})
+			},
+			
+			// 处理优惠券
+			handleCoupon(item) {
+				if(item.obtainType == 0) {
+					return this.$toast('该优惠券不可领取');
+				}else if(item.obtainType == 1) {
+					this.$axios({
+						url: '/coupon/obtain',
+						method: 'get',
+						params: {
+							userId: this.userId,
+							couponId: item.couponId
+						}
+					}).then(res => {
+						this.$successToast('领取成功');
+						this.getCouponList();
+					})
+				}else if(item.obtainType == 2) {
+					uni.switchTab({
+					    url: '/pages/goods/classify'
+					});
+				}
+			},
+			
+			// 去可领取优惠券
+			toReceiveCoupon() {
+				uni.navigateTo({
+					url:'/pages/index/coupon'
+				})
+			},
+			
+			// 获取我的客户经理
+			getMyManager() {
+				this.$axios({
+					url: '/user/parent',
+					method: 'get',
+					params: {
+						userId: this.userId
+					}
+				}).then(res => {
+					if(res.data) {
+						this.myManagerDetail = res.data;
+					}
+				}).finally(res => {
+					this.isLoaded_manager = true;
+				})
+			},
+			
+			// 获取公告列表
+			getNoticeList() {
+				this.$axios({
+					url: '/renovation/settle/list',
+					method: 'get',
+					params: {
+						
+					}
+				}).then(res => {
+					if(res.data) {
+						res.data.forEach(item => {
+							item.workUserName = item.workUserName.slice(0, 1) + '师傅';
+						})
+						this.noticeList = res.data;
+					}
+				})
+			},
+			
+			// 拨打电话
+			callPhone(val) {
+				uni.makePhoneCall({
+				    phoneNumber: val
+				});
+			},
+			
+			findElem(array, attr, val) {
+			    for (var i = 0; i < array.length; i++) {
+			        if (array[i][attr] == val) {
+			            return i; //返回当前索引值
+			        }
+			    }
+			    return -1;
+			},
+			
+			// 计算倒计时
+			countTime() {
+				let endDatetime = this.endDatetime.replace(/\-/g, '/');
+				// console.log(endDatetime)
+			    var nowtime = new Date(),  //获取当前时间
+			        endtime = new Date(endDatetime);  //定义结束时间
+			    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
+					dd = Math.floor(lefttime/(1000*60*60)/24),  //计算天数
+			        hh = Math.floor(lefttime/(1000*60*60)),  //计算小时数
+			        mm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
+			        ss = Math.floor(lefttime/1000%60);  //计算秒数
+				// console.log(new Date(endDatetime))
+				function checkTime(i){
+					if (i<10) {
+						i = "0"+i;
+					}
+					return i;
+				}
+				setTimeout(() => {
+					this.countTime();
+				}, 1000);
+				this.countdownTime = (dd > 0 ? dd + '天 ' : '') + checkTime(hh) + ":" + checkTime(mm) + ":" + checkTime(ss);
+				// console.log(this.countdownTime)
+			},
+			
+			// 获取秒杀时间列表
+			getSeckillTimeList() {
+				this.$axios({
+					url: '/goods/sec/time',
+					method: 'get',
+					params: {}
+				}).then(res => {
+					if(res.data.length < 1) {return false;}
+					this.seckillTimeList = res.data;
+					this.endDatetime = this.seckillTimeList[0].endDatetime;
+					this.countdownText = this.seckillTimeList[0].type == 'jxz' ? '距离结束':'即将开始';
+					this.countTime();
+					this.getSeckillGoodsList();
+				}).finally(res => {
+					this.isLoaded_seckill = true;
+				})
+			},
+			
+			// 获取秒杀商品列表
+			getSeckillGoodsList(loadMore) {
+				if(this.seckillGoodsNoMore && loadMore)return;
+				if(!loadMore) {
+					this.seckillGoodsNoMore = false;
+					this.seckillGoodsPage = 1;
+				}
+				let secKillId = this.seckillTimeList[0].secKillId;
+				this.$axios({
+					url: '/goods/sec/goods/list',
+					method: 'get',
+					params: {
+						pageNum: this.seckillGoodsPage,
+						pageSize: 3,
+						secKillId: secKillId,
+					}
+				}).then(res => {
+					let _list = res.data.records;
+					let pageTotal = res.data.pages;
+					if(this.seckillGoodsPage >= pageTotal){
+						this.seckillGoodsNoMore = true;
+					}
+					if (_list.length) {
+						this.seckillGoodsPage += 1;
+					}
+					if (loadMore) {
+						this.seckillGoodsList = this.seckillGoodsList.concat(_list);
+					} else {
+						this.seckillGoodsList = _list;
+					}
+				})
+			},
+			
+			// 加载更多秒杀商品
+			loadMoreSeckillGoods() {
+				this.getSeckillGoodsList(true);
+			},
+			
+			// 进入秒杀商品详情
+			toSeckillGoodsDetail(id) {
+				if(!id) {
+					return false;
+				}
+				if(this.seckillTimeList[0].type == 'wks') {
+					return this.$toast('活动未开始');
+				}
+				uni.navigateTo({
+					url: '/packageGoods/pages/detail?id=' + id
+				})
+			},
+			
+			// 进入秒杀商品列表
+			toSeckillGoodsList() {
+				uni.navigateTo({
+					url: '/packageGoods/pages/seckill'
+				})
+			},
+			
+			// 获取推荐分类
+			getClassflyList() {
+				this.$axios({
+					url: '/renovation/category/list',
+					method: 'get',
+					params: {
+						pageNo: 1,
+						pageSize: 10
+					}
+				}).then(res => {
+					this.tabList = res.data.records;
+					this.tabCurrent = res.data.records.length > 0 ? res.data.records[0].goodsNewsCategoryId : 0;
+					this.getRecomList();
+					
+					uni.stopPullDownRefresh();
+				}).finally(res => {
+					this.isLoaded_newclassify = true;
+				})
+			},
+			
+			// 切换一级菜单
+			changeTab(current) {
+				this.tabCurrent = current;
+				this.getRecomList();
+				this.resize();
+			},
+			
+			// 获取好物推荐商品列表
+			getRecomList(loadMore) {
+				if(this.noMore && loadMore)return;
+				this.noMore = false
+				if(!loadMore){
+					this.pageNum = 1;
+				}else{
+					this.loading = true;
+				}
+				this.$axios({
+					url: '/renovation/goods/list',
+					method: 'get',
+					params: {
+						pageNo: this.pageNum,
+						pageSize: this.pageSize,
+						type: 1,
+						objId: this.tabCurrent,
+						sort: 1
+					},
+				}).then(res => {
+					res.data.records.forEach(item => {
+						if(item.logo && item.logoStartTime) {
+							item.isShowWater = this.$compareTime(item.logoStartTime, item.logoEndTime);
+						}else {
+							item.isShowWater = false;
+						}
+					})
+					
+					let _list = res.data.records;
+					let pageTotal = res.data.pages;
+					if(this.pageNum >= pageTotal){
+						this.noMore = true;
+					}
+					if (_list.length) {
+						this.pageNum += 1
+					}
+					if (loadMore) {
+						this.recomList = this.recomList.concat(_list);
+						this.loading = false;
+					} else {
+						this.recomList = _list;
+					}
+					
+					uni.stopPullDownRefresh();
+				})
+			},
+			
+			// 进入商品详情
+			toGoodsDetail(id) {
+				if(!id) {
+					return false;
+				}
+				uni.navigateTo({
+					url: '/packageGoods/pages/detail?id=' + id
+				})
+			},
+			
+			// 跳转小程序
+			toMiniProgram(appId, path) {
+				wx.navigateToMiniProgram({
+					appId,
+					path,
+					extraData: {},
+					envVersion: 'release',
+					success(res) {}
+				});
+			},
+			
+			setScrollLeft() {
+				// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
+				const index = this.findElem(this.tabList, 'goodsNewsCategoryId', this.tabCurrent);
+				const tabRect = this.tabList[index]
+				// 累加得到当前item到左边的距离
+				const offsetLeft = this.tabList
+					.slice(0, index)
+					.reduce((total, curr) => {
+						return total + curr.rect.width
+					}, 0)
+				// 此处为屏幕宽度
+				const res = uni.getSystemInfoSync();
+				const windowWidth = res.windowWidth;
+				// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
+				let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect.right) / 2 + this.tabsRect.left / 2
+				
+				// 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
+				scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
+				this.scrollLeft = Math.max(0, scrollLeft)
+			},
+			// 获取所有标签的尺寸
+			resize() {
+				// 如果不存在list，则不处理
+				if(this.tabList.length === 0) {
+					return
+				}
+				Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
+					this.tabsRect = tabsRect
+					this.scrollViewWidth = 0
+					itemRect.map((item, index) => {
+						// 计算scroll-view的宽度，这里
+						this.scrollViewWidth += item.width
+						// 另外计算每一个item的中心点X轴坐标
+						this.tabList[index].rect = item
+					})
+					// 获取了tabs的尺寸之后，设置滑块的位置
+					this.setScrollLeft()
+				})
+			},
+			// 获取导航菜单的尺寸
+			getTabsRect() {
+				return new Promise(resolve => {
+					this.queryRect('tabs-view').then(size => resolve(size))
+				})
+			},
+			// 获取所有标签的尺寸
+			getAllItemRect() {
+				return new Promise(resolve => {
+					const promiseAllArr = this.tabList.map((item, index) => this.queryRect(
+						`tabs-item-${index}`, true))
+					Promise.all(promiseAllArr).then(sizes => resolve(sizes))
+				})
+			},
+			// 获取各个标签的尺寸
+			queryRect(el, item) {
+				const query = uni.createSelectorQuery().in(this);
+				return new Promise(resolve => {
+					query.select(`.${el}`).boundingClientRect(data => {
+						resolve(data)
+					}).exec();
+				})
+			},
+			
+			// 关闭弹窗
+			closeDialog() {
+				this.$refs.dialog.step({
+					scale: 0
+				}, {
+					duration: 400
+				})
+				this.$refs.dialog.run(()=>{
+					this.isShowDialog = false;
+				})
+				this.$refs.dialogBtn.step({
+					scale: 0
+				}, {
+					duration: 400
+				})
+				this.$refs.dialogBtn.run(()=>{
+					this.isShowDialog = false;
+				})
+			},
+			
+			
+			// 关闭弹窗
+			closeBottom() {
+				this.$refs.bottom.step({
+					scale: 0
+				}, {
+					duration: 400
+				})
+				this.$refs.bottom.run(()=>{
+					this.isShowBottom = false;
+				})
+				this.$refs.bottomBtn.step({
+					scale: 0
+				}, {
+					duration: 400
+				})
+				this.$refs.bottomBtn.run(()=>{
+					this.isShowBottom = false;
+				})
+			},
+			
+			// 进入活动列表
+			toActivityList(type) {
+				if(type == 2) {
+					this.closeDialog();
+				}
+				// if(type == 13) {
+				// 	this.closeBottom();
+				// }
+				uni.navigateTo({
+					url: '/packageGoods/pages/activity?type=' + type
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.top-container {
+		position: relative;
+		margin-bottom: 20rpx;
+		.bg {
+			display: block;
+			width: 750rpx;
+			position: absolute;
+			top: 0;
+			z-index: 0;
+		}
+		.content {
+			width: 710rpx;
+			padding: 0 20rpx;
+			position: relative;
+			z-index: 1;
+		}
+		.title {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #FFFFFF;
+			font-size: 36rpx;
+		}
+		.search {
+			background: #FFFFFF;
+			height: 64rpx;
+			display: flex;
+			align-items: center;
+			border-radius: 64rpx;
+			padding: 0 20rpx;
+			margin-top: 20rpx;
+			image {
+				width: 28rpx;
+				height: 28rpx;
+			}
+			input {
+				width: 100%;
+				padding-left: 15rpx;
+			}
+		}
+	}
+	.classify-container {
+		margin-top: 20rpx;
+		position: relative;
+		z-index: 1;
+		padding: 0 20rpx;
+		&.whiteBg {
+			.content {
+				background: #ffffff;
+				text {
+					color: #666666;
+				}
+			}
+		}
+		.content {
+			border-radius: 20rpx;
+			padding-top: 30rpx;
+			display: flex;
+			flex-wrap: wrap;
+			.item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				width: 142rpx;
+				margin-bottom: 30rpx;
+				image {
+					width: 78rpx;
+					height: 78rpx;
+					display: block;
+					border-radius: 30rpx;
+					overflow: hidden;
+				}
+				text {
+					font-size: 24rpx;
+					color: #333333;
+					margin-top: 10rpx;
+					width: 150rpx;
+					text-align: center;
+				}
+			}
+		}
+	}
+	.swiper-container {
+		position: relative;
+		margin-top: 20rpx;
+		swiper {
+			height: 270rpx;
+		}
+		image {
+			height: 270rpx;
+			width: 710rpx;
+			display: block;
+			margin: 0 auto 0;
+			border-radius: 15rpx;
+			overflow: hidden;
+		}
+		.dots-conatiner {
+			position: absolute;
+			width: 100%;
+			bottom: 40rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			.con {
+				border-radius: 4rpx;
+				overflow: hidden;
+				height: 4rpx;
+				background-color: rgba($color: #FFFFFF, $alpha: 0.3);
+			}
+			.dot {
+				width: 20rpx;
+				height: 4rpx;
+				background-color: #FFFFFF;
+				transition: all .3s;
+			}
+		}
+	}
+	.bigActivity-container {
+		position: relative;
+		z-index: 9;
+		margin-top: 20rpx;
+		padding: 0 20rpx;
+		image {
+			width: 710rpx;
+			display: block;
+		}
+	}
+	.other-container {
+		display: flex;
+		padding: 0 20rpx;
+		margin-top: 20rpx;
+		justify-content: space-between;
+		image {
+			display: block;
+			width: 350rpx;
+			height: 240rpx;
+			border-radius: 20rpx;
+		}
+	}
+	.smallActivity-container {
+		margin-top: 20rpx;
+		padding: 0 20rpx;
+		.content {
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			.title {
+				font-size: 32rpx;
+				color: #333333;
+				line-height: 74rpx;
+				padding-left: 20rpx;
+				font-weight: 600;
+			}
+			.list {
+				display: flex;
+				flex-wrap: wrap;
+				padding: 20rpx 20rpx 0;
+				.item {
+					width: 320rpx;
+					margin-right: 30rpx;
+					margin-bottom: 20rpx;
+					&:nth-child(2n) {
+						margin-right: 0;
+					}
+					image {
+						width: 320rpx;
+						height: 200rpx;
+						display: block;
+						border-radius: 20rpx;
+					}
+				}
+			}
+		}
+	}
+	.notice-container {
+		padding: 0 20rpx;
+		margin-top: 20rpx;
+		.content {
+			display: flex;
+			align-items: center;
+			height: 100rpx;
+			background: #FFFFFF;
+			border-radius: 20rpx;
+		}
+		.left{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 96rpx;
+			height: 48rpx;
+			margin-right: 20rpx;
+			border-right: 2rpx solid #E5E5E5;
+			image {
+				width: 60rpx;
+				height: 30rpx;
+				display: block;
+			}
+		}
+		.swiper{
+			height: 100rpx;
+			flex: 1;
+			padding-right: 20rpx;
+			::v-deep swiper-item {
+				display: block;
+				height: 100rpx;
+				width: 100%;
+				line-height: 100rpx;
+			}
+		}
+	}
+	.coupon-container {
+		position: relative;
+		margin-top: 20rpx;
+		padding: 0 20rpx;
+		.bg {
+			display: block;
+			width: 100%;
+		}
+		.list {
+			position: absolute;
+			top: 80rpx;
+			z-index: 1;
+		}
+		.list1 {
+			.item {
+				position: relative;
+				margin-bottom: 20rpx;
+				margin-left: 16rpx;
+				.cp {
+					width: 688rpx;
+					height: 178rpx;
+					display: block;
+				}
+				.content {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 710rpx;
+					height: 160rpx;
+					display: flex;
+					align-items: center;
+					.left {
+						width: 210rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-direction: column;
+						.price {
+							font-size: 48rpx;
+							color: #FFFFFF;
+						}
+						.text {
+							color: #FFFFFF;
+							font-size: 28rpx;
+						}
+					}
+					.right {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						padding: 0 20rpx;
+						width: 470rpx;
+						height: 150rpx;
+						box-sizing: border-box;
+						.main {
+							width: 430rpx;
+							height: 150rpx;
+							padding: 16rpx 0 8rpx;
+							box-sizing: border-box;
+							display: flex;
+							flex-direction: column;
+							justify-content: space-between;
+							.row1 {
+								font-size: 28rpx;
+								line-height: 32rpx;
+								height: 64rpx;
+							}
+							.row2 {
+								font-size: 24rpx;
+								line-height: 28rpx;
+								color: #999999;
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+							}
+						}
+					}
+				}
+			}
+		}
+		.list2 {
+			display: flex;
+			.item {
+				position: relative;
+				margin-bottom: 20rpx;
+				&:first-child {
+					margin-left: 16rpx;
+				}
+				.cp {
+					width: 342rpx;
+					height: 308rpx;
+					display: block;
+				}
+				.content {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 342rpx;
+					height: 328rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					.top {
+						width: 324rpx;
+						height: 130rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-direction: column;
+						.price {
+							font-size: 48rpx;
+							color: #FFFFFF;
+							line-height: 48rpx;
+							margin-top: 16rpx;
+						}
+						.text {
+							color: #FFFFFF;
+							font-size: 28rpx;
+							line-height: 28rpx;
+							margin-top: 10rpx;
+						}
+					}
+					.bottom {
+						width: 324rpx;
+						height: 160rpx;
+						padding: 16rpx;
+						box-sizing: border-box;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						align-items: center;
+						.name {
+							font-size: 28rpx;
+							text-align: left;
+							line-height: 32rpx;
+							width: 100%;
+						}
+						.date {
+							font-size: 24rpx;
+							color: #999999;
+							text-align: left;
+							width: 100%;
+							line-height: 28rpx;
+						}
+					}
+				}
+			}
+		}
+		.list3 {
+			display: flex;
+			align-items: center;
+			.left {
+				display: flex;
+				width: 630rpx;
+				overflow-x: scroll;
+			}
+			.right {
+				width: 80rpx;
+				display: flex;
+				justify-content: center;
+				.text {
+					width: 48rpx;
+					height: 200rpx;
+					border-radius: 48rpx;
+					background: #FFFFFF;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					text {
+						font-size: 28rpx;
+						color: #FF3F42;
+						line-height: 32rpx;
+					}
+					image {
+						width: 32rpx;
+						height: 32rpx;
+						display: block;
+						flex-shrink: 0;
+						margin-top: 10rpx;
+					}
+				}
+			}
+			.item {
+				position: relative;
+				margin-bottom: 20rpx;
+				&:first-child {
+					margin-left: 16rpx;
+				}
+				.cp {
+					width: 278rpx;
+					height: 308rpx;
+					display: block;
+				}
+				.content {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 278rpx;
+					height: 328rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					.top {
+						width: 260rpx;
+						height: 130rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-direction: column;
+						.price {
+							font-size: 48rpx;
+							color: #FFFFFF;
+							line-height: 48rpx;
+							margin-top: 16rpx;
+						}
+						.text {
+							color: #FFFFFF;
+							font-size: 28rpx;
+							line-height: 28rpx;
+							margin-top: 10rpx;
+						}
+					}
+					.bottom {
+						width: 260rpx;
+						height: 160rpx;
+						padding: 16rpx;
+						box-sizing: border-box;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						align-items: center;
+						.name {
+							font-size: 28rpx;
+							text-align: left;
+							line-height: 32rpx;
+							width: 100%;
+						}
+						.date {
+							font-size: 24rpx;
+							color: #999999;
+							text-align: left;
+							width: 100%;
+							line-height: 28rpx;
+						}
+					}
+				}
+			}
+		}
+		.button {
+			width: 120rpx;
+			height: 40rpx;
+			border-radius: 40rpx;
+			font-size: 24rpx;
+			flex-shrink: 0;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			&.gary {
+				background: #AAAAAA;
+				color: #FFFFFF;
+				border: 1px solid #AAAAAA;
+			}
+			&.red {
+				background: #C434FF;
+				color: #FFFFFF;
+				border: 1px solid #C434FF;
+			}
+			&.white {
+				color: #FF3F42;
+				border: 1px solid #FF3F42;
+			}
+		}
+	}
+	.myManager-container {
+		padding: 0 20rpx;
+		.content {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			padding: 20rpx;
+			.left {
+				display: flex;
+				align-items: center;
+				image {
+					width: 100rpx;
+					height: 100rpx;
+					border-radius: 50%;
+				}
+				.main {
+					font-size: 28rpx;
+					line-height: 48rpx;
+					margin-left: 20rpx;
+				}
+			}
+			.right {
+				width: 160rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				border-radius: 60rpx;
+				text-align: center;
+				font-size: 28rpx;
+				color: #E43B38;
+				border: 1px solid #E43B38;
+			}
+		}
+	}
+	.seckill2-container {
+		padding: 0 20rpx;
+		margin-top: 20rpx;
+		.content {
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			padding: 0 20rpx;
+			.top {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				height: 86rpx;
+				.left {
+					display: flex;
+					align-items: center;
+					.title {
+						font-size: 32rpx;
+						color: #333333;
+						line-height: 74rpx;
+						font-weight: 600;
+					}
+					.timeout {
+						display: flex;
+						align-items: center;
+						margin-left: 20rpx;
+						border-radius: 40rpx;
+						height: 40rpx;
+						overflow: hidden;
+						.text {
+							font-size: 24rpx;
+							color: #FFFFFF;
+							width: 120rpx;
+							text-align: center;
+							background: #FF3F42;
+							border-radius: 40rpx;
+							position: relative;
+							z-index: 1;
+						}
+						.time {
+							padding: 0 20rpx 0 32rpx;
+							background: #FFD3B5;
+							font-size: 24rpx;
+							color: #FF3F42;
+							margin-left: -20rpx;
+							position: relative;
+							z-index: 0;
+						}
+					}
+				}
+				.right {
+					display: flex;
+					align-items: center;
+					font-size: 28rpx;
+					color: #999999;
+					image {
+						width: 12rpx;
+						height: 26rpx;
+						display: block;
+						margin-left: 8rpx;
+					}
+				}
+			}
+			.list {
+				display: flex;
+				.item {
+					width: 210rpx;
+					margin-right: 20rpx;
+					padding-bottom: 20rpx;
+					&:last-child {
+						margin-right: 0;
+					}
+					image {
+						width: 210rpx;
+						height: 210rpx;
+						display: block;
+					}
+					.title {
+						font-size: 28rpx;
+						color: #333333;
+						line-height: 36rpx;
+						font-weight: 600;
+						margin-top: 6rpx;
+					}
+					.price {
+						font-size: 32rpx;
+						color: #FF3F42;
+						line-height: 36rpx;
+						margin-top: 6rpx;
+					}
+				}
+			}
+		}
+	}
+	.selected-container {
+		padding: 0 20rpx;
+		margin-top: 20rpx;
+		.content {
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			padding: 0 20rpx;
+			.title {
+				font-size: 32rpx;
+				color: #333333;
+				line-height: 74rpx;
+				font-weight: 600;
+			}
+			.list {
+				display: flex;
+				.item {
+					width: 210rpx;
+					margin-right: 20rpx;
+					padding-bottom: 20rpx;
+					&:last-child {
+						margin-right: 0;
+					}
+					image {
+						width: 210rpx;
+						height: 210rpx;
+						display: block;
+					}
+					.text1 {
+						font-size: 30rpx;
+						color: #333333;
+						line-height: 36rpx;
+						font-weight: 600;
+						margin-top: 12rpx;
+						text-align: center;
+					}
+					.text2 {
+						font-size: 24rpx;
+						color: #666666;
+						line-height: 30rpx;
+						margin-top: 10rpx;
+						text-align: center;
+					}
+				}
+			}
+		}
+	}
+	.recom-container {
+		margin-top: 20rpx;
+		.top {
+			.tab {
+				display: flex;
+				.item {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					flex-shrink: 0;
+					width: 187.5rpx;
+					font-size: 28rpx;
+					color: #666666;
+					position: relative;
+					height: 130rpx;
+					.name {
+						font-size: 36rpx;
+						color: #333333;
+					}
+					.text {
+						font-size: 24rpx;
+						color: #666666;
+						margin-top: 8rpx;
+					}
+					&.current {
+						.name {
+							color: #FF3F42;
+							font-weight: 600;
+						}
+						.text {
+							color: #FF3F42;
+						}
+						&::after {
+							content: '';
+							display: block;
+							width: 48rpx;
+							height: 6rpx;
+							background: #FF3F42;
+							position: absolute;
+							bottom: 0;
+							left: 50%;
+							margin-left: -24rpx;
+						}
+					}
+				}
+			}
+		}
+	}
+	.dialog-container {
+		position: fixed;
+		z-index: 1000000;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		background: rgba($color: #000000, $alpha: .6);
+		.image {
+			width: 600rpx;
+			display: block;
+			border-radius: 20rpx;
+			margin-top: 40rpx;
+		}
+		.close {
+			width: 68rpx;
+			height: 68rpx;
+			display: block;
+			margin-top: 40rpx;
+		}
+	}
+	.bottom-container {
+		position: fixed;
+		z-index: 999999;
+		bottom: 20rpx;
+		left: 20rpx;
+		width: 710rpx;
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
+		flex-direction: column;
+		.image {
+			width: 710rpx;
+			height: 70rpx;
+			display: block;
+			border-radius: 70rpx;
+			margin-top: 8rpx;
+		}
+		.close {
+			width: 30rpx;
+			height: 30rpx;
+			display: block;
+		}
+	}
+	
+</style>
+<style>
+	::-webkit-scrollbar {
+		display: none;
+		width: 0 !important;
+		height: 0 !important;
+		-webkit-appearance: none;
+		background: transparent;
+		color: transparent;
+	}
+</style>