food_wechat/store/index.js

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

//把vuex作为插件引入到Vue示例中 ps:注册
Vue.use(Vuex)

//引用全局设定
import settings from '@/settings.js'
const {
	host,
	baseURL,
	listPath,
	spuPath,
	skuPath,
	sitePath,
	logoPath
} = settings

const store = new Vuex.Store({
	//全局状态
	state: {
		shop_id: null, //商铺id
		site_id: null, //当前站点id
		userInfo: {
			name: null,
			photo: null,
			sex: '0',
			tel: null,
			token: null,
			topic_prefix: null
		}, //用户信息

		orderList: [], //订单列表
		siteList: [], //站点列表
		menuList: [], //分类列表
		spuList: [], //spu列表
		skuList: [], //sku列表
		shopCon: {}, //商铺信息
		cartList: [], //购物车列表 结构:[{"spu_id":"id","skuG":[sku_id,sku_id],"conutG":[数量,数量],"priceG":[单价,单价]},{.....}]

		tabbarCurrent: 0, //tabbar的当前激活项
		cartShow: false, //列表页 购物车折叠显隐
		mqttState: false, //标记mqtt服务器是否已经连接成功
	},
	//修改状态
	mutations: {
		//设置 二维码获取商铺id
		setShopId(state, shop_id) {
			state.shop_id = shop_id;
		},
		//设置 二维码获取站点id
		setSiteId(state, site_id) {
			state.site_id = site_id;
		},
		//设置 列表页 购物车折叠显隐
		setCartShow(state, val) {
			Vue.set(state, 'cartShow', val)
		},
		//设置 标记用户登录状态
		setMqttState(state, val) {
			Vue.set(state, 'mqttState', val)
		},
		//设置tabbar当前激活像
		setTabbarCurrent(state, val) {
			Vue.set(state, 'tabbarCurrent', val)
		},
		//把用户信息 从本地缓存 提取到内存当中
		setUserInfo(state, obj) {
			Vue.set(state.userInfo, 'name', obj.name)
			Vue.set(state.userInfo, 'photo', obj.photo)
			Vue.set(state.userInfo, 'sex', obj.sex)
			Vue.set(state.userInfo, 'tel', obj.tel)
			Vue.set(state.userInfo, 'token', obj.token)
			Vue.set(state.userInfo, 'topic_prefix', obj.topic_prefix)
		},
		//清除用户信息
		clearUserInfo(state) {
			Vue.set(state.userInfo, 'name', null)
			Vue.set(state.userInfo, 'photo', null)
			Vue.set(state.userInfo, 'sex', '0')
			Vue.set(state.userInfo, 'tel', null)
			Vue.set(state.userInfo, 'token', null)
			Vue.set(state.userInfo, 'topic_prefix', null)
		},
		//设置订单列表
		setOrderList(state, list) {
			state.orderList = list
		},
		//设置站点列表
		setSiteList(state, list) {
			state.siteList = list
		},
		//设置分类列表
		setMenuList(state, list) {
			state.menuList = list
		},
		//设置spu列表
		setSpuList(state, list) {
			state.spuList = list
		},
		//设置sku列表
		setSkuList(state, list) {
			state.skuList = list
		},
		//设置商铺信息
		setShopCon(state, obj) {
			state.shopCon = obj
		},
		//清空购物车
		clearCartList(state) {
			Vue.set(state, 'cartList', [])
		},
		// 设置购物车列表
		setCartList(state, obj) {
			let isExisting = false
			state.cartList.forEach(item => {
				// 判断是否存在相同的skuG组合
				if (JSON.stringify(item.skuG) === JSON.stringify(obj.skuG)) {
					// 如果存在相同的skuG组合，则将现有商品的数量加1
					for (let i = 0; i < item.countG.length; i++) {
						// 使用 Vue.set 或 this.$set 来确保 Vue 能够响应这个变化
						Vue.set(item.countG, i, item.countG[i] + 1)
					}
					isExisting = true
				}
			})
			// 如果购物车中不存在相同的skuG组合，则将新商品添加到购物车列表中
			if (!isExisting) {
				state.cartList.push(obj)
			}
		},
		//给spu添加最低价格字段
		addMinPriceToSpuList(state) {
			state.spuList.forEach((spuItem, index) => {
				let totalPrice = 0
				spuItem.bind_sku.forEach(skuGroup => {
					let minPrice = 0
					let sku
					skuGroup.value.forEach(skuId => {
						sku = state.skuList.find(sku => skuId == sku
							.id)
						if (Number(minPrice) === 0 || Number(minPrice) > Number(sku
								.price)) {
							minPrice = Number(sku.price)
						}
					})
					totalPrice += Number(minPrice)
				})
				// 添加新的字段 js不能用this.$set(注意)
				Vue.set(spuItem, 'minPrice', parseFloat(totalPrice.toFixed(2)))
			})
		},
		//给spu.bind_sku.skuG 字段添加解构数据 ps:此函数在加载完skuList后执行
		addSkuGToSpuList(state) {
			state.spuList.forEach(spuItem => {
				spuItem.bind_sku.forEach(item => {
					const skuG = item.value.map(id => state.skuList.find(sku => Number(sku
						.id) === Number(id)))
					Vue.set(item, 'skuG', skuG)
				})
			})
		}
	},
	//异步请求
	actions: {
		//获取订单列表
		async fetchOrderList({
			state,
			commit
		}) {
			try {
				// 请求订单列表
				const res = await uni.$u.http.get('/Api/Check/getOrderList', {
					header: {
						'Token': state.userInfo.token
					}
				})

				if (res.data.status === 1) {
					// 对订单列表处理
					const orderList = res.data.orderList.map(item => {
						let tempPS

						try {
							// 解析 product_snapshot 字段
							tempPS = JSON.parse(item.product_snapshot)
						} catch (error) {
							console.error(`product_snapshot 解析失败: ${error.message}`)
							tempPS = []
						}

						// 遍历 product_snapshot 数组
						tempPS = tempPS.map(spu => {
							// 给 spu_photo 添加完整路径
							spu.spu_photo = spu.spu_photo.map(photo => spuPath + photo)

							// 遍历 sku_arr，给 sku_photo 添加完整路径
							spu.sku_arr = spu.sku_arr.map(sku => {
								sku.sku_photo = sku.sku_photo.map(photo => skuPath +
									photo)
								return sku
							})

							return spu
						})

						return {
							...item,
							product_snapshot: tempPS
						}
					})

					// 提交更新到 Vuex 的状态
					commit('setOrderList', orderList)
				} else {
					commit('setOrderList', [])
				}
			} catch (error) {
				console.error(`获取订单列表失败: ${error.message}`)
				commit('setOrderList', [])
			}
		},
		//获取站点列表
		async fetchSiteList({
			state,
			commit
		}) {
			await uni.$u.http.get('/Api/Normal/getSiteList', {
				params: {
					shop_id: state.shop_id
				}
			}).then(res => {
				if (res.data.status === 1) {
					// 反序列化处理 字段
					res.data.siteList.forEach(site => {
						site.photo = JSON.parse(site.photo)
						site.photo.forEach((p, index) => {
							site.photo[index] = sitePath + p
						})
					})
					//更新数据
					commit('setSiteList', res.data.siteList)
				} else {
					commit('setSiteList', [])
				}
			})
		},
		//获取分类列表
		async fetchMenuList({
			state,
			commit
		}) {
			await uni.$u.http.get('/Api/Normal/getCategoryList', {
				params: {
					shop_id: state.shop_id
				}
			}).then(res => {
				if (res.data.status === 1) {
					// 反序列化处理 字段
					res.data.categoryList.forEach(category => {
						category.photo = JSON.parse(category.photo)
						category.photo.forEach((p, index) => {
							category.photo[index] = listPath + p
						})
					})
					//更新数据
					commit('setMenuList', res.data.categoryList)
				} else {
					commit('setMenuList', [])
				}
			})
		},
		// 获取spu列表
		fetchSpuList({
			state,
			commit
		}) {
			return new Promise((resolve, reject) => {
				uni.$u.http.get('/Api/Normal/getSpuList', {
					params: {
						shop_id: state.shop_id
					}
				}).then(res => {
					if (res.data.status === 1) {
						// 反序列化处理 字段
						res.data.spuList.forEach(spu => {
							spu.photo = JSON.parse(spu.photo)
							spu.photo.forEach((p, index) => {
								spu.photo[index] = spuPath + p
							})
							spu.bind_sku = JSON.parse(spu.bind_sku)
							spu.bind_sku.forEach(bs => {
								Vue.set(bs, 'skuG',
									[]
								) //添加对应sku组 字段 临时先加一个空数组 在另外的方法等skuList异步加载完成在 添加 结构这个字段
							})
							Vue.set(spu, 'bind_sku', spu.bind_sku)
							Vue.set(spu, 'pro_tag', JSON.parse(spu.pro_tag))
						})
						//更新数据
						commit('setSpuList', res.data.spuList)
						resolve() // 请求成功后 resolve
					} else {
						commit('setSpuList', [])
						reject() // 请求失败时 reject
					}
				}).catch(error => {
					reject(error) // 请求出错时 reject
				})
			})
		},
		// 获取sku列表
		fetchSkuList({
			state,
			commit
		}) {
			return new Promise((resolve, reject) => {
				uni.$u.http.get('/Api/Normal/getSkuList', {
					params: {
						shop_id: state.shop_id
					}
				}).then(res => {
					if (res.data.status === 1) {
						// 反序列化处理 字段
						res.data.skuList.forEach(sku => {
							sku.photo = JSON.parse(sku.photo)
							sku.photo.forEach((p, index) => {
								sku.photo[index] = skuPath + p
							})
						})
						//更新数据
						commit('setSkuList', res.data.skuList)
						resolve() // 请求成功后 resolve
					} else {
						commit('setSkuList', [])
						reject() // 请求失败时 reject
					}
				}).catch(error => {
					reject(error) // 请求出错时 reject
				})
			})
		},
		//获取商铺信息
		async fetchShopCon({
			state,
			commit
		}) {
			await uni.$u.http.get('/Api/Normal/getShopCon', {
				params: {
					shop_id: state.shop_id
				}
			}).then(res => {
				if (res.data.status === 1) {
					// 反序列化处理 字段
					res.data.shopCon.logo = JSON.parse(res.data.shopCon.logo)
					res.data.shopCon.logo.forEach((p, index) => {
						res.data.shopCon.logo[index] = logoPath + p
					})
					//更新数据
					commit('setShopCon', res.data.shopCon)
				} else {
					commit('setShopCon', {})
				}
			})
		},
	}
})

export default store