xpl/pages/index/index.vue

<template>
	<view class="center">
		<view class="top">
			<!-- #ifdef APP-PLUS -->
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<!-- #endif -->
			<view class="top-bg"><image src="../../static/img/index-bg.png" mode=""></image></view>
		</view>
		<view class="carousel">
			<swiper autoplay="true" duration="400" interval="5000" @change="swiperChange" class="bor">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"><image :src="item.pic" /></swiper-item>
			</swiper>
		</view>
		<view class="swiper-dot">
			<template v-for="item in swiperLength">
				<view class="swiper-dots-item" :key="item" :class="{ action: swiperCurrent + 1 === item }"></view>
			</template>
		</view>
		<view class="main">
			<view class="main-item" v-for="(item, index) in main" :key="index" @click="nav(item.url)">
				<view class="pic"><image :src="item.pic" mode=""></image></view>
				<view class="main-name">{{ item.name }}</view>
			</view>
		</view>
		<!-- 商品栏 -->
		<view class="commodity" v-if="vipList.length > 0">
			<view class="title">
				<view class="left">
					<image src="../../static/img/index-vip.png" mode=""></image>
					<view class="font">
						会员福利
					</view>
				</view>
				<view class="right" @click="nav('/pages/index/recommend?type=4')">
					<view class="right-font">
						更多
					</view>
					<image src="../../static/img/jiantou.png" mode=""></image>
				</view>
			</view>
			<view class="commodity-item" v-for="(item, index) in vipList" @click="navToDetailPages(item)">
				<view class="commodity-prc">
					<image :src="item.image" mode=""></image>
					<!-- <view class="fanli" v-if="item.type == 1">
						<view class="fanli-bg"><image src="../../static/img/index-fanl.png" mode=""></image></view>
						<view class="fanli-font flex">
							<view class="font-left">购物最高可返消费金额的</view>
							<view class="font-right">10<text>%</text></view>
						</view>
					</view> -->
				</view>
				<view class="commodity-info">
					<view class="commodity-name clamp">{{ item.store_name }}</view>
					<view class="commodity-systom clamp">{{ item.systom }}</view>
					<view class="commodity-price">
						￥{{ item.price }}
						<text>￥{{ item.ot_price }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="commodity" v-if="commodityList.length > 0">
			<view class="title">
				<view class="left">
					<image src="../../static/img/index-good.png" mode=""></image>
					<view class="font">
						精选好货
					</view>
				</view>
				<view class="right" @click="nav('/pages/index/recommend?type=2')">
					<view class="right-font">
						更多
					</view>
					<image src="../../static/img/jiantou.png" mode=""></image>
				</view>
			</view>
			<view class="commodity-item" v-for="(item, index) in commodityList" @click="navToDetailPages(item)">
				<view class="commodity-prc">
					<image :src="item.image" mode=""></image>
					<view class="fanli" v-if="item.type == 1">
						<view class="fanli-bg"><image src="../../static/img/index-fanl.png" mode=""></image></view>
						<!-- <view class="fanli-font flex">
							<view class="font-left">购物最高可返消费金额的</view>
							<view class="font-right">10<text>%</text></view>
						</view> -->
					</view>
				</view>
				<view class="commodity-info">
					<view class="commodity-name clamp">{{ item.store_name }}</view>
					<view class="commodity-systom clamp">{{ item.systom }}</view>
					<view class="commodity-price">
						￥{{ item.price }}
						<text>￥{{ item.ot_price }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 兑换专区 -->
		<view class="recommend-box" v-for="(item,index) in list" v-if="item.children.length != 0">
			<view class="f-header">
				<view class="f-left-icon">{{ item.name }}兑换专区</view>
				<view class="tit-box"><text class="tit">超级好物 立即抢购</text></view>
				<view @click="navto(item)"><text class="iconfont iconenter">更多</text></view>
			</view>
			<view class="guess-section">
				<view v-for="(ls, ind) in item.children" :key="ls.id" class="guess-item" @click="navToDetailPage(ls)">
					<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
					<view class="info-wrapper">
						<text class="title">{{ ls.title }}</text>
						<view class="price-box">
							<view class="price-left">
								<view class="price">
									<view class="">{{ ls.money * 1 }}</view>
									<view class="ot_price">
										<view class="price-tip">{{ ls.money_type }}</view>
										<view class="price-tip" v-if="ls.price != 0">+￥{{ ls.price }}</view>
									</view>
								</view>
							</view>
							<view class="price-right">
								<view class="buyNow">马上购</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { getTime } from '@/utils/rocessor.js';
import { loadIndexs, dhList } from '@/api/user.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { mapState, mapMutations } from 'vuex';
import { wallet } from '@/api/finance.js';
// #ifdef H5
import { weixindata, weixinlocation,shareLoad } from '@/utils/wxAuthorized';
import weixinObj from "@/plugin/jweixin-module/index.js";
// #endif
export default {
	computed: {
		...mapState('user', ['userInfo' , 'hasLogin', 'urlFile']),
		...mapState(['baseURL']),
	},
	data() {
		return {
			carouselList: [],
			main: [
				// {
				// 	name: '自动拼团',
				// 	pic: '../../static/icon/index1.png',
				// 	url: '/pages/index/appointment'
				// },
				// {
				// 	name: '11人团专区',
				// 	pic: '../../static/icon/index2.png',
				// 	url: '/pages/product/ping'
				// },
				{
					name: '拼团合伙人',
					pic: '../../static/icon/index3.png',
					url: '/pages/index/node'
				},
				{
					name: '货款充值',
					pic: '../../static/icon/index4.png',
					url: '/pages/money/huodai'
				},
				{
					name: '邀请有礼',
					pic: '../../static/icon/index5.png',
					url: '/pages/user/shareQrCode'
				},
				// {
				// 	name: '拼购福利',
				// 	pic: '../../static/icon/index6.png',
				// 	url: '/pages/user/fulilist'
				// },
				{
					name: '福利专区',
					pic: '../../static/icon/index7.png',
					url: '/pages/assets/logroll'
				},
				{
					name: '签到领钱',
					pic: '../../static/icon/index8.png',
					url: '/pages/index/sign'
				},
				// {
				// 	name: '服务器兑换',
				// 	pic: '../../static/icon/index9.png',
				// 	url: '/pages/market/market'
				// },
				{
					name: '话费充值',
					pic: '../../static/icon/index10.png',
					url: '/pages/money/phone'
				}
			],
			swiperLength: 0,
			swiperCurrent: 0,
			commodityList: [], //普通商品列表
			vipList:[],//会员列表
			list: [] //拼团积分列表
		};
	},
	onNavigationBarSearchInputClicked(e) {
		//跳转到搜索页面
		this.clickSearch();
	},
	onLoad(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
		// #ifdef H5
		console.log(this.hasLogin)
		if (this.hasLogin) {
			console.log('显示')
			weixinObj.hideAllNonBaseMenuItem();
			this.IndexShare();
		}else {
			console.log('隐藏')
			weixinObj.hideAllNonBaseMenuItem();
		}
		//#endif
	},
	//页面加载即刻发生
	onShow() {
		this.loadDate();
	},
	methods: {
		// #ifdef H5
		IndexShare() {
			let obj = this;
			let pages = getCurrentPages();
			// 获取当前页面
			let page = pages[pages.length - 1];
			let path = '/#/' + page.route + '?';
			// 保存传值
			for (let i in page.options) {
				path += i + '=' + page.options[i] + '&';
			}
			console.log(obj.Path)
			// 保存邀请人
			path += 'spread=' + this.userInfo.uid;
			let data = {
				link: this.baseURL + '/index/' + path,
				title: this.userInfo.nickname + '邀请您进入星拼乐',
				desc:'欢迎加入星拼乐',
				imgUrl: 'https://xingpinle.liuniu946.com/index/static/img/log.png'
			};
			weixindata(data);
		},
		// #endif
		loadDate() {
			uni.showLoading({
				title: '加载中'
			});
			const obj = this;
			loadIndexs({}).then(({ data }) => {
				console.log(data);
				obj.carouselList = data.banner;
				obj.swiperLength = data.banner.length;
				obj.commodityList = data.likeInfo;
				obj.vipList = data.benefit;
				uni.hideLoading();
			}).catch(e =>{
				uni.hideLoading();
			});
			wallet({}).then(({ data }) => {
				const obj = this;
				const arr = Object.keys(data.back);
				obj.list=[];
				arr.forEach(e => {
					let ar = {};
					ar.name = data.back[e].name;
					ar.type = e
					ar.children = []
					obj.list.push(ar);
				});
				obj.list.forEach(e =>{
					console.log(e)
					dhList({ page: 1, limit: 6, money_type: e.type }).then(({ data }) => {
						e.children = data;
					});
				})
				uni.hideLoading();
			}).catch(e =>{
				uni.hideLoading();
			});
		},
		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
		},
		// 點擊搜索框
		clickSearch() {
			console.log(222)
			uni.navigateTo({
				url: '/pages/product/search'
			});
		},
		navToDetailPage(item) {
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}
			uni.navigateTo({
				url: '/pages/product/productDuhuan?id=' + item.id
			});
		},
		navToDetailPages(e) {
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}
			uni.navigateTo({
				url: '/pages/product/product?id=' + e.id
			});
		},
		nav(url) {
			console.log(url)
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}
			uni.navigateTo({
				url,
				fail(error) {
					uni.switchTab({
						url
					});
				}
			});
		},
		navto(item) {
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}
			console.log(item)
			uni.navigateTo({
				url:'/pages/index/duihuanMore?type=' + item.type
			});
		}
	}
};
</script>
<style lang="scss">
.center {
	height: auto;
	min-height: 100%;
	background-color: #f8f8f8;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.top {
	width: 100%;
	height: 368rpx;
	position: relative;
	.top-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 368rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.carousel {
	width: 700rpx;
	height: 300rpx;
	border-radius: 14rpx;
	margin: -180rpx auto 0;
	margin-top: calc(-260rpx + var(--status-bar-height));
	.bor {
		border-radius: 14rpx;
		.carousel-item {
			image {
				width: 100%;
				height: 100%;
				border-radius: 14rpx;
			}
		}
	}
}
.swiper-dot {
	position: relative;
	z-index: 10;
	margin-top: -40rpx;
	display: flex;
	justify-content: center;

	.swiper-dots-item {
		width: 14rpx;
		height: 14rpx;
		background: #aaaaaa;
		border-radius: 50%;
		margin: 0 16rpx;
		// z-index: 999;
	}

	.action {
		background-color: #ffffff;
	}
}
.main {
	margin-top: 80rpx;
	display: flex;
	width: 100%;
	align-items: center;
	flex-wrap: wrap;
	.main-item {
		margin: 20rpx 0;
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.pic {
			width: 64rpx;
			height: 64rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.main-name {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-top: 10rpx;
		}
	}
}
.commodity {
	padding: 36rpx 20rpx;
	margin-top: 20rpx;
	display: flex;
	flex-wrap: wrap;
	background-color: #FFFFFF;
	.title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		padding:0 20rpx;
		.left {
			display: flex;
			justify-content: flex-start;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.font {
				margin-left: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
		.right {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.right-font {
				color: #a2a2a2;
				font-size: 26rpx;
				margin-right: 10rpx;
			}
			image {
				
				width: 16rpx;
				height: 26rpx;
			}
		}
	}
	.commodity-item {
		width: 334rpx;
		background: #ffffff;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 10rpx;
		margin: 0 10rpx;
		.commodity-prc {
			
			width: 330rpx;
			height: 330rpx;
			border-radius: 10rpx;
			position: relative;
			image {
				border-radius: 10rpx;
				width: 100%;
				height: 100%;
			}
			.fanli {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 344rpx;
				height: 96rpx;
				.fanli-bg {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 344rpx;
					height: 96rpx;
				}
				.fanli-font {
					position: relative;
					z-index: 10;
					color: #ffffff;
					height: 96rpx;
					align-items: flex-end;
					padding: 36rpx 10rpx 10rpx;
					.font-left {
						width: 226px;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
					}
					.font-right {
						font-size: 62rpx;
						font-family: Microsoft YaHei;
						font-weight: bold;
						color: #ffffff;
						text {
							font-size: 26rpx;
						}
					}
				}
			}
		}
		.commodity-info {
			padding: 28rpx 20rpx 35rpx 24rpx;
			.commodity-name {
				width: 100%;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.commodity-systom {
				margin-top: 16rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
			.commodity-price {
				margin-top: 34rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #e83f30;
				text {
					display: inline-block;
					padding-left: 6rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					text-decoration: line-through;
					color: #999999;
				}
			}
		}
	}
}
.recommend-box {
	width: 100%;
	padding: 0 32rpx;
	margin-top: 20rpx;
}
.f-header {
	display: flex;
	align-items: center;
	height: 92rpx;
	padding: 6rpx 30rpx 8rpx;
	border-radius: 12rpx 12rpx 0 0;
	color: #ffffff;
	background: #2e58ff;
	.tit-box {
		@extend %font-title-box;
		font-size: 20rpx;
		color: #ffffff;
		margin-left: 20rpx;
	}
	.iconenter {
		font-size: $font-lg + 2rpx;
		color: #ffffff;
	}

	.f-left-icon {
		font-size: 34rpx;
		border-right: 1rpx solid #ffffff;
		padding-right: 18rpx;
	}

	.iconfont {
		font-size: 26rpx;
	}
}

.guess-section {
	background-color: #FFFFFF;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 0 0 12rpx 12rpx;
	.guess-item {
		display: flex;
		width: 100%;
		padding: 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
		&:nth-last-child(1) {
			border-bottom: none;
		}
	}

	.image-wrapper {
		width: 168rpx;
		height: 168rpx;
		border-radius: 3px;
		image {
			width: 168rpx;
			height: 168rpx;
			opacity: 1;
		}
	}
	.info-wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}
	.title {
		font-size: 32rpx;
		color: $font-color-dark;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.price-box {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		.price-left {
			display: flex;
			flex-direction: column;
			.price {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 60rpx;
				height: 56rpx;
				line-height: 30rpx;
				color: #ff0000;
				font-size: 56rpx;
				font-weight: 700;
				.price-tip {
					font-size: 28rpx;
				}
			}
			.ot_price {
				margin-left: 4rpx;
				font-size: 28rpx;
				color: #ff0000;
				.price-tip {
					font-size: 22rpx;
				}
			}
		}
		.price-right {
			display: flex;
			flex-direction: column;
			.people {
				margin-top: 32rpx;
				font-weight: 700;
				color: #999999;
				font-size: 22rpx;
				text-align: right;
				margin-right: 4rpx;
			}
			.buyNow {
				margin-top: 68rpx;
				background: linear-gradient(180deg, #fd4646, #ff3535);
				border-radius: 26rpx;
				padding: 6rpx 18rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
}
</style>