4/28

VCCICCV · Apr 28, 2023 · c8ac09c · c8ac09c
1 parent 623d508
commit c8ac09c
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 50 deletions.
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "js-cookie": "^3.0.1",
     "node": "^19.8.1",
     "vue": "^2.6.14",
+    "vue-monoplasty-slide-verify": "^1.3.1",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },

diff --git a/src/main.js b/src/main.js
@@ -5,9 +5,10 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import '@/assets/css/reset.css'
 import Cookies from 'js-cookie'
-// Vue.use(request)
-Vue.config.productionTip = false
+import SlideVerify from 'vue-monoplasty-slide-verify';
 
+Vue.config.productionTip = false
+Vue.use(SlideVerify);
 Vue.use(Cookies)
 Vue.use(ElementUI,{size:'small'});// medium small mini
 new Vue({

diff --git a/src/views/admin/List.vue b/src/views/admin/List.vue
@@ -8,13 +8,15 @@
       <el-button style="margin-left: 1%" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
       <el-button style="margin-left: 1%" type="warning" @click="reset"><i class="el-icon-refresh"></i>重置</el-button>
     </div>
+    <!-- 列表 -->
     <el-table :data="tableData" stripe>
       <el-table-column prop="id" label="编号" width="50"></el-table-column>
       <el-table-column prop="username" label="用户名" width="90"></el-table-column>
       <el-table-column prop="phone" label="联系方式" width="110"></el-table-column>
       <el-table-column prop="email" label="邮箱" width="210"></el-table-column>
       <el-table-column prop="createtime" label="创建时间" width="100"></el-table-column>
       <el-table-column prop="updatetime" label="更新时间" width="100"></el-table-column>
+      <!-- 状态 -->
       <el-table-column label="状态" width="100">
         <template v-slot="scope">
           <el-switch v-model="scope.row.status" @change="changeStatus(scope.row)" active-color="#13ce66"
@@ -134,7 +136,7 @@ export default {
       request.put('/admin/update', row).then(res => {
         if (res.code === '200') {
           this.$notify.success('操作成功')
-          this.load()
+          this.load() 
         } else {
           this.$notify.error(res.msg)
         }

diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue
@@ -1,21 +1,11 @@
 <template>
 	<div>
-		<!-- <el-card class="cover" v-if="loginAdmin.id">
-		<slide-verify :l="42"
-					  :r="10"
-					  :w="310"
-					  :h="155"
-					  :accuracy="5"
-					  :imgs="['https://cdn.pixabay.com/photo/2022/11/09/12/23/lotus-7580478_960_720.jpg',
-					  'https://cdn.pixabay.com/photo/2017/08/29/12/07/adult-2693054_960_720.jpg',
-					  'https://cdn.pixabay.com/photo/2022/11/16/15/52/mushrooms-7596258_960_720.jpg']"
-					  slider-text="向右滑动"
-					  @success="onSuccess"
-					  @fail="onFail"
-					  @refresh="onRefresh"
-		></slide-verify>
-	  </el-card> -->
-
+		<el-card class="cover" v-if="loginAdmin.id">
+			<slide-verify :l="42" :r="10" :w="310" :h="155" :accuracy="2" :imgs="['https://cdn.pixabay.com/photo/2022/11/09/12/23/lotus-7580478_960_720.jpg',
+					'https://cdn.pixabay.com/photo/2017/08/29/12/07/adult-2693054_960_720.jpg',
+					'https://cdn.pixabay.com/photo/2022/11/16/15/52/mushrooms-7596258_960_720.jpg']" slider-text="向右滑动"
+				@success="onSuccess" @fail="onFail" @refresh="onRefresh"></slide-verify>
+		</el-card>
 		<div style="width: 80%px; height: 50%; background-color: white; border-radius: 10px;
 		  margin:auto; padding:50px">
 			<div style="margin: 30px; text-align: center; font-size: 30px; font-weight: bold; color: dodgerblue">登 录</div>
@@ -64,53 +54,66 @@ export default {
 				if (valid) {
 					request.post('/admin/login', this.admin).then(res => {
 						if (res.code === '200') {
+							// 请求成功后赋值,滑块出现
 							this.loginAdmin = res.data
-
-							this.$notify.success("登录成功")
-							Cookies.set('admin', JSON.stringify(this.loginAdmin))
-							this.$router.push('/')
+							this.$notify.success("请验证")
+							// Cookies.set('admin', JSON.stringify(this.loginAdmin))
+							// this.$router.push('/')
 						} else {
 							this.$notify.error(res.msg)
 						}
 					})
 				}
 			})
 		},
-		// onSuccess() { // 滑块验证通过之后触发的
-		// 	Cookies.set('admin', JSON.stringify(this.loginAdmin))
-		// 	this.$notify.success("登录成功")
-		// 	this.$router.push('/')
-		// },
-		// onFail() {
-		// 	console.log('onFail')
-		// },
-		// onRefresh() {
-		// 	console.log('refresh')
-		// }
+		// 滑块验证通过之后触发的
+		onSuccess() {
+			Cookies.set('admin', JSON.stringify(this.loginAdmin))
+			this.$notify.success("登录成功")
+			this.$router.push('/')
+		},
+		onFail() {
+			this.$notify.error("验证失败")
+			console.log('onFail')
+		},
+		onRefresh() {
+			console.log('refresh')
+		}
 	}
 }
 </script>
 
 <style>
 .btn {
-    display: block;
-    width: 100%;
-    height: 50px;
-    border-radius: 25px;
-    outline: none;
-    border: none;
-    background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
-    background-size: 200%;
-    font-size: 1.2rem;
-    color: #fff;
-    font-family: 'Poppins', sans-serif;
-    text-transform: uppercase;
-    margin: 1rem 0;
-    cursor: pointer;
-    transition: .5s;
+	display: block;
+	width: 100%;
+	height: 50px;
+	border-radius: 25px;
+	outline: none;
+	border: none;
+	background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
+	background-size: 200%;
+	font-size: 1.2rem;
+	color: #fff;
+	font-family: 'Poppins', sans-serif;
+	text-transform: uppercase;
+	margin: 1rem 0;
+	cursor: pointer;
+	transition: .5s;
 }
 
 .btn:hover {
-    background-position: right;
+	background-position: right;
+}
+
+.cover {
+	width: fit-content;
+	background-color: white;
+	position: absolute;
+	/* 居中置顶 */
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 1000;
 }
 </style>