From e3474cf91877c95964b0d87fe55311941e601d6b Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期四, 01 八月 2024 18:12:16 +0800
Subject: [PATCH] 创建和详情页面
---
src/views/login/index.vue | 167 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 113 insertions(+), 54 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 1db2464..e100b53 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,7 +1,13 @@
<template>
<div class="login-container">
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
-
+ <!-- <el-form
+ ref="loginForm"
+ :model="loginForm"
+ :rules="loginRules"
+ class="login-form"
+ auto-complete="on"
+ label-position="left"
+ >
<div class="title-container">
<h3 class="title">Login Form</h3>
</div>
@@ -37,100 +43,144 @@
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+ <svg-icon
+ :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
+ />
</span>
</el-form-item>
- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+ <el-button
+ :loading="loading"
+ type="primary"
+ style="width: 100%; margin-bottom: 30px"
+ @click.native.prevent="handleLogin"
+ >Login</el-button
+ >
<div class="tips">
- <span style="margin-right:20px;">username: admin</span>
+ <span style="margin-right: 20px">username: admin</span>
<span> password: any</span>
</div>
-
- </el-form>
+ </el-form> -->
+ <div class="wxLogin">
+ <el-card class="main_wx">
+ <wxlogin
+ :appid="appid"
+ :redirect_uri="redirect_uri"
+ scope="snsapi_login"
+ :href="href"
+ :state="state"
+ ></wxlogin>
+ <el-button @click="handleLogin">寮�鍙戠幆澧冧笓鐢ㄥ伔娓℃寜閽�</el-button>
+ </el-card>
+ </div>
</div>
</template>
<script>
-import { validUsername } from '@/utils/validate'
-
+import { validUsername } from "@/utils/validate";
+import wxlogin from "vue-wxlogin";
export default {
- name: 'Login',
+ name: "Login",
+ components: { wxlogin },
data() {
const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) {
- callback(new Error('Please enter the correct user name'))
+ callback(new Error("Please enter the correct user name"));
} else {
- callback()
+ callback();
}
- }
+ };
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
- callback(new Error('The password can not be less than 6 digits'))
+ callback(new Error("The password can not be less than 6 digits"));
} else {
- callback()
+ callback();
}
- }
+ };
return {
+ appid: "wx7103925df6236723",
+ redirect_uri: encodeURIComponent("https://www.9village.cn"),
+ state: "1",
+ href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7CiAgICAgICAgICBib3JkZXI6IG5vbmU7CiAgICAgICAgICB3aWR0aDogMTQwcHg7CiAgICAgICAgICBoZWlnaHQ6IDE0MHB4OwogICAgICAgIH0=", // 鑷畾涔夋牱寮忛摼鎺�
loginForm: {
- username: 'admin',
- password: '111111'
+ username: "admin",
+ password: "111111",
},
loginRules: {
- username: [{ required: true, trigger: 'blur', validator: validateUsername }],
- password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+ username: [
+ { required: true, trigger: "blur", validator: validateUsername },
+ ],
+ password: [
+ { required: true, trigger: "blur", validator: validatePassword },
+ ],
},
loading: false,
- passwordType: 'password',
- redirect: undefined
- }
+ passwordType: "password",
+ redirect: undefined,
+ };
},
watch: {
$route: {
- handler: function(route) {
- this.redirect = route.query && route.query.redirect
+ handler: function (route) {
+ this.redirect = route.query && route.query.redirect;
},
- immediate: true
- }
+ immediate: true,
+ },
+ },
+ mounted() {
+ this.getWeChatUrl();
},
methods: {
+ getWeChatUrl() {
+ // api.wachatQrUrl().then(res => {
+ // if (res && res.code === '0000') {
+ // const data = res.data
+ // this.appid = data.appId
+ // this.redirect_uri = data.wxCallbackUrl + 'weChatLogin'
+ // }
+ // })
+ },
showPwd() {
- if (this.passwordType === 'password') {
- this.passwordType = ''
+ if (this.passwordType === "password") {
+ this.passwordType = "";
} else {
- this.passwordType = 'password'
+ this.passwordType = "password";
}
this.$nextTick(() => {
- this.$refs.password.focus()
- })
+ this.$refs.password.focus();
+ });
},
handleLogin() {
- this.$refs.loginForm.validate(valid => {
- if (valid) {
- this.loading = true
- this.$store.dispatch('user/login', this.loginForm).then(() => {
- this.$router.push({ path: this.redirect || '/' })
- this.loading = false
- }).catch(() => {
- this.loading = false
- })
- } else {
- console.log('error submit!!')
- return false
- }
- })
- }
- }
-}
+ this.$router.push({ path: "/educational/student" });
+ // this.$refs.loginForm.validate((valid) => {
+ // if (valid) {
+ // this.loading = true;
+ // this.$store
+ // .dispatch("user/login", this.loginForm)
+ // .then(() => {
+ // this.$router.push({ path: this.redirect || "/" });
+ // this.loading = false;
+ // })
+ // .catch(() => {
+ // this.loading = false;
+ // });
+ // } else {
+ // console.log("error submit!!");
+ // return false;
+ // }
+ // });
+ },
+ },
+};
</script>
<style lang="scss">
/* 淇input 鑳屾櫙涓嶅崗璋� 鍜屽厜鏍囧彉鑹� */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-$bg:#283443;
-$light_gray:#fff;
+$bg: #283443;
+$light_gray: #fff;
$cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
@@ -141,6 +191,9 @@
/* reset element-ui css */
.login-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
.el-input {
display: inline-block;
height: 47px;
@@ -170,12 +223,18 @@
color: #454545;
}
}
+#weixin{
+ /* background-color: #fcf; */
+ display: flex;
+ justify-content: center;
+ margin-top: -20px;
+}
</style>
<style lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
+$bg: #ffffff;
+$dark_gray: #889aa4;
+$light_gray: #eee;
.login-container {
min-height: 100%;
--
Gitblit v1.8.0