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">
			<view class="rztit">
				您尚未完成身份认证，前往认证>>
			</view>
			<view class="rzbtn">
				立即认证
			</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">
				立即租电
			</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">
				立即购买
			</view>
		</view>
		<!-- 功能区 ed-->
		<!-- 附近门店 start -->
		<view class="fjmd">
			<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 {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		share
	} from '@/api/wx';
	import {
		loadIndexs,
		articleList,
		notify,
		guide_map
	} from '@/api/index.js';
	import {
		storeList,
	} from '@/api/shop.js';
	import onUser from "./indexComponents/onUser.vue"
	import noUser from "./indexComponents/noUser.vue"
	// #ifdef MP-WEIXIN
	import {
		openGetAddress
	} from '@/utils/rocessor.js';
	// #endif
	export default {
		components: {
			onUser,
			noUser
		},
		data() {
			return {
				carouselList: [],//轮播图
				alertImgMapIndex: 0, //引导图流程次数
				showAlertMap: false, //是否显示引导图
				userOn: 0, //加载显示页面0不加载1加载已购买车辆页面2加载未购买商品页面
				articleNum: 0, //消息数
				notifyNum: 0, //警报数
				follow: 0, //0为未查询1为关注，2为未关注
				// #ifndef APP
				loadFollow: false, //判断是否已经提示过关注公众号
				// #endif
				loadShopData: false, //是否已经加载过商家信息
				alertImgMapList: [], //引导图列表
				notifyTime: '', //定时器获取消息
				shareData: {}, //分享数据
			};
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo']),
			...mapState(['firstUse']),
			...mapState('shop', ['shopDetail']),
			notify() {
				return this.notifyNum + this.articleNum
			}
		},
		// 切换或显示后变动tabbar颜色
		onHide() {
			console.log('隐藏');
			uni.setTabBarStyle({
				backgroundColor: '#FFFFFF'
			})
			if (this.userOn == 1) {
				this.$refs.onuser.outGetCartInfo()
			}
			// 关闭消息定时器
			clearInterval(this.notifyTime)
		},
		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
			// 初始化商家
			// this.storeList({})
			// 获取定位数据
			this.getlocation();
			// 加载分享信息
			// this.share()
		},
		onShow() {
			this.loadIndexs();
			// 判断是否有用户如果是则显示
			if (this.userOn == 1) {
				this.$refs.onuser.setTabbar()
				this.$refs.onuser.onStartGetCartInfo()
			}
		},
		onReady() {
			// 判断是否为用户首次加载
			if (!this.firstUse) {
				this.showAlertMap = true;
				this.guide_map();
				uni.hideTabBar();
			}
		},
		// #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: this.shareData.title, // 默认是小程序的名称(可以写slogan等)
				path: url, // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: this.shareData.img,
				desc: this.shareData.synopsis,
				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: {
			...mapMutations('user', ['setAddress']),
			// #ifdef APP
			...mapMutations(['setFx']),
			// #endif
			...mapMutations(['setFirstUse']),
			...mapMutations('shop', ['setShopInfo']),
			// 获取引导图
			guide_map() {
				guide_map().then((e) => {
					this.alertImgMapList = e.data;
					console.log(e);
				}).catch((e) => {
					console.log(e);
				})
			},
			showcartAlert() {
				console.log(this.myCartList[this.chickedMyCart]);
			},
			// 首次加载点击事件
			alertClick(e) {
				// 关闭弹窗
				this.showAlertMap = false
				uni.showTabBar()
				// 设置已经加载过引导图
				this.setFirstUse(true)
			},

			// 获取经纬度
			getlocation() {
				let obj = this;
				// #ifdef H5 || APP
				uni.getLocation({
					type: 'gcj02',
					success(e) {
						obj.getlocationSetInit(e)
					},
					fail(e) {
						if(e.errCode==22){
							uni.showModal({
								title: '定位开启错误',
								content: '请查看是否已经开启定位服务',
								showCancel: false,
							});
						}
						console.log(e, 'cw');
					}
				})
				// #endif
				// #ifdef MP-WEIXIN
				openGetAddress().then((e) => {
					console.log("授权");
					wx.startLocationUpdateBackground({
						type: 'gcj02',
						success: (e) => {
							console.log(e);
							// 调用鉴定位置变化事件
							wx.onLocationChange((data) => {
								obj.getlocationSetInit(data)
							})
						},
						fail() {
							// uni.getLocation({
							// 	type: 'gcj02',
							// 	success(e) {
							// 		obj.getlocationSetInit(e)
							// 	},
							// 	fail(e) {
							// 		console.log(e, 'cw');
							// 	}
							// })
						}
					})
				})
				// #endif
			},
			// 获取经纬度完毕后回调处理
			getlocationSetInit(data) {
				const obj = this;
				try {
					console.log(data, '位置数据');
					// 保存当前经纬度
					obj.setAddress({
						latitude: data.latitude,
						longitude: data.longitude
					})
					// 判断是否已经加载过最近商家信息
					if (!obj.loadShopData) {
						obj.storeList({
							latitude: data.latitude,
							longitude: data.longitude
						})
						obj.loadShopData = true;
					}
				} catch (e) {
					console.log(e, 'cww');
				}
			},
			// 初始化加载商家数据
			storeList(data) {
				let obj = this;
				storeList(data).then((e) => {
					// console.log(e.data.list, '商家数据列表');
					// console.log(e.data.list.length > 0, '商家数据结果');
					// 保存商店数据
					if (e.data.list.length > 0) {
						obj.setShopInfo(e.data.list[0]);
						obj.$nextTick(() => {
							if (obj.userOn == 2) {
								obj.$refs.nouser.init()
							}
						})
					}
				}).catch((e) => {
					console.log(e);
				})
			},
			// 首页初始化
			loadIndexs() {
				const that = this;
				// 获取首页数据
				loadIndexs({
					store_id: that.shopDetail.id
				}).then((e) => {
					
					// #ifdef APP
					if(+e.data.app_auth==0){
						that.setFx(true)
					}
					// #endif
					
					// #ifdef H5 || MP
					// 判断是否已经关注了公众号
					if (e.data.subscribe) {
						that.follow = 1
					} else {
						// 设置已经提示过
						that.follow = 2
						// 判断是否未提示过
						if (!that.loadFollow) {
							that.loadFollow = true;
							uni.showModal({
								title: '提示',
								content: '您未关注公众号是否马上关注',
								cancelText: '取消',
								confirmText: '关注',
								success: res => {
									if (res.confirm) {
										uni.navigateTo({
											url: './follow',
										});
									}
								},
							});
						}
					}
					// #endif
					// 用户车辆大于0则显示用户车辆信息
					if (e.data.is_car > 0) {
						that.userOn = 1;
						// 完成加载后再加载方法防止节点未渲染完成无法找到节点对象
						that.$nextTick(function() {
							// 刷新用户数据
							that.$refs.onuser.loadCard();
							that.$refs.onuser.setTabbar();
						})
					} else {
						that.userOn = 2;
						that.$nextTick(function() {
							// 刷新用户数据
							that.$refs.nouser.init()
						})
					}
				}).catch((e) => {
					console.log(e);
				})
				// 判断是否已经用户登录
				if (that.hasLogin) {
					if (that.notifyTime) {
						clearInterval(that.notifyTime)
					}
					that.getNotfyNum();
					that.notifyTime = setInterval(() => {
						that.getNotfyNum();
					}, 60000)
				}
			},
			getNotfyNum() {
				const that = this;
				// 查询消息数量
				articleList({}, 1).then((e) => {
					that.articleNum = +e.data.not_read_count
				})
				notify().then((e) => {
					that.notifyNum = +e.data.not_read_count
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: 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: 288rpx;
		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>