xpl/pages/index/index.vue

<template>
	<view class="center">
		<view class="top">
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<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">
			<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>
</template>
<script>
import { getTime } from '@/utils/rocessor.js';
import { loadIndexs } from '@/api/user.js';
import { saveUrl,interceptor } from '@/utils/loginUtils.js';
import { mapState,mapMutations } from 'vuex';
export default {
	computed: {
		...mapState('user',['userInfo', 'baseURL', 'hasLogin', 'urlFile'])
	},
	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:''
				},
				{
					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: []
		};
	},
	//页面加载即刻发生
	onShow() {
		this.loadDate();
	},
	methods: {
		async loadDate() {
			const obj = this;
			loadIndexs({}).then(({ data }) => {
				console.log(data);
				obj.carouselList = data.banner;
				obj.swiperLength = data.banner.length;
				obj.commodityList = data.likeInfo;
			});
		},
		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
		},
		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){
			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
				    });
				}
			});
		}
	}
};
</script>
<style lang="scss">
.center {
	height: auto;
	min-height: 100%;
	background-color: #ffffff;
}
.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;
	.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 14rpx;
	margin-top: 20rpx;
	display: flex;
	flex-wrap: wrap;
	.commodity-item {
		width: 348rpx;
		background: #ffffff;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		margin: 10rpx 6rpx 0;
		border-radius: 10rpx;
		.commodity-prc {
			width: 344rpx;
			height: 344rpx;
			border-radius: 10rpx;
			position: relative;
			image {
				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;
				}
			}
		}
	}
}
</style>