YuKangTang/pages/home/index.vue

<template>
	<view class="indexBox">
		<view class="navbox">
			<view class="flex topIconBox">
				<image @click="navTo('/pages/index/shopTab?type=1')" class="topIcon" src="../../static/icon/shop.png"
					mode="widthFix"></image>
				<image @click="navTo('/pages/index/notice')" class="topIcon" src="../../static/icon/message.png"
					mode="widthFix">
				</image>
				<view class="topIconNum flex" v-if="notify>0">
					<text>
						{{notify}}
					</text>
				</view>
			</view>
		</view>
		<no-user ref='nouser'></no-user>
		<!-- 引导图 -->
		<view class="alertMap" v-if='showAlertMap&&alertImgMapList.length>0' @touchmove.stop.prevent="()=>{}">
			<swiper class="alertMapBox" :indicator-dots='true'>
				<swiper-item v-for="(item,index) in alertImgMapList">
					<image class="alertImgMap" :src="item.image" mode="heightFix">
					</image>
				</swiper-item>
			</swiper>
			<view class="postionbuttom" @click="alertClick">
				关闭
			</view>
		</view>
		<!-- #ifndef APP -->
		<view class="follow flex" @click="navTo('./follow')" v-if="follow==2">
			<view class="">
				请关注微信“绿津智能电动车”公众号
			</view>
			<view class="flex">
				<text>
					前往关注
				</text>
				<image class="followIcon" src="../../static/icon/next2.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- #endif -->
	</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 noUser from "@/pages/index/indexComponents/noUser.vue"
	// #ifdef MP-WEIXIN
	import {
		openGetAddress
	} from '@/utils/rocessor.js';
	// #endif
	export default {
		components: {
			noUser
		},
		data() {
			return {
				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']),
			share() {
				// console.log('加载分享');
				const that = this;
				// 请求获取默认数据
				share({}).then(({
					data
				}) => {
					// console.log('分享回调', data);
					that.shareData = data.data
				});
			},
			// 获取引导图
			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">
	$paddingJg:40rpx;

	page,
	.indexBox {
		height: 0;
		min-height: 100%;
	}

	.follow {
		z-index: 9999;
		font-size: $font-base;
		color: #FFFFFF;
		padding: 20rpx 30rpx;
		line-height: 1;
		position: fixed;
		bottom: 0;
		/* #ifdef H5 */
		bottom: 50px;
		/* #endif */
		left: 0;
		right: 0;
		text-align: center;
		background-color: rgba($color: #0BBB62, $alpha: 0.75);

		.followIcon {
			width: 36rpx;
			height: 36rpx;
		}
	}

	// 弹窗引导页
	.alertMap {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba($color: #000000, $alpha: 0.75);
		text-align: center;
		z-index: 9999999;

		.postionbuttom {
			position: absolute;
			bottom: 20rpx;
			left: 150rpx;
			right: 150rpx;
			background-color: $color-green;
			border-radius: 99rpx;
			color: #FFFFFF;
			padding: 26rpx 0;

		}

		.alertMapBox {
			height: 100%;
			padding-top: 10rpx;
			padding-bottom: 120rpx;
		}

		.alertImgMap {
			height: 100%;
		}
	}

	/deep/ .itemTitleBox {
		padding: 30rpx $paddingJg;

		.itemTitle {
			font-size: 32rpx;

		}

		.itemIcon {
			width: 20rpx;
			margin-left: 10rpx;
		}

		.tager {
			font-size: 24rpx;
			font-weight: 400;
		}
	}

	.container {
		line-height: 1;
		font-weight: bold;
	}

	.navbox {
		/* #ifdef APP */
		padding-top: var(--status-bar-height);
		/* #endif */
		/* #ifdef H5 || MP */
		padding-top: 30rpx;
		/* #endif */
		padding-bottom: 30rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		z-index: 99;
	}

	.topIconBox {
		padding: 0 $paddingJg;
		position: relative;

		.topIconNum {
			position: absolute;
			top: -10rpx;
			right: 20rpx;
			font-size: $font-sm;
			color: #FFFFFF;
			min-width: 30rpx;
			min-height: 30rpx;
			border-radius: 100rpx;
			background-color: $color-red;
			padding: 5rpx;
			justify-content: center;
		}

		.topIcon {
			width: 45rpx;
			height: 45rpx;
		}
	}

	.greenText {
		color: $color-green;
	}
</style>