|
|
<template>
|
|
|
<div class="login-container">
|
|
|
<!--<div class="pageTitle">{{ title }}</div>-->
|
|
|
|
|
|
<!--<div class="noticeTitle">新用户注册须知:</div>-->
|
|
|
<div class="stay-from">
|
|
|
<div class="Enter-EnterBtnBox_item">
|
|
|
<div class="Notice-title" style="margin-bottom: 20px;font-size: 20px">
|
|
|
新用户注册须知:
|
|
|
</div>
|
|
|
<div class="Notice-detail">
|
|
|
1.建议使用注册企业负责人的手机进行注册
|
|
|
</div>
|
|
|
<div class="Notice-detail" style="margin-top:-15px ">
|
|
|
2.开始填写注册信息前,请准备已盖公章的《营业执照》副本复印件的扫描件;<el-button
|
|
|
style="font-size: 14px;margin-left: 0px"
|
|
|
type="text"
|
|
|
@click="viewPdf(1)"
|
|
|
>样例查看
|
|
|
<!--@click="dowloadPdf"-->
|
|
|
</el-button>
|
|
|
<!--<a href="https://img.udims.com:9000/udims/register/file/.pdf/01c731f2-8cd2-4513-a00b-9da2479ef735.pdf" target="_blank">样例查看</a>-->
|
|
|
</div>
|
|
|
<div class="Notice-detail" style="margin-top:-15px" >
|
|
|
3.开始填写注册信息前,请下载"<el-button
|
|
|
style="font-size: 14px"
|
|
|
type="text"
|
|
|
@click="dowloadPdf"
|
|
|
>合同模板
|
|
|
</el-button>",完成合同填写、打印、盖章,并准备好扫描件;<el-button style="font-size: 14px;margin-left: 0px" type="text" @click="viewPdf(2)">样例查看</el-button>
|
|
|
</div>
|
|
|
<div class="Notice-detail" style="margin-top:-10px" >
|
|
|
4.上传扫描件要求,图片格式:<span style="color: red">".jpg/.png"</span>,文件格式为<span style="color: red">".pdf"</span>,文件小于2M
|
|
|
</div>
|
|
|
<div class="Notice-detail" style="margin-top:-10px" >
|
|
|
5.新用户提交的中请信息在未审核前可以撤回修改，审核通过后无法修改
|
|
|
</div>
|
|
|
<div class="Notice-detail" style="margin-top:-10px" >
|
|
|
6.新用户申请通过后,可以通过 :<span style="color: red;">在线付费</span>、<span style="color: red;">使用激活码</span>这两种方式开通使用
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<div style="margin-top: 1px;margin-left: 20px">
|
|
|
注:提交资料后需等待审核通过,审核时间
|
|
|
<span style="color: rgb(252, 179, 12);">1-3个工作日</span>,期间可根据注册手机号查看审核进度
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="title-container">
|
|
|
|
|
|
<div class="title" style="display: flex; justify-content: flex-end; height: 50px;">
|
|
|
<span class="img-style"><img src="../assets/register-logo.png" style="height: 43px"></span>
|
|
|
<!--https://img.udims.com:9000/udims/register/file/.pdf/01c731f2-8cd2-4513-a00b-9da2479ef735.pdf-->
|
|
|
<span style="font-size: 15px;display: inline-block;margin-top: 10px;cursor: pointer;" class="red-hover" @click="dowloadPdf">合同下载</span>
|
|
|
<span style="font-size: 15px;display: inline-block;margin-top: 10px;margin-right: 20px;margin-left: 20px;cursor: pointer;" class="red-hover" @click="users">关于我们</span>
|
|
|
<span style="font-size: 15px;display: inline-block;margin-top: 10px;margin-right: 20px">联系电话: 400-9909-112</span>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<el-header style="text-align: right; line-height: 10px;margin-top: -40px">
|
|
|
<span style="font-size: 14px;color: white"></span>
|
|
|
</el-header>
|
|
|
|
|
|
<el-form
|
|
|
class="register-form"
|
|
|
:model="phoneForm"
|
|
|
ref="rulesPhoneForm"
|
|
|
:rules="rulesPhoneForm"
|
|
|
label-position="left"
|
|
|
>
|
|
|
<el-card style="height: 418px;width: 380px;margin-top: -2px">
|
|
|
<div class="Enter-title">企业注册</div>
|
|
|
|
|
|
<div class="Enter-explain">手机号用来查看注册进度、接收审核结果短信提醒。</div>
|
|
|
<div class="Enter-explain-bottom">如已填写注册信息,请使用注册的负责人手机号继续流程。</div>
|
|
|
<!--<div class="">已填写过入驻资料的，请输入同一手机号继续流程。</div>-->
|
|
|
<el-row>
|
|
|
<el-col>
|
|
|
<el-form-item prop="mobile" class="item" style="width:305px;margin-top: 30px;margin-left: 20px">
|
|
|
<el-input
|
|
|
size="small"
|
|
|
style="width: 100%;background-color: white"
|
|
|
placeholder="请输入手机号"
|
|
|
|
|
|
v-model="phoneForm.mobile"
|
|
|
@input="change()"
|
|
|
>
|
|
|
<i slot="prefix" class="el-icon-mobile-phone" style="margin-top: 13px">
|
|
|
<svg-icon icon-class="el-icon-mobile-phone"/>
|
|
|
</i>
|
|
|
</el-input>
|
|
|
<!--<el-button type="primary" @click="getCheckcode">获取验证码</el-button>-->
|
|
|
<el-button type="primary" @click="getCheckcode" :disabled="isTimer" :loading="loading"
|
|
|
><span>{{ btnTitle }}</span></el-button
|
|
|
>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<el-col>
|
|
|
<el-form-item prop="checkCode" class="item" style="width:305px;margin-left: 20px;margin-top: 20px">
|
|
|
<!--<span class="svg-container">-->
|
|
|
<!--<icon-svg icon-class="pwd"/>-->
|
|
|
<!--</span>-->
|
|
|
<el-input
|
|
|
placeholder="请输入验证码"
|
|
|
style="width: 100%;background-color: white;"
|
|
|
@keyup.enter.native="handleLogin"
|
|
|
v-model="phoneForm.checkCode"
|
|
|
>
|
|
|
<i slot="prefix" class="el-icon-s-grid" style="margin-top: 11px">
|
|
|
<svg-icon icon-class="el-icon-s-grid"/>
|
|
|
</i>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<el-col>
|
|
|
<el-form-item class="item" style="width:305px;margin-top: 30px;margin-left: 20px">
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
style="width: 305px;height: 40px"
|
|
|
@click.native="handleLogin()"
|
|
|
>开始注册
|
|
|
</el-button>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-button
|
|
|
style="margin-left: 72%;margin-top: -20px;font-size: 13px"
|
|
|
type="text"
|
|
|
@click="viewRegisterPdf"
|
|
|
>注册操作文档
|
|
|
<!--@click="dowloadPdf"-->
|
|
|
</el-button>
|
|
|
</el-card>
|
|
|
</el-form>
|
|
|
<div style="
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
">
|
|
|
<a target="_blank" href=" " style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
|
|
|
<img src="../assets/images/gongan.png" style="float:left;"/>
|
|
|
<p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:rgba(14,14,14,0.94);">
|
|
|
闽公网安备 35020302034268号 闽ICP备17019234号</p>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
import Verify from "vue2-verify";
|
|
|
import {checkCode, getCheckcode, encrypts} from "@/api/login";
|
|
|
|
|
|
export default {
|
|
|
computed: {},
|
|
|
data() {
|
|
|
//限制输入正确的手机号码格式
|
|
|
const validatePhone = (rule, value, callback) => {
|
|
|
if (/^1[3-9]\d{9}$/.test(value) === false) {
|
|
|
callback(new Error("请输入正确的手机号码"));
|
|
|
} else {
|
|
|
// 校验通过
|
|
|
callback();
|
|
|
}
|
|
|
};
|
|
|
return {
|
|
|
title: '',
|
|
|
btnTitle: "获取验证码",
|
|
|
isTimer: false,
|
|
|
phoneForm: {
|
|
|
mobile: "", //手机号码
|
|
|
checkCode: "", //验证码
|
|
|
},
|
|
|
yzm: "",
|
|
|
jmobile: "",
|
|
|
rulesPhoneForm: {
|
|
|
mobile: [
|
|
|
{required: true, message: "请输入手机号码", trigger: "blur"},
|
|
|
{validator: validatePhone, trigger: "blur"},
|
|
|
],
|
|
|
checkCode: [
|
|
|
{required: true, message: "请输入手机验证码", trigger: "blur"},
|
|
|
],
|
|
|
},
|
|
|
loading: false,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
toLogin() {
|
|
|
router.push({
|
|
|
path: "/",
|
|
|
});
|
|
|
},
|
|
|
// register() {
|
|
|
// router.push({
|
|
|
// path: "/register",
|
|
|
// });
|
|
|
// },
|
|
|
//新的页面
|
|
|
//倒计时
|
|
|
validateBtn() {
|
|
|
let time = 60;
|
|
|
let timer = setInterval(() => {
|
|
|
if (time === 0) {
|
|
|
clearInterval(timer);
|
|
|
this.isTimer = false;
|
|
|
this.btnTitle = "获取验证码";
|
|
|
} else {
|
|
|
this.loading = false
|
|
|
this.btnTitle = time + "秒后重试";
|
|
|
this.isTimer = true;
|
|
|
time--;
|
|
|
}
|
|
|
}, 1000);
|
|
|
},
|
|
|
change() {
|
|
|
},
|
|
|
getCheckcode() {
|
|
|
if (this.phoneForm.mobile == '') {
|
|
|
return this.$message.error("请输入手机号")
|
|
|
}
|
|
|
let tquery = {
|
|
|
mobile: this.phoneForm.mobile,
|
|
|
};
|
|
|
getCheckcode(tquery).then((response) => {
|
|
|
if (response.code === 20000) {
|
|
|
this.yzm = response.data;
|
|
|
this.validateBtn();
|
|
|
} else {
|
|
|
this.$message.error(response.message);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//手机验证表单提交
|
|
|
handleLogin() {
|
|
|
checkCode(this.phoneForm).then((res) => {
|
|
|
if (res.code == 20000) {
|
|
|
//加密验证码
|
|
|
this.jmobile = res.data;
|
|
|
|
|
|
let param = {
|
|
|
mobile: this.jmobile,
|
|
|
captcha: this.yzm,
|
|
|
key: "key",
|
|
|
}
|
|
|
encrypts(param).then((res) => {
|
|
|
if (res.code == 20000) {
|
|
|
//跳转到完善信息页面
|
|
|
this.$router.push({path: "/improveInfo", query: {mobile: res.data.mobile, captcha: res.data.captcha}});
|
|
|
|
|
|
} else {
|
|
|
this.$message.error(res.message)
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
this.$message.error(res.message);
|
|
|
}
|
|
|
})
|
|
|
|
|
|
},
|
|
|
users(){
|
|
|
window.open('http://www.xmglxp.com', '_blank'); // 打开新页面
|
|
|
// window.location.href = 'http://www.xmglxp.com'; //覆盖本页面
|
|
|
},
|
|
|
//合同下载
|
|
|
dowloadPdf(){
|
|
|
this.handleDownload("https://img.udims.com:9000/udims/world/%E5%90%88%E5%90%8C%E6%A8%A1%E6%9D%BF.docx", "合同模板" + ".doc");
|
|
|
},
|
|
|
viewPdf(val){
|
|
|
if (val == 1){
|
|
|
const pdfUrl = 'https://img.udims.com:9000/udims/register/file/.pdf/registerYyzz.pdf'; // PDF 文件的 URL
|
|
|
window.open(pdfUrl, '_blank');
|
|
|
}else {
|
|
|
const pdfUrl = 'https://img.udims.com:9000/udims/register/file/.pdf/register.pdf'; // PDF 文件的 URL
|
|
|
window.open(pdfUrl, '_blank');
|
|
|
}
|
|
|
},
|
|
|
viewRegisterPdf(){
|
|
|
const pdfUrl = 'https://img.udims.com:9000/udims/register/file/.pdf/01c19e41-de0b-4827-b831-36a7fd949080.pdf'; // PDF 文件的 URL
|
|
|
window.open(pdfUrl, '_blank');
|
|
|
},
|
|
|
handleDownload(url, name) {
|
|
|
this.getBlob(url).then(blob => {
|
|
|
saveAs(blob, name);
|
|
|
})
|
|
|
return false;
|
|
|
},
|
|
|
getBlob(url) {
|
|
|
return new Promise(resolve => {
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
xhr.open('GET', url, true);
|
|
|
// xhr.setRequestHeader("adminid", store.getters.adminId)
|
|
|
// xhr.setRequestHeader("admintoken", store.getters.token)
|
|
|
xhr.responseType = 'blob';
|
|
|
xhr.onload = () => {
|
|
|
if (xhr.status === 200) {
|
|
|
resolve(xhr.response);
|
|
|
}
|
|
|
};
|
|
|
xhr.send();
|
|
|
})
|
|
|
},
|
|
|
},
|
|
|
components: {
|
|
|
Verify
|
|
|
},
|
|
|
created() {
|
|
|
this.title = process.env.VUE_APP_TITLE
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style type="text/scss" lang="scss">
|
|
|
//@import "@/assets/styles/mixin";
|
|
|
//@import "@/assets/styles/style";
|
|
|
|
|
|
$bg: #2d3a4b;
|
|
|
$dark_gray: #6e7072;
|
|
|
$light_gray: #eee;
|
|
|
.login-container {
|
|
|
|
|
|
.pageTitle {
|
|
|
color: white;
|
|
|
font-weight: bolder;
|
|
|
font-size: 60px;
|
|
|
position: fixed;
|
|
|
top: 22%;
|
|
|
left: 17%;
|
|
|
}
|
|
|
|
|
|
//@include relative;
|
|
|
background-color: white;
|
|
|
//background-image: url("../assets/register.png");
|
|
|
background-size: 100vw 100vh;
|
|
|
height: 100%;
|
|
|
|
|
|
input:-webkit-autofill {
|
|
|
-webkit-box-shadow: 0 0 0 1000px #293444 inset !important;
|
|
|
-webkit-text-fill-color: #fff !important;
|
|
|
}
|
|
|
|
|
|
.item {
|
|
|
width: 100%; /* 宽度设为100%，适应表单宽度 */
|
|
|
margin-left: 0; /* 移除左边距，因为我们希望它居中 */
|
|
|
|
|
|
.el-form-item__content {
|
|
|
display: flex;
|
|
|
flex-flow: row;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
input {
|
|
|
background: transparent;
|
|
|
border: 0;
|
|
|
-webkit-appearance: none;
|
|
|
border-radius: 0;
|
|
|
padding: 0.46rem 0.0666rem 0.16rem 0.2rem;
|
|
|
color: $dark_gray;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
//.el-input {
|
|
|
// display: inline-block;
|
|
|
//}
|
|
|
|
|
|
.tips {
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
margin-bottom: 0.13333rem;
|
|
|
}
|
|
|
|
|
|
.svg-container {
|
|
|
padding: 0.08rem 0.0666rem 0.08rem 0.2rem;
|
|
|
color: $dark_gray;
|
|
|
vertical-align: middle;
|
|
|
display: inline-block;
|
|
|
|
|
|
&_login {
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//.title {
|
|
|
// font-size: 26px;
|
|
|
// color: #2d3a4b;
|
|
|
// margin: 0 auto 0.5333rem auto;
|
|
|
// text-align: center;
|
|
|
// font-weight: bold;
|
|
|
// margin-bottom: 50px;
|
|
|
//}
|
|
|
.title {
|
|
|
font-size: 2em;
|
|
|
color: white;
|
|
|
padding-top: 6px;
|
|
|
}
|
|
|
|
|
|
.register-form {
|
|
|
position: fixed;
|
|
|
top: 25vh;
|
|
|
right: 150px;
|
|
|
//width: 50em;
|
|
|
//border: 1px solid blue;
|
|
|
height: 500px;
|
|
|
}
|
|
|
|
|
|
.el-form-item {
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
background: rgba(0, 0, 0, 0.1);
|
|
|
border-radius: 0.0666rem;
|
|
|
color: #454545;
|
|
|
}
|
|
|
|
|
|
.show-pwd {
|
|
|
position: absolute;
|
|
|
right: 0.1333rem;
|
|
|
top: 0.09333rem;
|
|
|
font-size: 16px;
|
|
|
//color: $dark_gray;
|
|
|
color: #8a8f97;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.thirdparty-button {
|
|
|
/*position: absolute;*/
|
|
|
/*right: .4666rem;*/
|
|
|
/*bottom: .37333rem;*/
|
|
|
}
|
|
|
|
|
|
.box-card {
|
|
|
margin-top: 20px;
|
|
|
margin-right: -20px;
|
|
|
height: 380px;
|
|
|
width: 380px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.Enter-title {
|
|
|
font-size: 24px;
|
|
|
color: #333;
|
|
|
text-align: center;
|
|
|
margin-bottom: 20px;
|
|
|
margin-top: 2px;
|
|
|
}
|
|
|
|
|
|
.stay-title {
|
|
|
font-size: 24px;
|
|
|
color: #333;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.Enter-explain, .Enter-explain-bottom {
|
|
|
margin-left: 20px;
|
|
|
text-align: center;
|
|
|
font-size: 12px;
|
|
|
color: #94a2b1;
|
|
|
line-height: 24px;
|
|
|
text-align: left; /* 确保文本左对齐 */
|
|
|
}
|
|
|
|
|
|
.stay-from {
|
|
|
//border: 1px solid #ff0073;
|
|
|
position: fixed;
|
|
|
top: 25vh;
|
|
|
//border: 1px solid blue;
|
|
|
width: 700px;
|
|
|
height: 418px;
|
|
|
left: 130px;
|
|
|
background-color: #e8eef3;;
|
|
|
}
|
|
|
|
|
|
.Notice-title {
|
|
|
font-weight: 700;
|
|
|
padding: 30px 0 15px 20px;
|
|
|
font-family: PingFangSC-Medium;
|
|
|
font-size: 18px;
|
|
|
color: #021122;
|
|
|
line-height: 18px;
|
|
|
}
|
|
|
|
|
|
.Notice-detail {
|
|
|
font-size: 14px;
|
|
|
padding-left: 20px;
|
|
|
padding-bottom: 32px;
|
|
|
font-family: PingFangSC-Regular;
|
|
|
color: #384a5f;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
|
|
|
.Enter-EnterBtnBox_item {
|
|
|
//border: 1px solid blue;
|
|
|
//background: #eaf6ff;
|
|
|
background: #e8eef3;
|
|
|
//margin-bottom: 40px;
|
|
|
}
|
|
|
|
|
|
.noticeTitle {
|
|
|
position: fixed;
|
|
|
top: 9vh;
|
|
|
padding: 70px 0 40px;
|
|
|
line-height: 28px;
|
|
|
font-weight: 700;
|
|
|
font-family: PingFangSC-Medium;
|
|
|
font-size: 28px;
|
|
|
color: #021122;
|
|
|
line-height: 18px;
|
|
|
left: 130px
|
|
|
}
|
|
|
|
|
|
.title-container {
|
|
|
//text-align: center;
|
|
|
//margin-bottom: 20px;
|
|
|
//border: 3px solid #ff0073;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
width: 100%;
|
|
|
height: 50px;
|
|
|
background: #188ffd; /* 根据需要设置背景色 */
|
|
|
z-index: 1000; /* 确保它在页面其他内容的上方 */
|
|
|
|
|
|
}
|
|
|
.title {
|
|
|
//border: 1px solid blue;
|
|
|
//width: 100%;
|
|
|
//height: 50px;
|
|
|
//margin-left: 28%;
|
|
|
//display: flex;
|
|
|
//justify-content: center; /* 垂直居中所有子元素 */
|
|
|
//align-items: center;
|
|
|
//height: 50px;
|
|
|
}
|
|
|
|
|
|
.red-hover:hover {
|
|
|
color: rgba(24, 70, 140, 0.99); /* 鼠标悬停时文本变为红色 */
|
|
|
}
|
|
|
|
|
|
.img-style {
|
|
|
position: fixed;
|
|
|
left: 1px;
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
