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

<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>