Skip to content

O
offical_web
Commit f3bc79f6 by qinjianhui
Options

Merge branch 'master' into dev

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