angelo
/
web-base-pc
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(login): cursor pointer

This commit is contained in:
woody 2025-05-08 17:21:34 +08:00
parent 4b606dbb43
commit 090245eea2
2 changed files with 184 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

352
src/views/login.vue
View File

@ -6,9 +6,7 @@
--> -->
<template> <template>
<div class="page"> <div class="page">
<img class="local" <img class="local" src="../assets/images/local.gif" alt="" />
src="../assets/images/local.gif"
alt="">
<!-- <div class="videoContainer"> <!-- <div class="videoContainer">
<video class="fullscreenVideo" <video class="fullscreenVideo"
id="bgVid" id="bgVid"
@ -22,239 +20,250 @@
</div> --> </div> -->
<!-- <div class="title">{{ '致力于成为全球抗衰领军企业' }}</div> --> <!-- <div class="title">{{ '致力于成为全球抗衰领军企业' }}</div> -->
<div class="kuang"> <div class="kuang">
<div class="tit1">{{ '会员登录' }}</div> <div class="tit1">{{ "会员登录" }}</div>
<el-form :model="loginForm" <el-form
:rules="rules" :model="loginForm"
ref="loginForm" :rules="rules"
label-position="top" ref="loginForm"
label-width="100px" label-position="top"
class="demo-ruleForm"> label-width="100px"
<el-form-item :label="'会员编号'" class="demo-ruleForm"
prop="username"> >
<el-input :placeholder="'会员编号'" <el-form-item :label="'会员编号'" prop="username">
v-model="loginForm.username"></el-input> <el-input
:placeholder="'会员编号'"
v-model="loginForm.username"
></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="'登录密码'" <el-form-item :label="'登录密码'" class="pr" prop="password">
class="pr" <el-input
prop="password"> v-model="loginForm.password"
<el-input v-model="loginForm.password" type="password"
type="password" show-password
show-password :placeholder="'登录密码'"
:placeholder="'登录密码'" @keyup.enter.native="handleLogin"
@keyup.enter.native="handleLogin"> >
<!-- <i slot="suffix" <!-- <i slot="suffix"
class="el-input__icon el-icon-view"></i> --> class="el-input__icon el-icon-view"></i> -->
</el-input> </el-input>
<div class="pa" <div class="pa" @click="forGet">{{ "忘记密码" }}</div>
@click="forGet">{{ '忘记密码' }}</div>
</el-form-item> </el-form-item>
<el-form-item prop="code" <el-form-item prop="code" :label="'验证码'">
:label="'验证码'"> <el-input
<el-input v-model="loginForm.code" v-model="loginForm.code"
:placeholder="'验证码'" :placeholder="'验证码'"
style="width: 63%" style="width: 63%"
@keyup.enter.native="handleLogin"> @keyup.enter.native="handleLogin"
>
</el-input> </el-input>
<div class="login-code"> <div class="login-code">
<img :src="codeUrl" <img :src="codeUrl" @click="getCode" class="login-code-img" />
@click="getCode"
class="login-code-img" />
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-button type="primary" class="sumBtn" :loading="fullscreenLoading" <el-button
@click="handleLogin">{{ '登录' }}</el-button> type="primary"
class="sumBtn"
:loading="fullscreenLoading"
@click="handleLogin"
>{{ "登录" }}</el-button
>
</div> </div>
<el-dialog :title="'修改密码'" <el-dialog
:visible.sync="dialogVisible" :title="'修改密码'"
:close-on-click-modal="false" :visible.sync="dialogVisible"
width="35%" :close-on-click-modal="false"
center> width="35%"
center
>
<div class="changePwd"> <div class="changePwd">
<el-form ref="loginObj" <el-form
:model="loginObj" ref="loginObj"
:rules="rulesObj" :model="loginObj"
label-width="80px"> :rules="rulesObj"
label-width="80px"
>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="16"> <el-col :span="16">
<el-form-item :label="'会员编号'" <el-form-item :label="'会员编号'" prop="memberCode">
prop="memberCode"> <el-input
<el-input :placeholder="'请输入会员编号'" :placeholder="'请输入会员编号'"
v-model="loginObj.memberCode"></el-input> v-model="loginObj.memberCode"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="16"> <el-col :span="16">
<el-form-item :label="'新密码'" <el-form-item :label="'新密码'" prop="newPassword">
prop="newPassword"> <el-input
<el-input v-model="loginObj.newPassword" v-model="loginObj.newPassword"
:type="flag1?'text':'password'" :type="flag1 ? 'text' : 'password'"
style="border:1px solid #fff;" style="border: 1px solid #fff"
:placeholder="'请输入新密码'"> :placeholder="'请输入新密码'"
<i slot="suffix" >
:class="[flag1?'el-icon-minus':'el-icon-view']" <i
style="font-size:18px;" slot="suffix"
autocomplete="auto" :class="[flag1 ? 'el-icon-minus' : 'el-icon-view']"
@click="flag1=!flag1" /> style="font-size: 18px"
autocomplete="auto"
@click="flag1 = !flag1"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8" <el-col :span="8" class="righTxt">
class="righTxt"> {{ "6-26大小写字母数字组合" }}
{{ '6-26大小写字母数字组合' }}
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="16"> <el-col :span="16">
<el-form-item :label="'确认密码'" <el-form-item :label="'确认密码'" prop="loginPassword">
prop="loginPassword"> <el-input
<el-input v-model="loginObj.loginPassword" v-model="loginObj.loginPassword"
:type="flag2?'text':'password'" :type="flag2 ? 'text' : 'password'"
style="border:1px solid #fff;" style="border: 1px solid #fff"
:placeholder="'确认密码'"> :placeholder="'确认密码'"
<i slot="suffix" >
:class="[flag2?'el-icon-minus':'el-icon-view']" <i
style="font-size:18px;" slot="suffix"
autocomplete="auto" :class="[flag2 ? 'el-icon-minus' : 'el-icon-view']"
@click="flag2=!flag2" /> style="font-size: 18px"
autocomplete="auto"
@click="flag2 = !flag2"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8" <el-col :span="8" class="righTxt">
class="righTxt"> {{ "请确认密码" }}
{{'请确认密码'}}
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="16"> <el-col :span="16">
<el-form-item :label="'联系方式'" <el-form-item :label="'联系方式'" prop="phone">
prop="phone"> <el-input
<el-input :placeholder="'请输入联系方式'" :placeholder="'请输入联系方式'"
v-model="loginObj.phone"></el-input> v-model="loginObj.phone"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="16"> <el-col :span="16">
<el-form-item :label="'验证码'+':'" <el-form-item :label="'验证码' + ':'" prop="code">
prop="code"> <el-input v-model="loginObj.code" :placeholder="'验证码'">
<el-input v-model="loginObj.code" <i
:placeholder="'验证码'"> slot="suffix"
<i slot="suffix" @click="submitForm('loginObj')"
@click="submitForm('loginObj')" class="hqyzm1"
class="hqyzm1" :class="isSend ? 'hui' : ''"
:class="isSend?'hui':''">{{getSmsCode}}</i></el-input> >{{ getSmsCode }}</i
></el-input
>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</div> </div>
<span slot="footer" <span slot="footer" class="dialog-footer">
class="dialog-footer"> <el-button @click="dialogVisible = false">{{ "取消" }}</el-button>
<el-button @click="dialogVisible = false">{{ '取消' }}</el-button> <el-button type="primary" @click="submitLoginObj('loginObj')"
<el-button style="color:#fff;background: #cb2b2b;" >确定</el-button
@click="submitLoginObj('loginObj')">{{ '确定' }}</el-button> >
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { getCodeImg, forgetPwd, forgetSms } from '@/api/login' import { getCodeImg, forgetPwd, forgetSms } from "@/api/login";
export default { export default {
data() { data() {
let validatePwd = (rule, value, callback) => { let validatePwd = (rule, value, callback) => {
if (this.loginObj.newPassword != value) { if (this.loginObj.newPassword != value) {
callback(new Error('与新密码不一致，请重新输入')) callback(new Error("与新密码不一致，请重新输入"));
} else { } else {
callback() callback();
} }
} };
return { return {
fullscreenLoading:false, fullscreenLoading: false,
isSend: false, isSend: false,
getSmsCode: '获取验证码', getSmsCode: "获取验证码",
beginTime: 60, beginTime: 60,
timer: '', timer: "",
loginObj: {}, loginObj: {},
dialogVisible: false, dialogVisible: false,
flag1: false, flag1: false,
flag2: false, flag2: false,
loginForm: { loginForm: {
username: '', username: "",
password: '', password: "",
}, },
rules: { rules: {
username: [ username: [
{ required: true, trigger: 'blur', message: '请输入会员编号' }, { required: true, trigger: "blur", message: "请输入会员编号" },
], ],
password: [ password: [
{ required: true, trigger: 'blur', message: '请输入登录密码' }, { required: true, trigger: "blur", message: "请输入登录密码" },
],
code: [
{ required: true, trigger: 'change', message: '请输入验证码' },
], ],
code: [{ required: true, trigger: "change", message: "请输入验证码" }],
}, },
rulesObj: { rulesObj: {
memberCode: [ memberCode: [
{ required: true, trigger: 'blur', message: '请输入会员编号' }, { required: true, trigger: "blur", message: "请输入会员编号" },
], ],
newPassword: [ newPassword: [
{ required: true, trigger: 'blur', message: '请输入新密码' }, { required: true, trigger: "blur", message: "请输入新密码" },
],
loginPassword: [{ validator: validatePwd, trigger: 'blur' }],
phone: [
{ required: true, trigger: 'blur', message: '请输入联系方式' },
], ],
loginPassword: [{ validator: validatePwd, trigger: "blur" }],
phone: [{ required: true, trigger: "blur", message: "请输入联系方式" }],
}, },
codeUrl: '', codeUrl: "",
} };
}, },
created() { created() {
this.getCode() this.getCode();
}, },
mounted(){ mounted() {
this.loginForm.username = localStorage.getItem('username')||'' this.loginForm.username = localStorage.getItem("username") || "";
}, },
methods: { methods: {
// 绑卡获取验证码 // 绑卡获取验证码
submitForm(form) { submitForm(form) {
this.$refs[form].validate((valid) => { this.$refs[form].validate((valid) => {
if (valid) { if (valid) {
this.startTime() this.startTime();
forgetSms(this.loginObj) forgetSms(this.loginObj)
.then((res) => { .then((res) => {
// this.bankCode = res.data // this.bankCode = res.data
}) })
.catch((err) => { .catch((err) => {
this.beginTime = 0 this.beginTime = 0;
}) });
} else { } else {
return false return false;
} }
}) });
}, },
startTime() { startTime() {
if (this.isSend) return if (this.isSend) return;
this.isSend = true this.isSend = true;
this.getSmsCode = this.beginTime + 's后重新发送' this.getSmsCode = this.beginTime + "s后重新发送";
let that = this let that = this;
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.beginTime-- this.beginTime--;
this.getSmsCode = this.beginTime + 's后重新发送' this.getSmsCode = this.beginTime + "s后重新发送";
if (this.beginTime < 0) { if (this.beginTime < 0) {
clearInterval(this.timer) clearInterval(this.timer);
this.getSmsCode = '获取验证码' this.getSmsCode = "获取验证码";
this.beginTime = 60 this.beginTime = 60;
this.isSend = false this.isSend = false;
} }
}, 1000) }, 1000);
}, },
submitLoginObj(form) { submitLoginObj(form) {
this.$refs[form].validate((valid) => { this.$refs[form].validate((valid) => {
@ -263,76 +272,76 @@ export default {
.then((res) => { .then((res) => {
this.$message({ this.$message({
message: res.msg, message: res.msg,
type: 'success', type: "success",
}) });
this.dialogVisible = false this.dialogVisible = false;
}) })
.catch((err) => {}) .catch((err) => {});
} else { } else {
return false return false;
} }
}) });
}, },
forGet() { forGet() {
this.dialogVisible = true this.dialogVisible = true;
}, },
getCode() { getCode() {
getCodeImg().then((res) => { getCodeImg().then((res) => {
this.codeUrl = 'data:image/gif;base64,' + res.img this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid this.loginForm.uuid = res.uuid;
}) });
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate((valid) => { this.$refs.loginForm.validate((valid) => {
if (valid) { if (valid) {
this.fullscreenLoading = true this.fullscreenLoading = true;
this.$store this.$store
.dispatch('Login', this.loginForm) .dispatch("Login", this.loginForm)
.then((res) => { .then((res) => {
localStorage.setItem('username',this.loginForm.username) localStorage.setItem("username", this.loginForm.username);
this.fullscreenLoading = false this.fullscreenLoading = false;
this.$store.dispatch('GetInfo').then((response) => { this.$store.dispatch("GetInfo").then((response) => {
if (response.data.loginType == 1) { if (response.data.loginType == 1) {
this.$router.push({ this.$router.push({
path: '/specialMember', path: "/specialMember",
}) });
} else { } else {
if (response.data.registerShare == 0) { if (response.data.registerShare == 0) {
this.$router.push({ this.$router.push({
path: '/shoppingMall', path: "/shoppingMall",
query: { id: 100, idTh: 21 }, query: { id: 100, idTh: 21 },
}) });
} else if (response.data.registerFans == 0) { } else if (response.data.registerFans == 0) {
this.$router.push({ this.$router.push({
path: '/shoppingMall', path: "/shoppingMall",
query: { id: 100, idTh: 7 }, query: { id: 100, idTh: 7 },
}) });
} else { } else {
localStorage.setItem( localStorage.setItem(
'pkCountry', "pkCountry",
response.data.pkSettleCountry response.data.pkSettleCountry
) );
this.$router this.$router
.push({ path: this.redirect || '/' }) .push({ path: this.redirect || "/" })
.catch(() => {}) .catch(() => {});
} }
} }
}) });
}) })
.catch(() => { .catch(() => {
this.getCode() this.getCode();
this.fullscreenLoading = false this.fullscreenLoading = false;
}) });
} }
}) });
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page { .page {
background: url('../assets/images/loginBgd.png') no-repeat; background: url("../assets/images/loginBgd.png") no-repeat;
height: 100vh; height: 100vh;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
@ -404,10 +413,10 @@ export default {
// letter-spacing: 1px; // letter-spacing: 1px;
// text-align: center; // text-align: center;
// cursor: pointer; // cursor: pointer;
width:100%; width: 100%;
// padding-top: 15px; // padding-top: 15px;
// padding-bottom: 15px; // padding-bottom: 15px;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
} }
.pr { .pr {
@ -427,7 +436,6 @@ export default {
font-family: PingFang SC-Regular, PingFang SC; font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
cursor: pointer;
line-height: 63px; line-height: 63px;
} }
.changePwd { .changePwd {

6
src/views/personal/index.vue
View File

@ -240,7 +240,7 @@
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10" class="righTxt"> <el-col :span="10" class="righTxt" style="cursor: pointer">
<div @click="loginPwd = 1">{{ "修改登录密码" }}</div> <div @click="loginPwd = 1">{{ "修改登录密码" }}</div>
</el-col> </el-col>
</el-row> </el-row>
@ -259,7 +259,7 @@
class="resetPwd">{{ '重置支付密码' }}</div> --> class="resetPwd">{{ '重置支付密码' }}</div> -->
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10" class="righTxt"> <el-col :span="10" class="righTxt" style="cursor: pointer">
<div @click="loginPwd = 0">{{ "修改支付密码" }}</div> <div @click="loginPwd = 0">{{ "修改支付密码" }}</div>
</el-col> </el-col>
</el-row> </el-row>
@ -270,7 +270,7 @@
<el-input v-model="safty.tel" disabled></el-input> <el-input v-model="safty.tel" disabled></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10" class="righTxt"> <el-col :span="10" class="righTxt" style="cursor: pointer">
<!-- <div class="righTxt1i"> <!-- <div class="righTxt1i">
<i class="el-icon-success" <i class="el-icon-success"
style="color: #009900;font-size: 16px;margin-right: 5px;"></i>已绑定 style="color: #009900;font-size: 16px;margin-right: 5px;"></i>已绑定