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 [...personMap.values()];
+	return [...currentWinPersonMap.values()];
 }
 
-let vue = new Vue({
-	el: '#v1',
-	data: () => {
-		return {
-			awardTitle: '', // 标题
-			awardInfo: '', // 奖品信息
-			step: 1,
-			jumpList: [], // 中奖列表
-			persons: {}, // list 页面
-			personInfoList: personInfoList, // 人员名单
-			interval: null,
-			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, []);
-	},
-	watch: {
-		step(newValue, oldValue) {
-			if (newValue === 2) {
-				let wonList = [];
+/**
+ * 获取所有未中过奖名单
+ */
+function getNotWinPersonList() {
 	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) {
+	return personInfoMap;
+}
+
+/**
+ * 抽奖开始
+ */
+function start() {
+	getNotWinPersonList();
+	if (personInfoMap.size === 0) {
 		let status = window.confirm('没有未中奖人员, 去往抽奖结果页面');
 		status && window.open('./list.html');
-					this.jumpList = []
-					this.step = 1
-					this.statusText = '抽奖完成'
-					return
+		vue.activePersonList = [];
+		vue.step = 1;
+		vue.statusText = '抽奖完成';
+		return;
 	}
-				this.interval = setInterval(() => {
-					this.jumpList = getLotteryList(this.num, wonList);
+	vue.interval = setInterval(() => {
+		vue.activePersonList = getLotteryList();
 	}, 100);
-			} else {
-				if (this.interval) {
-					clearInterval(this.interval);
-					this.interval = null;
-					this.statusText = '抽奖完成'
-					this.saveData();
-				}
-			}
-		},
-	},
-	methods: {
-		saveData() {
+}
+
+/**
+ *
+ *  抽奖结束
+ */
+function end() {
 	let winPerson = {};
-			this.jumpList = getLotteryList(this.num, []);
+	let activePersonList = getLotteryList(true);
 	if (localStorage.getItem('yit')) {
 		winPerson = JSON.parse(localStorage.getItem('yit'));
 	}
-			winPerson[this.awardTitle] = this.jumpList;
+	winPerson[vue.awardTitle] = activePersonList;
 	localStorage['yit'] = JSON.stringify(winPerson);
-		},
-	},
-});
-function submit(event) {
+	vue.activePersonList = activePersonList;
+}
+
+/**
+ *
+ * @param {*} event enter 触发
+ */
+function next(event) {
 	if (event.keyCode === 13) {
 		if (vue.step === 1) {
 			vue.step = 2;
@@ -99,9 +80,51 @@ function submit(event) {
 			if (vue.interval) {
 				clearInterval(vue.interval);
 				vue.interval = null;
-				vue.statusText = '抽奖完成'
-				vue.saveData();
+				vue.statusText = '抽奖完成';
+				end();
 			}
 		}
 	}
 }
+
+let vue = new Vue({
+	el: '#v1',
+	data: () => {
+		return {
+			awardTitle: '', // 标题
+			awardInfo: '', // 奖品信息
+			step: 1, // 控制页面显示 1 显示中奖标题模块 2 抽奖页面
+			activePersonList: [], // 中奖列表
+			winPersonList: {}, // 中奖人员名单 列表页面
+			interval: null,
+			num: 0, // 抽奖人数
+			statusText: '抽奖中...',
+		};
+	},
+	created() {
+		this.init()
+	},
+	watch: {
+		step(newValue) {
+			if (newValue === 2) {
+				start();
+			}
+		},
+	},
+	methods: {
+		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;
+			}
+		},
+	},
+});