fix: # 代码优化

src/list.html

@@ -11,7 +11,7 @@
 	</head>
 	<body>
 		<div id="v1">
-			<div v-for="(item, index) in persons" class="list-item">
+			<div v-for="(item, index) in winPersonList" class="list-item">
 				<h3 class="title">{{index}}</h3>
 				<div class="jump-box" style="margin-left: 20px">
 					<div v-for="it in item" class="jump-item">{{it.name}} {{it.firstLevelDepartment}}</div>

src/lottery.html

@@ -10,7 +10,7 @@
 		<script src="./vue.js"></script>
 		<script></script>
 	</head>
-	<body onkeydown="submit(event)">
+	<body onkeydown="next(event)">
 		<div id="v1" data-num="10">
 			<div class="step1" v-if="step === 1">
 				<div class="title">{{awardTitle}}</div>
@@ -19,7 +19,7 @@
 			<div v-if="step !== 1" class="step2">
 				<h3>幸运员工&nbsp;&nbsp;({{statusText}})</h3>
 				<div class="jump-box">
-					<div v-for="item in jumpList" class="jump-item">{{item.name}} {{item.firstLevelDepartment}}</div>
+					<div v-for="item in activePersonList" class="jump-item">{{item.name}} {{item.firstLevelDepartment}}</div>
 				</div>
 			</div>
 		</div>

src/lottery.js

-function getLotteryList(num = 20, wonList = []) {
-	let personInfoList = [...personInfoMap.values()];
-	if (num > personInfoList.length) {
-		vue.num = personInfoList.length;
-		num = personInfoList.length;
+/**
+ *
+ * @param {*} status true: 把中奖名单删除
+ */
+function getLotteryList(status = false) {
+	let notWinPersonList = [...personInfoMap.values()];
+	if (vue.num > notWinPersonList.length) {
+		vue.num = notWinPersonList.length;
 	}
-	let personMap = new Map();
-	while (personMap.size < num) {
-		let random = Math.floor(Math.random() * personInfoList.length);
-		if (!wonList.includes(personInfoList[random]['name'])) {
-			personMap.set(personInfoList[random]['name'], personInfoList[random]);
+	// 该批次名单
+	let currentWinPersonMap = new Map();
+	while (currentWinPersonMap.size < vue.num) {
+		let random = Math.floor(Math.random() * notWinPersonList.length);
+		currentWinPersonMap.set(notWinPersonList[random]['name'], notWinPersonList[random]);
+		if (status) {
+			notWinPersonList.splice(random, 1); // 删除中奖人员名单
+		}
+	}
+	return [...currentWinPersonMap.values()];
+}
+
+/**
+ * 获取所有未中过奖名单
+ */
+function getNotWinPersonList() {
+	let winPerson = localStorage.getItem('yit');
+	if (winPerson) {
+		winPerson = JSON.parse(winPerson);
+		for (const key in winPerson) {
+			winPerson[key].forEach(val => {
+				personInfoMap.delete(val.name);
+			});
+		}
+	}
+	return personInfoMap;
+}
+
+/**
+ * 抽奖开始
+ */
+function start() {
+	getNotWinPersonList();
+	if (personInfoMap.size === 0) {
+		let status = window.confirm('没有未中奖人员, 去往抽奖结果页面');
+		status && window.open('./list.html');
+		vue.activePersonList = [];
+		vue.step = 1;
+		vue.statusText = '抽奖完成';
+		return;
+	}
+	vue.interval = setInterval(() => {
+		vue.activePersonList = getLotteryList();
+	}, 100);
+}
+
+/**
+ *
+ *  抽奖结束
+ */
+function end() {
+	let winPerson = {};
+	let activePersonList = getLotteryList(true);
+	if (localStorage.getItem('yit')) {
+		winPerson = JSON.parse(localStorage.getItem('yit'));
+	}
+	winPerson[vue.awardTitle] = activePersonList;
+	localStorage['yit'] = JSON.stringify(winPerson);
+	vue.activePersonList = activePersonList;
+}
+
+/**
+ *
+ * @param {*} event enter 触发
+ */
+function next(event) {
+	if (event.keyCode === 13) {
+		if (vue.step === 1) {
+			vue.step = 2;
+		} else if (vue.step === 2) {
+			if (vue.interval) {
+				clearInterval(vue.interval);
+				vue.interval = null;
+				vue.statusText = '抽奖完成';
+				end();
+			}
 		}
 	}
-	return [...personMap.values()];
 }
 
 let vue = new Vue({
@@ -20,88 +93,38 @@ let vue = new Vue({
 		return {
 			awardTitle: '', // 标题
 			awardInfo: '', // 奖品信息
-			step: 1,
-			jumpList: [], // 中奖列表
-			persons: {}, // list 页面
-			personInfoList: personInfoList, // 人员名单
+			step: 1, // 控制页面显示 1 显示中奖标题模块 2 抽奖页面
+			activePersonList: [], // 中奖列表
+			winPersonList: {}, // 中奖人员名单 列表页面
 			interval: null,
-			num: 0, // 人数
-			statusText: '抽奖中...'
+			num: 0, // 抽奖人数
+			statusText: '抽奖中...',
 		};
 	},
 	created() {
-		this.persons = localStorage.getItem('yit') ? JSON.parse(localStorage.getItem('yit')) : {};
-		let urlParams = window.decodeURI(location.href).split('?')[1]?.split('&');
-		let params = {};
-		if (urlParams) {
-			urlParams.forEach(val => {
-				let v = val.split('=');
-				params[v[0]] = v[1];
-			});
-			this.num = params.num;
-			this.awardTitle = params.title;
-			this.awardInfo = params.info;
-		}
-		this.jumpList = getLotteryList(this.num, []);
+		this.init()
 	},
 	watch: {
-		step(newValue, oldValue) {
+		step(newValue) {
 			if (newValue === 2) {
-				let wonList = [];
-				let winPerson = localStorage.getItem('yit');
-				if (winPerson) {
-					winPerson = JSON.parse(winPerson);
-					for (const key in winPerson) {
-						winPerson[key].forEach(val => {
-							wonList.push(val.name);
-							personInfoMap.delete(val.name);
-						});
-					}
-				}
-				if(personInfoMap.size === 0) {
-					let status = window.confirm('没有未中奖人员, 去往抽奖结果页面');
-					status && window.open('./list.html');
-					this.jumpList = []
-					this.step = 1
-					this.statusText = '抽奖完成'
-					return
-				}
-				this.interval = setInterval(() => {
-					this.jumpList = getLotteryList(this.num, wonList);
-				}, 100);
-			} else {
-				if (this.interval) {
-					clearInterval(this.interval);
-					this.interval = null;
-					this.statusText = '抽奖完成'
-					this.saveData();
-				}
+				start();
 			}
 		},
 	},
 	methods: {
-		saveData() {
-			let winPerson = {};
-			this.jumpList = getLotteryList(this.num, []);
-			if (localStorage.getItem('yit')) {
-				winPerson = JSON.parse(localStorage.getItem('yit'));
+		init() {
+			this.winPersonList = JSON.parse(localStorage.getItem('yit') || '{}');
+			let urlParams = window.decodeURI(location.href).split('?')[1]?.split('&');
+			let params = {};
+			if (urlParams) {
+				urlParams.forEach(val => {
+					let v = val.split('=');
+					params[v[0]] = v[1];
+				});
+				this.num = params.num;
+				this.awardTitle = params.title;
+				this.awardInfo = params.info;
 			}
-			winPerson[this.awardTitle] = this.jumpList;
-			localStorage['yit'] = JSON.stringify(winPerson);
 		},
 	},
 });
-function submit(event) {
-	if (event.keyCode === 13) {
-		if (vue.step === 1) {
-			vue.step = 2;
-		} else if (vue.step === 2) {
-			if (vue.interval) {
-				clearInterval(vue.interval);
-				vue.interval = null;
-				vue.statusText = '抽奖完成'
-				vue.saveData();
-			}
-		}
-	}
-}