zd/pages/index/index.vue

<template>
	<view class="container">
		<view class="status_bar"></view>
		<!-- 轮播图 start -->
		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
			<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
				@click="bannerNavToUrl(item)">
				<image :src="item.pic" />
			</swiper-item>
		</swiper>
		<!-- 轮播图 end -->
		<!-- 认证提示 statr-->
		<view class="rznow flex" v-if="userInfo && userInfo.is_real == 0">
			<view class="rztit">
				您尚未完成身份认证，前往认证>>
			</view>
			<view class="rzbtn" @click="navTo('/pages/shop/attestation')">
				立即认证
			</view>
		</view>
		<!-- 认证提示 ed-->
		<!-- 功能区 start-->
		<view class="gn-wrap flex">
			<view class="gn-icon flex">
				<image src="../../static/icon/in1.png" mode="heightFix"></image>
			</view>
			<view class="gn-tit">
				<view class="">
					租电
				</view>
				<view class="tit-jj">
					以租代购 方便省钱
				</view>
			</view>
			<view class="gn-btn" @click="navTo('/pages/shop/rent',1)">
				立即租电
			</view>
		</view>
		<view class="gn-wrap flex">
			<view class="gn-icon flex">
				<image src="../../static/icon/in2.png" mode="heightFix"></image>
			</view>
			<view class="gn-tit">
				<view class="">
					配件购买
				</view>
				<view class="tit-jj">
					扫码租电
				</view>
			</view>
			<view class="gn-btn" @click="navTo('/pages/shop/accessory')">
				立即购买
			</view>
		</view>
		<!-- 功能区 ed-->
		<!-- 附近门店 start -->
		<view class="fjmd" @click="navTo('/pages/shop/shopTab')">
			<image src="../../static/img/md.png" mode=""></image>
		</view>
		<!-- 附近门店 end -->
		<!-- 使用攻略 start -->
		<view class="sygl">
			<view class="sy-top">
				<image src="../../static/icon/gl-top.png" mode=""></image>
				<view class="top-tit">
					使用攻略
				</view>
			</view>
			<view class="sy-content flex">
				<view class="content-item flex">
					<image src="../../static/icon/sy1.png" mode="" class="sy-icon"></image>
					<view class="">
						注册账号
					</view>
				</view>
				<image src="../../static/icon/jt.png" mode="" class="jt"></image>
				<view class="content-item flex">
					<image src="../../static/icon/sy2.png" mode="" class="sy-icon"></image>
					<view class="">
						实名认证
					</view>
				</view>

				<image src="../../static/icon/jt.png" mode="" class="jt"></image>
				<view class="content-item flex">
					<image src="../../static/icon/sy3.png" mode="" class="sy-icon"></image>
					<view class="">
						购买租电
					</view>
				</view>

				<image src="../../static/icon/jt.png" mode="" class="jt"></image>
				<view class="content-item flex">
					<image src="../../static/icon/sy4.png" mode="" class="sy-icon"></image>
					<view class="">
						开始使用
					</view>
				</view>

			</view>
		</view>
		<!-- 使用攻略 ed-->
	</view>
</template>

<script>
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		loadIndexs
	} from '@/api/index.js'
	import {
		mapState
	} from "vuex"
	export default {

		data() {
			return {
				carouselList: [], //轮播图

			};
		},
		computed: {
			...mapState('user', ['userInfo', 'hasLogin']),
		},
		// 切换或显示后变动tabbar颜色
		onHide() {

		},
		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() {
			this.getIndex()
		},
		onReady() {

		},
		// #ifdef MP
		onShareAppMessage(options) {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			let url = currentPage.route; //当前页面url
			let item = currentPage.options; //如果要获取url中所带的参数可以查看options
			let shareObj = {
				title: '租电', // 默认是小程序的名称(可以写slogan等)
				path: url, // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '',
				desc: '',
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			// 判断是否可以邀请
			// if (this.userInfo.uid) {
			// 	shareObj.path += '&spread=' + this.userInfo.uid;
			// }
			return shareObj;
		},
		// #endif
		methods: {
			getIndex() {
				loadIndexs().then(res => {
					this.carouselList = res.data.banner
				})
			},
			navTo(url, ind = 0) {
				if (ind == 1) {
					if (!this.hasLogin) {
						// 保存地址
						saveUrl();
						// 登录拦截
						interceptor();
					} else {
						if (this.userInfo.is_real == 1) {
							uni.navigateTo({
								url,
								fail(e) {
									console.log(e);
								}
							});

						} else {
							uni.showModal({
								title: '提示',
								content: '您当前未进行实名认证，是否立即实名认证？',
								complete(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/shop/attestation'
										})
									}
								}
							})
						}

					}
				} else {
					if (url.indexOf('http') != -1) {
						window.location.href = url
					} else {
						uni.navigateTo({
							url,
							fail() {
								uni.switchTab({
									url
								})
							}
						})
					}
				}

			},

		}
	};
</script>

<style lang="scss">
	page {
		background: #ffff;
		min-height: 100%;
		height: auto;
	}

	// 顶部搜索
	.top-search {
		height: 80rpx;
		padding: 0 20rpx;
		background-color: #fff;

		.top-logo {
			width: 50rpx;
			// height: 50rpx;
			margin-right: 10rpx;

			image {
				width: 48rpx;
			}

		}

		.search-box {
			justify-content: center;
			width: 698rpx;
			height: 60rpx;
			background: #EEEEEE;
			// box-shadow: 0px 10rpx 20rpx 0px rgba(4, 114, 69, 0.22);
			border-radius: 30rpx;

			.search {
				width: 34rpx;
				height: 34rpx;
			}

			.search-font {
				margin-left: 14rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #CBCBCB;
			}
		}
	}

	// 顶部轮播图
	.top-swiper {
		width: 750rpx;
		height: 473rpx;

		// margin: 20rpx 0 0;
		image {
			width: 750rpx;
			height: 473rpx;
		}
	}

	.jg {
		height: 20rpx;
		background: #F8F8F8;
	}

	// 分类
	.cate-section {
		justify-content: space-around;
		background-color: #fff;
		padding: 0rpx 0 30rpx;

		.cate-item {
			flex-grow: 0;
			width: 20%;
			flex-direction: column;
			text-align: center;
			align-items: center;
			justify-content: center;

			.img-wrapper {
				width: 112rpx;
				height: 112rpx;
				border-radius: 20rpx;
				position: relative;

				image {
					width: 112rpx;
					height: 112rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.item-title {
				margin-top: 15rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
			}
		}
	}

	.rznow {
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		background-color: #78797a;
		height: 74rpx;
		padding: 0 42rpx 0 52rpx;

		.rztit {
			line-height: 74rpx;
		}

		.rzbtn {
			width: 127rpx;
			height: 47rpx;
			text-align: center;
			line-height: 47rpx;
			background: #35d9b7;
			border-radius: 24rpx;
			font-size: 22rpx;
		}
	}

	.gn-wrap {
		margin: 45rpx auto;
		width: 670rpx;
		height: 219rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
		border-radius: 30rpx;
		padding-right: 47rpx;

		.gn-icon {
			flex-shrink: 0;
			width: 210rpx;
			height: 100%;
			justify-content: center;

			image {
				height: 112rpx;
			}
		}

		.gn-tit {
			flex-grow: 1;
			font-weight: bold;
			color: #333333;
			font-size: 36rpx;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;

			.tit-jj {
				font-size: 25rpx;
				font-weight: 500;
				color: #666666;
				padding-top: 32rpx;
			}
		}

		.gn-btn {
			flex-shrink: 0;
			width: 127rpx;
			border: 1px solid $base-color;
			border-radius: 28rpx;
			font-size: 25rpx;
			font-weight: 500;
			color: $base-color;
			line-height: 55rpx;
			text-align: center;
		}
	}

	.fjmd {
		width: 708rpx;
		height: 233rpx;
		margin: 20rpx auto;

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

	.sygl {
		.sy-top {
			position: relative;
			height: 100rpx;

			image {
				width: 369rpx;
				height: 8rpx;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}

			.top-tit {
				font-size: 32rpx;
				font-weight: bold;
				color: #4A2723;
				text-align: center;
				line-height: 100rpx;
			}

		}

		.sy-content {
			padding: 0 10rpx 65rpx;

			.content-item {
				flex-grow: 1;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 22rpx;
				font-weight: 500;
				color: #4A2723;
			}

			.sy-icon {
				width: 90rpx;
				height: 90rpx;
				margin-bottom: 15rpx;
			}

			.jt {
				flex-shrink: 0;
				width: 14rpx;
				height: 15rpx;
				margin-top: 40rpx;
				align-self: flex-start;
			}
		}
	}
</style>