Browse Source

store 配置

lilei 5 years ago
parent
commit
bd474949fe
8 changed files with 242 additions and 2 deletions
  1. 2 1
      App.vue
  2. 6 1
      main.js
  3. 13 0
      package-lock.json
  4. 19 0
      package.json
  5. 3 0
      pages.json
  6. 27 0
      store/$u.mixin.js
  7. 171 0
      store/index.js
  8. 1 0
      uni.scss

+ 2 - 1
App.vue

@@ -35,7 +35,8 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
+	@import "uview-ui/index.scss";
 	/*每个页面公共css */
 	page {
 		min-height: 100%;

+ 6 - 1
main.js

@@ -1,11 +1,16 @@
 import Vue from 'vue'
 import App from './App'
-
+import store from '@/store'
 Vue.config.productionTip = false
 
 App.mpType = 'app'
+import uView from "uview-ui"
+Vue.use(uView)
 
+let vuexStore = require("@/store/$u.mixin.js")
+Vue.mixin(vuexStore)
 const app = new Vue({
+	store,
     ...App
 })
 app.$mount()

+ 13 - 0
package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "qhsxKx-mini-html",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "uview-ui": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.5.7.tgz",
+      "integrity": "sha512-brNsxtXYNRFVISCehLXT+ZXmtaWh7gydrOokokYXvJUy5MkuZozMu+TdwA4mIo9y40FqKz6iO5gGWJuXyCSE5w=="
+    }
+  }
+}

+ 19 - 0
package.json

@@ -0,0 +1,19 @@
+{
+  "name": "qhsxKx-mini-html",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://git.chelingzhu.com/chelingzhu-web/qhsxKx-mini-html.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "uview-ui": "^1.5.7"
+  }
+}

+ 3 - 0
pages.json

@@ -1,4 +1,7 @@
 {
+	"easycom": {
+		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+	},
 	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
 		{
 			"path": "pages/index/index", // 首页

+ 27 - 0
store/$u.mixin.js

@@ -0,0 +1,27 @@
+import { mapState } from 'vuex'
+import store from "@/store"
+
+// 尝试将用户在根目录中的store/index.js的vuex的state变量,全部加载到全局变量中
+let $uStoreKey = [];
+try{
+	$uStoreKey = store.state ? Object.keys(store.state) : [];
+}catch(e){
+	
+}
+
+module.exports = {
+	created() {
+		// 将vuex方法挂在到$u中
+		// 使用方法为:如果要修改vuex的state中的user.name变量为"史诗" => this.$u.vuex('user.name', '史诗')
+		// 如果要修改vuex的state的version变量为1.0.1 => this.$u.vuex('version', '1.0.1')
+		this.$u.vuex = (name, value) => {
+			this.$store.commit('$uStore', {
+				name,value
+			})
+		}
+	},
+	computed: {
+		// 将vuex的state中的所有变量,解构到全局混入的mixin中
+		...mapState($uStoreKey)
+	}
+}

+ 171 - 0
store/index.js

@@ -0,0 +1,171 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+let lifeData = {};
+
+try{
+	// 尝试获取本地是否存在lifeData变量,第一次启动APP时是不存在的
+	lifeData = uni.getStorageSync('lifeData');
+}catch(e){
+	
+}
+
+// 需要永久存储,且下次APP启动需要取出的,在state中的变量名
+let saveStateKeys = ['vuex_isRemember','vuex_isUsrAuthYs','vuex_user', 'vuex_token', 'vuex_userData', 'vuex_versionInfo', 'vuex_carBrandList'];
+
+// 保存变量到本地存储中
+const saveLifeData = function(key, value){
+	// 判断变量名是否在需要存储的数组中
+	if(saveStateKeys.indexOf(key) != -1) {
+		// 获取本地存储的lifeData对象,将变量添加到对象中
+		let tmp = uni.getStorageSync('lifeData');
+		// 第一次打开APP,不存在lifeData变量,故放一个{}空对象
+		tmp = tmp ? tmp : {};
+		tmp[key] = value;
+		// 执行这一步后,所有需要存储的变量,都挂载在本地的lifeData对象中
+		uni.setStorageSync('lifeData', tmp);
+	}
+}
+const store = new Vuex.Store({
+	// 下面这些值仅为示例,使用过程中请删除
+	state: {
+		// 如果上面从本地获取的lifeData对象下有对应的属性,就赋值给state中对应的变量
+		// 加上vuex_前缀,是防止变量名冲突,也让人一目了然
+		vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {account:'',password:''},
+		vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
+		vuex_userData: lifeData.vuex_userData ? lifeData.vuex_userData : '',
+		vuex_isRemember: lifeData.vuex_isRemember ? lifeData.vuex_isRemember : true,
+		vuex_isUsrAuthYs: lifeData.vuex_isUsrAuthYs ? lifeData.vuex_isUsrAuthYs : false,
+		// 如果无需保存到本地永久存储,无需lifeData.xx方式
+		vuex_curOrderType: {orderType:'',orderTypeText:''}, // 当前开单的类型
+		vuex_carType: {modelId:'',carModelIds:[],modelLabel:[]},// 选择的车型数据
+		vuex_curCarInfo:{customer:null,vehicle:null}, // 开单时选择的用户信息
+		vuex_chooseServerList: [], // 开单时选择的服务
+		vuex_choosePartList: [], // 开单时选择的配件
+		vuex_customBundleList: [], // 客户已购套餐
+		vuex_chooseBundelServerList: [], // 从套餐选择的服务
+		vuex_chooseBundelPartList: [], // 从套餐选择的配件
+		vuex_allLookUp: [],  //  数据字典
+		vuex_paymentTypeList: [], // 支付方式
+		vuex_activityTemplateData: {},  //  发布活动 - 活动模板数据
+		vuex_activityThemeList: [],  //  发布活动 - 主题列表
+		vuex_activityReleaseData: {parentItemList: []},  //  发布活动 - 需提交的数据
+		vuex_releaseActivityData: [],  //  发布活动 - 需提交的活动数据(临时数据)
+		vuex_versionInfo: lifeData.vuex_versionInfo ? lifeData.vuex_versionInfo : {}, // 版本信息
+		vuex_carBrandList: lifeData.vuex_carBrandList ? lifeData.vuex_carBrandList : [] ,// 车型品牌数据
+		vuex_nowStaffData: {},  //  我的 - 员工信息 - 当前员工信息
+		vuex_nowRoleInfo:{},	//我的 - 员工角色 - 当前角色信息
+		vuex_knowledgeCount: 0, // 生意经总数
+		vuex_knowledgePageNo: 1, // 当前生意经的页码
+		vuex_socket: null, // 消息通知ws对象
+		vuex_wsMessageData: null, // 消息对象
+		vuex_heartInterId: null, // 心跳id
+		vuex_reConnectId: null, // 重连id
+		vuex_messagUnReadCount: 0, // 消息未读数
+	},
+	mutations: {
+		$uStore(state, payload) {
+			// 判断是否多层级调用,state中为对象存在的情况,诸如user.info.score = 1
+			let nameArr = payload.name.split('.');
+			let saveKey = '';
+			let len = nameArr.length;
+			if(nameArr.length >= 2) {
+				let obj = state[nameArr[0]];
+				for(let i = 1; i < len - 1; i ++) {
+					obj = obj[nameArr[i]];
+				}
+				obj[nameArr[len - 1]] = payload.value;
+				saveKey = nameArr[0];
+			} else {
+				// 单层级变量,在state就是一个普通变量的情况
+				state[payload.name] = payload.value;
+				saveKey = payload.name;
+			}
+			// 保存变量到本地,见顶部函数定义
+			saveLifeData(saveKey, state[saveKey])
+		},
+		// 创建通知消息websocket
+		$webSocket(state, params) {
+			let _this = this
+			let userInfo = state.vuex_userData
+			let url = getApp().globalData.baseUrl
+			let wsBaseUrl = url.indexOf("https:")>=0 ? url.replace("https:","wss:") : url.replace("http:","ws:")
+			let wsUrl = wsBaseUrl + 'websocket/' + 's' + userInfo.parentOrgId + 'o' + userInfo.orgId + 'u' + userInfo.userid + 'eapp'
+			// 开始连接
+			state.vuex_socket = uni.connectSocket({
+			    url: wsUrl, // ws 请求地址
+			    complete: ()=> {
+					console.log('连接complete回调!')
+					// 刷新未读消息数量
+					uni.$emit("updateUnreadcount",{msg:''})
+				}
+			});
+			// 打开连接
+			state.vuex_socket.onOpen(function(e){
+				console.log('连接成功!')
+			})
+			// 连接关闭
+			state.vuex_socket.onClose(function(e){
+				console.log('ws关闭!')
+			})
+			// 连接错误
+			state.vuex_socket.onError(function(e){
+				console.log('ws错误!', JSON.stringify(e))
+			})
+			// 接受消息
+			state.vuex_socket.onMessage(function(e){
+				if (e.data != 'pong'){
+				  let ret = JSON.parse(e.data)
+				  console.log('ws接收!', ret)
+				  state.vuex_wsMessageData = ret
+				  // 入厂车辆拍照识别
+				  if (ret.type == 'enter_store_vehicle'){}
+				  // 新未读消息
+				  if (ret.type == 'no_read_count'){
+					state.vuex_messagUnReadCount = ret.data.no_read_count
+				  }
+				}
+			})
+			// 发送心跳包
+			state.vuex_heartInterId = setInterval(function () {
+				console.log(state.vuex_socket.readyState)
+				if(state.vuex_socket.readyState != 1){
+					state.vuex_socket = uni.connectSocket({
+					    url: wsUrl, // ws 请求地址
+					    complete: ()=> {
+							console.log('连接complete回调!')
+							// 刷新未读消息数量
+							uni.$emit("updateUnreadcount",{msg:''})
+						}
+					});
+				}else{
+					_this.commit("$sendWebsocket","ping")
+				}
+			}, 10000)
+		},
+		// 关闭websocket
+		$closeWebsocket(state){
+			if(state.vuex_socket){
+				state.vuex_socket.close({
+					complete: function(e){
+						console.log('关闭websocket完成', e)
+						// 停止心跳
+						clearInterval(state.vuex_heartInterId)
+					}
+				})
+			}
+		},
+		// 发送消息
+		$sendWebsocket(state, msg) {
+		    state.vuex_socket.send({
+				data: msg,
+				complete: function(e){
+					console.log('ws发送完成', e)
+				}
+			})
+		},
+	}
+})
+
+export default store

+ 1 - 0
uni.scss

@@ -1,3 +1,4 @@
+@import 'uview-ui/theme.scss';
 /**
  * 这里是uni-app内置的常用样式变量
  *