Jingde-town-wechat-uniapp/store/store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex); //vue的插件机制

import api from '@/api/api.js'
import Position from '@/utils/position.js'

//Vuex.Store 构造器选项
const store = new Vuex.Store({
	state: {
		configList: [], //配置列表
		position : {//定位信息
			latitude : 0,
			longitude : 0,
		},
		userInfo : {},//用户信息
		cartList : [],//购物车列表
		banner : {},
		cartCheckboxValue : [],//选中的购物车
		spotList : [],//所有的地点
		spotGuideIndex : 0,//导览页面当前选择标签
		areaId : 0,//景区id
	},
	getters: {
		// 当前分区景点
		spotGuide(state){
			return state.spotList.filter(n => {
				
				// let i = state.spotGuideIndex < 2 ?
				// 0 : state.spotGuideIndex - 1
				
				if(state.spotGuideIndex != n.categoryId){
					return false
				}
				
				if(state.areaId != n.areaId){
					return false
				}
				
				return true
			})
		},
		// 地图点位
		spotGuideMarkers(state){
			let list = []
			
			state.spotList.forEach((n, index) => {
				
				if(state.spotGuideIndex != n.categoryId){
					return
				}
				
				if(state.areaId != n.areaId){
					return
				}
				
				list.push({
					latitude: n.spotLatitude,
					longitude: n.spotLongitude,
					categoryId : n.categoryId,
					width: 20, //图标icon 宽度
					height: 28 ,//图标icon 高度
					iconPath: `/static/image/tourGuide/${n.categoryId}.png`,  //图标
					id: index,
					callout: { //自定义标记点上方的气泡窗口 点击有效  
						content: n.spotName, //文本
						color: '#000', //文字颜色
						fontSize: 13, //文本大小
						borderRadius: 13, //边框圆角
						padding: '10',
						bgColor: '#fff', //背景颜色
						display: 'ALWAYS', //隐藏
					},
				})
			})
			
			return list
		},
	},
	mutations: {
		// 初始化配置
		initConfig(state){
			// api('getConfig', res => {
			// 	if(res.code == 200){
			// 		state.configList = res.result
			// 	}
			// })
			
			let config = ['getPrivacyPolicy', 'getUserAgreement']
			config.forEach(k => {
				api(k, res => {
					if (res.code == 200) {
						state.configList[k] = res.result
					}
				})
			})
		},
		// 设置气泡显示与隐藏
		setDisplay(state, id){
			state.spotList.forEach((n, index) => {
				if(n.id == id){
					// 显示气泡
					n.display = 'ALWAYS'
				}else{
					// 隐藏气泡
					n.display = 'BYCLICK'
				}
			})
		},
		// 导览页面设置当前选择的菜单，0-景点 1-美食店铺 2-民宿 3-厕所
		setSpotGuideIndex(state, index){
			state.spotGuideIndex = index
		},
		setAreaId(state, areaId){
			state.areaId = areaId
		},
		// 获取所有页面的轮播图
		getBanner(state){
			
			// 0-首页 1-遗产路径 2-我要跟拍 3-非遗体验 4-无忧服务 5申遗历程 6-遗产概况
			let config = ['path', 'follow', 'experience', 'service', 'course', 'yc']
			config.forEach((k, i) => {
				api('queryBannerList', {
					bannerCategoryType : i + 1,
				}, res => {
					if(res.code == 200){
						state.banner[k] = res.result
					}
				})
			})
			
		},
		getSpotList(state){
			api('querySpotList', {
				pageNo : 1,
				pageSize : 999999999,
			}, res => {
				if(res.code == 200){
					
					let spot = []
					
					res.result.records.forEach(n => {
						if(n.spotLatitude && n.spotLongitude){
							n.distance = 0
							n.display = 'BYCLICK'
							spot.push(n)
						}
					})
					
					Position.calculateDistance()
					
					state.spotList = spot
					
					this.commit('calculateDistance')
				}
			})
		},
		// 计算地点与自己的距离
		calculateDistance(state){
			if(state.spotList.length && state.position.latitude){
				
				state.spotList.forEach(n => {
					n.distance = parseFloat(Position.calculateDistance(
						state.position.latitude,
						state.position.longitude,
						n.spotLatitude,
						n.spotLongitude,
						3
					))
				})
				
				
				// 排序，最近的在前面
				state.spotList.sort((a, b) => a.distance - b.distance)
				
				
			}
		},
		// 查询购物车
		getCartList(state){
			api('queryShopcarList', {
				pageNo : 1,
				pageSize : 999999999,
			}, res => {
				if(res.code == 200){
					state.cartCheckboxValue = []
					res.result.forEach(n => {
						state.cartCheckboxValue.push(n.shopcar.id)
					})
					state.cartList = res.result
				}
			})
		},
		login(state){
			uni.showLoading({
				title: '登录中...'
			})
			
			uni.login({
				success(res) {
					if(res.errMsg != "login:ok"){
						return
					}
					
					api('wxLogin', {
						code : res.code,
						latitude : state.position.latitude,
						longitude : state.position.longitude,
					}, res => {
						
						uni.hideLoading()
						
						if(res.code != 200){
							return
						}
						
						state.userInfo = res.result.userInfo
						uni.setStorageSync('token', res.result.token)
						
						if(!state.userInfo.nickName || !state.userInfo.headImage){
							uni.navigateTo({
								url: '/pages_order/auth/wxUserInfo'
							})
						}else{
							uni.navigateBack(-1)
						}
					})
				}
			})
		},
		getUserInfo(state){
			api('getInfo', res => {
				if(res.code == 200){
					state.userInfo = res.result
				}
			})
		},
		logout(state){
			uni.showModal({
				title: '确认退出登录吗',
				success(r) {
					if(r.confirm){
						uni.removeStorageSync('token')
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}
				}
			})
		},
		getPosition(state){
			Position.getLocation(res => {
				state.position = res
				this.commit('calculateDistance')
			})
		},
		
	},
	actions: {},
})

export default store