qjm/pages/index/index.vue

<template>
	<view class="container">
		<view class="vheigh" :style="{ backgroundColor: titleNViewBackground }"></view>
		<view class="top-box" :style="{ backgroundColor: titleNViewBackground }">
			<view class="top" @click="clickSearch()">
				<view class="top-icon">
					<image src="../../static/icon/icon.png" mode=""></image>
				</view>
				<view class="top-main">输入你要查找的内容</view>
			</view>
		</view>
		<swiper class="banner" autoplay="true" duration="400" interval="5000" @change="swiperChange">
			<swiper-item class="banner-item" v-for="(item, index) in carouselList" @click="bannergo(item)">
				<image :src="item.pic" />
			</swiper-item>
		</swiper>
		<view class="swiper-dot">
			<template v-for="item in swiperLength">
				<view class="swiper-dots-item" :key="item" :class="{ action: swiperCurrent === item }"></view>
			</template>
		</view>
		<view class="gg" v-if="text.length != 0">
			<view class="gg-icon">
				<image src="../../static/img/gonggao.png" mode=""></image>
			</view>
			<view class="tongz-left flex">
				<view class="tongz-font">平台公告</view>
				<u-notice-bar style="width: 84%;" mode="vertical" type="none" :volume-icon="false" :more-icon="true"
					color="#ffffff" :list="text" @click="goDetails"
					@getMore="navTo('/pages/info/articleList?id=4')"></u-notice-bar>
			</view>
		</view>
		<view class="navbar-box">
			<view class="navbar-title">
				<image src="../../static/icon/index1.png" mode=""></image>
			</view>
			<view class="navbar-main">
				<view class="navbar-item" @click="navTo('/pages/category/category')">
					<view class="navbar-icon">
						<image src="../../static/icon/index2.png" mode="widthFix"></image>
					</view>
					<view class="navbar-font-box">
						<view class="navbar-font">全部商品</view>
						<image class="navbar-font-icon" src="../../static/icon/jt.png" mode=""></image>
					</view>
					<view class="navbar-tip">生活好物 口碑爆款</view>
				</view>
				<view class="xian"></view>
				<button class="navbar-item" @click="navTo('/pages/index/coupon')">
					<view class="navbar-icon">
						<image src="../../static/icon/index3.png" mode="widthFix"></image>
					</view>
					<view class="navbar-font-box">
						<view class="navbar-font">领取优惠券</view>
						<image class="navbar-font-icon" src="../../static/icon/jt.png" mode=""></image>
					</view>
					<view class="navbar-tip">高奢品味 高端体验</view>
				</button>
				<view class="xian"></view>
				<view class="navbar-item" @click="navTo('/pages/user/shareQrCode')">
					<view class="navbar-icon">
						<image src="../../static/icon/index4.png" mode="widthFix"></image>
					</view>
					<view class="navbar-font-box">
						<view class="navbar-font">邀请好友</view>
						<image class="navbar-font-icon" src="../../static/icon/jt.png" mode=""></image>
					</view>
					<view class="navbar-tip">邀请好友 奖励多多</view>
				</view>
			</view>
		</view>
		<view class="hot-box">
			<view class="hot-title">
				<image class="hot-title-icon" src="../../static/icon/l.png" mode=""></image>
				<view class="hot-title-font">今日上新</view>
				<image class="hot-title-icon" src="../../static/icon/r.png" mode=""></image>
			</view>
			<view class="hot-tip">好货限时抢购</view>
			<view class="hot-main">
				<view class="hot-main-box" v-for="(item, index) in hotList">
					<view class="hot-main-item" v-for="(itn, ind) in item.datalist" @click="navProduct(item, ind)">
						<view class="time">
							<view class="sq">立省{{ itn.ot_price * 1 - itn.price * 1 }}</view>
							<view class="time-main">
								<text>{{ item.status == 1 ? '距离结束' : item.status == 0 ? '已结束' : '距离开始' }}</text>
								<view v-if="item.continued == '24'">
									<uni-countdown color="#ffffff" background-color="rgba(0, 0, 0, 0.3)"
										borderColor="rgba(0, 0, 0, 0.3)" splitorColor="#ffffff"
										v-if="item.status == 1 || item.status == 2" :show-day="true"
										:day="itn.stopTimeD" :hour="itn.stopTimeH" :minute="itn.stopTimeM"
										:second="itn.stopTimeS"></uni-countdown>
								</view>
								<view v-if="item.continued != '24'">
									<uni-countdown color="#ffffff" background-color="rgba(0, 0, 0, 0.3)"
										borderColor="rgba(0, 0, 0, 0.3)" splitorColor="#ffffff"
										v-if="item.status == 1 || item.status == 2" :show-day="false"
										:hour="item.stopTimeH" :minute="item.stopTimeM"
										:second="item.stopTimeS"></uni-countdown>
								</view>
							</view>
						</view>
						<view class="hot-main-image">
							<image :src="itn.image" mode=""></image>
						</view>
						<view class="hot-name clamp">{{ itn.store_name }}</view>
						<view class="hot-tipBox flex">
							<view class="hot-tip clamp" style="text-align: left;">{{ itn.info }}</view>
							<view class="sale">已售{{ itn.sales }}件</view>
						</view>
						<view class="hot-price-box flex">
							<view class="hot-price">
								￥{{ itn.price * 1 }}
								<text class="yuan-price">¥{{ itn.ot_price }}</text>
							</view>
							<view class="btn" v-if="item.status == 1">立即抢购</view>
							<view class="btn1" @click.stop="dingy(item, ind)" v-if="item.status == 2">
								{{ itn.subscribe != null ? '已订阅' : '抢购提醒' }}
							</view>
							<view class="btn1" v-if="item.status == 0">已结束</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="guess-section-box">
			<view class="hot-title">
				<image class="hot-title-icon" src="../../static/icon/l.png" mode=""></image>
				<view class="hot-title-font">爆款推荐</view>
				<image class="hot-title-icon" src="../../static/icon/r.png" mode=""></image>
			</view>
			<view class="hot-tip">悦享格调生活</view>
			<view class="guess-section">
				<view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
					<view class="image-wrapper">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<text class="title clamp margin-c-20">{{ item.store_name }}</text>
					<view class="price margin-c-20 flex">
						<view>
							￥{{ item.price * 1 }}
							<text class="yuan-price">￥{{ item.ot_price * 1 }}</text>
						</view>
						<view class="font-size-sm">已售:{{ item.sales }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loadIndexs
	} from '@/api/index.js';
	import {
		getUserInfo,
		articleList,
		subscribe
	} from '@/api/user.js';
	import {
		setCoupons
	} from '@/api/functionalUnit.js';
	import {
		getSeckillList,
		getSeckillClass
	} from '@/api/product.js';
	import {
		interceptor,
		saveUrl
	} from '@/utils/loginUtils';
	import {
		timeComputed
	} from '@/utils/rocessor.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				carouselList: [''],
				hotList: [],
				bastList: [],
				swiperCurrent: 0,
				swiperLength: '',
				titleNViewBackground: '#e4e2dc',
				text: [], //通告消息
				article: [] //通告列表
			};
		},
		// #ifdef MP
		onShareAppMessage: function(res) {
			console.log(res);
			console.log('是否从按钮进入');
			if (res.from === 'button' || res.from === 'menu') {
				// 来自页面内分享按钮
				let pages = getCurrentPages();
				// 获取当前页面
				let page = pages[pages.length - 1];
				let path = '/' + page.route + '?';
				// 保存传值
				for (let i in page.options) {
					path += i + '=' + page.options[i] + '&';
				}
				// 保存邀请人
				path += 'scene=' + this.userInfo.uid;
				let data = {
					path: path,
					imageUrl: this.bastList[0].pic,
					title: this.userInfo.nickname ? this.userInfo.nickname : '' + '邀请您进入亲家母优选'
				};
				return data;
			} else {
				console.log('else');
			}
		},
		// #endif
		computed: {
			...mapState('user', ['hasLogin', 'userInfo'])
		},
		onLoad: function(option) {
			// #ifndef MP
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
			// #endif
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: option.scene
				});
			}
			// #endif
		},
		onShow: function() {
			// 判断是否强制登录
			if (this.loginInterceptor && !this.hasLogin) {
				// 登录拦截
				interceptor();
			}
			this.loadData();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData();
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						});
					}
				});
			},
			dingy(item, ind) {
				if (!this.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					if (item.datalist[ind].subscribe != null) {
						return;
					}
					const obj = this;
					wx.getSetting({
						withSubscriptions: true,
						success(res) {
							if (res['oo9kG5bU_FwzA9I2rqVp2dkV1k8pBUpBWy2WmwdA-_M'] == 'accept') {
								console.log('订阅成功');
							}
						}
					});
					if (wx.requestSubscribeMessage) {
						wx.requestSubscribeMessage({
							tmplIds: ['oo9kG5bU_FwzA9I2rqVp2dkV1k8pBUpBWy2WmwdA-_M'],
							success(res) {
								let date = new Date();
								let year = date.getFullYear();
								let month = date.getMonth() + 1;
								let day = date.getDate();
								if (month < 10) {
									month = '0' + month;
								}
								if (day < 10) {
									day = '0' + day;
								}
								let nowDate = year + '-' + month + '-' + day + ' ' + item.time + ':00';
								subscribe({
									time: nowDate
								}, item.datalist[ind].id).then(e => {
									obj.$api.msg('订阅消息成功');
								});
							},
							fail(err) {
								obj.$api.msg('订阅消息失败');
								console.log(err);
							},
							complete() {}
						});
					}
				}
			},
			bannergo(item) {
				console.log(item);
				uni.navigateTo({
					url: item.url
				});
			},
			seckill() {
				let obj = this;
				getSeckillClass({})
					.then(({
						data
					}) => {
						let arr1 = data.seckillTime.filter(e => {
							return e.status != 0;
						});
						let arr2 = data.seckillTime.filter(e => {
							return e.status == 0;
						});
						let arr = arr1.concat(arr2);
						obj.hotList = arr.map((e, ind) => {
							getSeckillList({
									page: 1,
									limit: 100
								},
								e.id
							).then(sp => {
								this.$set(e, 'datalist', sp.data);
								let ar = e;
								// 判断是否为进行中的活动
								if (ar.status === 1) {
									// 计算倒计时时间
									console.log(ar, '时间');
									if (ar.continued != '24') {
										obj.timeComputed(ar.stop * 1000, ar);
									} else {
										console.log(ar.datalist, '123456');
										if (ar.datalist.length != 0) {
											ar.datalist.forEach(sp => {
												obj.timeComputed(sp.stop_time * 1000, sp);
											})
										}
									}
								} else {
									// 获取距离开始还需要多少时间
									let arTime = ar.time.split(':');
									let h = arTime[0];
									let m = arTime[1];
									let time = new Date();
									// 设置时间
									time.setHours(h, m, 0);
									console.log(time.getTime(), 'time');
									// 计算倒计时时间
									obj.timeComputed(time.getTime(), ar);
								}
							});
							return e;
						});
						console.log(obj.hotList, '数据');
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 计算倒计时时间
			timeComputed(da, ar) {
				let obj = this;
				// 计算时间，保存需要多少时间到期
				let stopTime = timeComputed(da);
				console.log(stopTime);
				ar.stopTimeH = stopTime.hours;
				ar.stopTimeM = stopTime.minutes;
				ar.stopTimeS = stopTime.seconds;
				ar.stopTimeD = stopTime.day;
			},
			comfirm(text) {
				console.log(text);
				const result = uniCopy(text);
				if (result === false) {
					uni.showToast({
						title: '不支持'
					});
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
				this.$refs.popupkf.close();
			},
			goDetails(e) {
				uni.navigateTo({
					url: '/pages/info/detail?id=' + this.article[e].id
				});
			},
			// 點擊搜索框
			clickSearch() {
				uni.navigateTo({
					url: '/pages/product/search'
				});
			},
			// 请求载入数据
			async loadData() {
				loadIndexs({})
					.then(({
						data
					}) => {
						let goods = data.info;
						this.carouselList = data.banner;
						this.swiperLength = this.carouselList.length;
						this.titleNViewBackground = this.carouselList[this.swiperCurrent].name;
						this.bastList = data.likeInfo; //爆款推荐
						this.seckill();
						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
				articleList({
					page: 1,
					limit: 1000
				}, 4).then(({
					data
				}) => {
					data.forEach(e => {
						this.text.push(e.synopsis);
					});
					this.article = data;
				});
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].name;
			},
			//详情页
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: '/pages/product/product?id=' + id
				});
			},
			// 秒杀商品详情页
			navProduct(ls, ind) {
				let data = ls.datalist[ind];
				console.log(ls.datalist[ind]);
				uni.navigateTo({
					url: '/pages/product/product?id=' + data.id + '&type=1'
				});
			},
			// 轮播图跳转
			bannerNavToUrl(item) {
				// #ifdef H5
				if (item.wap_url.indexOf('http') > 0) {
					window.location.href = item.wap_url;
				}
				// #endif
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: item.wap_url
				});
			}
		}
	};
</script>

<style lang="scss">
	.vheigh {
		height: var(--status-bar-height);
	}

	.container,
	page {
		height: auto;
		min-height: 100%;
		background: #f6f6f6;
	}

	.top-box {
		display: flex;
		justify-content: start;
		padding: 50rpx 50rpx 20rpx;
	}

	.top {
		width: 500rpx;
		height: 58rpx;
		background: #ededed;
		border-radius: 29rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.top-icon {
			width: 32rpx;
			height: 32rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.top-main {
			margin-left: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #cbcbcb;
		}
	}

	.banner {
		margin-top: -2rpx;
		width: 750rpx;
		height: 916rpx;

		.banner-item {
			width: 750rpx;
			height: 916rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.hot-title {
		align-items: center;
		justify-content: center;
		display: flex;

		.hot-title-icon {
			width: 20rpx;
			height: 12rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.hot-title-font {
			margin: 0 28rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}
	}

	.hot-tip {
		text-align: center;
		margin-top: 12rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.hot-box {
		margin-top: 47rpx;

		.hot-main {
			padding-top: 5rpx;

			.hot-main-item {
				margin: 24rpx auto 0;
				width: 704rpx;
				background: #ffffff;
				border-radius: 20rpx;
				padding-bottom: 26rpx;
				position: relative;

				.time {
					position: absolute;
					z-index: 2;
					top: 0;
					left: 0;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 16rpx 24rpx 24rpx 0px;
					display: flex;
					align-items: center;

					.sq {
						height: 74rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 12rpx 20rpx;
						background: #000000;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #ffffff;
						border-radius: 16rpx 0px 0px 0px;
					}

					.time-main {
						display: flex;
						align-items: center;
						padding: 12rpx 20rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
					}
				}

				.hot-main-image {
					width: 704rpx;
					height: 452rpx;
					background: #ffffff;
					border-radius: 20rpx 20rpx 0px 0px;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx 20rpx 0px 0px;
					}
				}

				.hot-name {
					padding: 18rpx 20rpx 0;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}

				.hot-tipBox {
					padding: 18rpx 20rpx 0;
					line-height: 1;

					.hot-tip {
						width: 85%;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}

					.sale {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}

				.hot-price-box {
					padding: 18rpx 20rpx 0;

					.hot-price {
						padding: 0 12rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #ff4c4c;

						.yuan-price {
							display: inline-block;
							margin-left: 10rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							text-decoration: line-through;
							color: #969696;
						}
					}

					.btn {
						width: 172rpx;
						height: 60rpx;
						background: #000000;
						border-radius: 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
					}

					.btn1 {
						width: 172rpx;
						height: 60rpx;
						background: #ffffff;
						border: 1px solid #000000;
						border-radius: 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
					}
				}
			}
		}
	}

	.guess-section-box {
		margin-top: 20rpx;
		width: 750rpx;
		background: #fff;
		padding-top: 30rpx;

		.guess-section-title {
			display: flex;
			justify-content: center;
			align-items: center;

			.guess-section-xian {
				width: 120rpx;
				height: 1px;
				background: #999999;
			}

			.guess-section-title-font {
				margin: 0 70rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #363636;
			}
		}
	}

	.guess-section {
		margin-top: 40rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 0 30rpx;

		.guess-item {
			padding-bottom: 35rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			width: 48%;
			margin-bottom: 4%;
			border-radius: $border-radius-sm;
			background-color: white;
			box-shadow: $box-shadow;

			&:nth-child(2n + 1) {
				margin-right: 4%;
			}
		}

		.image-wrapper {
			width: 330rpx;
			height: 330rpx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			margin-top: 28rpx;
			font-size: $font-base;
			color: $font-color-dark;
			font-weight: bold;
		}

		.price {
			margin-top: 34rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #ff4c4c;
			line-height: 1;

			.font-size-sm {
				flex-shrink: 0;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

			.yuan-price {
				display: inline-block;
				margin-left: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-decoration: line-through;
				color: #969696;
			}
		}

		.icon {
			@extend %icon;
		}

		.detail {
			line-height: 1;
		}

		.tip {
			color: white;
			background-color: $color-yellow;
			line-height: 1.5;
			font-size: $font-sm;
			padding-left: 20rpx;
		}
	}

	/*公用边框样式*/
	%icon {
		margin-right: 10rpx;
		display: inline-block;
		padding: 2rpx 10rpx;
		border: 1rpx solid $color-yellow;
		color: $color-yellow;
		line-height: 1;
		font-size: $font-base;
		border-radius: 10rpx;
	}

	.swiper-dot {
		margin-top: -18rpx;
		display: flex;
		justify-content: center;
		position: relative;
		z-index: 2;

		.swiper-dots-item {
			width: 25rpx;
			height: 8rpx;
			border-radius: 4rpx 4rpx;
			background-color: #9fab9e;
			margin: 0 16rpx;
			// z-index: 999;
		}

		.action {
			background-color: #ffffff;
		}
	}

	.gg {
		margin-top: 10rpx;
		width: 750rpx;
		height: 60rpx;
		background: #ff3342;
		padding: 15rpx 30rpx;
		display: flex;
		align-items: center;

		.gg-icon {
			width: 28rpx;
			height: 28rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.tongz-left {
			width: 100%;
			margin-left: 10rpx;

			.tongz-font {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
			}
		}
	}

	.navbar-box {
		width: 750rpx;
		background: #10101e;
		padding: 34rpx 24rpx 36rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.navbar-title {
			width: 100%;
			height: 70rpx;
		}

		button {
			width: 33%;
			height: 100%;
			padding: 52rpx 0 58rpx;
			background: #ffffff;
			line-height: 1;
		}

		.navbar-main {
			margin-top: 28rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 52rpx 0 58rpx;
			background: #ffffff;
			line-height: 1;

			.navbar-item::after {
				border: none;
				background: #ffffff;
				height: 0;
				width: 0;
			}

			.navbar-item {
				width: 33%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.navbar-icon {
					width: 40rpx;
				}

				.navbar-font-box {
					display: flex;
					justify-content: center;
					align-content: flex-start;
					margin-top: 24rpx;
					align-items: center;

					.navbar-font {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
						margin-right: 12rpx;
					}

					.navbar-font-icon {
						width: 8rpx;
						height: 16rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.navbar-tip {
					margin-top: 26rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #737372;
				}
			}

			.xian {
				width: 2rpx;
				height: 118rpx;
				background: linear-gradient(0deg, #f9e6cd 0%, #fdf6eb 50%, #f9e6cd 100%);
			}
		}
	}
</style>