Skip to content

O
offical_web
Commit d5494f62 by wusiyi
Options

feat: 官网2.0升级

parent aa314410
Showing with 564 additions and 532 deletions
src/assets/images/logout.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678692281445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4160" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M867.5 470.8L758 365c-18.2-17-19.2-45.5-2.3-63.7 17-18.2 45.5-19.2 63.7-2.3 0.4 0.4 0.9 0.8 1.3 1.2l187.6 181.5c17.9 17.3 18.3 45.9 1 63.8L821.6 739.2c-18.1 17.1-46.6 16.3-63.7-1.7-16.1-17-16.5-43.5-0.9-61l112.1-115.6H422.3c-24.9 0-45.1-20.2-45.1-45.1 0-24.9 20.2-45.1 45.1-45.1l445.2 0.1zM92.1 917.3h555.4c24.9 1.1 44.1 22.1 43 47-1 23.3-19.7 42-43 43H47.1c-24.9 0-45-20.1-45.1-45V61.7c0-24.9 20.2-45.1 45.1-45.1h600.4c24.9 0 45.1 20.2 45.1 45.1 0 24.9-20.2 45.1-45.1 45.1H92l0.1 810.5z" p-id="4161"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 14 14">
\ No newline at end of file <g fill="none">
<path fill="#fff3d7" d="M9.5 12.5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1z" />
<path stroke="#e8af24" stroke-linecap="round" stroke-linejoin="round" d="M9.5 10.5v2a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v2M6.5 7h7m-2-2l2 2l-2 2" stroke-width="1.6" />
</g>
</svg>
\ No newline at end of file
src/components/head.vue
...@@ -147,7 +147,7 @@ ...@@ -147,7 +147,7 @@
<span>欢迎您</span> <span>欢迎您</span>
</div> </div>
<div class="logout" title="退出登录" @click="logout"> <div class="logout" title="退出登录" @click="logout">
<img src="../assets/images/logout.png" /> <img src="../assets/images/logout.svg" />
</div> </div>
</div> </div>
<el-button type="primary" @click="freeTrial">免费试用</el-button> <el-button type="primary" @click="freeTrial">免费试用</el-button>
...@@ -173,11 +173,7 @@ import productionSvg from '../assets/images/home/production.svg' ...@@ -173,11 +173,7 @@ import productionSvg from '../assets/images/home/production.svg'
import customSvg from '../assets/images/home/custom.svg' import customSvg from '../assets/images/home/custom.svg'
import supplyChainSvg from '../assets/images/home/earth.svg' import supplyChainSvg from '../assets/images/home/earth.svg'
import logisticsSvg from '../assets/images/home/logistics.svg' import logisticsSvg from '../assets/images/home/logistics.svg'
import platformSvg from '../assets/images/home/platform.svg'
import hdSvg from '../assets/images/product/hd.svg'
import zxSvg from '../assets/images/product/zx.svg'
import usSvg from '../assets/images/product/us.svg' import usSvg from '../assets/images/product/us.svg'
import joinSvg from '../assets/images/product/join.svg'
import headHelper from './headHelper.vue' import headHelper from './headHelper.vue'
export default { export default {
inject: { inject: {
...@@ -376,11 +372,11 @@ export default { ...@@ -376,11 +372,11 @@ export default {
} }
.user-msg { .user-msg {
color: #fff; color: #3b3b3b;
} }
.logout { .logout {
margin-right: 30px; margin-right: 20px;
} }
::v-deep .el-button--primary { ::v-deep .el-button--primary {
...@@ -391,6 +387,15 @@ export default { ...@@ -391,6 +387,15 @@ export default {
border-color: var(--secondary-color-lighter) !important; border-color: var(--secondary-color-lighter) !important;
} }
} }
::v-deep .el-button {
&:hover {
background-color: var(--light-background-color) !important;
border-color: var(--light-color) !important;
color: var(--primary-color) !important;
}
}
.container { .container {
width: 70vw; width: 70vw;
margin: 0 auto; margin: 0 auto;
......
src/components/headerNavMobile.vue
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<span style="margin-left: 10px; cursor: pointer" @click="logout"> <span style="margin-left: 10px; cursor: pointer" @click="logout">
<img <img
style="width: 16px; height: 16px; vertical-align: middle" style="width: 16px; height: 16px; vertical-align: middle"
src="../assets/images/logout.png" /> src="../assets/images/logout.svg" />
</span> </span>
</div> </div>
<transition name="header-nav-mobile"> <transition name="header-nav-mobile">
......
src/styles/index.scss
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
--background-color: #faf7f2b0; --background-color: #faf7f2b0;
--darker-background-color: #f5ede0b0; --darker-background-color: #f5ede0b0;
--light-color: #e9b95f; --light-color: #e9b95f;
--light-background-color: #fff8ec;
--darker-text-color: #faaa15; --darker-text-color: #faaa15;
--hover-color: #eeb242;
--secondary-text-color: #122a88; --secondary-text-color: #122a88;
} }
......
src/views/contact.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<span>欢迎您</span> <span>欢迎您</span>
</div> --> </div> -->
<div class="logout" title="退出登录" @click="logout"> <div class="logout" title="退出登录" @click="logout">
<img src="../assets/images/logout.png" /> <img src="../assets/images/logout.svg" />
</div> </div>
</div> </div>
</div> </div>
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
"> ">
邮箱:mia@jomalls.com 邮箱:mia@jomalls.com
</h2> </h2>
<div style="display:flex;justify-content: center"> <div style="display: flex; justify-content: center">
<el-button <el-button
style=" style="
text-align: center; text-align: center;
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
返回首页 返回首页
</el-button> </el-button>
<el-button <el-button
:style="{width:userInfo && userInfo.erpKey?'180':''}" :style="{ width: userInfo && userInfo.erpKey ? '180' : '' }"
style=" style="
text-align: center; text-align: center;
font-size: 30px; font-size: 30px;
......
src/views/homePage/forgetPassword.vue 0 → 100644
<template>
<div class="modal" :style="visible ? 'display: block' : 'display: none'">
<div class="forget-form">
<div class="forget-title">忘记密码</div>
<el-form size="medium" :model="forgetForm" ref="forgetForm">
<el-form-item
v-if="labelPosition === 'passwordLogin'"
prop="email"
label=""
:rules="[
{ required: true, message: '请输入邮箱地址', type: 'email' },
]">
<el-input
v-model="forgetForm.email"
prefix-icon="el-icon-postcard"
style="background: #fff"
placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item
v-if="labelPosition === 'passwordLogin'"
prop="code"
label=""
:rules="[{ required: true, message: '请输入验证码' }]">
<div style="display: flex; gap: 20px">
<div style="flex: 1">
<el-input
v-model="forgetForm.code"
style="background: #fff"
prefix-icon="el-icon-message"
placeholder="请输入验证码"></el-input>
</div>
<div>
<el-button
class="get-code-button"
:disabled="getCodeDisabled"
:class="getCodeDisabled ? 'disabled' : 'code-btn'"
@click="verCode">
{{ codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒` }}
</el-button>
</div>
</div>
</el-form-item>
<el-form-item
v-if="labelPosition === 'verificationLogin'"
prop="phone"
:rules="[{ required: true, message: '请输入手机号' }]">
<el-input
prefix-icon="el-icon-phone"
style="background: #fff"
v-model="forgetForm.phone"
placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item
v-if="labelPosition === 'verificationLogin'"
prop="verifyKey"
label=""
:rules="[{ required: true, message: '请输入验证码' }]">
<div style="display: flex; gap: 20px; margin-bottom: -10px">
<div style="flex: 1">
<el-input
v-model="forgetForm.verifyKey"
prefix-icon="el-icon-postcard"
placeholder="请输入验证码,区分大小写"></el-input>
</div>
<div @click="getVerifycode">
<img style="width: 100px; height: 80%" :src="VerifyUrl" />
</div>
</div>
</el-form-item>
<el-form-item
v-if="labelPosition === 'verificationLogin'"
prop="code"
label=""
:rules="[{ required: true, message: '请输入短信验证码' }]">
<div style="display: flex; gap: 20px">
<div style="flex: 1">
<el-input
v-model="forgetForm.code"
prefix-icon="el-icon-message"
placeholder="请输入短信验证码"></el-input>
</div>
<div>
<el-button
class="get-code-button"
style="width: 112px"
:disabled="getCodeDisabled"
:class="getCodeDisabled ? 'disabled' : 'code-btn'"
@click="forgetPhonecode">
{{ codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒` }}
</el-button>
</div>
</div>
</el-form-item>
<el-form-item
prop="password"
:rules="[{ required: true, message: '请输入新密码' }]">
<el-input
v-model="forgetForm.password"
placeholder="请输入新密码"
:type="showNewPwd ? 'text' : 'password'"
prefix-icon="el-icon-lock"
style="background-color: #fff">
<i
@click="showNewPwd = !showNewPwd"
slot="suffix"
:class="{ eyes: true, open: !showNewPwd, close: showNewPwd }"></i>
</el-input>
</el-form-item>
<el-form-item
prop="confirmNewPassword"
:rules="[{ validator: validatePass, trigger: 'blur' }]">
<el-input
v-model="forgetForm.confirmNewPassword"
placeholder="请再次输入新密码"
:type="showAgNewPwd ? 'text' : 'password'"
prefix-icon="el-icon-lock"
style="background-color: #fff">
<i
@click="showAgNewPwd = !showAgNewPwd"
slot="suffix"
:class="{
eyes: true,
open: !showAgNewPwd,
close: showAgNewPwd,
}"></i>
</el-input>
</el-form-item>
<el-form-item style="margin-bottom: 10px">
<el-button class="reset-password" round @click="resetPassword">
重置密码
</el-button>
</el-form-item>
<div style="font-size: 14px">
<span>无需重置</span>
<span
style="
margin-left: 20px;
color: var(--primary-color);
cursor: pointer;
"
@click="$emit('close')">
登录
</span>
</div>
</el-form>
<i class="el-icon-circle-close close-icon" @click="$emit('close')"></i>
</div>
</div>
</template>
<script>
import { post, get } from '@/utils/axios'
import md5 from 'js-md5'
export default {
name: 'ForgetPassword',
props: {
visible: { type: Boolean, default: false },
labelPosition: { type: String, default: 'passwordLogin' },
},
data() {
return {
validatePass: (rule, value, callback) => {
if (!value) {
callback(new Error('请再次输入密码'))
} else if (value !== this.forgetForm.password) {
callback(new Error('两次输入密码不一致'))
} else {
callback()
}
},
forgetForm: {},
VerifyUrl: '',
verifyKeyTime: undefined,
showNewPwd: false,
showAgNewPwd: false,
codeCountDown: 0,
timer: null,
}
},
computed: {
getCodeDisabled() {
return this.codeCountDown > 0
},
},
watch: {
visible(val) {
if (val) {
this.initForm()
} else {
this.clearTimer()
}
},
},
mounted() {
if (this.visible) this.initForm()
},
methods: {
initForm() {
this.forgetForm = {}
this.codeCountDown = 0
this.getVerifycode()
this.$nextTick(() => {
this.$refs.forgetForm && this.$refs.forgetForm.clearValidate()
})
},
clearTimer() {
if (this.timer) clearInterval(this.timer)
this.timer = null
},
async verCode() {
try {
await new Promise((resolve, reject) => {
this.$refs.forgetForm.validateField('email', (m) => {
m ? reject() : resolve()
})
})
} catch {
return
}
try {
const res = await get('business/user/emailcode', {
email: this.forgetForm.email,
})
this.codeCountDown = 60
this.timer = setInterval(() => {
this.codeCountDown--
if (this.codeCountDown <= 0) {
this.clearTimer()
}
}, 1000)
this.$message.success(res.message)
} catch (e) {
console.error(e)
}
},
async forgetPhonecode() {
try {
await new Promise((resolve, reject) => {
this.$refs.forgetForm.validateField('phone', (m) => {
m ? reject() : resolve()
})
})
} catch {
return
}
try {
const res = await post('business/user/phonecode', {
account: this.forgetForm.phone,
verifyKey: this.verifyKeyTime,
verifyCode: this.forgetForm.verifyKey,
})
this.codeCountDown = 60
this.timer = setInterval(() => {
this.codeCountDown--
if (this.codeCountDown <= 0) {
this.clearTimer()
}
}, 1000)
this.$message.success(res.message)
} catch (e) {
this.getVerifycode()
console.error(e)
}
},
// 重置密码
resetPassword() {
try {
this.$refs.forgetForm.validate()
} catch {
return
}
try {
const hash = md5.create()
hash.update(this.forgetForm.password)
const passwordHash = hash.hex()
post('business/user/restPassword', {
password: passwordHash,
account: this.forgetForm.email
? this.forgetForm.email
: this.forgetForm.phone,
code: this.forgetForm.code,
}).then((res) => {
if (res.code === 200) {
this.$message.success('密码修改成功')
this.$emit('close')
}
})
} catch (e) {
console.error(e)
}
},
getVerifycode() {
this.verifyKeyTime = new Date().getTime()
get('business/user/verifycode', {
verifyKey: this.verifyKeyTime,
}).then((res) => {
if (res.code === 200) {
this.VerifyUrl = res.message
}
})
},
},
beforeDestroy() {
this.clearTimer()
},
}
</script>
<style scoped>
.modal {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
transition: all 0.3s;
}
.forget-form {
position: fixed;
width: 36%;
padding: 50px 60px;
box-sizing: border-box;
border-radius: 6px;
top: 50%;
left: 50%;
background-color: #fff;
transform: translate(-50%, -50%);
}
.forget-title {
text-align: center;
margin-bottom: 26px;
font-size: 26px;
font-weight: 400;
letter-spacing: 2px;
}
.forget-form .close-icon {
position: fixed;
top: -30px;
right: -28px;
font-size: 30px;
color: #fff;
cursor: pointer;
}
.reset-password {
width: 100%;
background-image: linear-gradient(
to right,
var(--primary-color) 0%,
#d59723 51%,
#f0cb66 100%
);
color: #fff;
}
.get-code-button:disabled:hover {
background-color: #d0d2d8;
color: #666;
}
.disabled {
background-color: #d0d2d8;
color: #666;
margin-left: 10px;
}
.code-btn {
background: linear-gradient(
180deg,
var(--primary-color) 0%,
var(--primary-color) 100%
);
border: none;
color: #fff;
}
.eyes {
display: inline-block;
height: 14px;
width: 18px;
margin-top: 11px;
margin-right: 5px;
cursor: pointer;
}
.eyes.open {
background: url('../../assets/eyes-open.png') no-repeat center / cover;
}
.eyes.close {
background: url('../../assets/eyes-closed.png') no-repeat center / cover;
}
</style>
src/views/homePage/index.vue
<template> <template>
<div class="home-page"> <div class="home-page">
<div class="banner-images px-5 lg:px-0"> <div
class="banner-images h-full w-11/12 lg:w-9/12 mx-auto lg:px-5 lg:py-20">
<div <div
class="banner-container flex-col items-center mt-8 mb-10 lg:flex-row lg:justify-between lg:items-center lg:mt-0 gap-4 lg:gap-20"> class="banner-container flex h-full flex-col items-center mt-8 mb-10 lg:flex-row lg:justify-between lg:items-center lg:mt-0 gap-4 lg:gap-40">
<div class="left-content mb-4 lg:mb-0"> <div
class="left-content w-full lg:w-3/5 flex flex-col gap-5 mb-4 lg:mb-0">
<h3 <h3
class="left-content-title text-base lg:text-2xl lg:font-bold text-center lg:text-left"> class="left-content-title text-base lg:text-2xl font-bold text-center lg:text-left">
让跨境电商更智能 让跨境电商更智能
</h3> </h3>
<h2 <h2
class="left-content-title-high-light font-bold text-center lg:text-left"> class="left-content-title-high-light text-2xl lg:text-4xl font-bold text-center lg:text-left">
九猫科技·全球电商增长伙伴 九猫科技·全球电商增长伙伴
</h2> </h2>
<p class="left-content-description text-center lg:text-left"> <p
<!-- <span class="high-light">60万+</span> --> class="left-content-description text-sm lg:text-lg text-gray-500 text-center lg:text-left">
<span> <span>
跨境全链路智能解决方案，一站式跨境电商操作系统 跨境全链路智能解决方案，一站式跨境电商操作系统
<br /> <br />
</span> </span>
<span class="high-light">20+</span> <span class="high-light font-bold">20+</span>
<span>主流跨境平台，助力卖家全球出海</span> <span>主流跨境平台，助力卖家全球出海</span>
</p> </p>
<button class="register-btn-text" @click="registerDialog = true"> <button
class="register-btn-text block mx-auto lg:mx-0 w-20 h-8 lg:w-36 lg:h-11 rounded-md text-xs lg:text-lg cursor-pointer text-white"
@click="registerDialog = true">
立即注册 立即注册
</button> </button>
</div> </div>
<div class="right-content"> <login />
<login />
</div>
</div> </div>
</div> </div>
...@@ -75,59 +77,24 @@ export default { ...@@ -75,59 +77,24 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.banner-images {
width: 70vw;
margin: 0 auto;
height: 28vw;
padding-top: 0px;
}
/* .banner-images-inner {
width: 100%;
} */
.banner-container {
display: flex;
/* align-items: center; */
height: 100%;
}
.left-content {
width: 40%;
display: flex;
flex-direction: column;
gap: 20px;
}
.right-content {
border-radius: 20px;
/* .video {
width: 100%;
height: 100%;
object-fit: fill;
} */
}
/* removed empty .left-content-title to satisfy linter */
.register-btn-text { .register-btn-text {
width: 150px;
height: 42px;
display: block;
background: var(--primary-color); background: var(--primary-color);
box-shadow: 0 4px 8px 0 var(--shadow-color); box-shadow: 0 4px 8px 0 var(--shadow-color);
border-radius: 4px; &:hover {
font-size: 18px; background: var(--hover-color);
color: #fff; color: #fff;
cursor: pointer; }
&:focus {
background: var(--hover-color);
color: #fff;
}
} }
.left-content-title-high-light { .left-content-title-high-light {
font-size: 40px;
color: var(--darker-text-color); color: var(--darker-text-color);
} }
.left-content-description {
font-size: 18px;
color: #777;
}
.high-light { .high-light {
color: var(--primary-color); color: var(--primary-color);
font-weight: bold;
} }
</style> </style>
src/views/homePage/login.vue
<template> <template>
<div> <div class="w-full flex justify-center">
<div class="login-content"> <div
<div class="login-text"> class="login-content lg:px-10 py-6 shadow-lg lg:shadow-lg flex flex-col rounded-4xl">
<div class="login-text-welcome">欢迎登录</div> <div
<div class="login-text-intro"> class="login-text flex flex-col lg:flex-row items-center lg:items-end">
<div
class="login-text-welcome font-bold lg:font-normal text-2xl mb-2 lg:mb-0">
欢迎登录
</div>
<div
class="login-text-intro lg:font-normal text-xs lg:text-sm lg:ml-2 text-gray-400">
智能化订单处理 数字化供采平台 多维度数据分析 智能化订单处理 数字化供采平台 多维度数据分析
</div> </div>
</div> </div>
<el-radio-group v-model="labelPosition" class="radioGroup" size="small"> <el-radio-group
v-model="labelPosition"
class="radioGroup mt-5 flex justify-center items-center mb-5"
size="small">
<el-radio-button label="passwordLogin">密码登录</el-radio-button> <el-radio-button label="passwordLogin">密码登录</el-radio-button>
<el-radio-button label="verificationLogin">验证码登录</el-radio-button> <el-radio-button label="verificationLogin">验证码登录</el-radio-button>
</el-radio-group> </el-radio-group>
...@@ -16,25 +25,25 @@ ...@@ -16,25 +25,25 @@
:model="ruleForm" :model="ruleForm"
:rules="rules" :rules="rules"
ref="ruleForm" ref="ruleForm"
class="login_form"> class="login_form w-full flex flex-col flex-1 mx-auto lg:mx-0">
<el-form-item <el-form-item
style="margin: 20px 0 40px 0px" class="lg:mt-5 w-3/4 lg:w-full mx-auto lg:mx-0"
v-if="labelPosition === 'passwordLogin'" v-if="labelPosition === 'passwordLogin'"
prop="email"> prop="email">
<el-input <el-input
prefix-icon="el-icon-message" prefix-icon="el-icon-user-solid"
style="background: #fff" class="lg:bg-white"
v-model="ruleForm.email" v-model="ruleForm.email"
placeholder="请输入手机号或者邮箱"></el-input> placeholder="请输入手机号或邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="labelPosition === 'passwordLogin'" v-if="labelPosition === 'passwordLogin'"
prop="password" prop="password"
style="margin-bottom: 20px"> class="lg:mb-5 w-3/4 lg:w-full mx-auto lg:mx-0">
<el-input <el-input
:type="showPwd ? 'text' : 'password'" :type="showPwd ? 'text' : 'password'"
prefix-icon="el-icon-lock" prefix-icon="el-icon-lock"
style="background: #fff" class="lg:bg-white"
v-model="ruleForm.password" v-model="ruleForm.password"
placeholder="请输入密码" placeholder="请输入密码"
@keyup.enter.native="submitForm"> @keyup.enter.native="submitForm">
...@@ -45,7 +54,7 @@ ...@@ -45,7 +54,7 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
style="margin: 0px 0 20px 0px" class="lg:mb-5 w-3/4 lg:w-full mx-auto lg:mx-0"
v-if="labelPosition === 'verificationLogin'" v-if="labelPosition === 'verificationLogin'"
prop="phone"> prop="phone">
<el-input <el-input
...@@ -56,232 +65,74 @@ ...@@ -56,232 +65,74 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="labelPosition === 'verificationLogin'" v-if="labelPosition === 'verificationLogin'"
style="margin: 0px 0 30px 0px" class="lg:mb-5 w-3/4 lg:w-full mx-auto lg:mx-0"
prop="verifyKey" prop="verifyKey"
label=""> label="">
<div style="display: flex; gap: 20px; margin-bottom: -10px"> <div class="flex gap-1 mb-0">
<div style="flex: 1"> <div class="flex-1">
<el-input <el-input
v-model="ruleForm.verifyKey" v-model="ruleForm.verifyKey"
prefix-icon="el-icon-postcard" prefix-icon="el-icon-postcard"
placeholder="请输入验证码,区分大小写"></el-input> placeholder="请输入验证码(区分大小写)"></el-input>
</div> </div>
<div @click="getVerifycode"> <div @click="getVerifycode">
<img style="width: 120px; height: 100%" :src="VerifyUrl" /> <img class="w-20 lg:w-32 h-full" :src="VerifyUrl" />
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
class="lg:mb-5 w-3/4 lg:w-full mx-auto lg:mx-0"
v-if="labelPosition === 'verificationLogin'" v-if="labelPosition === 'verificationLogin'"
prop="code" prop="code">
label=""> <div class="flex gap-1 mb-0">
<div style="display: flex; gap: 20px"> <div class="flex-1">
<div style="flex: 1">
<el-input <el-input
v-model="ruleForm.code" v-model="ruleForm.code"
prefix-icon="el-icon-message" prefix-icon="el-icon-message"
placeholder="请输入短信验证码"></el-input> placeholder="请输入短信验证码"></el-input>
</div> </div>
<div> <el-button
<el-button class="w-22 text-white border-0"
class="get-code-button" :disabled="getCodeDisabled"
style="width: 112px" :class="getCodeDisabled ? 'disabled' : 'get-code-button'"
:disabled="getCodeDisabled" @click="verPhonecode">
:class="getCodeDisabled ? 'disabled' : 'code-btn'" {{ codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒` }}
@click="verPhonecode"> </el-button>
{{ codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒` }}
</el-button>
</div>
</div> </div>
</el-form-item> </el-form-item>
<div class="login-bottom"> <div class="login-bottom mt-auto">
<div style="text-align: center"> <div class="text-center">
<button class="login-btn" @click="submitForm">登录</button> <button
class="login-btn w-3/4 lg:w-full h-8 lg:h-10 text-sm lg:text-lg text-white mx-auto lg:mx-0 rounded-md"
@click="submitForm">
登录
</button>
</div> </div>
<div class="login-bottom-text"> <div
<div class="forget-password"> class="login-bottom-text flex justify-center items-center mt-5 lg:text-base text-xs">
<span style="cursor: pointer" @click="forgetPassword"> <div
忘记密码 class="forget-password text-gray-400 cursor-pointer"
</span> @click="forgetPassword">
忘记密码
</div> </div>
<el-divider direction="vertical" class="bottom-line"></el-divider> <el-divider direction="vertical" class="bottom-line"></el-divider>
<div> <div
<span class="register-btn-text cursor-pointer"
style="cursor: pointer; color: var(--primary-color)" @click="registerDialog = true"
@click="registerDialog = true"> style="color: var(--primary-color)">
马上注册 马上注册
</span>
</div> </div>
</div> </div>
</div> </div>
</el-form> </el-form>
</div> </div>
<div <ForgetPassword
class="modal" v-if="isShowModal"
:style="isShowModal ? 'display: block' : 'display: none'"> :visible="isShowModal"
<div class="forget-form"> :label-position="labelPosition"
<div class="forget-title">忘记密码</div> @close="isShowModal = false" />
<el-form size="medium" :model="forgetForm" ref="forgetForm">
<el-form-item
v-if="labelPosition === 'passwordLogin'"
prop="email"
label=""
:rules="[
{ required: true, message: '请输入邮箱地址', type: 'email' },
]">
<el-input
v-model="forgetForm.email"
prefix-icon="el-icon-postcard"
style="background: #fff"
placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item
v-if="labelPosition === 'passwordLogin'"
prop="code"
label=""
:rules="[{ required: true, message: '请输入验证码' }]">
<div style="display: flex; gap: 20px">
<div style="flex: 1">
<el-input
v-model="forgetForm.code"
style="background: #fff"
prefix-icon="el-icon-message"
placeholder="请输入验证码"></el-input>
</div>
<div>
<el-button
class="get-code-button"
:disabled="getCodeDisabled"
:class="getCodeDisabled ? 'disabled' : 'code-btn'"
@click="verCode">
{{
codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒`
}}
</el-button>
</div>
</div>
</el-form-item>
<el-form-item
v-if="labelPosition === 'verificationLogin'"
prop="phone"
:rules="[{ required: true, message: '请输入手机号' }]">
<el-input
prefix-icon="el-icon-phone"
style="background: #fff"
v-model="forgetForm.phone"
placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item
v-if="labelPosition === 'verificationLogin'"
prop="verifyKey"
label=""
:rules="[{ required: true, message: '请输入验证码' }]">
<div style="display: flex; gap: 20px; margin-bottom: -10px">
<div style="flex: 1">
<el-input
v-model="forgetForm.verifyKey"
prefix-icon="el-icon-postcard"
placeholder="请输入验证码,区分大小写"></el-input>
</div>
<div @click="getVerifycode">
<img style="width: 100px; height: 80%" :src="VerifyUrl" />
</div>
</div>
</el-form-item>
<el-form-item
v-if="labelPosition === 'verificationLogin'"
prop="code"
label=""
:rules="[{ required: true, message: '请输入短信验证码' }]">
<div style="display: flex; gap: 20px">
<div style="flex: 1">
<el-input
v-model="forgetForm.code"
prefix-icon="el-icon-message"
placeholder="请输入短信验证码"></el-input>
</div>
<div>
<el-button
class="get-code-button"
style="width: 112px"
:disabled="getCodeDisabled"
:class="getCodeDisabled ? 'disabled' : 'code-btn'"
@click="forgetPhonecode">
{{
codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒`
}}
</el-button>
</div>
</div>
</el-form-item>
<el-form-item
prop="password"
:rules="[{ required: true, message: '请输入新密码' }]">
<el-input
v-model="forgetForm.password"
placeholder="请输入新密码"
:type="showNewPwd ? 'text' : 'password'"
prefix-icon="el-icon-lock"
style="background-color: #fff">
<i
@click="showNewPwd = !showNewPwd"
slot="suffix"
:class="{
eyes: true,
open: !showNewPwd,
close: showNewPwd,
}"></i>
</el-input>
</el-form-item>
<el-form-item
prop="confirmNewPassword"
:rules="[
{
validator: validatePass,
trigger: 'blur',
},
]">
<el-input
v-model="forgetForm.confirmNewPassword"
placeholder="请再次输入新密码"
:type="showAgNewPwd ? 'text' : 'password'"
prefix-icon="el-icon-lock"
style="background-color: #fff">
<i
@click="showAgNewPwd = !showAgNewPwd"
slot="suffix"
:class="{
eyes: true,
open: !showAgNewPwd,
close: showAgNewPwd,
}"></i>
</el-input>
</el-form-item>
<el-form-item style="margin-bottom: 10px">
<el-button class="reset-password" round @click="resetPassword">
重置密码
</el-button>
</el-form-item>
<div style="font-size: 14px">
<span>无需重置</span>
<span
style="
margin-left: 20px;
color: var(--primary-color);
cursor: pointer;
"
@click="isShowModal = false">
登录
</span>
</div>
</el-form>
<i
class="el-icon-circle-close close-icon"
@click="isShowModal = false"></i>
</div>
</div>
<Register v-if="registerDialog" @close="registerDialog = false" /> <Register v-if="registerDialog" @close="registerDialog = false" />
</div> </div>
</template> </template>
...@@ -292,34 +143,25 @@ import md5 from 'js-md5' ...@@ -292,34 +143,25 @@ import md5 from 'js-md5'
import { mapMutations } from 'vuex' import { mapMutations } from 'vuex'
import Register from '@/views/homePage/register.vue' import Register from '@/views/homePage/register.vue'
import ForgetPassword from '@/views/homePage/forgetPassword.vue'
export default { export default {
name: 'login', name: 'login',
components: { components: {
Register, Register,
ForgetPassword,
}, },
data() { data() {
return { return {
registerDialog: false, registerDialog: false,
validatePass: (rule, value, callback) => {
if (!value) {
callback(new Error('请再次输入密码'))
} else if (value !== this.forgetForm.password) {
callback(new Error('两次输入密码不一致'))
} else {
callback()
}
},
VerifyUrl: '', VerifyUrl: '',
labelPosition: 'passwordLogin', labelPosition: 'passwordLogin',
isShowModal: false, isShowModal: false,
ruleForm: { ruleForm: {
password: '', password: '',
email: '', email: '',
checked: false,
}, },
codeCountDown: 0, codeCountDown: 0,
forgetForm: {},
rules: { rules: {
email: [ email: [
{ required: true, message: '请输入邮箱或手机号', trigger: 'blur' }, { required: true, message: '请输入邮箱或手机号', trigger: 'blur' },
...@@ -339,8 +181,6 @@ export default { ...@@ -339,8 +181,6 @@ export default {
], ],
}, },
showPwd: false, showPwd: false,
showNewPwd: false,
showAgNewPwd: false,
} }
}, },
computed: { computed: {
...@@ -353,32 +193,6 @@ export default { ...@@ -353,32 +193,6 @@ export default {
}, },
methods: { methods: {
...mapMutations(['setUserInfo']), ...mapMutations(['setUserInfo']),
async verCode() {
try {
await new Promise((resolve, reject) => {
this.$refs.forgetForm.validateField('email', (m) => {
m ? reject() : resolve()
})
})
} catch {
return
}
try {
const res = await get('business/user/emailcode', {
email: this.forgetForm.email,
})
this.codeCountDown = 60
this.timer = setInterval(() => {
this.codeCountDown--
if (this.codeCountDown <= 0) {
clearInterval(this.timer)
}
}, 1000)
this.$message.success(res.message)
} catch (e) {
console.error(e)
}
},
async verPhonecode() { async verPhonecode() {
try { try {
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
...@@ -408,71 +222,8 @@ export default { ...@@ -408,71 +222,8 @@ export default {
console.error(e) console.error(e)
} }
}, },
async forgetPhonecode() {
try {
await new Promise((resolve, reject) => {
this.$refs.forgetForm.validateField('phone', (m) => {
m ? reject() : resolve()
})
})
} catch {
return
}
try {
const res = await post('business/user/phonecode', {
account: this.forgetForm.phone,
verifyKey: this.verifyKeyTime,
verifyCode: this.forgetForm.verifyKey,
})
this.codeCountDown = 60
this.timer = setInterval(() => {
this.codeCountDown--
if (this.codeCountDown <= 0) {
clearInterval(this.timer)
}
}, 1000)
this.$message.success(res.message)
} catch (e) {
this.getVerifycode()
console.error(e)
}
},
forgetPassword() { forgetPassword() {
this.getVerifycode()
this.isShowModal = true this.isShowModal = true
this.forgetForm = {}
this.codeCountDown = 0
this.$nextTick(() => {
this.$refs.forgetForm.clearValidate()
})
},
// 重置密码
resetPassword() {
try {
this.$refs.forgetForm.validate()
} catch {
return
}
try {
const hash = md5.create()
hash.update(this.forgetForm.password)
const passwordHash = hash.hex()
post('business/user/restPassword', {
password: passwordHash,
account: this.forgetForm.email
? this.forgetForm.email
: this.forgetForm.phone,
code: this.forgetForm.code,
}).then((res) => {
if (res.code === 200) {
this.$message.success('密码修改成功')
this.isShowModal = false
}
})
} catch (e) {
console.error(e)
}
}, },
submitForm(e) { submitForm(e) {
e.preventDefault() e.preventDefault()
...@@ -523,32 +274,16 @@ export default { ...@@ -523,32 +274,16 @@ export default {
}, },
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.login-mobile { .login-content {
margin: 20px; width: 500px;
border-radius: 6px; height: 430px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
background-color: #fff;
top: 50%;
left: 0;
right: 0;
position: absolute;
transform: translateY(-50%);
}
.login-content-mobile {
padding: 20px;
} }
.reset-password { @media (max-width: 1024px) {
width: 100%; .login-content {
background-image: linear-gradient( width: 100%;
to right, }
var(--primary-color) 0%,
#d59723 51%,
#f0cb66 100%
);
color: #fff;
} }
.login_form::v-deep .el-input__inner { .login_form::v-deep .el-input__inner {
...@@ -556,9 +291,27 @@ export default { ...@@ -556,9 +291,27 @@ export default {
line-height: 42px; line-height: 42px;
} }
.get-code-button:disabled:hover { @media (max-width: 1024px) {
background-color: #d0d2d8; .login_form::v-deep .el-input__inner {
color: #666; height: 32px;
font-size: 12px;
}
}
.get-code-button {
background: var(--primary-color);
&:hover {
background: var(--hover-color);
color: #fff;
}
&:focus {
background: var(--hover-color);
color: #fff;
}
&:disabled {
background-color: #d0d2d8;
color: #666;
}
} }
.disabled { .disabled {
...@@ -573,132 +326,36 @@ export default { ...@@ -573,132 +326,36 @@ export default {
var(--primary-color) 0%, var(--primary-color) 0%,
var(--primary-color) 100% var(--primary-color) 100%
); );
border: none;
color: #fff;
}
.forget-title {
text-align: center;
margin-bottom: 26px;
font-size: 26px;
font-weight: 400;
letter-spacing: 2px;
}
.modal {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
transition: all 0.3s;
}
.forget-form {
position: fixed;
width: 36%;
padding: 50px 60px;
box-sizing: border-box;
border-radius: 6px;
top: 50%;
left: 50%;
background-color: #fff;
transform: translate(-50%, -50%);
}
.forget-form .close-icon {
position: fixed;
top: -30px;
right: -28px;
font-size: 30px;
color: #fff;
cursor: pointer;
}
.logo {
display: flex;
align-items: center;
}
.logo_text {
display: inline-block;
}
.banner_text {
font-size: 28px;
color: #fff;
letter-spacing: 4px;
display: flex;
margin-left: 40px;
}
.login-content {
padding: 20px 40px;
width: 500px;
height: 430px;
background: rgba(255, 255, 255, 1);
border-radius: 10px;
box-sizing: border-box;
box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
display: flex;
flex-direction: column;
}
.login-text {
display: flex;
align-items: flex-end;
}
.login-text-welcome {
font-size: 22px;
font-weight: 400;
}
.login-text-intro {
font-size: 14px;
color: #b1acac;
margin-left: 10px;
}
.login_form {
width: 100%;
border-radius: 6px;
flex: 1;
display: flex;
flex-direction: column;
} }
.login-bottom { .login-btn {
margin-top: auto; background: var(--primary-color);
} box-shadow: 0 4px 8px 0 var(--shadow-color);
&:hover {
.login-bottom-text { background: var(--hover-color);
display: flex; color: #fff;
font-size: 14px; }
justify-content: center; &:focus {
align-items: center; background: var(--hover-color);
margin-top: 20px; color: #fff;
}
} }
.forget-password { .forget-password {
font-size: 14px; &:hover {
color: #a4a6a8; color: rgb(119, 118, 118);
}
} }
.login-btn { .register-btn-text {
width: 100%; &:hover {
height: 42px; color: var(--hover-color);
display: block; }
margin: 0 auto;
background: var(--primary-color);
box-shadow: 0 4px 8px 0 var(--shadow-color);
border-radius: 4px;
font-size: 18px;
color: #fff;
cursor: pointer;
} }
.eyes { .eyes {
display: inline-block; display: inline-block;
height: 14px; height: 18px;
width: 18px; width: 18px;
margin-top: 11px; margin-top: 11px;
margin-right: 5px; margin-right: 5px;
...@@ -710,12 +367,4 @@ export default { ...@@ -710,12 +367,4 @@ export default {
.eyes.close { .eyes.close {
background: url('../../assets/eyes-closed.png') no-repeat center / cover; background: url('../../assets/eyes-closed.png') no-repeat center / cover;
} }
.radioGroup {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment