Skip to content

Z
zhichan
Commit 59aee7a0 by 尹亚亭
Options

make selftmreg

parents e2ff41cd 309d8d10
Showing with 1141 additions and 64 deletions
channel-access/package-lock.json
......@@ -6812,6 +6812,11 @@
"integrity": "sha1-Hvo57yxfeYC7F4St5KivLeMpESE=",
"dev": true
},
"js-cookie": {
"version": "2.2.1",
"resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-cookie%2Fdownload%2Fjs-cookie-2.2.1.tgz",
"integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
},
"js-levenshtein": {
"version": "1.1.6",
"resolved": "https://registry.npm.taobao.org/js-levenshtein/download/js-levenshtein-1.1.6.tgz",
......
channel-access/package.json
......@@ -11,6 +11,7 @@
"axios": "^0.19.0",
"core-js": "^3.4.4",
"element-ui": "^2.13.0",
"js-cookie": "^2.2.1",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"
......
channel-access/src/App.vue
......@@ -2,9 +2,17 @@
<!-- 根组件 -->
<div id="app" ref="app">
<router-view />
<!-- <Globalfooter/> -->
</div>
</template>
<script>
import Globalfooter from "@/components/globalfooter"
export default {
components:{
Globalfooter
}
}
</script>
<style lang="scss">
*{
margin: 0;
......
channel-access/src/api/api.js
import axios from "axios";
import http from "@/http/http.js";
let baseUrl =
"http://zcchannel.gongsibao.com:4003/web/auth/accessAuth/getAppTokenByHosts";
//获取token
export function getTokens() {
return axios.post(baseUrl, {
actionType: "getAppTokenByHosts", //固定写法就行
actionBody: {}
});
}
let baseUrl = "http://tm.plus.jdcloud.com/web/trademark/tmqueryCtl/doPost";
//jdbycdetailtm数据
export function getJdbycdetailtmData() {
return axios.post(baseUrl, {
actionProcess: "jd",
sign: "2FviZ9PGws8Pt1fBhq0t90mjUvI",
actionBody: { timeStamp: 1578295027, channelUserId: "" },
actionType: "tradeMarkDetail",
requrl: "/action/tmQuery/springBoard",
isUser: "no",
isDecryptUser: "no"
return http.post(baseUrl, {
actionType: "getAppTokenByHosts",
actionBody: { timeStamp: 1578295027, channelUserId: "" }
});
}
//初审公告期号图片
......@@ -32,7 +37,7 @@ export function getLinkUrl(num) {
}
//获取公司信息
export function getCompanyInfo(name) {
return axios.post(baseUrl, {
return http.post(baseUrl, {
actionProcess: "jd",
sign: "2FviZ9PGws8Pt1fBhq0t90mjUvI",
actionBody: {
......
channel-access/src/components/globalfooter.vue 0 → 100644
<template>
<div class="globalfooter">
<div class="globalfooter-main">
<div class="globalfooter-main-top">
<div>
<div class="bannerImg"><img src="" alt="" /></div>
<p>北京创知厚德科技有限公司</p>
<span>地址：北京市来广营朝来科技园10号楼101号</span>
</div>
<div class="shu"></div>
<div>
<p>联系我们</p>
<span>客服电话：010-88888888</span>
<span>商务合作：010-88888888-1</span>
</div>
<div>
<p>友情链接</p>
<span>国家知识产权局</span>
<span>国家商标局</span>
<span>国家版权局</span>
<span>地方知识产权局</span>
</div>
<div>
<p>客服二维码</p>
<div class="qrCode">
<img src="" alt="">
</div>
</div>
</div>
<div class="globalfooter-main-bom">
2015-2019 公司宝 京ICP备15033495 号 京ICP证160919号
国家知识产权局批准机构代码：11577
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss">
.globalfooter {
width: 100%;
height: 377px;
background: #222331;
.globalfooter-main {
width: 940px;
height: 100%;
margin: 0 auto;
padding: 77px 0 26px;
}
}
.globalfooter-main-top {
width: 100%;
height: 172px;
display: flex;
justify-content: space-between;
.shu{
width: 1px;
height: 100%;
background: #979797;
}
div {
.bannerImg {
width: 265px;
height: 66px;
background: #ffffff;
margin-bottom: 18px;
img {
width: 100%;
height: 100%;
}
}
.qrCode{
width: 86px;
height: 86px;
background: #fff;
img{
width: 100%;
height: 100%;
}
}
p {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f1f1f1;
line-height: 22px;
margin-bottom: 23px;
}
span {
display: block;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999;
line-height: 20px;
}
}
}
.globalfooter-main-bom {
margin-top: 85px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999;
line-height: 17px;
text-align: center;
}
</style>
channel-access/src/components/globalheader.vue 0 → 100644
<template>
<div class="globalheader">
<div class="globalheader-main">
<div class="globalheader-main-left">
<div><img src="" alt="" /></div>
<h3>启服通</h3>
<p>登录</p>
</div>
<div class="globalheader-main-right">
首页
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss">
.globalheader {
width: 100%;
height: 60px;
background: #fff;
.globalheader-main {
max-width: 1240px;
height: 100%;
padding: 0 20px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
}
.globalheader-main-left {
height: 100%;
line-height: 60px;
display: flex;
align-items: center;
div {
width: 28px;
height: 28px;
background: #e1e1e1;
img {
width: 100%;
height: 100%;
}
}
h3 {
padding: 0 23px 0 15px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 16px;
border-right: 2px solid #333333;
}
p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 22px;
padding: 0 0 0 15px;
}
}
.globalheader-main-right {
font-size: 15px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 60px;
}
</style>
channel-access/src/http/http.js
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import router from '../router/index'
import axios from "axios";
import { Message, MessageBox } from "element-ui";
import store from "../store";
import { getToken } from "@/utils/getToken.js";
// 创建axios实例
const service = axios.create({
// baseURL: process.env.BASE_API, // api 的 base_url
timeout: 5000, // 请求超时时间
// headers
})
timeout: 5000 // 请求超时时间
// headers
});
// // 获取token并带上
// const getToken = function () {
......@@ -17,17 +17,20 @@ const service = axios.create({
// request拦截器
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
let token = getToken("token");
if (token) {
config.headers["token"] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
} else {
Message("token已失效")
}
return config
return config;
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
console.log(error); // for debug
Promise.reject(error);
}
)
);
// response 拦截器
service.interceptors.response.use(
......@@ -35,45 +38,44 @@ service.interceptors.response.use(
/**
* code为非20000是抛错 可结合自己业务进行修改
*/
const res = response.data
const codeReg = /^20\d+/
const res = response.data;
const codeReg = /^20\d+/;
if (!codeReg.test(response.status)) {
Message({
message: res.message,
type: 'error',
type: "error",
duration: 5 * 1000
})
});
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
MessageBox.confirm(
'你已被登出，可以取消继续留在该页面，或者重新登录',
'确定登出',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
"你已被登出，可以取消继续留在该页面，或者重新登录",
"确定登出", {
confirmButtonText: "重新登录",
cancelButtonText: "取消",
type: "warning"
}
).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
})
store.dispatch("FedLogOut").then(() => {
location.reload(); // 为了重新实例化vue-router对象 避免bug
});
});
}
return Promise.reject('error')
return Promise.reject("error");
} else {
return response.data
return response.data;
}
},
error => {
console.log('err' + error) // for debug
console.log("err" + error); // for debug
Message({
message: error.message,
type: 'error',
type: "error",
duration: 5 * 1000
})
return Promise.reject(error)
});
return Promise.reject(error);
}
)
);
export default service
\ No newline at end of file
export default service;
\ No newline at end of file
channel-access/src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// ui以及主题样式
import Element from 'element-ui'
import './assets/css/globelcolor.scss'
import './assets/css/reset.scss'
import Element from "element-ui";
import "./assets/css/globelcolor.scss";
import "./assets/css/reset.scss";
// 请求方法
import http from './http/request'
Vue.prototype.$axios = http;
Vue.use(Element)
Vue.config.productionTip = false
let that = new Vue({
import { getTokens } from "@/api/api.js";
import { seveToken } from "@/utils/getToken.js";
getTokens().then(res => {
seveToken(res.data.data.token)
})
Vue.use(Element);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
console.log(that)
\ No newline at end of file
}).$mount("#app");
\ No newline at end of file
channel-access/src/router/index.js
......@@ -5,6 +5,34 @@ Vue.use(VueRouter);
const routes = [
{
path: "/user",
name: "user",
redirect: "/user/login",
component: () => import("@/views/pages/user"),
children: [
{
path: "login",
name: "login",
component: () => import("@/views/pages/user/login")
},
{
path: "register",
name: "register",
component: () => import("@/views/pages/user/register")
},
{
path: "forgetpassword",
name: "forgetpassword",
component: () => import("@/views/pages/user/forgetPassword")
}
]
},
{
path: "/placeorder",
name: "placeorder",
component: () => import("@/views/pages/placeorder")
},
{
path: "/jdbycdetailtm",
name: "jdbycdetailtm",
component: () => import("@/views/pages/jdbycdetailtm")
......@@ -36,6 +64,7 @@ const routes = [
component: () => import("@/views/pages/selftmreg/Selftmreg")
},
{
// path: "/bycnoticeindex",
path: "/bycnoticeindex",
name: "bycnoticeindex",
component: () => import("@/views/pages/bycnoticeindex/Bycnoticeindex")
......
channel-access/src/utils/getToken.js 0 → 100644
import Cookies from "js-cookie";
export function getToken(name) {
//获取Token
return Cookies.get(name);
}
export function seveToken(token) {
//存储token到cookie里，有效期为8小时
Cookies.set("token", token, { expires: 4 / 24 });
}
\ No newline at end of file
channel-access/src/views/pages/placeorder/index.vue 0 → 100644
<template>
<div class="placeorder">
<div class="placeorder-main">
<div class="placeorder-main-container">
<div class="main-container-top">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>专家辅助商标注册</el-breadcrumb-item>
<el-breadcrumb-item>下单</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
</div>
<div class="placeorder-footer">
<div class="placeorder-footer-main">
<p></p>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss">
.placeorder {
width: 100%;
}
.placeorder-main {
width: 100%;
padding: 30px 0;
.placeorder-main-container {
width: 1200px;
margin: 0 auto;
padding: 0 20px;
border: 1px solid #e4e4e4;
.main-container-top {
width: 100%;
height: 60px;
display: flex;
align-items: center;
border-bottom: 1px solid #CECECE;
}
}
}
.placeorder-footer {
width: 100%;
height: 60px;
background: rgba(230, 240, 255, 1);
.placeorder-footer-main {
max-width: 1240px;
height: 100%;
padding: 0 20px;
display: flex;
justify-content: space-between;
}
}
</style>
channel-access/src/views/pages/user/forgetPassword/index.vue 0 → 100644
<template>
<div class="forgetCode">
<h1>找回启服通密码</h1>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item prop="verificationCode"
><el-input
v-model="ruleForm.verificationCode"
placeholder="请输入验证码"
></el-input
><el-button @click="getVerificationCode">{{ btnInnerText }}</el-button>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="ruleForm.password"
placeholder="请输入密码"
show-password
></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm()">确定</el-button>
<p>
<span @click="$router.push('/user/login')">登陆</span
><span @click="$router.push('/user/register')">注册</span>
</p>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
name: "",
verificationCode: "",
password: ""
},
btnInnerText: "获取验证码",
flag: true,
timeNum: 10,
timer: null,
rules: {
name: [{ required: true, message: "请输入账号", trigger: "blur" }],
verificationCode: [
{ required: true, message: "请输验证码", trigger: "blur" }
],
password: [{ required: true, message: "请输入密码", trigger: "blur" }]
}
};
},
methods: {
//获取验证码
getVerificationCode() {
if (this.flag) {
this.flag = false;
this.btnInnerText = this.timeNum + "秒之后重新获取";
this.timer = setInterval(() => {
this.timeNum--;
this.btnInnerText = this.timeNum + "秒之后重新获取";
if (this.timeNum <= 0) {
clearInterval(this.timer);
this.btnInnerText = "重新获取验证码";
this.timeNum = 10;
this.flag = true;
}
}, 1000);
}
},
//提交表单
submitForm() {
if (
this.ruleForm.name &&
this.ruleForm.password &&
this.ruleForm.password
) {
console.log(123);
}
}
}
};
</script>
<style lang="scss">
.forgetCode {
width: 555px;
height: 511px;
background: #fff;
padding: 50px 112px 0;
h1 {
width: 100%;
margin: 0 0 39px;
text-align: center;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 25px;
}
.el-form {
.el-form-item {
.el-form-item__content {
margin-left: 0 !important;
display: flex;
}
}
}
p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(153, 153, 153, 1);
line-height: 20px;
margin-top: 60px;
text-align: center;
}
.el-input {
input {
width: 100%;
height: 42px;
border-radius: 0;
}
}
.el-form {
.el-form-item {
margin-top: 30px;
button {
border-radius: 0;
border: 1px solid #108ee9;
color: #108ee9;
margin-left: 10px;
width: 150px;
height: 41px;
margin-top: 0;
background: #fff;
}
}
button {
width: 100%;
height: 42px;
margin-top: 20px;
border-radius: 0;
background: #3071fe;
border: 1px solid #3071fe;
}
p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 20px;
text-align: center;
margin-top: 30px;
span {
color: #108ee9;
cursor: pointer;
margin: 0 20px;
}
}
}
}
</style>
channel-access/src/views/pages/user/index.vue 0 → 100644
<template>
<div class="user">
<Globalheader />
<div class="user-main">
<div class="user-main-mid">
<div class="user-main-left">
<h1>专家辅助商标注册</h1>
<p>
<span>千万企业的共同选择值得您的信奈专属顾问一对一全流程服务</span>
<span>经验丰富专家把关，显著提升成功率</span>
<span>优化注册方案，全方位保护</span>
<span>专享绿色通道，材料齐全，30分钟申报</span>
</p>
</div>
<div class="user-main-right">
<router-view></router-view>
</div>
</div>
</div>
<div class="user-footer"></div>
</div>
</template>
<script>
import Globalheader from "@/components/globalheader";
export default {
components: {
Globalheader
},
data() {
return {
activeName: "first"
};
},
mounted() {},
methods: {}
};
</script>
<style lang="scss">
.user {
width: 100%;
.user-main {
width: 100%;
height: 840px;
background: url("../../../assets/imgs/loginBanner.png") no-repeat;
background-size: 100% 100%;
.user-main-mid {
max-width: 1240px;
min-width: 1000px;
height: 100%;
padding: 0 20px;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding-top: 123px;
}
}
}
.user-main-left {
width: 510px;
margin-top: 100px;
h1 {
font-size: 26px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ffffff;
line-height: 37px;
}
p {
margin-top: 56px;
span {
display: block;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f8f8f8;
line-height: 42px;
}
}
}
.user-main-right {
width: 555px;
}
</style>
channel-access/src/views/pages/user/login/index.vue 0 → 100644
<template>
<div class="login">
<div class="login-main">
<h1>欢迎登录启服通</h1>
<el-tabs v-model="activeName">
<el-tab-pane label="短信验证码登录" name="first">
<VerificationCode />
</el-tab-pane>
<el-tab-pane label="账号密码登录" name="second">
<Username />
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import VerificationCode from "./verificationCode";
import Username from "./username";
export default {
components: {
VerificationCode,
Username
},
data() {
return {
activeName: "first"
};
},
mounted() {},
methods: {}
};
</script>
<style lang="scss">
.login {
width: 555px;
height: 557px;
}
.login-main {
width: 555px;
height: 557px;
background: #fff;
padding: 50px 112px 0;
h1 {
width: 100%;
margin: 0 0 39px;
text-align: center;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 25px;
}
.el-tabs__nav-wrap::after {
display: none;
}
.el-tabs__nav {
width: 100%;
display: flex;
.el-tabs__item {
flex: 1;
text-align: center;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 20px;
}
}
.el-tabs__content {
width: 100%;
}
}
</style>
channel-access/src/views/pages/user/login/username.vue 0 → 100644
<template>
<div class="username">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="ruleForm.password"
placeholder="请输入密码"
show-password
></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm()">登录</el-button>
<p>
还没有账号？<span @click="$router.push('/user/register')">立即注册</span
><span>|</span><span @click="$router.push('/user/forgetPassword')">忘记密码？</span>
</p>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
name: "",
password: ""
},
rules: {
name: [{ required: true, message: "请输入账号", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }]
}
};
},
methods: {
//提交表单
submitForm() {
if (this.ruleForm.name && this.ruleForm.password) {
console.log(123);
}
}
}
};
</script>
<style lang="scss">
.username {
.el-form {
.el-form-item {
.el-form-item__content {
margin-left: 0 !important;
display: flex;
}
}
}
p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(153, 153, 153, 1);
line-height: 20px;
margin-top: 60px;
text-align: center;
}
.el-input {
input {
width: 100%;
height: 42px;
border-radius: 0;
}
}
.el-form {
.el-form-item {
margin-top: 30px;
button {
border-radius: 0;
border: 1px solid #108ee9;
color: #108ee9;
margin-left: 10px;
min-width: 150px;
height: 41px;
margin-top: 0;
}
}
button {
width: 100%;
height: 42px;
margin-top: 20px;
border-radius: 0;
background: #3071fe;
border: 1px solid #3071fe;
}
p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 20px;
text-align: center;
margin-top: 10px;
span {
color: #108ee9;
cursor: pointer;
margin: 0 5px;
}
}
}
}
</style>
channel-access/src/views/pages/user/login/verificationCode.vue 0 → 100644
<template>
<div class="verificationCode">
<el-form
:model="dynamicValidateForm"
ref="dynamicValidateForm"
label-width="100px"
class="demo-dynamic"
:rules="rules"
><el-form-item prop="buyerPhone"
><el-input
v-model="dynamicValidateForm.phone"
placeholder="请输入手机号码"
></el-input>
</el-form-item>
<el-form-item
><el-input
v-model="dynamicValidateForm.verificationCode"
placeholder="请输入验证码"
></el-input
><el-button @click="getVerificationCode">{{ btnInnerText }}</el-button>
</el-form-item>
<el-button type="primary" @click="submitForm()">登录</el-button>
<p>点击【登录】即可表示同意<span>《启服通用户协议》</span></p>
</el-form>
<p>未注册用户，系统默认为您创建账号</p>
</div>
</template>
<script>
export default {
data() {
var checkPhone = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
if (!this.dynamicValidateForm.phone) {
return callback(new Error("手机号码不能为空"));
}
setTimeout(() => {
if (!Number.isInteger(+this.dynamicValidateForm.phone)) {
callback(new Error("请输入数字值"));
} else {
if (phoneReg.test(this.dynamicValidateForm.phone)) {
callback();
} else {
callback(new Error("手机号码格式不正确"));
}
}
}, 100);
};
//
return {
dynamicValidateForm: {
phone: "",
verificationCode: ""
},
btnInnerText: "获取验证码",
flag: true,
timeNum: 10,
timer: null,
rules: {
buyerPhone: [{ validator: checkPhone, trigger: "blur" }]
}
};
},
methods: {
//获取验证码
getVerificationCode() {
if (this.flag) {
this.flag = false;
this.btnInnerText = this.timeNum + "秒之后重新获取";
this.timer = setInterval(() => {
this.timeNum--;
this.btnInnerText = this.timeNum + "秒之后重新获取";
if (this.timeNum <= 0) {
clearInterval(this.timer);
this.btnInnerText = "重新获取验证码";
this.timeNum = 10;
this.flag = true;
}
}, 1000);
}
},
//提交表单
submitForm() {
if (
/^1[3|4|5|7|8][0-9]{9}$/.test(this.dynamicValidateForm.phone) &&
this.dynamicValidateForm.verificationCode
) {
console.log(123);
}
}
}
};
</script>
<style lang="scss">
.verificationCode {
.el-form {
.el-form-item {
.el-form-item__content {
margin-left: 0 !important;
display: flex;
}
}
}
p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(153, 153, 153, 1);
line-height: 20px;
margin-top: 60px;
text-align: center;
}
.el-input {
input {
width: 100%;
height: 42px;
border-radius: 0;
}
}
.el-form {
.el-form-item {
margin-top: 30px;
button {
border-radius: 0;
border: 1px solid #108ee9;
color: #108ee9;
background: #fff;
margin-left: 10px;
width: 150px;
height: 41px;
margin-top: 0;
}
}
button {
width: 100%;
height: 42px;
margin-top: 20px;
border-radius: 0;
background: #3071fe;
border: 1px solid #3071fe;
}
p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 20px;
text-align: center;
margin-top: 10px;
span {
color: #108ee9;
cursor: pointer;
}
}
}
}
</style>
channel-access/src/views/pages/user/register/index.vue 0 → 100644
<template>
<div class="registerCode">
<h1>欢迎注册启服通账号</h1>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item prop="verificationCode"
><el-input
v-model="ruleForm.verificationCode"
placeholder="请输入验证码"
></el-input
><el-button @click="getVerificationCode">{{ btnInnerText }}</el-button>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="ruleForm.password"
placeholder="请输入密码"
show-password
></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm()">确定</el-button>
<p>已有账号，<span @click="$router.push('/user/login')">去登陆</span></p>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
name: "",
verificationCode: "",
password: ""
},
btnInnerText: "获取验证码",
flag: true,
timeNum: 10,
timer: null,
rules: {
name: [{ required: true, message: "请输入账号", trigger: "blur" }],
verificationCode: [
{ required: true, message: "请输验证码", trigger: "blur" }
],
password: [{ required: true, message: "请输入密码", trigger: "blur" }]
}
};
},
methods: {
//获取验证码
getVerificationCode() {
if (this.flag) {
this.flag = false;
this.btnInnerText = this.timeNum + "秒之后重新获取";
this.timer = setInterval(() => {
this.timeNum--;
this.btnInnerText = this.timeNum + "秒之后重新获取";
if (this.timeNum <= 0) {
clearInterval(this.timer);
this.btnInnerText = "重新获取验证码";
this.timeNum = 10;
this.flag = true;
}
}, 1000);
}
},
//提交表单
submitForm() {
if (
this.ruleForm.name &&
this.ruleForm.password &&
this.ruleForm.password
) {
console.log(123);
}
}
}
};
</script>
<style lang="scss">
.registerCode {
width: 555px;
height: 511px;
background: #fff;
padding: 50px 112px 0;
h1 {
width: 100%;
margin: 0 0 39px;
text-align: center;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 25px;
}
.el-form {
.el-form-item {
.el-form-item__content {
margin-left: 0 !important;
display: flex;
}
}
}
p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(153, 153, 153, 1);
line-height: 20px;
margin-top: 60px;
text-align: center;
}
.el-input {
input {
width: 100%;
height: 42px;
border-radius: 0;
}
}
.el-form {
.el-form-item {
margin-top: 30px;
button {
border-radius: 0;
border: 1px solid #108ee9;
color: #108ee9;
margin-left: 10px;
width: 150px;
height: 41px;
margin-top: 0;
background: #fff;
}
}
button {
width: 100%;
height: 42px;
margin-top: 20px;
border-radius: 0;
background: #3071fe;
border: 1px solid #3071fe;
}
p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 20px;
text-align: center;
margin-top: 10px;
span {
color: #108ee9;
cursor: pointer;
margin: 0 5px;
}
}
}
}
</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