Skip to content

Z
zhichan
Commit 59aee7a0 by 尹亚亭
Options

make selftmreg

parents e2ff41cd 309d8d10
Showing with 1140 additions and 63 deletions
channel-access/package-lock.json
...@@ -6812,6 +6812,11 @@ ...@@ -6812,6 +6812,11 @@
"integrity": "sha1-Hvo57yxfeYC7F4St5KivLeMpESE=", "integrity": "sha1-Hvo57yxfeYC7F4St5KivLeMpESE=",
"dev": true "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": { "js-levenshtein": {
"version": "1.1.6", "version": "1.1.6",
"resolved": "https://registry.npm.taobao.org/js-levenshtein/download/js-levenshtein-1.1.6.tgz", "resolved": "https://registry.npm.taobao.org/js-levenshtein/download/js-levenshtein-1.1.6.tgz",
......
channel-access/package.json
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"axios": "^0.19.0", "axios": "^0.19.0",
"core-js": "^3.4.4", "core-js": "^3.4.4",
"element-ui": "^2.13.0", "element-ui": "^2.13.0",
"js-cookie": "^2.2.1",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-router": "^3.1.3", "vue-router": "^3.1.3",
"vuex": "^3.1.2" "vuex": "^3.1.2"
......
channel-access/src/App.vue
...@@ -2,9 +2,17 @@ ...@@ -2,9 +2,17 @@
<!-- 根组件 --> <!-- 根组件 -->
<div id="app" ref="app"> <div id="app" ref="app">
<router-view /> <router-view />
<!-- <Globalfooter/> -->
</div> </div>
</template> </template>
<script>
import Globalfooter from "@/components/globalfooter"
export default {
components:{
Globalfooter
}
}
</script>
<style lang="scss"> <style lang="scss">
*{ *{
margin: 0; margin: 0;
......
channel-access/src/api/api.js
import axios from "axios"; 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数据 //jdbycdetailtm数据
export function getJdbycdetailtmData() { export function getJdbycdetailtmData() {
return axios.post(baseUrl, { return http.post(baseUrl, {
actionProcess: "jd", actionType: "getAppTokenByHosts",
sign: "2FviZ9PGws8Pt1fBhq0t90mjUvI", actionBody: { timeStamp: 1578295027, channelUserId: "" }
actionBody: { timeStamp: 1578295027, channelUserId: "" },
actionType: "tradeMarkDetail",
requrl: "/action/tmQuery/springBoard",
isUser: "no",
isDecryptUser: "no"
}); });
} }
//初审公告期号图片 //初审公告期号图片
...@@ -32,7 +37,7 @@ export function getLinkUrl(num) { ...@@ -32,7 +37,7 @@ export function getLinkUrl(num) {
} }
//获取公司信息 //获取公司信息
export function getCompanyInfo(name) { export function getCompanyInfo(name) {
return axios.post(baseUrl, { return http.post(baseUrl, {
actionProcess: "jd", actionProcess: "jd",
sign: "2FviZ9PGws8Pt1fBhq0t90mjUvI", sign: "2FviZ9PGws8Pt1fBhq0t90mjUvI",
actionBody: { 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 axios from "axios";
import { Message, MessageBox } from 'element-ui' import { Message, MessageBox } from "element-ui";
import store from '../store' import store from "../store";
import router from '../router/index' import { getToken } from "@/utils/getToken.js";
// 创建axios实例 // 创建axios实例
const service = axios.create({ const service = axios.create({
// baseURL: process.env.BASE_API, // api 的 base_url // baseURL: process.env.BASE_API, // api 的 base_url
timeout: 5000, // 请求超时时间 timeout: 5000 // 请求超时时间
// headers // headers
}) });
// // 获取token并带上 // // 获取token并带上
// const getToken = function () { // const getToken = function () {
...@@ -17,17 +17,20 @@ const service = axios.create({ ...@@ -17,17 +17,20 @@ const service = axios.create({
// request拦截器 // request拦截器
service.interceptors.request.use( service.interceptors.request.use(
config => { config => {
if (store.getters.token) { let token = getToken("token");
config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 if (token) {
config.headers["token"] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
} else {
Message("token已失效")
} }
return config return config;
}, },
error => { error => {
// Do something with request error // Do something with request error
console.log(error) // for debug console.log(error); // for debug
Promise.reject(error) Promise.reject(error);
} }
) );
// response 拦截器 // response 拦截器
service.interceptors.response.use( service.interceptors.response.use(
...@@ -35,45 +38,44 @@ service.interceptors.response.use( ...@@ -35,45 +38,44 @@ service.interceptors.response.use(
/** /**
* code为非20000是抛错 可结合自己业务进行修改 * code为非20000是抛错 可结合自己业务进行修改
*/ */
const res = response.data const res = response.data;
const codeReg = /^20\d+/ const codeReg = /^20\d+/;
if (!codeReg.test(response.status)) { if (!codeReg.test(response.status)) {
Message({ Message({
message: res.message, message: res.message,
type: 'error', type: "error",
duration: 5 * 1000 duration: 5 * 1000
}) });
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) { if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
MessageBox.confirm( MessageBox.confirm(
'你已被登出，可以取消继续留在该页面，或者重新登录', "你已被登出，可以取消继续留在该页面，或者重新登录",
'确定登出', "确定登出", {
{ confirmButtonText: "重新登录",
confirmButtonText: '重新登录', cancelButtonText: "取消",
cancelButtonText: '取消', type: "warning"
type: 'warning'
} }
).then(() => { ).then(() => {
store.dispatch('FedLogOut').then(() => { store.dispatch("FedLogOut").then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug location.reload(); // 为了重新实例化vue-router对象 避免bug
}) });
}) });
} }
return Promise.reject('error') return Promise.reject("error");
} else { } else {
return response.data return response.data;
} }
}, },
error => { error => {
console.log('err' + error) // for debug console.log("err" + error); // for debug
Message({ Message({
message: error.message, message: error.message,
type: 'error', type: "error",
duration: 5 * 1000 duration: 5 * 1000
}) });
return Promise.reject(error) return Promise.reject(error);
} }
) );
export default service export default service;
\ No newline at end of file \ No newline at end of file
channel-access/src/main.js
import Vue from 'vue' import Vue from "vue";
import App from './App.vue' import App from "./App.vue";
import router from './router' import router from "./router";
import store from './store' import store from "./store";
// ui以及主题样式 // ui以及主题样式
import Element from 'element-ui' import Element from "element-ui";
import './assets/css/globelcolor.scss' import "./assets/css/globelcolor.scss";
import './assets/css/reset.scss' import "./assets/css/reset.scss";
// 请求方法 // 请求方法
import http from './http/request' import { getTokens } from "@/api/api.js";
Vue.prototype.$axios = http; import { seveToken } from "@/utils/getToken.js";
Vue.use(Element) getTokens().then(res => {
Vue.config.productionTip = false seveToken(res.data.data.token)
let that = new Vue({ })
Vue.use(Element);
Vue.config.productionTip = false;
new Vue({
router, router,
store, store,
render: h => h(App) render: h => h(App)
}).$mount('#app'); }).$mount("#app");
\ No newline at end of file
console.log(that)
\ No newline at end of file
channel-access/src/router/index.js
...@@ -5,6 +5,34 @@ Vue.use(VueRouter); ...@@ -5,6 +5,34 @@ Vue.use(VueRouter);
const routes = [ 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", path: "/jdbycdetailtm",
name: "jdbycdetailtm", name: "jdbycdetailtm",
component: () => import("@/views/pages/jdbycdetailtm") component: () => import("@/views/pages/jdbycdetailtm")
...@@ -36,6 +64,7 @@ const routes = [ ...@@ -36,6 +64,7 @@ const routes = [
component: () => import("@/views/pages/selftmreg/Selftmreg") component: () => import("@/views/pages/selftmreg/Selftmreg")
}, },
{ {
// path: "/bycnoticeindex",
path: "/bycnoticeindex", path: "/bycnoticeindex",
name: "bycnoticeindex", name: "bycnoticeindex",
component: () => import("@/views/pages/bycnoticeindex/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