mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 10:57:26 +08:00
Merge branch 'vue3' of https://gitee.com/beijing_hongye_huicheng/lilishop-ui into vue3
This commit is contained in:
田香琪
BIN
seller/src/assets/images/zhizhao.jpg
Normal file
BIN
seller/src/assets/images/zhizhao.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
BIN
seller/src/assets/login-bg.png
Normal file
BIN
seller/src/assets/login-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 MiB |
BIN
seller/src/assets/logo-lilishop.png
Normal file
BIN
seller/src/assets/logo-lilishop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -1,6 +1,12 @@
|
||||
|
||||
module.exports = {
|
||||
title: "lilishop", //配置显示在浏览器标签的title
|
||||
icpCard: "", // icp证
|
||||
company: {
|
||||
href: "https://pickmall.cn",
|
||||
name: "北京宏业汇成科技有限公司",
|
||||
}, //公司信息
|
||||
icpMessage: "京ICP备20009696号-1", //icp备案
|
||||
/**
|
||||
* 高德地图申请链接
|
||||
* https://lbs.amap.com/api/javascript-api/guide/abc/prepare
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
<template>
|
||||
<div class="login" @click="$refs.verify.show = false">
|
||||
<el-row class="flex" @keyup.enter="submitLogin">
|
||||
<el-col style="width: 368px">
|
||||
<Header />
|
||||
<el-row style="flex-direction: column">
|
||||
<el-tabs v-model="loginType">
|
||||
<el-tab-pane label="账号密码登录" name="passwordLogin">
|
||||
<div class="login-hero">
|
||||
<img class="login-bg" :src="loginBg" alt="" />
|
||||
<div class="login-panel" @keyup.enter="submitLogin">
|
||||
<div class="login-wrap">
|
||||
<img class="login-logo" :src="loginLogo" alt="LILISHOP" />
|
||||
<Header class="login-header-init" />
|
||||
|
||||
<el-tabs v-model="loginType" class="login-tabs">
|
||||
<el-tab-pane label="账号登录" name="passwordLogin">
|
||||
<el-form
|
||||
ref="usernameLoginForm"
|
||||
:model="form"
|
||||
@@ -40,67 +43,77 @@
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="register">
|
||||
<a @click="$router.push('forgetPassword')">忘记密码</a>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="验证码登录" name="mobileLogin">
|
||||
<el-tab-pane label="手机登录" name="mobileLogin">
|
||||
<el-form
|
||||
ref="formSms"
|
||||
:model="formSms"
|
||||
:rules="ruleInline"
|
||||
class="form"
|
||||
@click.self="$refs.verify.show = false"
|
||||
>
|
||||
<el-form-item prop="mobile">
|
||||
<el-input
|
||||
v-model="formSms.mobile"
|
||||
size="large"
|
||||
maxlength="11"
|
||||
clearable
|
||||
placeholder="手机号"
|
||||
placeholder="请输入手机号"
|
||||
>
|
||||
<template #prepend>
|
||||
<template #prefix>
|
||||
<el-icon><Iphone /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input v-model="formSms.code" placeholder="手机验证码">
|
||||
<template #prepend>
|
||||
<div class="code-field">
|
||||
<el-input
|
||||
v-model="formSms.code"
|
||||
size="large"
|
||||
placeholder="请输入验证码"
|
||||
class="code-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Message /></el-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button @click="sendCode" :loading="sendCodeLoading">
|
||||
</el-input>
|
||||
<el-button
|
||||
class="send-code-btn"
|
||||
link
|
||||
:disabled="!isMobileValid || time !== 60"
|
||||
:loading="sendCodeLoading"
|
||||
@click="sendCode"
|
||||
>
|
||||
{{ codeMsg }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-row>
|
||||
|
||||
<el-button
|
||||
class="login-btn"
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
style="width: 100%"
|
||||
:disabled="!canSubmitLogin"
|
||||
@click="submitLogin"
|
||||
>
|
||||
<span v-if="!loading">登录</span>
|
||||
<span v-else>登录中</span>
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
|
||||
<verify
|
||||
ref="verify"
|
||||
class="verify-con"
|
||||
verifyType="LOGIN"
|
||||
@change="verifyChange"
|
||||
/>
|
||||
<Footer />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer class="login-footer" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -127,10 +140,13 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loginBg: require("@/assets/login-bg.png"),
|
||||
loginLogo: require("@/assets/logo-lilishop.png"),
|
||||
saveLogin: true,
|
||||
sendCodeLoading: false,
|
||||
loading: false,
|
||||
verifyStatus: false,
|
||||
smsCodeSent: false,
|
||||
time: 60,
|
||||
loginType: "passwordLogin",
|
||||
form: {
|
||||
@@ -160,6 +176,24 @@ export default {
|
||||
codeMsg: "发送验证码",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isMobileValid() {
|
||||
return RegExp.mobile.test(this.formSms.mobile);
|
||||
},
|
||||
canSubmitLogin() {
|
||||
if (this.loginType === "passwordLogin") {
|
||||
return !!(this.form.username.trim() && this.form.password.trim());
|
||||
}
|
||||
return this.smsCodeSent;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
"formSms.mobile"() {
|
||||
this.smsCodeSent = false;
|
||||
this.verifyStatus = false;
|
||||
this.formSms.code = "";
|
||||
},
|
||||
},
|
||||
created() {
|
||||
window.localStorage.setItem("menuData", "");
|
||||
},
|
||||
@@ -193,8 +227,8 @@ export default {
|
||||
});
|
||||
},
|
||||
sendCode() {
|
||||
if (this.formSms.mobile === "") {
|
||||
this.$Message.warning("请先填写手机号");
|
||||
if (!this.isMobileValid) {
|
||||
this.$Message.warning("请输入正确的手机号");
|
||||
return;
|
||||
}
|
||||
if (!this.verifyStatus) {
|
||||
@@ -210,6 +244,7 @@ export default {
|
||||
sendSms(params)
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
this.smsCodeSent = true;
|
||||
this.$Message.success("验证码发送成功");
|
||||
const that = this;
|
||||
this.interval = setInterval(() => {
|
||||
@@ -234,6 +269,8 @@ export default {
|
||||
}
|
||||
},
|
||||
submitLogin() {
|
||||
if (!this.canSubmitLogin) return;
|
||||
|
||||
if (this.loginType === "passwordLogin") {
|
||||
this.$refs.usernameLoginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
@@ -289,27 +326,148 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
background-image: url("../assets/background.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-size: 100% auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-hero {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 1024 / 426;
|
||||
}
|
||||
|
||||
.login-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 12vw 0 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.login-wrap {
|
||||
position: relative;
|
||||
width: 320px;
|
||||
padding: 40px 42px 32px;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
display: block;
|
||||
width: 168px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login-header-init {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-tabs {
|
||||
margin-top: 28px;
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-wrap) {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-wrap::after) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav) {
|
||||
float: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
padding: 0 0 12px;
|
||||
margin-right: 32px;
|
||||
height: auto;
|
||||
font-size: 15px;
|
||||
color: #8a9199;
|
||||
transition: color 0.2s ease, font-size 0.2s ease;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-tabs__active-bar) {
|
||||
height: 2px;
|
||||
background-color: $theme_color;
|
||||
border-radius: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
|
||||
box-shadow: 0 0 0 1px #e5e7eb inset !important;
|
||||
border-radius: 8px;
|
||||
padding: 4px 14px;
|
||||
transition: box-shadow 0.2s ease;
|
||||
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
|
||||
box-shadow: 0 0 0 1px $theme_color inset,
|
||||
0 0 0 3px rgba($theme_color, 0.12) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input-group__prepend),
|
||||
:deep(.el-input-group__append) {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.el-input-group__prepend) {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-input-group__append) {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-input__prefix) {
|
||||
color: #a0a7b0;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
background-color: transparent !important;
|
||||
|
||||
@@ -325,38 +483,120 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.send-code-btn {
|
||||
flex-shrink: 0;
|
||||
min-width: 90px;
|
||||
padding: 0 4px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
color: $theme_color !important;
|
||||
|
||||
&:not(.is-disabled):hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: #c0c4cc !important;
|
||||
}
|
||||
}
|
||||
|
||||
.code-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
|
||||
.code-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.verify-con {
|
||||
position: absolute;
|
||||
top: 126px;
|
||||
top: 150px;
|
||||
z-index: 10;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.form {
|
||||
padding-top: 1vh;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: linear-gradient(135deg, $theme_color 0%, $warning_color 100%);
|
||||
height: 40px;
|
||||
border: none;
|
||||
}
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
margin-top: 4px;
|
||||
border: none !important;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
letter-spacing: 2px;
|
||||
color: #fff !important;
|
||||
background: linear-gradient(135deg, $theme_color 0%, $warning_color 100%) !important;
|
||||
box-shadow: none;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
.login-btn:hover {
|
||||
&:not(.is-disabled):hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.register {
|
||||
text-align: right;
|
||||
margin-bottom: 12px;
|
||||
a {
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.is-disabled,
|
||||
&.is-disabled:hover,
|
||||
&.is-disabled:focus {
|
||||
color: #fff !important;
|
||||
border-color: transparent !important;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba($theme_color, 0.45) 0%,
|
||||
rgba($warning_color, 0.45) 100%
|
||||
) !important;
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.flex {
|
||||
:deep(.login-footer.foot) {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
:deep(.login-footer .information) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.login-footer .copyright p) {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
:deep(.login-footer a) {
|
||||
color: #000 !important;
|
||||
|
||||
&:hover {
|
||||
color: #333 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.login-panel {
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.login-wrap {
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
padding: 32px 24px 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,29 +1,45 @@
|
||||
<template>
|
||||
<div class="foot">
|
||||
<el-row justify="space-around" class="help">
|
||||
<a class="item" :href="config.website" target="_blank">帮助</a>
|
||||
<a class="item" :href="config.website" target="_blank">隐私</a>
|
||||
<a class="item" :href="config.website" target="_blank">条款</a>
|
||||
</el-row>
|
||||
<el-row justify="center" class="copyright">
|
||||
Copyright © {{ year }} - Present
|
||||
<div class="information footer-bottom">
|
||||
<div class="icp">
|
||||
<li v-if="config.icpCard">
|
||||
<a
|
||||
:href="config.website"
|
||||
class="href"
|
||||
:href="
|
||||
'https://tsm.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp?num=' +
|
||||
config.icpCard +
|
||||
'&type=xuke'
|
||||
"
|
||||
target="_blank"
|
||||
style="margin: 0 5px"
|
||||
>{{ config.title }}</a
|
||||
>
|
||||
</el-row>
|
||||
{{ config.icpCard }}
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="config.icpMessage" class="footer-bottom">
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank">
|
||||
{{ config.icpMessage }}
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
<a class="company-link" :href="config.company.href" target="_blank">
|
||||
<img class="zhizhao" :src="zhizhaoImg" alt="" />
|
||||
{{ config.company.name }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="copyright">
|
||||
<p>Copyright © {{ year }} {{ config.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/index";
|
||||
const config = require("@/config/index");
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
config,
|
||||
zhizhaoImg: require("@/assets/images/zhizhao.jpg"),
|
||||
year: new Date().getFullYear(),
|
||||
};
|
||||
},
|
||||
@@ -32,21 +48,71 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.foot {
|
||||
position: fixed;
|
||||
bottom: 4vh;
|
||||
width: 368px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
.help {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1vh;
|
||||
width: 60%;
|
||||
.item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
}
|
||||
:hover {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
|
||||
.information {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 30px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.icp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0 4px;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.company-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.zhizhao {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 4px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,7 +13,7 @@ import { getBaseSite } from "@/api/common.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
storeSideLogo: defaultLogo,
|
||||
storeSideLogo: require("@/assets/logo-lilishop.png"),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@@ -66,13 +66,13 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
margin-bottom: 6vh;
|
||||
margin-bottom: 0;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center !important;
|
||||
}
|
||||
.logo {
|
||||
width: 440px;
|
||||
height: 158px;
|
||||
width: 168px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user