Skip to content

O
offical_web
Commit f3bc79f6 by qinjianhui
Options

Merge branch 'master' into dev

parents bfa6e80a ae814214
Showing with 258 additions and 49 deletions
src/components/head.vue
......@@ -26,7 +26,7 @@
<span class="reg-btn" @click="register">注册</span>
</div>
<el-button type="primary" @click="register">免费试用</el-button>
<el-button type="primary" @click="freeTrial">免费试用</el-button>
</div>
</div>
</header>
......@@ -64,11 +64,14 @@ export default {
})
},
login() {
this.$router.push('/')
this.$router.push('/login')
},
register() {
this.$router.push('/register')
},
freeTrial() {
window.open('https://demo.jomalls.com')
},
},
}
</script>
......
src/components/product-intro.vue
......@@ -278,7 +278,7 @@
智能分析采购需求，不同类型的采购形式配置，同时合理管控供应商及整个采购流程，每一个环节都清晰明了
</span>
<div class="free-btn">
<el-button type="primary" size="small" @click="register">免费试用</el-button>
<el-button type="primary" size="small" @click="freeTrial">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -339,7 +339,7 @@
系统智能化实现自动分仓、自动审单、标记发货及监控、发货超时提醒，多种订单状态满足客户日常处理订单的所有需求
</span>
<div class="free-btn">
<el-button type="primary" size="small" @click="register">免费试用</el-button>
<el-button type="primary" size="small" @click="freeTrial">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -389,7 +389,7 @@
智能高效的仓储管理系统，集收货、入库、出库等库内作业为一体，对信息、资源更完美的管理
</span>
<div class="free-btn">
<el-button type="primary" size="small" @click="register">免费试用</el-button>
<el-button type="primary" size="small" @click="freeTrial">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -430,7 +430,7 @@
强大的数据中心，能够精准、快速地分析出各个维度、环节的利润、成本、支出。
</span>
<div class="free-btn">
<el-button type="primary" size="small" @click="register">免费试用</el-button>
<el-button type="primary" size="small" @click="freeTrial">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -471,7 +471,7 @@
通过订单审核策略自动匹配运输方式、发货仓，运费试算。包裹物流轨迹追踪，精准掌握包裹状态信息，提高效率，减少损失
</span>
<div class="free-btn">
<el-button type="primary" size="small" @click="register">免费试用</el-button>
<el-button type="primary" size="small" @click="freeTrial">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -512,7 +512,7 @@
管理所有产品信息，精细到每一张图片、每一个标题，并且实现快速批量刊登
</span>
<div class="free-btn">
<el-button type="primary" size="small" @click="register">免费试用</el-button>
<el-button type="primary" size="small" @click="freeTrial">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -529,7 +529,7 @@
</div>
<div class="row-item">
<div class="item-text">
<span>一健导入</span>
<span>一键导入</span>
</div>
<div class="item-des">
<span>一键导入店铺，同步供应</span>
......@@ -553,7 +553,7 @@
采用精准严谨的财务管理流程，算清每一分钱的来龙去脉，实时掌握公司资金流
</span>
<div class="free-btn">
<el-button type="primary" size="small" @click="register">免费试用</el-button>
<el-button type="primary" size="small" @click="freeTrial">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -594,7 +594,7 @@
多店铺统一管理，高效快捷，一键刊登和下架
</span>
<div class="free-btn">
<el-button type="primary" size="small" @click="register">免费试用</el-button>
<el-button type="primary" size="small" @click="freeTrial">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -658,8 +658,8 @@ export default {
onChangeTabIndex(index) {
this.activeTab = index
},
register() {
this.$router.push('/register')
freeTrial() {
window.open('https://demo.jomalls.com')
}
},
}
......
src/router/index.js
......@@ -48,11 +48,11 @@ const routes = [
name: 'register',
component: (resolve) => require(['../views/register'], resolve),
},
// {
// path: '/login',
// name: 'login',
// component: (resolve) => require(['../views/login'], resolve),
// },
{
path: '/login',
name: 'login',
component: (resolve) => require(['../views/login'], resolve),
},
{
path: '/contact',
name: 'contact',
......
src/views/login.vue
......@@ -2,19 +2,22 @@
<div>
<div class="login_bg">
<div class="logo">
<a href="/">
<span class="logo_text">
<img src="../assets/logo.png" height="40px" />
</span>
</a>
</div>
<div class="banner_text">
<h1>智能化订单处理</h1>
<h1 style="margin-left: 60px">数字化供采平台</h1>
<h1 style="margin-left: 120px">多维度数据分析</h1>
<div>
<a href="/">
<span class="logo_text">
<img src="../assets/logo.png" height="40px" />
</span>
</a>
</div>
<div class="banner_text">
<div>智能化订单处理</div>
<div style="margin-left: 20px">数字化供采平台</div>
<div style="margin-left: 20px">多维度数据分析</div>
</div>
</div>
<div class="login_content">
<h2 style="text-align: center">登录</h2>
<h2 style="text-align: center; font-weight: 400">用户登录</h2>
<el-form
size="medium"
:model="ruleForm"
......@@ -28,7 +31,7 @@
v-model="ruleForm.email"
placeholder="Email"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-form-item prop="password" style="margin-bottom: 20px">
<el-input
:type="showPwd ? 'text' : 'password'"
prefix-icon="el-icon-lock"
......@@ -42,6 +45,11 @@
:class="{ eyes: true, open: !showPwd, close: showPwd }"></i>
</el-input>
</el-form-item>
<!-- <div class="forget-password">
<span style="cursor: pointer" @click="forgetPassword">
忘记密码
</span>
</div> -->
<div style="text-align: center">
<button class="login-btn" @click="submitForm">登录</button>
</div>
......@@ -52,22 +60,101 @@
</el-form>
</div>
</div>
<div
class="modal"
:style="isShowModal ? 'display: block' : 'display: none'">
<div class="forget-form">
<div class="forget-title">忘记密码</div>
<el-form size="medium" :model="forgetForm" ref="forgetForm">
<el-form-item
prop="email"
label=""
:rules="[{ required: true, message: '请输入邮箱' }]">
<el-input
v-model="forgetForm.email"
prefix-icon="el-icon-postcard"
style="background: #fff"
placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item
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
prop="newPassword"
:rules="[{ required: true, message: '请输入新密码' }]">
<el-input
v-model="forgetForm.newPassword"
placeholder="请输入新密码"
clearable
prefix-icon="el-icon-lock"
style="background-color: #fff" />
</el-form-item>
<el-form-item
prop="confirmNewPassword"
:rules="[{ required: true, message: '请再次输入新密码' }]">
<el-input
v-model="forgetForm.confirmNewPassword"
placeholder="请再次输入新密码"
clearable
prefix-icon="el-icon-lock"
style="background-color: #fff" />
</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: #2f97f1; cursor: pointer"
@click="isShowModal = false">
登录
</span>
</div>
</el-form>
<i class="el-icon-circle-close" @click="isShowModal = false"></i>
</div>
</div>
</div>
</template>
<script>
import { post } from '../utils/axios'
import { post, get } from '../utils/axios'
import md5 from 'js-md5'
export default {
name: 'login',
components: {},
data() {
return {
isShowModal: false,
ruleForm: {
password: '',
email: '',
checked: false,
},
codeCountDown: 0,
forgetForm: {},
rules: {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
......@@ -82,7 +169,53 @@ export default {
showPwd: false,
}
},
computed: {
getCodeDisabled() {
return this.codeCountDown > 0
},
},
methods: {
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)
}
},
forgetPassword() {
this.isShowModal = true
this.forgetForm = {}
this.$nextTick(() => {
this.$refs.forgetForm.clearValidate()
})
},
// 重置密码
resetPassword() {
try {
this.$refs.forgetForm.validate()
} catch {
return
}
},
submitForm(e) {
e.preventDefault()
this.$refs.ruleForm.validate((valid) => {
......@@ -108,48 +241,121 @@ export default {
}
</script>
<style scoped>
.reset-password {
width: 100%;
background-image: linear-gradient(
to right,
#5192e1 0%,
#23ced5 51%,
#5192e1 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, #319af2 0%, #2386ee 100%);
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: #252d40;
z-index: 3;
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 i {
position: fixed;
top: -30px;
right: -28px;
font-size: 30px;
color: #fff;
cursor: pointer;
}
.logo {
position: absolute;
display: flex;
align-items: center;
left: 4%;
top: 7%;
}
.logo_text {
display: inline-block;
line-height: 40px;
margin: 60px 0 0 80px;
}
.banner_text {
position: absolute;
top: 30%;
left: 10%;
line-height: 80px;
font-size: 28px;
color: #fff;
letter-spacing: 4px;
display: flex;
margin-left: 40px;
}
.login_bg {
width: 100%;
height: 100vh;
position: relative;
image-rendering: -webkit-optimize-contrast;
background: url(../assets/banner.jpg) center / cover no-repeat;
background: url(../assets/banner.jpg) left / cover no-repeat;
background-color: #b3e2fe;
background-size: 50% auto;
}
.login_content {
padding: 18px;
background: rgba(255, 255, 255, 0.4);
padding: 30px;
background: rgba(255, 255, 255, 1);
position: absolute;
top: 50%;
left: 80%;
border-radius: 6px;
transform: translate(-50%, -50%);
left: 60%;
border-radius: 10px;
transform: translateY(-50%);
box-sizing: border-box;
background-position: top right, center;
background-repeat: no-repeat;
background-size: 528px auto, contain;
box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
}
.login_form {
padding: 40px;
width: 300px;
padding: 24px 0;
width: 330px;
border-radius: 6px;
}
.forget-password {
margin-bottom: 16px;
text-align: right;
font-size: 14px;
color: #006eff;
}
.login-btn {
width: 100%;
height: 38px;
......
src/views/register.vue
......@@ -86,7 +86,7 @@
</div>
<div style="margin-top: 20px; font-size: 14px; text-align: center">
已有账号？
<router-link class="link" to="/">马上登录</router-link>
<router-link class="link" to="/login">马上登录</router-link>
</div>
</div>
</div>
......
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