1/24 注册界面优化1.0

20245024-wz
wangwei 2 months ago
parent b0c02ead05
commit 5a17f76c98

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

@ -98,7 +98,7 @@ export const constantRoutes = [
{
path: "/register",
component: (resolve) => require([`@/views/myLogin`], resolve),
component: (resolve) => require([`@/views/companiesRegister`], resolve),
hidden: true,
},
{

@ -0,0 +1,549 @@
<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&nbsp; &nbsp;闽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>

@ -10,19 +10,19 @@
/>
</div>
<h3 style="text-align: center;font-size: larger ;color:#707070 ">医疗器械UDI追溯平台</h3>
<h3 style="text-align: center;font-size: larger ;color:#707070 ">新用户注册</h3>
<h3 style="text-align: center;font-size: larger ;color:#707070;margin-top: 20px ">新用户注册</h3>
</div>
<el-form
:model="inputQuery"
:rules="rules"
style="margin-top: 35px"
style="margin-top: 20px"
ref="inputQuery"
label-width="150px"
>
<el-card class="el-card">
<div slot="header" class="clearfix">
<span>审核信息:</span>
<span><strong>审核信息</strong></span>
<div>
<div style="float: right;margin-top: -20px ">
<el-button
@ -89,7 +89,7 @@
</el-card>
<el-card class="el-card">
<div slot="header" class="clearfix">
<span>本企业信息:</span>
<span><strong>本企业信息</strong></span>
</div>
<!-- <el-row-->
@ -355,7 +355,7 @@
<div slot="header" class="clearfix">
<span>
系统负责人信息:
<strong>系统负责人信息</strong>
</span>
</div>
@ -472,9 +472,10 @@
<el-card>
<div slot="header" class="clearfix">
<span>
资质证书信息:
<strong>资质证书信息</strong>
</span>
<div style="float: right; text-align: right; margin-bottom: 8px">
<el-button
type="primary"

@ -286,6 +286,7 @@ $light_gray: #eee;
.topSubtitle {
color: #fcd38b;
text-align: center;
margin-top: 50px;
}
.login-form {

@ -342,6 +342,7 @@ $light_gray: #eee;
margin-bottom: -10px;
}
.topSubtitle {
margin-top: 50px;
color: #fcd38b;
text-align: center;
}

Loading…
Cancel
Save