全局手势解锁及设置界面配置完善

App.vue

@@ -12,6 +12,11 @@
 		},
 		onShow: function() {
 			console.log('App Show')
+			uni.getSystemInfo({
+				success: (res) => {
+					this.setSysteminfo(res)
+				}
+			})
 		},
 		onHide: function() {
 			console.log('App Hide')
@@ -30,7 +35,7 @@
 			})
 		},
 		methods:{
-			...mapMutations(["setTing"]),
+			...mapMutations(["setTing", "setSysteminfo"]),
 			// 更新
 			Upload() {
 				console.log("哈哈")

components/mpvueGestureLock/gestureLock.js

@@ -0,0 +1,175 @@
+class GestureLock {
+
+    constructor(containerWidth, cycleRadius) {
+        this.containerWidth = containerWidth; // 容器宽度
+        this.cycleRadius = cycleRadius; // 圆的半径
+
+        this.circleArray = []; // 全部圆的对象数组
+        this.checkPoints = []; // 选中的圆的对象数组
+        this.lineArray = []; // 已激活锁之间的线段数组
+        this.lastCheckPoint = 0; // 最后一个激活的锁
+        this.offsetX = 0; // 容器的 X 偏移
+        this.offsetY = 0; // 容器的 Y 偏移
+        this.activeLine = {}; // 最后一个激活的锁与当前位置之间的线段
+
+        this.windowWidth = wx.getSystemInfoSync().windowWidth; // 窗口大小(用于rpx 和 px 转换)
+
+        this.initCircleArray();
+    }
+
+    // 初始化 画布上的 9个圆
+    initCircleArray() {
+        const cycleMargin = (this.containerWidth - 6 * this.cycleRadius) / 6;
+        let count = 0;
+        for (let i = 0; i < 3; i++) {
+            for (let j = 0; j < 3; j++) {
+                count++;
+                this.circleArray.push({
+                    count: count,
+                    x: this.rpxTopx((cycleMargin + this.cycleRadius) * (j * 2 + 1)),
+                    y: this.rpxTopx((cycleMargin + this.cycleRadius) * (i * 2 + 1)),
+                    radius: this.rpxTopx(this.cycleRadius),
+                    check: false,
+                    style: {
+                        left: (cycleMargin + this.cycleRadius) * (j * 2 + 1) - this.cycleRadius + 'rpx',
+                        top: (cycleMargin + this.cycleRadius) * (i * 2 + 1) - this.cycleRadius + 'rpx',
+                        width: this.cycleRadius * 2 + 'rpx',
+                    }
+                });
+            }
+        }
+    }
+
+    onTouchStart(e) {
+        this.setOffset(e);
+        this.checkTouch({
+            x: e.touches[0].pageX - this.offsetX,
+            y: e.touches[0].pageY - this.offsetY
+        });
+    }
+
+    onTouchMove(e) {
+        this.moveDraw(e)
+    }
+
+    onTouchEnd(e) {
+        const checkPoints = this.checkPoints;
+        this.reset();
+        return checkPoints;
+    }
+
+    // 初始化 偏移量
+    setOffset(e) {
+        this.offsetX = e.currentTarget.offsetLeft;
+        this.offsetY = e.currentTarget.offsetTop;
+    }
+
+    // 检测当时 触摸位置是否位于 锁上
+    checkTouch({
+        x,
+        y
+    }) {
+        for (let i = 0; i < this.circleArray.length; i++) {
+            let point = this.circleArray[i];
+            if (this.isPointInCycle(x, y, point.x, point.y, point.radius)) {
+                if (!point.check) {
+                    this.checkPoints.push(point.count);
+                    if (this.lastCheckPoint != 0) {
+                        // 已激活锁之间的线段
+                        const line = this.drawLine(this.lastCheckPoint, point);
+                        this.lineArray.push(line);
+                    }
+                    this.lastCheckPoint = point;
+                }
+                point.check = true;
+                return;
+            }
+        }
+    }
+
+    // 画线 - 返回 样式 对象
+    drawLine(start, end) {
+        const width = this.getPointDis(start.x, start.y, end.x, end.y);
+        const rotate = this.getAngle(start, end);
+
+        return {
+            activeLeft: start.x + 'px',
+            activeTop: start.y + 'px',
+            activeWidth: width + 'px',
+            activeRotate: rotate + 'deg'
+        }
+
+    }
+
+    // 获取 画线的 角度
+    getAngle(start, end) {
+        var diff_x = end.x - start.x,
+            diff_y = end.y - start.y;
+        if (diff_x >= 0) {
+            return 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
+        } else {
+            return 180 + 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
+        }
+    }
+
+    // 判断 当前点是否位于 锁内
+    isPointInCycle(x, y, circleX, circleY, radius) {
+        return (this.getPointDis(x, y, circleX, circleY) < radius) ? true : false;
+    }
+
+    // 获取两点之间距离
+    getPointDis(ax, ay, bx, by) {
+        return Math.sqrt(Math.pow(ax - bx, 2) + Math.pow(ay - by, 2));
+    }
+
+    // 移动 绘制
+    moveDraw(e) {
+        // 画经过的圆
+        const x = e.touches[0].pageX - this.offsetX;
+        const y = e.touches[0].pageY - this.offsetY;
+        this.checkTouch({
+            x,
+            y
+        });
+
+        // 画 最后一个激活的锁与当前位置之间的线段
+        this.activeLine = this.drawLine(this.lastCheckPoint, {
+            x,
+            y
+        });
+    }
+
+    // 使 画布 恢复初始状态
+    reset() {
+        this.circleArray.forEach((item) => {
+            item.check = false;
+        });
+        this.checkPoints = [];
+        this.lineArray = [];
+        this.activeLine = {};
+        this.lastCheckPoint = 0;
+    }
+
+
+    // 获取 最后一个激活的锁与当前位置之间的线段
+    getActiveLine() {
+        return this.activeLine;
+    }
+
+    // 获取 圆对象数组
+    getCycleArray() {
+        return this.circleArray;
+    }
+
+    // 获取 已激活锁之间的线段
+    getLineArray() {
+        return this.lineArray;
+    }
+
+    // 将 RPX 转换成 PX
+    rpxTopx(rpx) {
+        return rpx / 750 * this.windowWidth;
+    }
+}
+
+export default GestureLock;

components/mpvueGestureLock/index.vue

@@ -0,0 +1,138 @@
+<template>
+	<view class="gesture-lock" :class="{error:error}" :style="{width: containerWidth +'rpx', height:containerWidth +'rpx'}"
+	 @touchstart.stop="onTouchStart" @touchmove.stop="onTouchMove" @touchend.stop="onTouchEnd">
+		<!-- 同级 v-for 的 key 重复会有问题，需要套一层。 -->
+		<!-- 9 个圆 -->
+		<view>
+			<view v-for="(item,i) in circleArray" :key="i" class="cycle" :class="{check:item.check}" :style="{left:item.style.left,top:item.style.top,width:item.style.width,height:item.style.width}">
+			</view>
+		</view>
+		<view>
+			<!-- 已激活锁之间的线段 -->
+			<view v-for="(item,i) in lineArray" :key="i" class="line" :style="{left:item.activeLeft,top:item.activeTop,width:item.activeWidth,transform:'rotate('+item.activeRotate+')'}">
+			</view>
+		</view>
+		<!-- 最后一个激活的锁与当前位置之间的线段 -->
+		<view class="line" :style="{left:activeLine.activeLeft,top:activeLine.activeTop,width:activeLine.activeWidth,transform:'rotate('+activeLine.activeRotate+')'}">
+		</view>
+	</view>
+</template>
+<script>
+	import GestureLock from './gestureLock';
+
+	export default {
+		name: 'index',
+		props: {
+			/**
+			 * 容器宽度
+			 */
+			containerWidth: {
+				type: [Number, String],
+				default: 0
+			},
+			/**
+			 * 圆的半径
+			 */
+			cycleRadius: {
+				type: [Number, String],
+				default: 0
+			},
+			/**
+			 * 已设定的密码
+			 */
+			password: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+		},
+		data() {
+			return {
+				gestureLock: {}, // 锁对象
+				circleArray: [], // 圆对象数组
+				lineArray: [], // 已激活锁之间的线段
+				activeLine: {}, // 最后一个激活的锁与当前位置之间的线段
+				error: false
+			}
+		},
+		methods: {
+			onTouchStart(e) {
+				this.gestureLock.onTouchStart(e);
+				this.refesh();
+			},
+
+			onTouchMove(e) {
+				this.gestureLock.onTouchMove(e);
+				this.refesh();
+			},
+
+			onTouchEnd(e) {
+				const checkPoints = this.gestureLock.onTouchEnd(e);
+				if (!this.password.length || checkPoints.join('') == this.password.join('')) {
+					this.refesh();
+					this.$emit('end', checkPoints);
+				} else {
+					this.error = true;
+					setTimeout(() => {
+						this.refesh();
+						this.$emit('end', checkPoints);
+					}, 800);
+				}
+
+			},
+			refesh() {
+				this.error = false;
+				this.circleArray = this.gestureLock.getCycleArray();
+				this.lineArray = this.gestureLock.getLineArray();
+				this.activeLine = this.gestureLock.getActiveLine();
+			}
+		},
+		mounted() {
+			this.gestureLock = new GestureLock(this.containerWidth, this.cycleRadius);
+			this.refesh();
+		}
+	}
+</script>
+
+<style scoped>
+	.gesture-lock {
+		margin: 0 auto;
+		position: relative;
+		box-sizing: border-box;
+		overflow: auto;
+	}
+
+	.gesture-lock .cycle {
+		box-sizing: border-box;
+		position: absolute;
+		border: 2px solid #66aaff;
+		border-radius: 50%;
+	}
+
+	.gesture-lock .cycle.check:after {
+		content: "";
+		display: block;
+		position: absolute;
+		width: 32%;
+		height: 32%;
+		border: 2px solid #66aaff;
+		border-radius: 50%;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.gesture-lock .line {
+		height: 0;
+		border-top: 2px solid #66aaff;
+		position: absolute;
+		transform-origin: left center;
+	}
+
+	.gesture-lock.error .cycle.check,
+	.gesture-lock.error .cycle.check:after,
+	.gesture-lock.error .line {
+		border-color: #ffa197;
+	}
+</style>

components/page-head.vue

@@ -0,0 +1,16 @@
+<template name="page-head">
+	<view class="uni-page-head">
+		<view class="uni-page-head-title">{{title}}</view>
+	</view>
+</template>
+<script>
+	export default {
+		name: "page-head",
+		props: {
+			title: {
+				type: String,
+				default: ""
+			}
+		}
+	}
+</script>

pages.json

@@ -41,6 +41,10 @@
 				// #endif
 			}
         }
+        ,{
+            "path" : "pages/syeminfo/syeminfo",
+            "style" : {}
+        }
     ],
 	"tabBar": {
 		"color":"#C0C4C6",					//tab 上的文字默认颜色	

pages/gesture/gesture.vue

@@ -1,19 +1,86 @@
 <template>
 	<view>
-		
+		<view  class="uni-page-head">
+			<view class="uni-page-head-title">手势图案</view>
+		</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<view>
+				<mpvue-gesture-lock :containerWidth="590" :cycleRadius="70" @end="onEnd" :password="password"></mpvue-gesture-lock>
+			</view>
+			<view class="uni-center">{{text}}</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import mpvueGestureLock from '@/components/mpvueGestureLock/index.vue';
+	import {
+		mapMutations
+	} from "vuex"
 	export default {
+		components: {
+			mpvueGestureLock
+		},
 		data() {
 			return {
-				
-			};
+				title: "手势图案",
+				password: [],
+				text: '请设定手势'
+			}
+		},
+		onShow() {
+			//#ifdef H5 
+				document.title="手势图案"
+			//#endif
+		},
+		methods: {
+			...mapMutations(["setWord"]),
+			onEnd(data) {
+				console.log(data, this.password)
+				if (this.password.length) {
+					if (this.password.join('') === data.join('')) {
+						this.setWord(data.join(''))
+						this.text = '手势设定完成'
+						this.password = []
+						this.tips()
+						setTimeout(function() {
+							uni.navigateBack({delta:1})
+						}, 1500);
+					} else {
+						this.text = '两次手势设定不一致'
+						this.password = []
+					}
+				} else {
+					this.text = '请确认手势设定'
+					this.password = data
+				}
+			},
+			tips() {
+				uni.showToast({
+					title:"设定成功"
+				})
+			}
 		}
 	}
 </script>
 
-<style lang="scss">
-
+<style scoped>
+	.uni-page-head{
+		padding: 34rpx;
+		text-align: center;
+	}
+	.uni-page-head-title{
+		display: inline-block;
+		padding: 0 40rpx;
+		font-size: 30rpx;
+		height: 88rpx;
+		line-height: 88rpx;
+		color: #BEBEBE;
+		box-sizing: border-box;
+		border-bottom: 1rpx solid #D8D8D8;
+	}
+	.uni-center{
+		text-align: center;
+		margin-top: 30rpx;;
+	}
 </style>

pages/index/index.vue

@@ -41,47 +41,75 @@
 			
 		}
 	}
+	.uni-common-mt{
+		position: fixed;
+		height: 100vh;
+		width: 100vw;
+		top: 0;
+		left: 0;
+		background: #fff;
+		display: flex;
+		flex-wrap: wrap;  
+		align-items: center;
+		.uni-center{
+			display: block;
+			width: 100vw;
+			text-align: center;
+			margin-top: 30rpx;
+			color: #999;
+		}
+	}
 </style>
 
 <template>
-	<view class="content">
-		<scroll-view scroll-y="true" :style="{height:scollHeight+'px'}">
-			<!-- 頭部 -->
-			<view class="top">
-				<view class="adress">
-					<text class="iconfont icon-dizhiguanli"></text>
-					<text @tap="cityList">{{city}}</text>
-				</view>
-				<view class="now_watch">
-					<view class="temp">
-						<text class="temp">{{now.tmp == undefined ? 0 : now.tmp}}°</text>
+	<view>
+		<view class="content">
+			<scroll-view scroll-y="true" :style="{height:scollHeight+'px'}">
+				<!-- 頭部 -->
+				<view class="top">
+					<view class="adress">
+						<text class="iconfont icon-dizhiguanli"></text>
+						<text @tap="cityList">{{city}}</text>
 					</view>
-					<view class="inline">
-						<view class="item">{{now.cond_txt == undefined ? "" : now.cond_txt}} {{now.hum == undefined ? "" : now.hum}}</view>
-						<view class="item">{{now.wind_dir == undefined ? "" : now.wind_dir}} {{now.wind_sc == undefined ? 0 : now.wind_sc}}级</view>
+					<view class="now_watch">
+						<view class="temp">
+							<text class="temp">{{now.tmp == undefined ? 0 : now.tmp}}°</text>
+						</view>
+						<view class="inline">
+							<view class="item">{{now.cond_txt == undefined ? "" : now.cond_txt}} {{now.hum == undefined ? "" : now.hum}}</view>
+							<view class="item">{{now.wind_dir == undefined ? "" : now.wind_dir}} {{now.wind_sc == undefined ? 0 : now.wind_sc}}级</view>
+						</view>
 					</view>
 				</view>
-			</view>
-			<view class="main">
-				<view class="items" v-for="(item,index) in list" :key="index">
-					<text></text>
-					<text></text>
-					<text></text>
+				<view class="main">
+					<view class="items" v-for="(item,index) in list" :key="index">
+						<text></text>
+						<text></text>
+						<text></text>
+					</view>
 				</view>
-			</view>
-			<!-- 底部 -->
-			<view class="bot">
-				
-			</view>
-		</scroll-view>
+				<!-- 底部 -->
+				<view class="bot">
+					
+				</view>
+			</scroll-view>
+		</view>
+		
+		<view class="uni-common-mt" v-if="setting.gesture && pwState">
+			<mpvue-gesture-lock :containerWidth="590" :cycleRadius="70" @end="onEnd"></mpvue-gesture-lock>
+			<view class="uni-center">{{text}}</view>
+		</view>
 	</view>
+	
 </template>
 
 <script >
 	import {
-		mapState
+		mapState,
+		mapMutations
 	} from "vuex"
 	import {getWeather, getFuture, gelocation, getAir, getLift} from "@/common/utils/https.js"
+	import mpvueGestureLock from '@/components/mpvueGestureLock/index.vue';
 	//#ifdef MP-WEIXIN
 		import amapFile from "@/common/utils/amap-wx.js"
 	//#endif
@@ -97,12 +125,19 @@
 					lng:""
 				},
 				air:{},
-				tips:""
+				tips:"",
+				text:"手势解锁"
 			}
 		},
+		components: {
+			mpvueGestureLock
+		},
 		computed: {
 			...mapState({
-				city: state => state.global.city
+				city: state => state.global.city,
+				setting: state => state.global.setting,
+				psWord: state => state.global.psWord,
+				pwState: state => state.global.pwState
 			})
 		},
 		onNavigationBarButtonTap() {  
@@ -115,9 +150,10 @@
 		onShow() {
 			//#ifdef H5 
 				document.title="首頁"
-			//#endif	
-			
+			//#endif
+				
 			this.getLocation()
+			
 		},
 		onReady() {
 			console.log("4")
@@ -147,6 +183,17 @@
 			console.log("9")
 		},
 		methods: {
+			...mapMutations(["setPwSta"]),
+			// 手势解锁
+			onEnd(data) {
+				console.log(data.join(''))
+				if(data.join('') === this.psWord) {
+					this.setPwSta(false)
+					console.log("解锁成功")
+				}else{
+					this.text = "手势不正确"
+				}
+			},
 			// 高德地址逆解析
 			getLocation() {
 				// 仅支持https
@@ -161,7 +208,9 @@
 			getWether(key) {
 				console.log("-------------------" , key)
 				var that = this
-				this.$tos.Loding("加載中...")
+				if(!this.setting.gesture) {
+					this.$tos.Loding("加載中...")
+				}
 				getWeather(key).then((res) =>{
 					if(res.result.HeWeather6[0].status === "ok") {
 						that.local.lat = res.result.HeWeather6[0].basic.lat

pages/setting/setting.vue

@@ -237,8 +237,7 @@
 				screenBrightness: '获取中',
 				keepscreenon: false,
 				SDKVersion: '',
-				enableUpdate: true,
-				indexPage: {}
+				enableUpdate: true
 			}
 		},
 		computed: {
@@ -246,14 +245,21 @@
 				setting: state => state.global.setting
 			})
 		},
-		onLoad() {
-			
+		watch:{
+			setting: {
+				handler: function(old, newold){
+					console.log(old, newold,"监听")
+				},    
+				deep: true
+			}
 		},
-		onShow() {
+		onLoad() {
 			//#ifndef H5
 				this.getScreenBrightness()
 			//#endif
-			
+		},
+		onShow() {
+			console.log(this.setting.gesture)
 		},
 		mounted() {
 			
@@ -263,6 +269,11 @@
 			updateInstruc() {
 				this.show = true
 			},
+			getsysteminfo() {
+				uni.navigateTo({
+					url:"/pages/syeminfo/syeminfo"
+				})
+			},
 			switchChange(e) {
 				console.log(e)
 				let dataset = e.currentTarget.dataset
@@ -284,7 +295,7 @@
 					// #ifndef H5
 					this.setKeepScreenOn()
 					// #endif
-				} else{
+				} else {
 					setting[switchparam] = (e.detail || {}).value
 					if(e.detail.value) {
 						setTimeout(function() {
@@ -292,11 +303,9 @@
 								url:"/pages/gesture/gesture"
 							})
 						}, 500);
-					}else{
-						return
 					}
 				}
-				console.log(this.setting)
+				console.log(this.setting,"-----------000000000")
 				this.setTing(setting)
 			},
 			screenBrightnessChanging(e) {
@@ -379,10 +388,15 @@
 					confirmColor: '#40a7e7',
 					success: (res) => {
 						if (res.confirm) {
+							// let setting = that.setting
+							// setting.gesture = false
+							// console.log(setting)
+							// that.setTing(setting)
+							uni.removeStorageSync("word")
 							uni.removeStorage({
 								key: 'setting',
 								success: (res) => {
-									
+									this.setTing({})
 									uni.showToast({
 										title: '初始化成功', icon:"none"
 									})

pages/syeminfo/syeminfo.vue

@@ -0,0 +1,141 @@
+<style lang="scss" scoped>
+	.systeminfo {
+		padding: 0 30rpx 0 30rpx;
+		background: #fff;
+		margin-bottom: 20rpx;
+		.brand {
+			font-family: DINCondensed-Bold;
+			height: 300rpx;
+			font-size: 100rpx;
+			color: #40a7e7;
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+			&image {
+				width: 100rpx;
+				height: 100rpx;
+				margin-right: 20rpx;
+			}
+			&text {
+			  line-height: 1em;
+			}
+		}
+		.item {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: flex-start;
+			font-size: 30rpx;
+			color: #000;
+			padding: 30rpx 15rpx;
+			height: 62rpx;
+			border-top: 1rpx solid #efefef;
+			.key {
+				line-height: 1em;
+			}
+			.value {
+				font-size: 24rpx;
+				line-height: 1em;
+				color: #777;
+			}
+		}
+		.item:last-child {
+			border-bottom: none;
+		}
+	}
+</style>
+
+<template>
+	<view class='systeminfo'>
+		<view class='brand'>
+			<image src='/static/mobile.png'></image>
+			<text>{{systeminfo.brand}}</text>
+		</view>
+		<view class='item' v-for='(item, index) in systeminfoArr' :key='index'>
+			<view class='key'>{{item.name}}</view>
+			<view class='value'>{{systeminfo[item.key]}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from "vuex"
+	export default {
+		data() {
+			return {
+				systeminfoObj: {},
+				systeminfoArr: [
+				  {
+				    key: 'brand',
+				    name: '手机品牌',
+				  },
+				  {
+				    key: 'model',
+				    name: '手机型号',
+				  },
+				  {
+				    key: 'pixelRatio',
+				    name: '设备像素比',
+				  },
+				  {
+				    key: 'screenWidth',
+				    name: '屏幕宽度',
+				  },
+				  {
+				    key: 'screenHeight',
+				    name: '屏幕高度',
+				  },
+				  {
+				    key: 'windowWidth',
+				    name: '可使用窗口宽度',
+				  },
+				  {
+				    key: 'windowHeight',
+				    name: '可使用窗口高度',
+				  },
+				  {
+				    key: 'statusBarHeight',
+				    name: '状态栏高度',
+				  },
+				  {
+				    key: 'language',
+				    name: '微信设置的语言',
+				  },
+				  {
+				    key: 'version',
+				    name: '微信版本号',
+				  },
+				  {
+				    key: 'system',
+				    name: '操作系统版本',
+				  },
+				  {
+				    key: 'platform',
+				    name: '客户端平台',
+				  },
+				  {
+				    key: 'fontSizeSetting',
+				    name: '用户字体大小设置(px)',
+				  },
+				  {
+				    key: 'SDKVersion',
+				    name: '客户端基础库版本',
+				  }
+				]
+			};
+		},
+		computed: {
+			...mapState({
+				systeminfo: state => state.global.systeminfo
+			})
+		},
+		onShow () {
+			console.log(this.systeminfo)
+		},
+	}
+</script>
+
+

store/modules/global.js

@@ -7,6 +7,10 @@ const state = {
 	signState:uni.getStorageSync('signState') || false,
 	sing: uni.getStorageSync("sing") || 0,
 	setting: uni.getStorageSync("setting") || {},
+	// 手势密码
+	psWord: uni.getStorageSync("word") || "",
+	pwState: true,
+	systeminfo:""
 }
 const mutations = {
 	setCity(state, value){
@@ -17,14 +21,22 @@ const mutations = {
 		state.signState = value
 	},
 	setSing(state, value) {
-		console.log(value)
 		uni.setStorageSync("sing", value)
 		state.sing = value
 	},
 	setTing(state, value) {
-		console.log(value)
 		uni.setStorageSync("setting", value)
 		state.setting = value
+	},
+	setWord(state, value) {
+		uni.setStorageSync("word", value)
+		state.psWord = value
+	},
+	setPwSta(state, value) {
+		state.pwState = value
+	},
+	setSysteminfo(state, value) {
+		state.systeminfo = value
 	}
 }
 const actions = {