Commit 6860f6c0 by 刘泽奇

123

parent b2f4df12
......@@ -126,6 +126,14 @@ module.exports = {
"isctl": "no"
},
{
"code": "bwselftmreg",
"icon": "fa fa-power-off",
"path": ":channel/bwselftmreg",
"isMenu": false,
"label": "登录",
"isctl": "no"
},
{
"code": "admin",
"icon": "fa fa-power-off",
"path": ":channel/admin",
......@@ -222,10 +230,20 @@ module.exports = {
"label": "登录",
"isctl": "no"
},
{
"code": "orderpay",
"icon": "fa fa-power-off",
"path": ":channel/orderpay",
"isMenu": false,
"label": "登录",
"isctl": "no"
},
],
},
"bizs": {
"OAjdcompany": { "title": "后台首页", "config": null, "path": "/:channel/OAjdcompany", "comname": "OAjdcompany" },
"orderpay": { "title": "后台首页", "config": null, "path": "/:channel/orderpay", "comname": "orderpay" },
"bwselftmreg": { "title": "后台首页", "config": null, "path": "/:channel/bwselftmreg", "comname": "bwselftmreg" },
"OAjdlist": { "title": "后台首页", "config": null, "path": "/:channel/OAjdlist", "comname": "OAjdlist" },
"OAjddetails": { "title": "后台首页", "config": null, "path": "/:channel/OAjddetails", "comname": "OAjddetails" },
"proxy": { "title": "后台首页", "config": null, "path": "/:channel/proxy", "comname": "proxy" },
......
......@@ -21,6 +21,7 @@
<script src="/js/ele/ele2.12.0.js"></script>
<script src="/js/vue/axios.min.js"></script>
<script src="/js/vue/jquery.min.js"></script>
<script src="https://www.jdcloud.com/public/js/portalBar.js"></script>
<!-- 京东公共头部和尾部js链接 -->
<script>
var appinfo = JSON.parse(unescape('<%=appinfo?appinfo:null%>'));
......@@ -56,21 +57,42 @@
<body>
<div id="app" v-loading.fullscreen.lock="loading" customClass="global-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" class="app-main" style="visibility:hidden">
<div class="jd_header_box" v-show="selfHeaderShow">
<!-- 根据渠道显示不同公共头start -->
<div class="jd_header_box" v-show="jdSelfHeaderShow">
<div class="jc_hd"></div>
</div>
<!-- 启服通公共头 -->
<div class="jdindentlist-header" v-if="channelName == 'bw'">
<div>
<div>
<img src="/imgs/pt.jpg" alt="">
</div>
<span>{{channelMessage}}工商、商标注册平台</span>
</div>
<div v-if="user_Name">
<span v-if="user_Name"><i class="el-icon-user"></i></span>
<span>{{user_Name}}</span>
<span @click="loginOut" v-if="user_Name">退出</span>
</div>
<div v-else>
<router-link class="jdindentlist-header-login" :to="'/'+channelName+'/login'">登录</router-link>
<router-link class="jdindentlist-header-login" style="display:inline-block;color: #fff;padding: 0 15px;background:linear-gradient(80deg,#3171ff 0,#a14faf 100%);border-radius:13px;height: 26px;
line-height: 26px;" :to="'/'+channelName+'/register'">免费注册</router-link>
</div>
</div>
<!-- 根据渠道显示不同公共头end -->
<transition name="slide-fade">
<router-view></router-view>
</transition>
<div class="jd_footer_box" v-show="selfFooterShow">
<!-- 根据渠道显示不同公共尾start -->
<div class="jd_footer_box" v-show="jdSelfFooterShow">
<div class="jdc-footer"></div>
</div>
<!-- 根据渠道显示不同公共尾end -->
</div>
<script src="/js/cropper/index.js"></script>
<script src="/js/vue/base64.js"></script>
<script src="/js/common.js"></script>
<script type="module" src="/js/index.js"></script>
</body>
</html>
<script src="https://www.jdcloud.com/public/js/portalBar.js"></script>
\ No newline at end of file
#admin-warpper {
display: flex;
width: 100%;
}
/* .admin-menu {
width: 180px;
min-height: 390px;
overflow: hidden;
box-sizing: border-box;
background: rgb(84, 92, 100);
} */
/* .el-menu-vertical-demo{
} */
.admin-content {
width: 100%;
min-height: 390px;
}
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -159,8 +159,13 @@ axios.get("/web/common/metaCtl/getRouteConfig").then(d => {
rsData: [],
channelUserId: "",
channelName: '',
selfFooterShow: true,
selfHeaderShow: true,
jdSelfFooterShow: true,
jdSelfHeaderShow: true,
commonHeader: true,
commonFooter: true,
user_Name: "",
channelMessage: "",
};
},
created() {
......@@ -176,6 +181,7 @@ axios.get("/web/common/metaCtl/getRouteConfig").then(d => {
},
mounted() {
this.handleHeader();
console.log($.fn.jquery, "vvvvvvvvvvvvvvvvv");
var self = this;
if (!this.currentUser) {
this.logins.push({ "icon": "el-icon-location-outline", "title": "登录", "type": "text", key: "login", "isOnGrid": true });
......@@ -189,8 +195,8 @@ axios.get("/web/common/metaCtl/getRouteConfig").then(d => {
$route: {
handler: function (val, oldVal) {
if (val.fullPath == "/jd/jdtrademark" && location.hostname == "tm.plus.jdcloud.com") {
this.selfHeaderShow = true;
this.selfFooterShow = true;
this.jdSelfHeaderShow = true;
this.jdSelfFooterShow = true;
this.channelName = location.hash.split('/')[1];
}
},
......@@ -199,6 +205,37 @@ axios.get("/web/common/metaCtl/getRouteConfig").then(d => {
}
},
methods: {
loginOut() {
/*
var url = encodeURIComponent("http://tm.plus.jdcloud.com/#/jd/jdtrademark") ;
*/
/*
location.href = `http://login.jdcloud.com/logout?callback=http://tm.plus.jdcloud.com/#/jd/jdtrademark`;
*/
let _this = this;
$.ajax({
async: true,
url: "https://login.jdcloud.com/logout",
type: "GET",
dataType: "jsonp",
jsonp: 'callback',
jsonpCallback: 'handleResponse',
data: {
},
success: function (response, status, xhr) {
console.log('状态为:' + status + ',状态是:' + xhr.statusText);
console.log(response);
if (response.code == 0) {
console.log(response);
_this.$router.push({ path: `/${_this.$root.channelName}/jdtrademark` });
}
}
});
},
// 返回当前接入渠道标识
getChannelPath() {
var from = this.$route.path;
......@@ -219,17 +256,21 @@ axios.get("/web/common/metaCtl/getRouteConfig").then(d => {
var OAjddetails = location.hash.includes('/OAjddetails');
var OAjdcompany = location.hash.includes('/OAjdcompany');
var companydetail = location.hash.includes('/companydetail');
// 京东公共尾部隐藏
if (OAjdlist || selftmreg || jdindentlist || jdindentdetail || OAjddetails || OAjdcompany || companydetail) {
this.selfFooterShow = false;
this.jdSelfFooterShow = false;
}
// 京东公共头部隐藏
if (OAjdlist || jdindentlist || jdindentdetail || OAjddetails || OAjdcompany || companydetail) {
this.selfHeaderShow = false;
this.jdSelfHeaderShow = false;
}
break;
case "bw":
this.channelMessage = "百望";
console.log("bbbbbbbbbbbbbbbbbbbbbbbbb");
default:
this.selfHeaderShow = false;
this.selfFooterShow = false;
this.jdSelfHeaderShow = false;
this.jdSelfFooterShow = false;
break;
}
......
......@@ -5,6 +5,6 @@
padding: 10px 20px;
background: #f6f9ff;
}
.jdc-footer{
/* .jdc-footer{
display: none;
}
\ No newline at end of file
} */
\ No newline at end of file
.selftmreg_main {
width: 100%;
padding: 0px 20px;
box-sizing: border-box;
overflow: hidden;
}
.selftmreg_shu {
width: 1143px;
height: 1px;
background-color: #eeeeee;
margin: 20px 0 ;
}
.selftmreg_main1 {
width: 100%;
padding: 0px 130px;
box-sizing: border-box;
}
.selftmreg_shu1 {
width: 94%;
height: 1px;
background-color: #eeeeee;
margin: 40px auto;
}
.categoryFrom .el-input__inner {
height: 34px !important;
line-height: 34px !important;
}
#selftmreg #selftmreg .el-step__head.is-success {
color: #409EFF;
border-color: #409EFF;
}
#selftmreg .el-step__title.is-success {
color: #409EFF;
}
#selftmreg .el-tag {
margin: 5px 0px;
background:none;
border-radius:0;
}
#selftmreg .el-tree-node__content .el-tree-node__label {
font-size: 14px !important;
}
#selftmreg .el-tree-node__children .el-tree-node__content .el-tree-node__label {
font-size: 12px !important;
}
#selftmreg .el-tree-node__children .el-tree-node__children .el-tree-node__content .el-tree-node__label {
font-size: 12px !important;
}
.categoryFrom {
margin-bottom: 10px;
margin-top: 20px;
box-sizing: border-box;
}
.selftmreg_Stickie {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 65px;
line-height: 50px;
z-index: 298;
}
.selftmreg_Stickie .el-input__inner {
height: 34px !important;
line-height: 34px !important;
}
.selftmreg_filter-tree {
margin-top: 60px;
padding-left: 5%;
overflow: auto;
background-color: white;
width: 100%;
height: 90%;
box-sizing: border-box;
border-right: 1px solid #D6DAEB;
}
.selftmreg_filter-tree::-webkit-scrollbar {
width: 8px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 8px;
}
.selftmreg_filter-tree::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 5px;
background: #CDD2E5;
}
.selftmreg_filter-tree::-webkit-scrollbar-track {
/*滚动条里面轨道*/
border-radius: 0;
background: none;
}
.selftmreg_title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
line-height: 50px;
font-size: 14px;
padding-left: 20px;
text-align: left;
color: #03004C;
box-sizing: border-box;
border-left: 1px solid #E1E1E1;
background-color: #EFF0F7;
z-index: 298;
font-family: PingFangSC-Regular;
letter-spacing: 0;
}
.selftmreg_qingchu {
float: right;
width: 113px;
font-size: 14px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: #828282;
cursor: pointer;
text-align: center;
}
.gsb_items {
flex: 1;
}
.gsb_items>.el-form-item__content>div {
float: left;
margin-left: 20px;
}
.gsb_items>.el-form-item__content>.upload-img {
width: 98px;
height: 118px;
border: 3px dashed #CDCDCD;
box-sizing: border-box;
position: relative;
}
.upload-img>img {
width: 100%;
height: 100%;
}
.gsb_items .el-form-item__content {
margin-left: 0px !important;
}
.gsb_items>.el-form-item__content>.title {
text-align: left;
width: 160px;
line-height: 118px;
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(99, 101, 105, 1);
position: relative;
}
.gsb_items>.el-form-item__content>.special:before {
content: '*';
color: #f56c6c;
margin-right: 4px;
}
.gsb_items>.el-form-item__content>.text {
margin-top: 25px;
padding-left: 60px;
text-align: left;
width: 542px;
line-height: 24px;
font-size: 12px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(136, 136, 136, 1);
position: relative;
}
.gsb_items>.el-form-item__content>.text>i {
position: absolute;
left: 35px;
top: 5px
}
.gsb_items>.el-form-item__content>.text>span {
color: #0F8EE9;
}
.selftmreg_shuxian {
width: 3px;
height: 15px;
background-color: #0989C5;
display: inherit;
float: left;
margin-top: 4px;
margin-right: 10px;
}
.selftmreg_main_h4span {
margin-left: 35px;
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(99, 101, 105, 1);
}
.tabButtomPrcie {
width: 100%;
height: 60px;
line-height: 60px;
font-size: 16px;
color: #828282;
text-align: right;
box-sizing: border-box;
background: #EFF0F7;
z-index: 2999;
position: fixed;
bottom: 0;
left: 0;
padding-right: 159px;
}
.selftmregType {
display: inline-block;
width: 110px;
height: 32px;
line-height: 32px;
text-align: center;
border: 1px solid #BBBBBB;
color: #BBBBBB;
cursor: pointer;
position: relative;
}
.selftmregType>img {
position: absolute;
top: 0;
right: 0;
width: 15px;
height: 15px;
height: 0;
width: 0;
}
.categoryFrom-jieshao {
display: inline-block;
width: 108px;
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: #BBBBBB;
line-height: 17px;
cursor: pointer;
margin-left: 30px;
}
.categoryFrom-jieshao:hover {
color: #0989c5;
text-decoration: underline;
}
.categoryFrom-namejieshao {
display: inline-block;
text-align: left;
width: 390px;
height: 23px;
font-size: 12px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(179, 179, 179, 1);
line-height: 18px;
float: right;
transform: translate(-208px, -30px);
}
.categoryFrom-imgjieshao {
display: inline-block;
font-size: 12px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(179, 179, 179, 1);
position: absolute;
top: 10px;
right: 0;
line-height: 24px;
}
.announcementsText {
width: 740px;
line-height: 26px;
margin: 0 auto;
font-size: 14px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(74, 74, 74, 1);
}
.announcementsText>span {
color: #409EFF;
}
#selftmreg .selftmreg_main .el-dialog__body {
padding: 30px 0px !important;
padding-top: 0px !important;
}
/* #selftmreg .selftmreg_main .el-dialog {
min-width: 868px !important;
min-height: 417px !important;
} */
#selftmreg .el-input--small .el-input__inner {
height: 40px;
line-height: 40px;
}
.floatBox-right {
position: absolute;
right: -89%;
top: -6px;
width: 77%;
background: rgba(255,255,255,1);
}
#floatBox-demo {
width: 100%;
height: 100%;
position: relative;
padding: 12px 20px;
box-sizing: border-box;
line-height: 18px;
font-size: 12px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(136, 136, 136, 1);
border-radius: 2px 2px 2px 0px;
box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.18);
background-color: #fff;
z-index: 999;
}
#floatBox-demo:after,
#floatBox-demo:before {
border: solid transparent;
content: ' ';
height: 0;
position: absolute;
width: 0;
}
#floatBox-demo:after {
border-width: 9px;
border-right-color: #fff;
top: 29%;
left: -17px;
}
#floatBox-demo:before {
border-width: 11px;
border-right-color: rgba(0, 0, 0, 0.1);
top: 26%;
left: -22px;
}
.floatBox-right>i {
position: absolute;
top: 20px;
left: -35px;
display: inline-block;
width: 14px;
height: 14px;
cursor: pointer;
color: #0F8EE9;
z-index: 99999;
}
.upload-box {
width: 98px;
height: 118px;
cursor: pointer;
position: relative;
}
.upload-button {
width: 98px;
height: 118px;
border: 3px dashed #CDCDCD;
text-align: center;
color: #0F8EE9;
font-size: 12px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(15, 142, 233, 1);
padding: 18px 0px;
box-sizing: border-box;
}
.upload-dialog {
width: 100%;
height: 100%;
text-align: center;
padding: 17px 0px;
position: absolute;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.5);
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
box-sizing: border-box;
}
.upload-applyimg {
width: 100%;
height: 100%;
}
.upload-button>div>i {
font-size: 37px;
color: #dee0eb;
}
.toViewImg {
position: absolute;
top: -3px;
left: -3px;
width: 106%;
height: 106%;
background: rgba(0, 0, 0, 0.5);
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
text-align: center;
line-height: 118px;
cursor: pointer;
}
.step3-submit {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
line-height: 70px;
background-color: #F7F8FC;
}
.step3-submit-main {
width: 1200px;
margin: 0 auto;
float: right;
}
.step3-submit-main::after{
content:" ";
clear:both;
}
.step3-submit-main .is-disabled{
opacity:.5 ;
}
#selftmreg .el-form-item__error {
color: #f56c6c;
font-size: 12px;
width: 100%;
line-height: 3;
padding-top: 0px;
padding-left: 25px;
position: absolute;
top: 2px;
left: 100%;
}
.categoryFrom .el-form-item__error {
left: 45% !important;
}
#selftmreg h4 {
font-size: 16px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(83, 83, 83, 1);
margin-bottom: 15px;
}
/* sss */
.pointsRule {
width: 100%;
display: inline-block;
font-size: 16px;
margin: 20px 0px;
float: left;
text-align: center;
}
.pointsRule span {
float: left;
display: inline-block;
}
.pointsRule ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
float: left;
width: 100%;
}
.pointsRule ul li {
width: 24%;
display: list-item;
text-align: center;
float: left;
margin-right: 10px;
background: #e3e3e3;
border-top: 1px solid #e3e3e3;
height: 31px;
position: relative
}
.pointsRule ul li:first-child {
border-left: 1px solid #e3e3e3;
background: #e3e3e3;
}
.pointsRule ul li:last-child {}
.pointsRule ul li a {
display: block;
padding: 8px 0;
cursor: pointer;
height: 31px;
box-sizing: border-box;
}
.pointsRule ul li span {
vertical-align: middle;
height: 24px;
line-height: 15px;
display: inline-block;
overflow: hidden;
text-align: center;
width: 75%;
padding-left: 24px;
}
.pointsRule ul li i {
float: right;
border: #e3e3e3 solid;
border-width: 1px 1px 0 0;
width: 21px;
height: 22px;
margin: -4px -11px 0px 10px;
top: 2px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
background: url("") #e3e3e3;
-moz-transform: rotate(45deg);
/* Firefox浏览器 */
-ms-transform: rotate(45deg);
}
.pointsRule ul li em.before {
border: #e3e3e3 solid;
border-width: 1px 1px 0 0;
width: 21px;
height: 22px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
float: left;
margin: -4px 10px 0px -11px;
top: 2px;
background: url("") #fff;
}
.categoryFrom .el-radio__inner::after {
/* width: 11px;
height: 11px; */
}
.categoryFrom .el-form-item__label {
text-align: left;
}
.categoryFrom .el-radio__label {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #666666;
letter-spacing: 0;
text-align: left;
}
.categoryFrom .el-radio__input.is-checked+.el-radio__label {
color: #666666;
}
.categoryFrom .el-radio__inner {
border: 2px solid #DDE0E6;
}
.categoryFrom .el-radio__input.is-checked .el-radio__inner {
border: 4px solid rgb(9, 137, 197);
background: none;
}
.categoryFrom .el-button {
border-radius: none;
color: #0F8EE9;
}
.generated-icon .el-button:hover {
background: rgba(9, 137, 197, 0.10);
border: 1px solid #0989C5;
color: #0989C5 !important;
}
.selfmreg-step2 .el-form-item__label {
text-align: left;
}
.selfmreg-step2-space>div:nth-of-type(7)>label,
.selfmreg-step2-space>div:nth-of-type(9)>label {
padding-left: 10px;
}
.step2-footer>button {
background: rgb(81, 210, 183);
border: 0px solid #0989C5;
color: #fff;
border-radius: 0;
padding:8px 20px;
width:170px;
}
.step2-footer>button:nth-child(1) {
transform: translateX(-10px);
background: #fff;
color: #51d2b7;
border: 1px solid;
}
.step3-indent .el-textarea__inner {
border-radius: 0;
min-width: 980px;
height: 82px;
resize: none;
border: 1px solid #D6DAEB;
}
.step3-submit input[type=checkbox] {
width: 14px;
height: 14px;
background-color: #fff;
-webkit-appearance: none;
border: 1px solid #0F8EE9;
border-radius: 0px;
outline: none;
transform: translateY(2px);
cursor: pointer;
}
.step3-submit input[type=checkbox]:checked::after {
content: '√';
top: -1px;
left: 2px;
font-weight: 700;
position: absolute;
background: transparent;
/* border: #fff solid 2px; */
border-top: none;
border-right: none;
border-radius: 0;
height: 4px;
width: 4px;
color: #0F8EE9;
transform: translateY(-3px);
}
.step3-submit button {
width: 180px;
height: 40px;
border-radius: 0;
background: #0989C5;
}
.selftmreg-message {
position: fixed;
transform: translateX(-50%);
left: 50%;
top: 20px;
box-sizing: border-box;
min-width: 380px;
border-radius: 5px;
border: 1px solid #faecd8;
background-color: #fdf6ec;
color: #e6A23c;
padding: 15px 15px 15px 20px;
z-index: 8888;
}
.message-enter-active,
.message-leave-active {
transition: opacity .5s;
}
.message-enter,
.message-leave-to
/*
.fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
.selftmreg .el-dialog__wrapper .el-dialog__header {
text-align:center;
}
.selftmreg-loginmask {
text-align:center;
}
.selftmreg-loginmask .el-dialog__header button{
display: none;
}
.selftmreg-loginmask .dialog-footer{
text-align: center;
}
.selftmreg-loginmask .dialog-footer button{
border-radius: 0;
}
\ No newline at end of file
<div id="selftmreg" style="background-color:white;">
<div class="jdindentdetail-nav" style="width:1200px;margin:12px auto;padding: 0;height:24px;line-height: 24px;">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="listPath">{{titleName}}
</el-breadcrumb-item>
<el-breadcrumb-item>自助商标注册</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div style="background-color:white;width:1200px;margin:0 auto;padding-bottom: 90px; ">
<div style="text-align:left;border:1px solid rgba(220,223,230,1);position: relative;">
<div class="selftmreg_main">
<!-- <el-alert
title="商标注册申请递交后,在审查阶段存在被商标审查机构驳回的可能,且驳回后不予退费,请知悉。"
type="warning"
close-text="我了解了">
</el-alert> -->
</br>
<h3 style="border-bottom: 1px solid #E0E0E0; padding-bottom: 15px;display: none;">商标注册</h3>
<!-- <gsb-step :psteps="steps" :step="step"></gsb-step> -->
<div class="pointsRule">
<ul id="list">
<li :style="pointsRuleBackColor(1)" class="green"><a><span :style="pointsRuleColor(1)">填写基本信息</span><i
:style="pointsRuleBackColor(1)"></i></a></li>
<li :style="pointsRuleBackColor(2)"><a><em class="before"></em><span
:style="pointsRuleColor(2)">填写申请人信息</span><i :style="pointsRuleBackColor(2)"></i></a></li>
<li :style="pointsRuleBackColor(3)"><a><em class="before"></em><span
:style="pointsRuleColor(3)">确认订单</span><i :style="pointsRuleBackColor(3)"></i></a></li>
<li :style="pointsRuleBackColor(4)"><a><em class="before"></em><span
:style="pointsRuleColor(4)">支付订单</span></a></li>
</ul>
</div>
</div>
<!-- page1 -->
<el-form v-show="step==1" ref="form" :rules="rules" :model="form" class="demo-ruleForm" label-width="120px">
<div class="selftmreg_main">
<!-- <h4>商标信息</h4> -->
<div class="selftmreg_shu" style="margin-top:20px;margin-bottom:20px;"></div>
<!-- <div class="selftmreg_shu"></div> -->
<div class="categoryFrom">
<el-form-item label="商标类型" style="float:left;padding-right:10px;" prop="tmFormType">
<el-radio-group style="display:inline-block;" v-model="form.tmFormType">
<el-radio :label="3">文字</el-radio>
<el-radio :label="4">图形</el-radio>
<el-radio :label="5">文字及图形</el-radio>
</el-radio-group>
<div class="categoryFrom-jieshao" @click="announcementsType = true">如何选择商标类型?</div>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item label="商标名称" style="width:860px;float:left" prop="tmName" v-if="form.tmFormType != 4">
<el-input v-model="form.tmName" style="width:330px" placeholder="请输入商标名称"></el-input><span
v-if="form.tmFormType == 5"
style="font-size:14px;font-family:PingFangSC-Regular;font-weight:400;color:rgba(99,101,105,1);margin-left: 10px">及图</span>
</el-form-item>
<!-- <div style="float:left;padding-left:10px;padding-block-start:0" v-if="form.tmFormType==3">
<el-button @click="word2pic" >生成黑白图样</el-button>
</div> -->
<div style="clear:both;"></div>
<el-form-item class="generated-icon" style="width:860px;float:left" label="商标图样" prop="picUrl">
<gsb-upload v-if="form.tmFormType == 3" style="float:left;" flag="picUrl" ref="picUrl" :d="d"
@setKey="setKey" :action="action" filetype="image/jpeg" :ifshowlist="false"
@uploadsuccess="uploadsuccess" @error="error">
<el-button size="mini" style="border-radius:100px;color: #666666;">手动上传</el-button>
</gsb-upload>
<gsb-upload v-if="form.tmFormType == 4 || form.tmFormType == 5" style="float:left;" flag="picUrl"
ref="picUrl" :d="d" @setKey="setKey" :action="action" filetype="image/jpeg" :ifshowlist="false"
@uploadsuccess="uploadsuccess" @error="error">
<div style="margin-top:15px;width: 120px;" v-loading="loading">
<img width="120px" height="120px" style="border:2px dashed #e9e9e9" v-if="form.colorizedPicUrl"
:src="form.colorizedPicUrl" />
<img width="120px" height="120px" style="border:2px dashed #e9e9e9" v-else src="/imgs/sctp.png" />
</div>
</gsb-upload>
<div style="float:left;margin-left:10px;" v-if="form.tmFormType == 3">
<el-button @click="word2pic" style="border-radius:100px;color: #666666;" size="mini">自动生成</el-button>
</div>
<div style="clear:both;"></div>
<div style="margin-top:15px;width: 120px;" v-loading="loading" v-if="form.tmFormType == 3">
<img width="120px" height="120px" style="border:2px dashed #e9e9e9" v-if="form.colorizedPicUrl"
:src="form.colorizedPicUrl" />
<img width="120px" height="120px" style="border:2px dashed #e9e9e9" v-else src="/imgs/zwtp.png" />
</div>
<div class="categoryFrom-imgjieshao" v-if="form.tmFormType == 4 || form.tmFormType == 5">
<div><i class="el-icon-warning" style="margin-right:6px;"></i>上传黑白图样,注册后可以更换商标颜色使用;</div>
<div style="padding-left:17px">上传彩色图样,注册后只能按照该彩色图样使用,并在委托书商标名称后方增加文字“(指定颜色)”;</div>
<div style="padding-left:17px">上传的彩色图样需与黑白图样的样式一致。</div>
<div style="padding-left:17px;color:#0F8EE9;cursor: pointer;" @click="announcementsImgType = true">
查看上传商标图样注意事项</div>
</div>
<div class="categoryFrom-namejieshao" v-if="form.tmFormType == 3"><i class="el-icon-warning"
style="margin-right: 6px;"></i>自动生成的商标图样默认以“宋体字样自左向右排列”递交官方;
</div>
</el-form-item>
<!-- <el-form-item v-if="form.tmFormType==6 || form.tmFormType==7" style="width:350px;float:left" label="商标图样_彩色" prop="colorizedPicUrl">
<img width="120px" height="120px" style="border:2px dashed #e9e9e9" v-if="form.colorizedPicUrl" :src="form.colorizedPicUrl" />
<img width="120px" height="120px" style="border:2px dashed #e9e9e9" v-else src="http://gsb-zc.oss-cn-beijing.aliyuncs.com/empty2018082212365411225525855.jpg"/>
<br/>
<gsb-upload :d="d" ref="ys_upload" :action="action" flag="colorizedPicUrl" filetype="image/jpeg" :ifshowlist="false" @beforeUpload="beforeUpload" @uploadsuccess="uploadsuccess" @error="error">
<el-button type="primary" >彩色商标上传</el-button>
</gsb-upload>
</el-form-item> -->
<!-- <div style="text-align:right;float:right">
<br/>
<h3>应付总额:¥{{form.totalSum}}</h3>
<p>服务费:¥{{form.totalServiceCharge}}</p>
<p>官费总额:¥{{form.totalPublicExpense}}</p>
<p>发票税费:¥{{form.totalTaxes}}</p>
</div> -->
<div style="clear:both;"></div>
</div>
<el-dialog title="如何选择商标类型?" :visible.sync="announcementsType">
<img style="width:100%;margin-top: 30px;" src="/imgs/jdt/shuoming.png" alt="">
</el-dialog>
<el-dialog :visible.sync="announcementsImgType" width="60%">
<h1 style="width:100%;text-align: center;">上传商标图样注意事项</h1>
<div class="announcementsText">图样文件格式应为jpg,图形应清晰,图样文件大小应小于“<span>200KB</span>”,且图形像素介于“<span>600X600 -
1500X1500</span>”之间,如果通过扫描获得图样的,应按
<span>24</span>位彩色,<span>300dpi</span>分辨率扫描符合《商标法》及其实施条例规定的图形(图形清晰,大于5X5厘米且小于10X10厘米),申请人(或代理人)应确保扫描后的图
形与原图形的色彩深浅(或灰度)一致,否则,可能影响《商标注册证》上图形的清晰度)如上传图样为黑白,取得注册后,可以更换商标颜色使用;<span>如上传图样为彩色,取得注册后只能按
照该彩色图样使用;如确认提交彩色图样,需在委托书商标名称后方增加以下文字“(指定颜色)”</span></div>
</el-dialog>
<div >
<div>
<!-- <el-form-item label="选择商标方式" style="float:left;padding-right:10px;">
<el-radio-group v-model="form.selecttype" style="float:left;padding-left:10px;margin-bottom: 22px;">
<el-radio-button label="自主选择" ></el-radio-button>
</el-radio-group>
</el-form-item> -->
<el-cascader v-if="form.selecttype==\'智能推荐\'" expand-trigger="hover" :options="bigtype"
v-model="selectedOptions" style="float:left;padding-left:10px" placeholder="请选择所属行业">
</el-cascader>
<div style="float:left;padding-left:10px;" v-if="form.selecttype==\'智能推荐\'">
<el-button @click="aiadive" round>推荐</el-button>
</div>
</div>
<div style="clear:both;"></div>
<el-container style="height: 600px;background-color:white; border: 1px solid #D6DAEB;">
<el-aside width="35%" style="text-align:center;background-color:white;position: relative;">
<!-- <el-input @blur="searchInputBlur" style="margin-top:15px;background-color:white; width:90%;"
placeholder="输入关键字进行过滤"
v-model="filterText">
<i slot="suffix" style="position:relative;top:18%;right:5%;z-index:1" class="el-input__icon" @click="nclSearch">
<span><i class="tool-query" style="font-size : 1.5em;"></i></span>
</i>
</el-input> -->
<div class="selftmreg_Stickie">
<el-button size="small" style="border-radius:0;" @click="checkClick">分类</el-button>
<el-input @blur="searchInputBlur" style="width:60%;margin: 0 10px" placeholder="输入关键字进行过滤"
@keyup.enter.native="nclSearch" suffix-icon="el-icon-search" v-model="filterText">
<i slot="suffix" style="position:relative;top:8%;right:5%;z-index:1" class="el-input__icon"
@click="nclSearch">
<span><i class="tool-query" style="font-size : 1.5em;"></i></span>
</i>
</el-input>
<el-button style="padding: 12px 5px;color:#0989C5; " type="text" @click="clearNclText">取消</el-button>
</div>
<el-card v-if="showSelectedNclList"
style="z-index: 1000;font-size:13px;height:auto;text-align:left;padding-bottom: 20px;position: absolute;width:100%;margin:0 2%;">
<div style="margin-bottom:10px;">
<div style="float:left;width:50%;">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
全选
</el-checkbox>
</div>
<div style="float:left;text-align:right;width:50%;">
<el-button type="text" style="padding: 0 10px;color:#828282;" @click="checkConfirm">确定</el-button>
</div>
<div style="clear:both">
</div>
</div>
<el-checkbox-group v-model="checkedNcl" @change="handleCheckedNclChange">
<ul style="list-style:none; padding:0;margin:0;text-align:left;">
<li v-for="n in ncl" :key="n" style="float:left;width:33.33%">
<el-checkbox :label="n">{{n}}</el-checkbox>
</li>
</ul>
</el-checkbox-group>
</el-card>
<div style="height:100%;overflow: hidden;" v-loading="nclSearchLoading">
<el-tree class="gsb_tree" class="selftmreg_filter-tree" :data="ncldata" :props="defaultProps"
node-key="name" default-expand-all show-checkbox accordion @check-change="handleCheckChange"
@node-click="nodeClick" :filter-node-method="filterNode" ref="tree">
</el-tree>
</div>
</el-aside>
<el-container width="60%">
<el-header v-if="false"
style="text-align: right; font-size: 12px;background-color:white;padding-top:10px;">
<el-button style="float:right" type="primary">导入Contact</el-button>
<el-input style="float:right;width:40%" placeholder="请输入历史订单号" clearable></el-input>
</el-header>
<el-main style="background-color: white; padding:0px;position: relative;">
<div class="selftmreg_title">已选择的商品/服务项
<span class="selftmreg_qingchu" @click="removeAll">
<i class="el-icon-delete"></i>
清除全部</span>
</div>
<div v-if="nclOne.length != 0"
style="overflow: auto;height: 100%;padding: 60px 20px 0px;box-sizing: border-box;">
<div v-for="(nclone,index) in nclOne" style="text-align: left;padding-left:5px;padding-bottom:5px;">
<span style="font-size:16px"><b>{{nclone.code}} {{nclone.name}}</b></span>
<span style="font-size:16px;float:right"><b>已选择<span
style="color:#0F8EE9;">{{nclone.nclThree.length}}</span></b>
<!-- <span style="color:#FF2E22;">¥{{nclone.price}}</span> -->
&nbsp;&nbsp;&nbsp;
<span @click="removeNclOne(index,nclone)" style="cursor: pointer;"><i class="el-icon-delete"
style="font-size : 1.2em;"></i></span>
</span>
<br />
<br />
<span v-for="(nclThree,index2) in nclone.nclThree">
<el-tag key="nclThree.code" closable="true" @close="closeTag(nclThree,index,index2)">
{{nclThree.code}} {{nclThree.name}}
</el-tag>
&nbsp;
</span>
</div>
</div>
<div v-else
style="overflow: auto;height: 100%;padding: 60px 20px 0px;box-sizing: border-box;position: relative;">
<img src="/imgs/kong-2.png"
style="position: absolute;margin: auto;top: 0;left: 0;bottom: 0;right: 0;" alt="">
<div style="color: #828282;margin-top: 330px;text-align: center;">请点击左侧选择商标类别</div>
</div>
</el-main>
</el-container>
</el-container>
</div>
</div>
<div style="width:100%;margin-top: 20px;box-sizing: border-box;">
<div class="tabButtomPrcie">
<!-- <span style="margin-right:30px;text-align: center;color: #03004C;">官费总额:<i
style="color:#E50778;font-style: normal;">¥{{form.totalPublicExpense}}</i></span> -->
<span style="margin-right:30px;text-align: center;color: #03004C;font-weight: 700;">应付总额:<i
style="color:#E50778;font-style: normal;font-size: 24px;">¥{{form.totalSum?form.totalSum:\'0.00\'}}</i></span>
<el-button type="primary"
style="padding:8px 20px;width:150px; background: rgb(81, 210, 183);width: 170px;border-radius:0;color:#fff;border:0;"
@click="submitForm(\'form\')">下一步</el-button>
</div>
</div>
<!-- <div style="text-align:center;padding-bottom:50px;margin-top:10px;" >
</div> -->
<div style="clear:both;"></div>
</el-form>
<!-- page2 -->
<el-form v-show="step==2" ref="apply" :rules="applyrules" :model="apply" class="demo-ruleForm"
label-width="120px">
<div class="selftmreg_main selfmreg-step2">
<div class="selftmreg_shu"></div>
<h4 style="color:#535353"><i class="selftmreg_shuxian"></i>填写申请人信息</h4>
<div style="clear:both;"></div>
<div style="width:100%;padding-left: 30px;box-sizing: border-box;">
<!-- <el-form-item label-width="140px" label="申请人类型" style="width:450px;float:left;padding-right:50px;" prop="customerType" >
<el-radio v-model="apply.customerType" label="ent" border>企业</el-radio>
<el-radio v-model="apply.customerType" label="person" border>个体户</el-radio>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item v-if="apply.customerType==\'ent\'" label-width="140px" label="公司名称" style="width:493px;float:left;padding-right:50px;" prop="name" >
<gsb-select allowcreate="true" @change="applierChange" size="medium" v-model="apply.name" refMethod="getCompanyInfoByLikeName" autoComplete="true" isFilter="true" refModel="tool" labelField="entName" valueField="entName" style="position:relative;width:100%;" placeHolder="请输入选择公司名称" ></gsb-select>
</el-form-item>
<el-form-item v-if="apply.customerType==\'person\'" label-width="140px" label="姓名" style="width:493px;float:left;padding-right:50px;" prop="name">
<el-input placeHolder="请输入申请人姓名" v-model="apply.name"></el-input>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item v-if="apply.customerType==\'person\'" label-width="140px" label="身份证号码" style="width:493px;float:left;padding-right:50px;" prop="identityCardNo">
<el-input v-model="apply.identityCardNo" > </el-input>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item label-width="140px" label="统一社会信用代码" style="width:493px;float:left;padding-right:50px;" prop="code">
<el-input v-model="apply.code"></el-input>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item label-width="140px" label="邮政编码" style="width:493px;float:left;padding-right:50px;" prop="zipCode">
<el-input v-model="apply.zipCode"></el-input>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item label-width="140px" label="执照详细地址" style="width:493px;float:left;padding-right:50px;" prop="applyAddr">
<el-input v-model="apply.applyAddr"></el-input>
</el-form-item>
<div style="clear:both;"></div> -->
<el-form-item label-width="140px" label="申请人类型" style="width:493px;float:left;padding-right:50px;"
prop="customerType">
<!-- <el-radio v-model="apply.customerType" label="ent" border>企业</el-radio>
<el-radio v-model="apply.customerType" label="person" border>个体户</el-radio> -->
<div class="selftmregType" v-model="apply.customerType"
:style="apply.customerType==\'ent\' ? \'border: 1px solid #0989C5;color: #0989C5;\' : \'\'"
@click="apply.customerType = \'ent\'">企业<img v-if="apply.customerType==\'ent\'" src="/imgs/sjd.png"
alt=""></div>
<div class="selftmregType" v-model="apply.customerType"
:style="apply.customerType==\'person\' ? \'border: 1px solid #0989C5;color: #0989C5;\' : \'\'"
@click="apply.customerType = \'person\'">个体户<img v-if="apply.customerType==\'person\'"
src="/imgs/sjd.png" alt=""></div>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item v-if="apply.customerType==\'ent\'" label-width="140px" label="公司名称"
style="width:493px;float:left;padding-right:50px;" prop="name">
<gsb-selectentjd v-if="currentUser" @input="selectpersoninput" @historychange="historyapplierchange"
allowcreate="true" showhistory="false" @change="applierChange" size="medium" v-model="apply.name"
refMethod="getCompanyInfoByLikeName" autoComplete="true" isFilter="true" refModel="tool"
labelField="entName" valueField="entName" style="position:relative;width:100%;" placeHolder="请输入选择公司名称">
</gsb-selectentjd>
<gsb-selectentjd v-if="!currentUser" @input="selectpersoninput" @historychange="historyapplierchange"
frombrowser="true" allowcreate="true" showhistory="false" @change="applierChange" size="medium"
v-model="apply.name" refMethod="getCompanyInfoByLikeName" autoComplete="true" isFilter="true"
refModel="tool" labelField="entName" valueField="entName" style="position:relative;width:100%;"
placeHolder="请输入选择公司名称">
</gsb-selectentjd>
</el-form-item>
<el-form-item v-if="apply.customerType==\'person\'" label-width="140px" label="姓名"
style="width:493px;float:left;padding-right:50px;" prop="name">
<!-- <el-input placeHolder="请输入身份证姓名" v-model="apply.name"></el-input> -->
<gsb-selectperson v-if="currentUser" @input="selectpersoninput" allowcreate="true" showhistory="false"
size="medium" v-model="apply.name" refMethod="getCompanyInfoByLikeName" autoComplete="true"
isFilter="true" refModel="tool" labelField="entName" valueField="entName"
style="position:relative;width:100%;" placeHolder="请输入身份证姓名">
</gsb-selectperson>
<gsb-selectperson v-if="!currentUser" frombrowser="true" @input="selectpersoninput" allowcreate="true"
showhistory="false" size="medium" v-model="apply.name" refMethod="getCompanyInfoByLikeName"
autoComplete="true" isFilter="true" refModel="tool" labelField="entName" valueField="entName"
style="position:relative;width:100%;" placeHolder="请输入身份证姓名">
</gsb-selectperson>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item v-if="apply.customerType==\'person\'" label-width="140px" label="身份证号码"
style="width:493px;float:left;padding-right:50px;" prop="identityCardNo">
<el-input @input="maxCardNo" placeHolder="请输入身份证号码" v-model="apply.identityCardNo"> </el-input>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item v-if="apply.customerType==\'person\'" label-width="140px" label="身份证住址"
style="width:493px;float:left;padding-right:50px;" prop="applyAddr">
<el-input placeHolder="请输入身份证住址" v-model="apply.applyAddr"></el-input>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item label-width="140px" label="统一社会信用代码" style="width:493px;float:left;padding-right:50px;"
prop="code">
<el-input placeHolder="请输入统一社会信用代码" v-model="apply.code"></el-input>
<div class="floatBox-right">
<!-- <img src="/imgs/mobileamilapply/wenhao.png" alt=""> -->
<i class="el-icon-question" @mouseover="mouseOverDemo(99)" @mouseleave="mouseLeaveDemo(99)"></i>
<div id="floatBox-demo" v-show="floatBoxDemo">由于官方商标注册增加“统一社会信用代码”的填写,企业和个体户申请必填,请仔细核对营业执照填写。
</div>
</div>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item v-if="apply.customerType==\'ent\'" label-width="140px" label="执照详细地址"
style="width:493px;float:left;padding-right:50px;" prop="applyAddr">
<el-input placeHolder="请输入执照详细地址" v-model="apply.applyAddr"></el-input>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item label-width="140px" label="邮政编码" style="width:493px;float:left;padding-right:50px;"
prop="zipCode">
<el-input @input="maxZipCode" placeHolder="请输入邮政编码" v-model="apply.zipCode"></el-input>
</el-form-item>
<div style="clear:both;"></div>
</div>
</div>
<div class="selftmreg_main selfmreg-step2 ">
<h4 style="color:#535353"><i class="selftmreg_shuxian"></i>订单联系人</h4>
<div style="clear:both;"></div>
<div class="selfmreg-step2-space" style="width:100%;padding-left: 30px;box-sizing: border-box;">
<el-form-item label-width="140px" label="客户联系人" style="width:493px;float:left;padding-right:50px;"
prop="contacts">
<el-input v-model="apply.contacts" placeHolder="此信息很重要,官方文件送达需与您联系"></el-input>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item label-width="140px" label="联系电话" style="width:493px;float:left;padding-right:50px;"
prop="mobile">
<el-input v-model="apply.mobile" @input="maxPhoneNumber" placeHolder="请填写11位手机号码"></el-input>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item label-width="140px" label="电子邮箱" style="width:493px;float:left;padding-right:50px;"
prop="email">
<el-input v-model="apply.email" placeHolder="重要官文会通过邮件通知,请注意查收并及时回复"> </el-input>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item label-width="140px" label="座机" style="width:493px;float:left;padding-right:50px;">
<el-input v-model="apply.tel" placeHolder="区号-座机号码"> </el-input>
</el-form-item>
<div style="clear:both;"></div>
<el-form-item label-width="140px" label="传真" style="width:493px;float:left;padding-right:50px;">
<el-input v-model="apply.fax" placeHolder="请输入传真号"> </el-input>
</el-form-item>
<div style="clear:both;"></div>
<!-- <el-form-item label-width="140px" label="座机电话" style="width:493px;float:left;padding-right:50px;" prop="code">
<el-input v-model="apply.code"></el-input>
</el-form-item> -->
<div style="clear:both;"></div>
</div>
</div>
<div class="selftmreg_main selfmreg-step2">
<h4 style="color:#535353"><i class="selftmreg_shuxian"></i>资料上传 <span
class="selftmreg_main_h4span">(可跳过进行下一步,支付完成后,在订单中上传即可)</span></h4>
<div style="width: 100%;text-align: left;padding-left: 10px;box-sizing: border-box;">
<el-form-item class="gsb_items" label="">
<div class="title special">上传材料:营业执照</div>
<div class="upload-box" v-loading="loading" @mouseover="mouseOverDemo(1,\'a\')"
@mouseleave="mouseLeaveDemo(1,\'a\')">
<img class="upload-applyimg" v-if="apply.businessLicensePic" :src="apply.businessLicensePic" />
<gsb-upload v-else flag="yyzz" ref="yyzz" :d="d" @setKey="setKey" :action="action" filetype="image/jpeg"
:ifshowlist="false" @uploadsuccess="uploadsuccess" @error="error">
<div class="upload-button" @click="loadingKey = 0">
<div><i class="el-icon-plus"></i></div>
<div>(需盖公章)</div>
</div>
</gsb-upload>
<div class="upload-dialog" v-show="apply.businessLicensePic && toViewImgKey == \'a\'">
<div @click="window.open(apply.businessLicensePic)">查看大图</div>
<gsb-upload flag="yyzz" ref="yyzz" :d="d" @setKey="setKey" :action="action" filetype="image/jpeg"
:ifshowlist="false" @uploadsuccess="uploadsuccess" @error="error">
<div @click="loadingKey = 0">重新上传</div>
</gsb-upload>
</div>
</div>
<div class="upload-img" @mouseover="mouseOverDemo(1)" @mouseleave="mouseLeaveDemo(1)">
<img :src="apply.customerType == \'ent\' ? \'/imgs/sbzc/yyzz1.png\' : \'imgs/sbzc/yyzz.png\'" />
<div v-if="toViewImgKey == 1" class="toViewImg"
@click="toViewImg(apply.customerType == \'ent\' ? \'/imgs/sbzc/yyzzD1.png\' : \'imgs/sbzc/yyzzD.png\')">
查看大图</div>
</div>
<div class="text"> <i class="el-icon-warning"></i>
材料要求盖章/签字清晰完整,建议盖章/签字在文件中间空白处不压字<br />格式为<span>PDF</span><span>JPG</span>,大小不能超过<span>10M</span><br /><span>商标局声明:自2018年1月1日起,国内申请人办理商标注册、异议、变更、转让、续展等商标事宜,应当使用标注统一社会信用代码身份证明文件,未使用则不予受理</span>
</div>
</el-form-item>
<el-form-item class="gsb_items" v-if="apply.customerType==\'person\'" label="">
<div class="title special">上传材料:身份证明</div>
<div class="upload-box" v-loading="loading1" @mouseover="mouseOverDemo(4,\'d\')"
@mouseleave="mouseLeaveDemo(4,\'d\')">
<img @click="window.open(apply.identityCardPdf)" class="upload-applyimg" v-if="apply.identityCardPic"
:src="apply.identityCardPic?apply.identityCardPic:\'\'" />
<gsb-upload v-else flag="sfz" ref="sfz" :d="d" @setKey="setKey" :action="action" filetype="image/jpeg"
:ifshowlist="false" @uploadsuccess="uploadsuccess" @error="error">
<div class="upload-button" @click="loadingKey = 1">
<div><i class="el-icon-plus"></i></div>
<div>(需盖公章)</div>
</div>
</gsb-upload>
<div class="upload-dialog" v-show="apply.identityCardPic && toViewImgKey == \'d\'">
<div @click="window.open(apply.identityCardPic)">查看大图</div>
<gsb-upload flag="sfz" ref="sfz" :d="d" @setKey="setKey" :action="action" filetype="image/jpeg"
:ifshowlist="false" @uploadsuccess="uploadsuccess" @error="error">
<div @click="loadingKey = 1">重新上传</div>
</gsb-upload>
</div>
</div>
<div class="upload-img" @mouseover="mouseOverDemo(4)" @mouseleave="mouseLeaveDemo(4)">
<img src="/imgs/sbzc/sfz.png" />
<div v-if="toViewImgKey == 4" class="toViewImg" @click="toViewImg(\'/imgs/sbzc/sfzD.png\')">查看大图</div>
</div>
<div class="text"> <i class="el-icon-warning"></i> 格式为<span>PDF</span>
<span>JPG</span>,大小不能超过<span>10M</span></div>
</el-form-item>
<el-form-item class="gsb_items">
<div class="title special">上传材料:代理委托书<a
href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/igirl_channel_tmwtsdemo001.doc"
style="color:#0F8EE9;font-size:13px;cursor:pointer;position: absolute;top: 90%;left: 38%;line-height: 0px;border-bottom: 1px solid #0F8EE9;height: 5px;width: max-content;">下载委托书模板</a>
</div>
<div class="upload-box" v-loading="loading2" @mouseover="mouseOverDemo(2,\'b\')"
@mouseleave="mouseLeaveDemo(2,\'b\')">
<img @click="window.open(apply.gzwtsUrl)" class="upload-applyimg" v-if="apply.gzwtsUrl"
:src="apply.gzwtsUrl" />
<gsb-upload v-else flag="wts" ref="wts" :d="d" @setKey="setKey" :action="action" filetype="image/jpeg"
:ifshowlist="false" @uploadsuccess="uploadsuccess" @error="error">
<div class="upload-button" @click="loadingKey = 2">
<div><i class="el-icon-plus"></i></div>
<div>(需盖公章)</div>
</div>
</gsb-upload>
<div class="upload-dialog" v-show="apply.gzwtsUrl && toViewImgKey == \'b\'">
<div @click="window.open(apply.gzwtsUrl)">查看大图</div>
<gsb-upload flag="wts" ref="wts" :d="d" @setKey="setKey" :action="action" filetype="image/jpeg"
:ifshowlist="false" @uploadsuccess="uploadsuccess" @error="error">
<div @click="loadingKey = 2">重新上传</div>
</gsb-upload>
</div>
</div>
<div class="upload-img" @mouseover="mouseOverDemo(2)" @mouseleave="mouseLeaveDemo(2)">
<img :src="apply.customerType == \'ent\' ? \'/imgs/sbzc/wts1.png\' : \'imgs/sbzc/wts.png\'" />
<div v-if="toViewImgKey == 2" class="toViewImg"
@click="toViewImg(apply.customerType == \'ent\' ? \'/imgs/sbzc/wtsD1.png\' : \'imgs/sbzc/wtsD.png\')">
查看大图</div>
</div>
<div class="text"> <i class="el-icon-warning"></i>
材料要求盖章/签字清晰完整,建议盖章/签字在文件中间空白处不压字<br />请上传由申请人盖章或签字的中文代理委托书彩色扫描件,格式为<span>JPG</span>宽高的大小为<br /><span>4000px~600px</span><span>300dpi</span>分辨率,大小不能超过<span>10M</span>
</div>
</el-form-item>
<el-form-item class="gsb_items" label="">
<div class="title">上传材料:优先权证明 <a
href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/yzq_201908281849646526xujnsedjnqwdoni.doc"
style="width:95px;color:#0F8EE9;font-size:13px;cursor:pointer;position: absolute;top: 70%;left: 37%;line-height: 0px;border-bottom: 1px solid #0F8EE9;height: 5px;">下载优先权证明</a>
</div>
<div class="upload-box" v-loading="loading3" @mouseover="mouseOverDemo(3,\'c\')"
@mouseleave="mouseLeaveDemo(3,\'c\')">
<img @click="window.open(apply.smwjUrl)" class="upload-applyimg" v-if="apply.smwjUrl"
:src="apply.smwjUrl" />
<gsb-upload v-else flag="yxq" ref="yxq" :d="d" @setKey="setKey" :action="action" filetype="image/jpeg"
:ifshowlist="false" @uploadsuccess="uploadsuccess" @error="error">
<div class="upload-button" @click="loadingKey = 3">
<div><i class="el-icon-plus"></i></div>
<div>(需盖公章)</div>
</div>
</gsb-upload>
<div class="upload-dialog" v-show="apply.smwjUrl && toViewImgKey == \'c\'">
<div @click="window.open(apply.smwjUrl)">查看大图</div>
<gsb-upload flag="yxq" ref="yxq" :d="d" @setKey="setKey" :action="action" filetype="image/jpeg"
:ifshowlist="false" @uploadsuccess="uploadsuccess" @error="error">
<div @click="loadingKey = 3">重新上传</div>
</gsb-upload>
</div>
</div>
<div class="upload-img" @mouseover="mouseOverDemo(3)" @mouseleave="mouseLeaveDemo(3)">
<img src="/imgs/sbzc/yxq.png" />
<div v-if="toViewImgKey == 3" class="toViewImg" @click="toViewImg(\'/imgs/sbzc/yxqD.png\')">查看大图</div>
</div>
<!-- <div class="text"> <i class="el-icon-question" style="color:#0F8EE9"></i></div> -->
</el-form-item>
<div style="clear:both;"></div>
<el-dialog title="" :visible.sync="toViewImgType" center width="72%">
<img :src="toViewImgSrc" style="max-width:100%;display: block;margin: 0 auto;" alt="">
</el-dialog>
</div>
</div>
<div class="tabButtomPrcie">
<!-- <span style="margin-right:30px;text-align: center;color: #03004C;">官费总额:<i
style="color:#E50778;font-style: normal;">¥{{form.totalPublicExpense}}</i></span> -->
<el-button style="padding: 8px 20px;
width: 170px;
background: none;
border-radius: 0px;
color: rgb(81, 210, 183);
border: 1px solid" @click="tobefore">上一步</el-button>
<el-button style="padding: 8px 20px;
width: 170px;
background: rgb(81, 210, 183);
border-radius: 0px;
color: rgb(255, 255, 255);
border: 0px" type="primary" @click="submitForm(\'apply\')">
下一步</el-button>
</div>
</el-form>
<!-- page3 -->
<el-form v-show="step==3" ref="form" :rules="rules" :model="form" class="demo-ruleForm" label-width="120px">
<div class="selftmreg_main">
<div class="selftmreg_shu" style="margin-bottom:40px;"></div>
<div style="display:inline-block;margin-right:10px;">
<h4><i class="selftmreg_shuxian"></i>商标信息</h4>
</div>
<div style="display:inline-block;color:#409EFF" @click="function(){toTop();step=1}"><i class="el-icon-edit"
style="font-size: 14px;cursor: pointer;">编辑</i></div>
<div style="font-size:14px;font-family:PingFangSC-Regular; font-weight:400;">
<div style="width: 100%;margin-bottom: 23px">
<div style="width:120px;display:inline-block;text-align: right;color:#636569;">商标类型:</div>
<div style="display:inline-block;padding-left:10px;">{{tm_form_type[form.tmFormType]}}</div>
</div>
<div style="width: 100%;margin-bottom: 23px">
<div style="width:120px;display:inline-block;text-align: right;color:#636569;">商标名称:</div>
<div style="display:inline-block;padding-left:10px;">{{form.tmName}}</div>
</div>
<div style="width: 100%;margin-bottom: 23px">
<div style="width:120px;display:inline-block;text-align: right;color:#636569;">商标图样:</div>
<div style="display:inline-block;vertical-align: top;padding-left:10px;">
<img :src="form.colorizedPicUrl"
style="height:100px;width:100px;border: 2px dashed rgb(233, 233, 233);">
</div>
</div>
<div style="width: 100%;margin-bottom: 23px">
<div style="width:120px;display:inline-block;text-align: right;color:#636569;">商标类别:</div>
<div style="width:70%;display:inline-block;padding-left:10px;vertical-align: top;">
<div v-for="item in nclOne">
<div style="font-size: 14px; font-weight: 600;">
{{item.code ? item.code + \' 类 \' : \' \'}} {{item.name}}
</div>
<div style="margin: 10px 0;">
<span v-for="child in item.nclThree" style="margin-right:20px;">{{child.code}} {{child.name}}</span>
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<!-- <h4>申请人及联系人信息</h4> -->
<div style="display:inline-block;margin-right:10px;">
<h4><i class="selftmreg_shuxian"></i>申请人及联系人信息</h4>
</div>
<div style="display:inline-block;color:#409EFF" @click="function(){toTop();step=2}"><i class="el-icon-edit"
style="font-size: 14px;cursor: pointer;">编辑</i></div>
<div style="width: 100%;font-size:14px;font-family:PingFangSC-Regular; font-weight:400;">
<div style="min-width: 35%;margin-bottom: 23px;display:inline-block;">
<div
style="width:120px;display:inline-block;text-align: left;color:#636569;box-sizing: border-box;padding-left: 44px;">
申请人类型:</div>
<div style="display:inline-block;padding-left:10px;">
{{apply.customerType=="ent"?"企业":""}}{{apply.customerType=="person"?"个体户":""}}</div>
</div>
<div style="min-width: 35%;margin-bottom: 23px;display:inline-block;">
<div v-if="apply.customerType==\'ent\'"
style="width:120px;display:inline-block;text-align: right;color:#636569;">公司名称:</div>
<div v-if="apply.customerType==\'person\'"
style="width:120px;display:inline-block;text-align: right;color:#636569;">申请人姓名:</div>
<div style="display:inline-block;padding-left:10px;">{{apply.name}}</div>
</div>
<div style="clear:both"></div>
<div style="min-width: 35%;margin-bottom: 23px;display:inline-block;">
<div
style="width:120px;display:inline-block;text-align: left;color:#636569;box-sizing: border-box;padding-left: 44px;">
邮政编码:</div>
<div style="display:inline-block;padding-left:10px;">{{apply.zipCode}}</div>
</div>
<div style="min-width: 35%;margin-bottom: 23px;display:inline-block;">
<div v-if="apply.customerType==\'ent\'"
style="width:120px;display:inline-block;text-align: right;color:#636569;">公司地址:</div>
<div v-if="apply.customerType==\'person\'"
style="width:120px;display:inline-block;text-align: right;color:#636569;">申请人地址:</div>
<div style="display:inline-block;padding-left:10px;">{{apply.applyAddr}}</div>
</div>
<div style="clear:both"></div>
<div style="min-width: 35%;margin-bottom: 23px;display:inline-block;">
<div
style="width:120px;display:inline-block;text-align: left;color:#636569;box-sizing: border-box;padding-left: 44px;">
联系人:</div>
<div style="display:inline-block;padding-left:10px;">{{apply.contacts}}</div>
</div>
<div style="min-width: 35%;margin-bottom: 23px;display:inline-block;">
<div style="width:120px;display:inline-block;text-align: right;color:#636569;">联系电话:</div>
<div style="display:inline-block;padding-left:10px;">{{apply.mobile}}</div>
</div>
<div style="clear:both"></div>
<div style="min-width: 35%;margin-bottom: 23px;display:inline-block;">
<div
style="width:120px;display:inline-block;text-align: left;color:#636569;box-sizing: border-box;padding-left: 44px;">
电子邮箱:</div>
<div style="display:inline-block;padding-left:10px;">{{apply.email}}</div>
</div>
<div style="min-width: 35%;margin-bottom: 23px;display:inline-block;">
<div style="width:120px;display:inline-block;text-align: right;color:#636569;">信用编码:</div>
<div style="display:inline-block;padding-left:10px;">{{apply.code}}</div>
</div>
<div style="clear:both"></div>
<div v-if="apply.customerType==\'person\'" style="min-width: 35%;margin-bottom: 23px;display:inline-block;">
<div style="width:120px;display:inline-block;text-align: right;color:#636569;">身份证号:</div>
<div style="display:inline-block;padding-left:10px;">{{apply.identityCardNo}}</div>
</div>
<div style="clear:both"></div>
</div>
<h4 v-show="apply.businessLicensePic || apply.identityCardPic||apply.gzwtsUrl||apply.smwjUrl"><i
class="selftmreg_shuxian"></i>材料信息</h4>
<div style="font-size:14px;font-family:PingFangSC-Regular; font-weight:400;">
<div style="width: 100%;margin-bottom: 23px;padding-left: 40px;box-sizing: border-box;">
<div v-if="apply.businessLicensePic"
style="display:inline-block;padding-left:10px;cursor: pointer;text-align: center;color: rgb(99, 101, 105);">
<img @click="window.open(apply.businessLicensePic)" v-if="apply.businessLicensePic"
:src="apply.businessLicensePic"
style="height:118px;width:98px;border: 2px dashed rgb(233, 233, 233);">
<div>营业执照</div>
</div>
<div v-if="apply.identityCardPic"
style="display:inline-block;padding-left:10px;cursor: pointer;text-align: center;color: rgb(99, 101, 105);">
<img @click="window.open(apply.identityCardPic)" v-if="apply.identityCardPic"
:src="apply.identityCardPic" style="height:118px;width:98px;border: 2px dashed rgb(233, 233, 233);">
<div>身份证明</div>
</div>
<div v-if="apply.gzwtsUrl"
style="display:inline-block;padding-left:10px;cursor: pointer;text-align: center;color: rgb(99, 101, 105);">
<img @click="window.open(apply.gzwtsUrl)" :src="apply.gzwtsUrl"
style="height:118px;width:98px;border: 2px dashed rgb(233, 233, 233);">
<div>代理委托书</div>
</div>
<div v-if="apply.smwjUrl"
style="display:inline-block;padding-left:10px;cursor: pointer;text-align: center;color: rgb(99, 101, 105);">
<img @click="window.open(apply.smwjUrl)" :src="apply.smwjUrl"
style="height:118px;width:98px;border: 2px dashed rgb(233, 233, 233);">
<div>优先权证明</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<h4><i class="selftmreg_shuxian"></i>订单备注</h4>
<div class="step3-indent" style="font-size:14px;font-family:PingFangSC-Regular; font-weight:400;">
<div style="width: 980px;margin-bottom: 23px;padding-left: 40px;box-sizing: border-box;min-height: 82px">
<el-input style="border-radius:none;" type="textarea" :rows="4" v-model="apply.notes"
placeholder="如有特殊需要,请填写订单备注">
</el-input>
</div>
<div style="clear:both"></div>
</div>
</div>
<br />
<div class="tabButtomPrcie">
<div class="step3-submit-main">
<div style="width:49%;text-align: left;display: inline-block;">
<div style="width: 100%;margin-bottom: 23px;box-sizing: border-box;padding-left: 17px;">
<!-- <span style="margin-right:20px;">服务费总额:¥{{form.totalServiceCharge}}</span> -->
<!-- <span
style="margin-right:20px;font-size:14px;font-family:PingFangSC;font-weight:400;color:#666666;">官费总额:¥{{form.totalPublicExpense}}</span> -->
<!-- <span style="margin-right:20px;">发票税费:¥{{form.totalTaxes}}</span> -->
<!-- <span
style="margin-right:20px;font-size:16px;font-family:PingFangSC;font-weight:600;color:#E50778;">应付总额:¥{{form.totalSum}}</span> -->
</div>
</div>
<div style="width:50%;text-align: right;display: inline-block;float: right;
box-sizing: border-box;">
<div style="margin-bottom:10px;display: inline-block;font-size:14px;
font-family:PingFangSC;
font-weight:400;
color:rgba(102,102,102,1);margin-right: 20px">
<input type="checkbox" v-model="isRead">
<label style="cursor: pointer;">我已阅读 <span style="color:#0F8EE9">《商标服务合同》</span>且同意该合同内容</label>
</div>
<el-button type="primary" style="padding: 8px 20px;
width: 170px;
background: rgb(81, 210, 183);
border-radius: 0px;
color: rgb(255, 255, 255);
border: 0px;" @click="submitForm(\'order\')" :disabled="!isRead">提交订单</el-button>
</div>
</div>
</div>
<div class="step3-submit">
<!-- <el-button v-if="!isRead" type="primary" disabled>提交订单</el-button> -->
</div>
</el-form>
<!-- page4 -->
<!-- <el-form v-if="step==4" ref="apply" :rules="applyrules" :model="apply" class="demo-ruleForm" label-width="120px">
<div >
<div style="width:96%;margin:50px 2%;">
<div style="width:10%;display:inline-block;vertical-align: top;text-align: center">
<img src="/imgs/order_icon.png" style="width:100px;height:100px">
</div>
<div style="width:80%;display:inline-block;vertical-align: top;">
<div style="font-size: 21px;">
订单提交成功,应付金额:{{order.totalSum}}
</div>
<div style="margin:30px 0;">
<span style="margin-right:20px;">订单编号{{order.orderNum}}</span> <span>购买服务:{{order.itemName}}</span>
</div>
</div>
</div>
<div style="display:inline-block;margin-right:10px;"><h4>选择支付方式</h4></div>
<div style="display:inline-block;color:#e1e1e1">
<i class="el-icon-warning">
付款账户如果是公司账户,则可以为付款的公司开具发票;如果是个人账户,则只能为付款人或申请人开具发票,请选择适合的付款账户
</i>
</div>
<div>
<div>
<el-radio v-model="pay.paymentPlatformType" label="wx" border>
微信支付
</el-radio>
<el-radio v-model="pay.paymentPlatformType" label="offline" border>线下支付</el-radio>
</div>
<div style="clear:both"></div>
</div>
<div style="text-align:center;padding:50px 0;">
<el-button type="primary" @click="wxPay">确认支付</el-button>
</div>
</div>
</el-form> -->
<br />
</div>
</div>
<!-- 支付弹窗 -->
<div v-if="payconfirm">
<div @click="closePayConfirm"
style="position: fixed;width:100%;z-index:999;background-color:black;top:0;left:0;right:0;bottom: 0;opacity: 0.5;">
</div>
<div style="position:fixed;height:400px;top:20%;left:20%;right:25%;z-index: 9999;background-color:white;">
<div v-if="pay.paymentPlatformType==\'wx\'">
<h4 style="text-align:left;margin-left:2%;">微信支付</h4>
<div style="padding:20px 0;text-align: center">
<img width="200px" height="200px" style="border:2px dashed #e9e9e9" :src="qrcode" />
<div style="color:#e1e1e1">
请用微信扫描二维码,完成订单支付。
</div>
<div style="color:red">
*支付完成前请勿关闭页面。
</div>
</div>
<div style="clear:both"></div>
</div>
<div v-if="pay.paymentPlatformType==\'offline\'">
<h4 style="text-align:left;margin-left:2%;">线下支付</h4>
<div style="padding:20px 0;text-align: center">
<gsb-upload2 :value="pay.offlinePayDocument" flag="zfpz" ref="zfpz" :d="d" @setKey="setKey" :action="action"
filetype="image/jpeg" :ifshowlist="false" @uploadsuccess="uploadsuccess2" @error="error">
</gsb-upload2>
<div style="color:#e1e1e1">
请上传线下支付凭证。
</div>
<div style="text-align:center;padding:50px 0;">
<el-button @click="closePayConfirm">取消</el-button>
<el-button type="primary" v-if="!pay.offlinePayDocument" disabled>确认</el-button>
<el-button type="primary" v-if="pay.offlinePayDocument" @click="orderUpdate">确认</el-button>
</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
<transition name="message">
<div class="selftmreg-message" v-if="message.show">
<i class="el-icon-warning"></i>
{{message.info}}
</div>
</transition>
<el-dialog title="提示" :visible.sync="showConfrim" width="30%" style="z-Index:9999;">
<div v-for="(item, index) in nclOne" :key="index" style="margin-bottom:10px;">
{{item.code}}类{{item.name}},商品/服务项目<span
style="color:red;">不足10项</span>,已选{{item.checked}}项,还可选{{10-item.checked}}个小项</span>
</div>
<span slot="footer" class="dialog-footer" style="text-align:center;">
<el-button
style="background:#51d2b7;border-color: #66b1ff;color: #FFF;border-radius:0;width:170px;padding:8px 20px;"
@click="closeConfrim()">修 改</el-button>
<el-button
style="background:#fff;border-color: #DCDFE6;color: #606266;border-radius:0;width:170px;padding:8px 20px;"
type="primary" @click="submitForm(\'form\',true)">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="提示" custom-class="selftmreg-loginmask" :visible.sync="toLogin" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" >
<span>需要先登录才能注册噢 !</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="goGsbLogin">去登录</el-button>
</span>
</el-dialog>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
var validateAddr = (rule, value, callback) => {
var x = /(([])|([][])|([][][][][][][])|([][][])|([][][])|([][][])|([][][])|([][][])|([广][西])|([][])|([][])|([西][])|([][][][][][])|([][][][][][][][])|([广][西][][][][][])|([][][][][][][])|([西][][][][]))/g.test(value);
if (!x) {
callback(new Error('请核对地址,必须写所在省份名称!'));
} else {
callback();
}
};
var mobileValidator = (rule, value, callback) => {
var x = /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/g.test(value);
if (!x) {
callback(new Error('联系电话格式错误!'));
} else {
callback();
}
};
var emailValidator = (rule, value, callback) => {
var x = /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(value);
if (!x) {
callback(new Error('电子邮箱格式错误!'));
} else {
callback();
}
};
var colorizedtm = (rule, value, callback) => {
if ((this.form.tmFormType == "7" || this.form.tmFormType == "6") && value == "") {
callback(new Error('请上传彩色商标图样'));
} else {
callback();
}
};
var validateIdCard = (rule, value, callback) => {
if (this.apply.customerType == "person") {
if (value == "") {
callback(new Error('请输入身份证号码'));
} else {
var x = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value);
if (!x) {
callback(new Error('身份证格式错误'));
} else {
callback();
}
}
} else {
callback();
}
};
var validateSFZ = (rule, value, callback) => {
if (this.apply.customerType == "person" && value == "") {
callback(new Error('身份证明不能为空'));
} else {
callback();
}
};
var code = (rule, value, callback) => {
if (this.apply.customerType == "ent" && !this.apply.code) {
callback(new Error('请输入信用代码'));
} else {
callback();
}
};
var validateIdConmpany = (rule, value, callback) => {
if (value == '') {
callback(new Error('名称不能为空'));
} else {
callback();
}
};
return {
listPath: {
path: `/${this.$root.channelName}/jdtrademark`,
query: {
channelUserId: this.$route.query.channelUserId,
deliveryOrderNo: this.deliveryOrderNo,
}
},
announcementsImgType: false,
announcementsType: false,
nclSearchLoading: false,
updatePriceType: false,
loading: false,
loading1: false,
loading2: false,
loading3: false,
loadingKey: 0,
tm_form_type: { "1": "立体", "3": "文字图标", "4": "图形商标", "5": "图形及文字商标", "6": "颜色", "7": "彩色" },
showSelectedNclList: false,
fkey: 0,
isIndeterminate: false,
checkAll: false,
checkedNcl: [],
ncl: ["01", "02", "03", "04", "05", "06", "07", "08", "09",
"10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24",
"25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38",
"39", "40", "41", "42", "43", "44", "45"
],
nclOptions: ["01", "02", "03", "04", "05", "06", "07", "08", "09",
"10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24",
"25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38",
"39", "40", "41", "42", "43", "44", "45"
],
isIndeterminate: false,
itemPrice: 0,
refbizcode: '',
bizCode: '',
filterText: '',
status: "",
data2: [{
id: 1,
label: '一级 1',
children: []
}],
ppnclArr: null,
ncldata: [
{ code: "01", name: "化学原料", type: 1 }, { code: "02", name: "颜料油漆", type: 1 }, { code: "03", name: "日化用品", type: 1 }, { code: "04", name: "燃料油脂", type: 1 }, { code: "05", name: "医药", type: 1 },
{ code: "06", name: "金属材料", type: 1 }, { code: "07", name: "机械设备", type: 1 }, { code: "08", name: "手工器械", type: 1 }, { code: "09", name: "科学仪器", type: 1 }, { code: "10", name: "医疗器械", type: 1 },
{ code: "11", name: "灯具空调", type: 1 }, { code: "12", name: "运输工具", type: 1 }, { code: "13", name: "军火烟火", type: 1 }, { code: "14", name: "珠宝钟表", type: 1 }, { code: "15", name: "乐器", type: 1 },
{ code: "16", name: "办公用品", type: 1 }, { code: "17", name: "橡胶制品", type: 1 }, { code: "18", name: "皮革皮具", type: 1 }, { code: "19", name: "建筑材料", type: 1 }, { code: "20", name: "家具", type: 1 },
{ code: "21", name: "厨房洁具", type: 1 }, { code: "22", name: "绳网袋篷", type: 1 }, { code: "23", name: "纱线丝", type: 1 }, { code: "24", name: "布料床单", type: 1 }, { code: "25", name: "服装鞋帽", type: 1 },
{ code: "26", name: "纽扣拉链", type: 1 }, { code: "27", name: "地毯席垫", type: 1 }, { code: "28", name: "健身器材", type: 1 }, { code: "29", name: "食品", type: 1 }, { code: "30", name: "方便食品", type: 1 },
{ code: "31", name: "饲料种籽", type: 1 }, { code: "32", name: "啤酒饮料", type: 1 }, { code: "33", name: "酒", type: 1 }, { code: "34", name: "烟草烟具", type: 1 }, { code: "35", name: "广告销售", type: 1 },
{ code: "36", name: "金融物管", type: 1 }, { code: "37", name: "建筑修理", type: 1 }, { code: "38", name: "通讯服务", type: 1 }, { code: "39", name: "运输贮藏", type: 1 }, { code: "40", name: "材料加工", type: 1 },
{ code: "41", name: "教育娱乐", type: 1 }, { code: "42", name: "网站服务", type: 1 }, { code: "43", name: "餐饮住宿", type: 1 }, { code: "44", name: "医疗园艺", type: 1 }, { code: "45", name: "社会服务", type: 1 }
],
bigtype: [{
value: '人工智能', label: '人工智能',
children: [{ value: '技术研究', label: '技术研究', }, { value: '智能办公', label: '智能办公', }, { value: '智能驾驶', label: '智能驾驶', }, { value: '智能教育', label: '智能教育', }, { value: '智能穿戴', label: '智能穿戴', }]
},
{
value: '文教娱|传媒、教育、文化、娱乐', label: '文教娱|传媒、教育、文化、娱乐',
children: [{ value: '影视', label: '影视', }, { value: '教育培训', label: '教育培训', }, { value: '文化娱乐', label: '文化娱乐', }, { value: '旅游服务', label: '旅游服务', }]
},
{
value: '服务业|餐饮、修理安装', label: '服务业|餐饮、修理安装',
children: [{ value: '餐饮', label: '餐饮', }, { value: '修理安装', label: '修理安装', }]
},
{
value: '商业服务|广告、金融、法律财务人力服务', label: '商业服务|广告、金融、法律财务人力服务',
children: [{ value: '广告、会展', label: '广告、会展', }, { value: '人力资源', label: '人力资源', }, { value: '创业孵化器', label: '创业孵化器', }, { value: '金融财务', label: '金融财务', }, { value: '商业咨询', label: '商业咨询', }, { value: '法律服务', label: '法律服务', }]
},
{
value: '房产建材|建筑工程监理物管', label: '房产建材|建筑工程监理物管',
children: [{ value: '装饰装潢', label: '装饰装潢', }, { value: '家具家居', label: '家具家居', }, { value: '建材', label: '建材', }, { value: '建筑、监理', label: '建筑、监理', }]
},
{
value: '交通物流|运输、仓储、物流、快递、车辆养护', label: '交通物流|运输、仓储、物流、快递、车辆养护',
children: [{ value: '物流运输、快递', label: '物流运输、快递', }, { value: '车辆养护、维修', label: '车辆养护、维修', }, { value: '物流仓储', label: '物流仓储', }]
},
{
value: '医药保健化工能源', label: '医药保健化工能源',
children: [{ value: '化工能源', label: '化工能源', }, { value: '眼镜面罩', label: '眼镜面罩', }, { value: '医疗保健', label: '医疗保健', }, { value: '医疗器械', label: '医疗器械', }, { value: '药品', label: '药品', }, { value: '医疗服务', label: '医疗服务', }]
},
{
value: '食品饮料|生鲜、保健产品、烟酒糖茶', label: '食品饮料|生鲜、保健产品、烟酒糖茶',
children: [{ value: '烟酒糖茶、饮料', label: '烟酒糖茶、饮料', }, { value: '营养产品', label: '营养产品', }, { value: '生鲜食品、糕点', label: '生鲜食品、糕点', }, { value: '珠宝钟表', label: '珠宝钟表', }, { value: '美容、化妆品', label: '美容、化妆品', }, { value: '服装、配饰', label: '服装、配饰', }]
},
{
value: 'IT、互联网||通信、电子、互联网', label: 'IT、互联网||通信、电子、互联网',
children: [{ value: '在线服务', label: '在线服务', }, { value: '游戏', label: '游戏', }, { value: '社交、论坛', label: '社交、论坛', }, { value: '电商平台', label: '电商平台', }, { value: '软件开发运营', label: '软件开发运营', }, { value: '家电产品', label: '家电产品', }, { value: '计算机及周边', label: '计算机及周边', }, { value: '通信', label: '通信', }]
},
{
value: '农业|农、林、牧、渔等', label: '农业|农、林、牧、渔等',
children: [{ value: '化肥、饲料', label: '化肥、饲料', }, { value: '农产品加工', label: '农产品加工', }]
},
{
value: '机械制造|机械车辆五金工具', label: '机械制造|机械车辆五金工具',
children: [{ value: '五金器械', label: '五金器械', }, { value: '车船航空器制造', label: '车船航空器制造', }, { value: '机械、加工制造', label: '机械、加工制造', }]
},
],
selectedOptions: [],
defaultProps: {
children: 'children',
label: function (data, node) {
if (data.code == null || data.code == null) {
return data.name;
} else {
return data.code + " " + data.name;
}
}
},
form: {
tmFormType: 3,
name: "",
picUrl: "",
colorizedPicUrl: "",
selecttype: "自主选择",
totalPublicExpense: 0,
totalTaxes: 0,
totalSum: 0,
totalDiscounts: 0,
totalServiceCharge: 0,
totalProfitSum: 0,
remark: "",
sveItemRateConfig: "",
},
apply: {
customerType: "ent",
name: "",
code: "",
identityCardNo: "",
applyAddr: "",
applyArea: "",
zipCode: "",
contacts: "",
mobile: "",
email: "",
tel: "",
fax: "",
businessLicensePic: "",
identityCardPic: "",
sealAuthorizeStuff: "",
descUrl: "",
notes: "",
gzwtsUrl: "",
smwjUrl: "",
},
rules: {
tmName: [
{ required: true, message: '请输入商标名称' }
],
picUrl: [
{ required: true, message: '请上传商标图样' }
],
colorizedPicUrl: [
{ validator: colorizedtm, trigger: 'blur' }
],
tmFormType: [
{ required: true, message: '请选择商标类型' }
],
},
nclOne: [],
d: {},
action: "",
invoiceTaxRate: 10,
step: "1",
isRead: false,
steps: [
{ title: "填写基本信息" },
{ title: "填写申请人信息" },
{ title: "确认提交订单" },
{ title: "支付订单" }
],
beforeapply: {},
applyrules: {
customerType: [
{ type: 'string', required: true, message: '请选择申请类型', trigger: 'change' }
],
name: [
{ required: true, message: '请输入公司/申请人名称', trigger: 'blur' },
{ validator: validateIdConmpany, trigger: 'blur' }
],
code: [
{ required: true, message: '请输入信用代码' },
{ validator: code, trigger: 'blur' }
],
identityCardNo: [
{ required: true, message: '请输入身份证号码' },
{ validator: validateIdCard, trigger: 'blur' }
],
zipCode: [
{ required: true, message: '请输入邮政编码' }
],
applyAddr: [
{ required: true, message: '请输入执照详细地址' },
{ validator: validateAddr, trigger: 'blur' }
],
contacts: [
{ required: true, message: '请输入客户联系人' }
],
mobile: [
{ required: true, message: '请输入联系电话' },
{ validator: mobileValidator, trigger: 'blur' }
],
email: [
{ required: true, message: '请输入电子邮箱' },
{ validator: emailValidator, trigger: 'blur' }
],
},
order: {},
qrcode: "",
qrCodeJumpUrl: "",
pay: {
offlinePayDocument: "",
paymentPlatformType: "wx"
},
payconfirm: false,
tradeKey: "",
interval: null,
itemCode: "",
totalDiscountsRate: 0,
serviceCharge: 0,
publicExpense: 0,
company: {},
serviceitem: {},
floatBoxDemo: false,
toViewImgKey: null,
toViewImgType: false,
toViewImgSrc: null,
channelOrder: null,
channelParams: null,
channelUser: null,
nclTime: null,
message: {
info: "",
show: false,
},
showConfrim: false,
agree: false,
nclSelectedList: null,
orderSubInfo: null,
totalPrices: null,
dataList: [],
options: [],
titleName: '',
toLogin: false,
}
},
computed: {
},
created: function() {
var that = this;
var itemCode = this.$router.history.current.query.itemCode || 'zzsbzc';
var orderParams = this.$router.history.current.query.orderParams;
if (this.$route.query.channelUserId) {
this.$root.channelUserId = this.$route.query.channelUserId;
console.log(this.$route.query.channelUserId, "11111111111ddd");
}
if (orderParams) {
this.form = orderParams.tm;
this.apply = orderParams.apply;
this.nclOne = orderParams.nclones;
this.step = orderParams.step;
}
if (itemCode != null) {
this.itemCode = itemCode;
} else {
this.$message.warning('code参数错误');
return;
}
var company = this.$root.currentCompany;
if (company && company.companyType == "self") {
this.company = company;
} else {
/*
this.$root.getReq("/web/companyCtl/findById", { cid: 1 }).then(function (d) {
if (d && d.status == 0 && d.data) {
that.company = d.data
}
});
*/
}
},
watch: {
nclOne: {
handler(newVal, oldVal){
this.form.totalSum = (newVal.length * this.form.totalPrices).toFixed(2);
/*大类 */
if (newVal.length > 0) {
if (newVal.length > 1) {
this.$refs.tree.setChecked(newVal[1], false);
this.$refs.tree.setChecked(newVal[1].nclThree[0], false);
newVal.pop();
this.message.show = !this.message.show;
this.message.info = "只能选择同一个类别";
var timer = setTimeout(() => {
this.message.show = false;
clearTimeout(timer);
}, 2000);
};
/*小类 */
if (newVal[0].nclThree.length > 10) {
this.$refs.tree.setChecked(newVal[0].nclThree[10], false);
newVal[0].nclThree.pop();
console.log(newVal, newVal[0].nclThree, `xxxxxxxxxxxxxxxxxxxxxxxxxxxxx`);
this.message.show = !this.message.show;
this.message.info = "最多只能选择10项";
var timer2 = setTimeout(() => {
this.message.show = false;
clearTimeout(timer2);
}, 2000);
}
}
/*
console.log(this, newVal.length, '???????????????????');
if (newVal.length > 0) {
newVal.forEach((item, index) => {
if (item.nclThree.length > 10) {
this.$refs.tree.setChecked(item.nclThree[10], false);
item.nclThree.pop();
console.log(newVal, item.nclThree, `xxxxxxxxxxxxxxxxxxxxxxxxxxxxx`);
this.message.show = !this.message.show;
this.message.info = "最多只能选择10项";
var timer2 = setTimeout(() => {
this.message.show = false;
clearTimeout(timer2);
}, 2000);
}
});
}
*/
},
deep: true
}
},
mounted: function() {
this.titleName = this.$route.query.dqName || '商标注册服务';
this.listPath.path = this.$route.query.dqPath ? `/${this.$root.channelName}` + this.$route.query.dqPath : `/${this.$root.channelName}/jdtrademark`;
this.$root.selfFooterShow = false;
this.getItemCode();
this.getOss();
this.noLoginMask();
console.log(this.tm_form_type);
},
destroyed() {
/*
console.log(this.$root.selfFooterShow);
this.$root.selfFooterShow = true;
*/
},
methods: {
goGsbLogin(){
this.toLogin = false;
location.href = `https://www.gongsibao.com/user.php?redirect=${encodeURIComponent('https://zcchannelweb.gongsibao.com/gsbhome?state=selftmreg')}`;
},
getOss(){
var obj = this.$root.copyParams("", "getOssConfig", "/action/tmTools/springBoard");
this.$root.postReq("/web/trademark/tmqueryCtl/doPost", obj).then((d) => {
if (d.status == 0) {
console.log(d, `mmmmmmmmmmmmmmmmmmmmmmm`);
this.d["key"] = "key";
this.d["Bucket"] = d.data.Bucket;
this.d["OSSAccessKeyId"] = d.data.OSSAccessKeyId;
this.d["Signature"] = d.data.Signature;
this.d["policy"] = d.data.policy;
this.d["success_action_status"] = d.data.success_action_status;
this.action = d.data.url;
console.log(this.action, `oooooooooooooooooooooooooooo`);
} else {
console.log(d.msg);
}
});
if (this.$route.query.channelOrder) {
this.channelOrder = JSON.parse(this.$route.query.channelOrder);
this.channelParams = this.$route.query.channelParams;
this.channelUser = JSON.parse(this.$route.query.channelUser);
console.log(this.$route.query, this.channelInfo, `xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`);
}
},
noLoginMask(){
console.log(this.$route.query.channelUserId, "vvvvvvvvvvvvvvvvvvvvvv", this.$root.channelName);
if (!this.$route.query.channelUserId && this.$root.channelName == "gsbhome") {
this.toLogin = true;
console.log(this.toLogin, 'lllllllllllllll');
}
},
maxZipCode(){
if (this.apply.zipCode.length > 6) {
console.log(this.apply.zipCode);
this.apply.zipCode = this.apply.zipCode.substring(0, 6);
}
},
maxCardNo(){
if (this.apply.identityCardNo.length > 18) {
console.log(this.apply.identityCardNo);
this.apply.identityCardNo = this.apply.identityCardNo.substring(0, 18);
}
},
maxPhoneNumber(){
if (this.apply.mobile.length > 11) {
this.apply.mobile = this.apply.mobile.substring(0, 11);
}
},
getItemCode(){
var obj = this.$root.copyParams({ channelUserId: "", itemCode: "sbfu" }, "getProductListByTypeOneCode", "/action/tmOrder/springBoard");
this.$root.postReq("/web/trademark/tmqueryCtl/doPost", obj).then((d) => {
this.$root.loading = false;
console.log(d, "cccccccccccccccccc");
if (d.status == 0) {
this.form.totalPrices = d.data[0].proPrice;
this.dataList = d.data;
this.dataList.map((item, index) => {
console.log(item.productDesc);
item.productDesc = JSON.parse(item.productDesc);
});
}
});
},
pointsRuleColor(i) {
if (i < parseInt(this.step)) {
return 'color: #FFFFFF;'
} else if (i == parseInt(this.step)) {
return 'color: #FFFFFF;'
} else if (i > parseInt(this.step)) {
return 'color: #BBB;'
}
},
pointsRuleBackColor(i) {
if (i < parseInt(this.step)) {
return 'background: #51d2b7; z-index: ' + Math.abs(i - 5)
} else if (i == parseInt(this.step)) {
return 'background: #51d2b7;z-index: ' + Math.abs(i - 5)
} else if (i > parseInt(this.step)) {
return 'background:#EFF0F7;z-index: ' + Math.abs(i - 5)
}
},
toViewImg(src) {
this.toViewImgSrc = src;
this.toViewImgType = true
},
mouseOverDemo(v, k) {
if (v == 99) {
this.floatBoxDemo = true
} else {
if (k) {
this.toViewImgKey = k
} else {
this.toViewImgKey = v
}
}
},
mouseLeaveDemo(v) {
this.floatBoxDemo = false;
this.toViewImgKey = null
},
userBeforeApply: function() {
this.apply = this.beforeapply;
},
gotoorder: function() {
},
searchInputBlur(){
var text = this.filterText;
if (text == "" || text == null) {
this.initNclData();
}
},
nclSearch(){
var that = this;
var text = this.filterText;
if (text == "" || text == null) {
this.initNclData();
} else {
this.nclSearchLoading = true;
console.log(this.checkedNcl, "ncls..............................");
var getNclByLikeNameAndNcl = { "name": text, "ncls": this.checkedNcl };
var getNclByLikeNameAndNcl = this.$root.copyParams(getNclByLikeNameAndNcl, "getNclByLikeNameAndNcl", "/action/tmTools/springBoard");
this.$root.postReq("/web/trademark/tmqueryCtl/doPost", getNclByLikeNameAndNcl).then(function (d) {
if (d.status == 0) {
that.ncldata = d.data;
}
that.nclSearchLoading = false;
}).catch(function (e) {
that.nclSearchLoading = false;
});
}
},
initNclData(){
this.ncldata = [
{ code: "01", name: "化学原料" }, { code: "02", name: "颜料油漆" }, { code: "03", name: "日化用品" }, { code: "04", name: "燃料油脂" }, { code: "05", name: "医药" },
{ code: "06", name: "金属材料" }, { code: "07", name: "机械设备" }, { code: "08", name: "手工器械" }, { code: "09", name: "科学仪器" }, { code: "10", name: "医疗器械" },
{ code: "11", name: "灯具空调" }, { code: "12", name: "运输工具" }, { code: "13", name: "军火烟火" }, { code: "14", name: "珠宝钟表" }, { code: "15", name: "乐器" },
{ code: "16", name: "办公用品" }, { code: "17", name: "橡胶制品" }, { code: "18", name: "皮革皮具" }, { code: "19", name: "建筑材料" }, { code: "20", name: "家具" },
{ code: "21", name: "厨房洁具" }, { code: "22", name: "绳网袋篷" }, { code: "23", name: "纱线丝" }, { code: "24", name: "布料床单" }, { code: "25", name: "服装鞋帽" },
{ code: "26", name: "纽扣拉链" }, { code: "27", name: "地毯席垫" }, { code: "28", name: "健身器材" }, { code: "29", name: "食品" }, { code: "30", name: "方便食品" },
{ code: "31", name: "饲料种籽" }, { code: "32", name: "啤酒饮料" }, { code: "33", name: "酒" }, { code: "34", name: "烟草烟具" }, { code: "35", name: "广告销售" },
{ code: "36", name: "金融物管" }, { code: "37", name: "建筑修理" }, { code: "38", name: "通讯服务" }, { code: "39", name: "运输贮藏" }, { code: "40", name: "材料加工" },
{ code: "41", name: "教育娱乐" }, { code: "42", name: "网站服务" }, { code: "43", name: "餐饮住宿" }, { code: "44", name: "医疗园艺" }, { code: "45", name: "社会服务" }
];
},
error(err){
this.$message.warning(`上传失败,请重新上传`);
},
uploadsuccess2(result, obj){
if (obj.flag == "zfpz") {
this.pay.offlinePayDocument = result;
}
},
uploadsuccess(obj){
var that = this;
if (this.loadingKey == 1) {
that.loading1 = true;
} else if (this.loadingKey == 2) {
that.loading2 = true;
} else if (this.loadingKey == 3) {
that.loading3 = true;
} else if (this.loadingKey == 0) {
that.loading = true;
}
if (obj.flag == "picUrl") {
var uploadStandardTm = { "key": obj.result };
var uploadStandardTm = this.$root.copyParams(uploadStandardTm, "uploadStandardTm", "/action/tmTools/springBoard");
this.$root.postReq("/web/trademark/tmqueryCtl/doPost", uploadStandardTm).then(function (d) {
console.log(d);
that.loading1 = false;
that.loading2 = false;
that.loading3 = false;
that.loading = false;
if (d.status == 0) {
that.form.picUrl = d.data.url2;
that.form.colorizedPicUrl = d.data.url;
} else {
that.form.picUrl = "";
that.form.colorizedPicUrl = "";
that.$message.warning(`上传失败请重新上传`);
return false;
}
}).catch(function () {
that.form.picUrl = "";
that.form.colorizedPicUrl = "";
that.loading1 = false;
that.loading2 = false;
that.loading3 = false;
that.loading = false;
that.$message.warning(`上传失败请重新上传`);
return false;
});
}
if (obj.flag == "colorizedPicUrl") {
this.$root.getReq("/web/toolCtl/adjustTMSize", { "key": obj.key }).then(function (d) {
that.loading1 = false;
that.loading2 = false;
that.loading3 = false;
that.loading = false;
if (d.status == 0) {
that.form.colorizedPicUrl = d.data.url;
return
} else {
that.form.colorizedPicUrl = "";
that.$message.warning(`上传失败请重新上传`);
return false;
}
}).catch(function () {
that.form.colorizedPicUrl = "";
that.loading1 = false;
that.loading2 = false;
that.loading3 = false;
that.loading = false;
that.$message.warning(`上传失败请重新上传`);
return false;
});
}
if (obj.flag == "yyzz") {
console.log(obj);
var word2pic = { "key": obj.result };
console.log(this.form, `zzzzzzzzzzzzzzzzzzzzzzzzzz`);
var word2pic = this.$root.copyParams(word2pic, "pic2pdf", "/action/tmTools/springBoard");
this.$root.postReq("/web/trademark/tmqueryCtl/doPost", word2pic).then(function (d) {
that.loading1 = false;
that.loading2 = false;
that.loading3 = false;
that.loading = false;
if (d.status == 0) {
that.apply["businessLicensePic"] = obj.result;
that.apply["businessLicensePdf"] = d.data.url;
return
} else {
that.apply.businessLicensePic = "";
that.$message.warning(`上传失败请重新上传`);
return false;
}
}).catch(function (e) {
that.apply.businessLicensePic = "";
that.loading1 = false;
that.loading2 = false;
that.loading3 = false;
that.loading = false;
that.$message.warning(`上传失败请重新上传`);
return false;
})
}
if (obj.flag == "sfz") {
var pic2pdf = { 'key': obj.result };
console.log(obj.result, `ccccccccccccccccccccccccc`);
var pic2pdf = this.$root.copyParams(pic2pdf, "pic2pdf", "/action/tmTools/springBoard");
this.$root.postReq("/web/trademark/tmqueryCtl/doPost", pic2pdf).then(function (d) {
that.loading1 = false;
that.loading2 = false;
that.loading3 = false;
that.loading = false;
if (d.status == 0) {
that.apply["identityCardPic"] = obj.result;
that.apply["identityCardPdf"] = d.data.url;
return;
} else {
that.apply.identityCardPic = "";
that.apply["identityCardPdf"] = "";
that.$message.warning(`上传失败请重新上传`);
return false;
}
}).catch(function (e) {
that.apply.identityCardPic = "";
that.loading1 = false;
that.loading2 = false;
that.loading3 = false;
that.loading = false;
that.$message.warning(`上传失败请重新上传`);
return false;
})
}
if (obj.flag == "wts") {
var adjustWTSSize = { "key": obj.result };
var adjustWTSSize = this.$root.copyParams(adjustWTSSize, "adjustWTSSize", "/action/tmTools/springBoard");
this.$root.postReq("/web/trademark/tmqueryCtl/doPost", adjustWTSSize).then(function (d) {
that.loading1 = false;
that.loading2 = false;
that.loading3 = false;
that.loading = false;
if (d.status == 0) {
that.apply["gzwtsUrl"] = d.data.url;
return;
} else {
that.$refs[obj.flag][0].result = "";
that.$message.warning(`上传失败请重新上传`);
return false;
}
}).catch(function () {
that.$refs[obj.flag][0].result = "";
that.loading1 = false;
that.loading2 = false;
that.loading3 = false;
that.loading = false;
that.$message.warning(`上传失败请重新上传`);
return false;
});
}
if (obj.flag == "yxq") {
that.apply["smwjUrl"] = obj.result;
setTimeout(() => {
that.loading1 = false;
that.loading2 = false;
that.loading3 = false;
that.loading = false;
}, 1000);
return
}
},
/*uploadsuccess(obj){
var that=this;
if(obj.flag=="picUrl"){
that.$root.showMask();
this.$root.getReq("/web/toolCtl/uploadStandardTm",{"key":obj.key}).then(function(d){
if(d.status==0){
that.form.picUrl=d.data.url2;
that.form.colorizedPicUrl=d.data.url;
that.$root.hideMask();
}else{
that.form.picUrl="";
that.form.colorizedPicUrl="";
that.$root.hideMask();
that.$message.warning(`上传失败请重新上传`);
return false;
}
}).catch(function(){
that.form.picUrl="";
that.form.colorizedPicUrl="";
that.$root.hideMask();
that.$message.warning(`上传失败请重新上传`);
return false;
});
}
if(obj.flag=="colorizedPicUrl"){
that.$root.showMask();
this.$root.getReq("/web/toolCtl/adjustTMSize",{"key":obj.key}).then(function(d){
if(d.status==0){
that.form.colorizedPicUrl=d.data.url;
that.$root.hideMask();
}else{
that.form.colorizedPicUrl="";
that.$root.hideMask();
that.$message.warning(`上传失败请重新上传`);
return false;
}
}).catch(function(){
that.form.colorizedPicUrl="";
that.$root.hideMask();
that.$message.warning(`上传失败请重新上传`);
return false;
});
}
if(obj.flag=="yyzz"){
that.$root.showMask();
this.$root.getReq("/web/toolCtl/pic2pdf",{"key":obj.key}).then(function(d){
if(d.status==0){
that.apply.businessLicensePic=d.data.url;
}else{
that.apply.businessLicensePic="";
that.$root.hideMask();
that.$message.warning(`上传失败请重新上传`);
return false;
}
that.$root.hideMask();
}).catch(function(e){
that.apply.businessLicensePic="";
that.$root.hideMask();
that.$message.warning(`上传失败请重新上传`);
return false;
})
}
if(obj.flag=="sfz"){
that.$root.showMask();
this.$root.getReq("/web/toolCtl/pic2pdf",{"key":obj.key}).then(function(d){
if(d.status==0){
that.apply.identityCardPic=d.data.url;
}else{
that.apply.identityCardPic="";
that.$root.hideMask();
that.$message.warning(`上传失败请重新上传`);
return false;
}
that.$root.hideMask();
}).catch(function(e){
that.apply.identityCardPic="";
that.$root.hideMask();
that.$message.warning(`上传失败请重新上传`);
return false;
})
}
if(obj.flag=="wts"){
that.$root.showMask();
this.$root.getReq("/web/toolCtl/adjustWTSSize",{"key":obj.key}).then(function(d){
if(d.status==0){
that.apply.sealAuthorizeStuff=d.data.url;
that.$root.hideMask();
}else{
that.$refs[obj.flag][0].result="";
that.$root.hideMask();
that.$message.warning(`上传失败请重新上传`);
return false;
}
}).catch(function(){
that.$refs[obj.flag][0].result="";
that.$root.hideMask();
that.$message.warning(`上传失败请重新上传`);
return false;
});
}
if(obj.flag=="yxq"){
that.apply.descUrl=obj.result
}
},*/
historyapplierchange(d){
console.log(d, this.apply, '~~~~~~~~~~~~~~~~~~~~~~`');
if (d) {
this.apply.name = d.entName || "";
this.apply.applyAddr = d.regLocation || "";
this.apply.code = d.creditCode || "";
this.apply.businessLicensePic = d.businessLicensePic || "";
this.apply.identityCardNo = d.identityCardNo || "";
this.apply.identityCardPic = d.identityCardPic || "";
}
},
beforeUpload(file){
var that = this;
var isSize = false;
var img = new Image();
var _URL = window.URL || window.webkitURL;
img.onload = function () {
if (img.width == img.height) {
isSize = true;
that.$refs.ys_upload.ifupload = true;
} else {
isSize = false;
that.$message.warning('上传的图片宽高必须相等');
that.$refs.ys_upload.$refs.upload.abort(file);
}
};
img.src = window.URL.createObjectURL(file);
},
showUrl(url){
window.open(url);
},
closeTag(nclThree, index, index2){
if (this.form.status == 2) {
this.$message.warning("已生成订单,不可修改");
return false;
}
var publicExpense = this.serviceitem.publicExpense || 0;
console.log(this.serviceitem.publicExpense, '????????????????????', nclThree);
publicExpense = Number(publicExpense);
var nclSmallPrice = publicExpense / 10;
nclSmallPrice = Number(nclSmallPrice.toFixed(2));
this.$refs.tree.setChecked(nclThree, false);
this.nclOne[index].nclThree.splice(index2, 1);
if (this.nclOne[index].nclThree.length > 10) {
this.nclOne[index].price = Number(publicExpense + (this.nclOne[index].nclThree.length - 10) * nclSmallPrice);
} else if (this.nclOne[index].nclThree.length > 0 && this.nclOne[index].nclThree.length <= 10) {
this.nclOne[index].price = publicExpense;
} else if (this.nclOne[index].nclThree.length == 0) {
this.nclOne[index].price = 0;
this.nclOne.splice(index, 1);
}
var json = { json: this.nclOne };
var jsonStr = JSON.stringify(json);
},
/*清除全部*/
removeAll() {
if (this.nclOne.length == 0) {
return;
}
let dataRecieve = this.$refs.tree.getCheckedNodes();
this.$confirm('确定清空所有已选商品/服务项吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
dataRecieve.forEach((item, index) => {
this.$refs.tree.setChecked(item, false, true);
});
this.nclOne = [];
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
})
},
removeNclOne(index, nclone){
if (this.form.status == 2) {
this.$message.warning("已生成订单,不可修改");
return false;
}
this.$confirm('确定清除当前选项吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.ppnclArr = nclone;
this.$refs.tree.setChecked(nclone, false, true);
let dataRecieve = this.$refs.tree.getCheckedNodes();
if (dataRecieve.length == 0) {
this.nclOne.splice(index, 1);
}
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
})
},
handleCheckChange(obj, a, b) {
console.log(obj, a, b, this.nclOne, '1233333333333333333333344444444444444444444');
let dataRecieve = this.$refs.tree.getCheckedNodes();
if (obj.type) {
return
}
/*let ppncl = this.ppnclArr;*/
let ppncl = this.$refs.tree.getNode(obj).parent.parent.data;
let key = (dataRecieve.length - 1);
let eData = null;
if (dataRecieve.length != 0 && !obj.type) {
if (dataRecieve.length == 1) {
eData = dataRecieve[key];
} else {
eData = obj;
}
var nclThree = [eData];
var publicExpense = this.publicExpense || 0;
console.log(this.publicExpense, '/////////////////////');
publicExpense = Number(publicExpense);
var nclSmallPrice = publicExpense / 10;
nclSmallPrice = Number(nclSmallPrice.toFixed(2));
var result = this.nclOneIsExist(ppncl.code);
if (a) {
if (result.result) {
var nclThree = this.nclOne[result.index].nclThree;
var hasNclThree = this.nclThreeIsExist(eData.name, nclThree);
if (!hasNclThree.result && a) {
this.nclOne[result.index].nclThree.push(eData);
if (this.nclOne[result.index].nclThree.length > 10) {
this.nclOne[result.index].price = Number(publicExpense + (this.nclOne[result.index].nclThree.length - 10) * nclSmallPrice);
}
}
} else {
var data = {
code: ppncl.code,
name: ppncl.name,
price: publicExpense,
nclThree: nclThree,
};
this.nclOne.push(data);
}
} else {
this.nclOne.forEach((item, index) => {
if (item.name == ppncl.name) {
this.nclOne[index].nclThree.forEach((list, key) => {
if (list.name == obj.name) {
this.closeTag(item, index, key)
}
})
}
})
}
} else if (this.nclOne.length != 0 && !a) {
this.nclOne.forEach((item, index) => {
if (item.name == ppncl.name) {
this.nclOne[index].nclThree.forEach((list, key) => {
if (list.name == obj.name) {
this.closeTag(item, index, key)
}
})
}
})
}
},
nodeClick(obj, e, a){
if (e.level == 1) {
this.ppnclArr = obj;
}
var that = this;
if (this.form.status == 2) {
this.$message.warning("已生成订单,不可修改");
return false;
}
/*节点层级 */
if (e.level < 3 && e.childNodes.length == 0) {
this.nclSearchLoading = true;
var getNcl = {
nclcode: obj.code,
};
var getNcl = this.$root.copyParams(getNcl, "getNcl", "/action/tmTools/springBoard");
this.$root.postReq("/web/trademark/tmqueryCtl/doPost", getNcl).then(function (d) {
var data = d.data.rows;
e.childNodes = [];
for (var i = 0; i < data.length; i++) {
that.appendNode(data[i], e);
if (e.level == 1) {
data[i]['type'] = 1;
that.nclSearchLoading = false;
}
}
/*节点层级 */
if (e.level == 2) {
that.nclSearchLoading = false;
that.nclOne.forEach((item, index) => {
if (item.name == e.parent.data.name) {
that.nclOne[index].nclThree.forEach((list, key) => {
that.$refs.tree.setChecked(list, true);
});
}
});
}
});
}
/*节点层级 */
if (e.level == 3) {
this.$refs.tree.setChecked(e.data, true);
return;
this.CCtype = false;
var ppncl = e.parent.parent.data;
var nclThree = [e.data];
var publicExpense = this.publicExpense || 0;
publicExpense = Number(publicExpense);
var nclSmallPrice = publicExpense / 10;
nclSmallPrice = Number(nclSmallPrice.toFixed(2));
var result = this.nclOneIsExist(ppncl.code);
if (result.result) {
var nclThree = this.nclOne[result.index].nclThree;
var hasNclThree = this.nclThreeIsExist(e.data.name, nclThree);
if (!hasNclThree.result) {
this.nclOne[result.index].nclThree.push(e.data);
if (this.nclOne[result.index].nclThree.length > 10) {
this.nclOne[result.index].price = Number(publicExpense + (this.nclOne[result.index].nclThree.length - 10) * nclSmallPrice);
}
}
} else {
var data = {
code: ppncl.code,
name: ppncl.name,
price: publicExpense,
nclThree: nclThree,
};
this.nclOne.push(data);
}
}
},
nclThreeIsExist(name, nclThree){
if (nclThree.length < 1) {
return { result: false, index: 0 };
} else {
for (var i = 0; i < nclThree.length; i++) {
if (nclThree[i].name == name) {
return { result: true, index: i };
}
}
return { result: false, index: 0 };
}
},
nclOneIsExist(nclOneCode){
if (this.nclOne.length < 1) {
return { result: false, index: 0 };
} else {
for (var i = 0; i < this.nclOne.length; i++) {
if (this.nclOne[i].code == nclOneCode) {
return { result: true, index: i };
}
}
return { result: false, index: 0 };
}
},
word2pic(){
if (this.form.tmName == "" || this.form.tmName == null) {
this.loading = true;
this.loading = false;
return false;
}
var that = this;
this.loading = true;
var word2pic = { word: this.form.tmName };
var word2pic = this.$root.copyParams(word2pic, "word2pic", "/action/tmTools/springBoard");
this.$root.postReq("/web/trademark/tmqueryCtl/doPost", word2pic).then(function (d) {
if (d.status == 0) {
that.form.picUrl = d.data.url;
that.form.colorizedPicUrl = d.data.url;
that.loading = false;
} else {
that.form.picUrl = "";
that.form.colorizedPicUrl = "";
that.loading = false;
that.$message.warning(`上传失败请重新生成`);
return false;
}
}).catch(function () {
that.form.picUrl = "";
that.loading = false;
that.$message.warning(`上传失败请重新生成`);
return false;
});
},
appendNode(data, pnode) {
this.$refs.tree.append(data, pnode);
this.nclOne.forEach((item, index) => {
if (item.name == this.ppnclArr.name) {
this.nclOne[index].nclThree.forEach((list, key) => {
this.$refs.tree.setChecked(list, true);
})
}
});
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
aiadive(){
if (this.selectedOptions.length == 0) {
this.$message.warning(`请选择行业`);
return false;
}
var publicExpense = this.serviceitem.publicExpense || 0;
publicExpense = Number(publicExpense);
var nclSmallPrice = publicExpense / 10;
nclSmallPrice = Number(nclSmallPrice.toFixed(2));
this.$root.getReq("/web/orderCtl/aiadive", { seltype: this.selectedOptions }).then(d => {
var ncl = JSON.parse(d.data);
var data = ncl.ncl;
if (data) {
for (var i = 0; i < data.length; i++) {
var price = publicExpense;
if (data[i].nclThree.length > 10) {
price = price + (data[i].nclThree.length - 10) * nclSmallPrice;
}
data[i].price = price;
}
this.nclOne = data;
}
});
},
selfclear(){
this.nclOne = [];
},
closeConfrim(){
this.showConfrim = false;
},
submitForm(formName, agree) {
var that = this;
if (this.nclOne.length > 0) {
console.log(this.nclOne, ",,,,,,,,,,,,,,,,,,,,,,,,");
this.nclOne.map((item, index) => {
if (item.nclThree.length < 10 && formName == "form") {
console.log(item, '111111111111111111111111111111111111111');
item.checked = item.nclThree.length;
this.showConfrim = true;
if (agree) {
if (!this.form.tmName || !this.form.colorizedPicUrl) {
this.$message.warning("请完善信息");
console.log('ppppppppppppppppppppp');
return;
} else {
this.showConfrim = false;
}
} else {
return;
}
}
});
}
if (!agree) {
if (this.form.tmFormType == "4") {
if (!this.form.colorizedPicUrl) {
this.$message.warning("请完善信息");
return;
}
} else {
if (!this.form.tmName || !this.form.colorizedPicUrl) {
this.$message.warning("请完善信息");
return;
}
}
}
if (formName == "form" || formName == "apply") {
if (formName == "apply") {
console.log(this.apply);
/*
if (this.apply.customerType != 'person' && this.apply.sealAuthorizeStuff == '' || this.apply.businessLicensePic == '') {
return that.$message.warning(`请按要求上传资料`);
} else if (this.apply.customerType == 'person' && this.apply.identityCardPic == '' || this.apply.sealAuthorizeStuff == '' || this.apply.businessLicensePic == '') {
return that.$message.warning(`请按要求上传资料`);
}
*/
};
this.$refs[formName].validate((valid) => {
console.log(valid);
if (valid) {
if (formName == "form" && that.nclOne.length < 1) {
that.$message.warning(`请选择商标分类`);
return false;
}
if (!this.showConfrim) {
console.log(that.toTop);
that.toTop();
that.step = Number(that.step) + 1;
}
} else {
console.log('error submit!!');
return false;
}
});
}
if (formName == "order") {
this.form.tmName = this.form.tmFormType == "5" ? this.form.tmName + '及图' : this.form.tmName;
this.savehistory();
console.log(this.$root.channelName, "///////////////");
if (this.$root.channelName == "jd" || this.$root.channelName == "gsbhome") {
/**提报接口 */
var obj = {
tm: that.form,
apply: that.apply,
nclones: that.nclOne,
itemCode: that.dataList[0].channelItemCode,
channelUser: {
channelUserId: that.$route.query.channelUserId
},
channelOrder: {
quantity: 1,
payStatus: "dfk"
}
};
obj.tm.tmFormType = that.form.tmFormType.toString();
this.$root.loading = true;
var jdObj = that.$root.copyParams(obj, "subTmOrder", "/action/tmOrder/springBoard", "yes", "yes");
that.$root.postReq("/web/trademark/tmqueryCtl/doPost", jdObj).then(function (d) {
that.$root.loading = false;
console.log(`///////////////////////////////`, d);
if (d.status == 0) {
location.href = d.data.payUrl;
} else {
console.log(d, "subTmOrder..........");
that.$message.warning(d.msg);
}
}).catch(function (e) {
that.$root.loading = false;
that.$message.warning("操作失败");
});
} else if (this.$root.channelName == "1688") {
console.log(this.$route.query.channelOrderNo, ">>>>>>>>>>>>>>>>>>>>>>>");
that.orderSubInfo = {
tm: that.form,
apply: that.apply,
nclones: that.nclOne,
itemCode: that.itemCode,
};
that.$root.loading = true;
var channelOrderNo = that.$root.copyParams({ channelOrderNo: that.$route.query.channelOrderNo }, "get1688ChannelOrderInfo", "/action/tmOrder/springBoard", "yes", "yes");
that.$root.postReq("/web/trademark/tmqueryCtl/doPost", channelOrderNo).then((d) => {
console.log(d);
that.orderSubInfo.channelOrder = d.data.channelOrder;
that.orderSubInfo.channelUser = d.data.channelUser;
}).then(() => {
console.log(that.orderSubInfo, '............................................');
var subInfo = that.$root.copyParams(that.orderSubInfo, "subExistTmOrder", "/action/tmOrder/springBoard", "yes", "yes");
that.$root.postReq("/web/trademark/tmqueryCtl/doPost", subInfo).then(function (d) {
console.log('nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn0', d);
if (d.status == 0) {
var order = d.data;
that.toTop();
console.log(that.orderSubInfo, ",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,");
that.$router.push({
path: `/${this.$root.channelName}/jdindentlist`,
query: {
channelUserId: that.$route.query.channelUserId,
}
});
that.$message.warning("订单提交成功");
} else {
that.$message.warning(d.msg);
}
}).then(() => {
that.$root.loading = false;
}).catch(function (e) {
that.$message.warning("操作失败", e);
that.$root.loading = false;
console.log(e);
});
})
}
}
},
savehistory(){
var entobj = {
regLocation: this.apply.applyAddr, entName: this.apply.name, domainEntName: this.apply.name, creditCode: this.apply.code,
businessLicensePic: this.apply.businessLicensePic, customerType: this.apply.customerType, identityCardNo: this.apply.identityCardNo,
identityCardPic: this.apply.identityCardPic, businessLicensePdf: this.apply.businessLicensePdf,
};
if (this.apply.customerType == "ent") {
var entData = localStorage.getItem("historyentlist");
var o = "";
if (entData) {
entData = JSON.parse(entData);
var entList = entData.data;
if (entList && entList.length > 0) {
for (var i = 0; i < entList.length; i++) {
if (entList[i].creditCode == this.apply.code || !this.apply.code) {
return;
}
}
if (entList.length >= 20) {
entList.shift();
}
entList.push(entobj);
o = { data: entList };
} else {
o = { data: [entobj] };
}
} else {
o = { data: [entobj] };
}
var ostring = JSON.stringify(o);
localStorage.setItem("historyentlist", ostring);
}
if (this.apply.customerType == "person") {
var personData = localStorage.getItem("historypersonlist");
var o = "";
if (personData) {
personData = JSON.parse(personData);
var personList = personData.data;
if (personList && personList.length > 0) {
for (var i = 0; i < personList.length; i++) {
if (personList[i].creditCode == this.apply.code || !this.apply.code) {
return;
}
}
if (personList.length >= 20) {
personList.shift();
}
personList.push(entobj);
o = { data: personList };
} else {
o = { data: [entobj] };
}
} else {
o = { data: [entobj] };
}
var ostring = JSON.stringify(o);
localStorage.setItem("historypersonlist", ostring);
}
},
selectpersoninput(v, e){
console.log(v, '11111111111111', this.apply.name);
if (v != this.apply.name) {
console.log(v, '2222222222', this.apply.name);
this.apply.name = v;
this.apply.applyAddr = "";
this.apply.code = "";
this.apply.businessLicensePic = "";
this.apply.identityCardNo = "";
this.apply.identityCardPic = "";
}
},
applierChange(v){
obj = { companyName: this.apply.name };
var obj = this.$root.copyParams(obj, "getEntregistryByCompanyName", "/action/tmTools/springBoard");
this.$root.postReq("/web/trademark/tmqueryCtl/doPost", obj).then(d => {
console.log(d, "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb");
if (d.creditCode && d.creditCode != "") {
this.apply.applyAddr = d.businessAddress;
this.apply.code = d.creditCode;
}
});
},
setKey(name, flag){
name = name.substring(name.length - 5);
var myDate = new Date();
var key = "zc_" + flag + Math.round(Math.random() * 10000) + myDate.getTime() + myDate.getFullYear() + myDate.getMonth() + myDate.getDate() + ".jpg";
this.$refs[flag].d.key = key;
},
tobefore(){
this.toTop();
this.step = Number(this.step) - 1;
this.step = this.step.toString();
},
wxPay: function() {
},
closePayConfirm(){
},
checkPayState(){
},
orderUpdate(){
},
createWTS: function() {
var that = this;
if (!this.apply.customerType) {
that.$message.warning("请选择申请人类型");
return;
} else if (!this.apply.name) {
that.$message.warning("请填写公司名称");
return;
} else if (this.apply.customerType == "person" && !this.apply.identityCardNo) {
that.$message.warning("请填写身份证号码");
return;
} else if (!this.apply.applyAddr) {
that.$message.warning("请填写执照详细地址");
return;
}
if (!this.company || !this.company.contact) {
that.$message.warning("代理信息为空,生成委托书失败");
return;
}
if (!this.company) {
that.$message.warning("代理信息为空,生成委托书失败");
return;
}
var params = null;
var company = this.$root.currentCompany;
if (!this.apply.zipCode) {
that.$message.warning("请填写邮政编码");
return;
}
if (company && company.companyType == "self") {
if (!this.apply.contacts) {
that.$message.warning("请填写客户联系人");
return;
}
if (!this.apply.mobile) {
that.$message.warning("请填写联系电话");
return;
}
params = this.apply.customerType + ";" + this.apply.name + ";" + this.apply.identityCardNo + ";" + this.form.tmFormType
+ ";" + this.form.colorizedPicUrl + ";" + this.form.picUrl + ";" + this.apply.applyAddr;
params = params + ";" + this.apply.contacts + ";" + this.apply.mobile + ";" + this.apply.zipCode + ";" + this.company.name;
params = encodeURIComponent(params);
} else {
params = this.apply.customerType + ";" + this.apply.name + ";" + this.apply.identityCardNo + ";" + this.form.tmFormType
+ ";" + this.form.colorizedPicUrl + ";" + this.form.picUrl + ";" + this.apply.applyAddr;
params = params + ";" + this.company.contact + ";" + this.company.contactmobile + ";" + this.apply.zipCode + ";" + this.company.name;
params = encodeURIComponent(params);
}
this.$confirm('是否确定生成委托书?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
that.$root.showMask();
var url = window.location.href.split("#")[0] + "wts?" + "params=" + params;
this.$root.getReq("/web/trademark/tmqueryCtl/createWTS", { "url": url }).then(function (d) {
if (d.data.url != "" && d.data.url != null) {
window.open(d.data.url);
} else {
that.$message.warning(`操作失败`);
}
that.$root.hideMask();
}).catch(function (e) {
that.$root.hideMask();
that.$message.warning(`操作失败`);
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
},
toTop(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop != 0) {
let timer = setInterval(() => {
window.scrollTo(0, scrollTop -= 20);
console.log(scrollTop);
if (scrollTop <= 0) clearInterval(timer);
}, 0);
};
},
checkClick(){
this.showSelectedNclList = true;
this.fkey = 1;
},
checkConfirm(){
this.showSelectedNclList = false;
this.fkey = 0;
this.nclSearch();
},
handleCheckAllChange(val)
{
this.checkedNcl = val ? this.nclOptions : [];
this.isIndeterminate = false;
},
handleCheckedNclChange(value)
{
let checkedCount = value.length;
this.checkAll = checkedCount === this.ncl.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.ncl.length;
},
clearNclText(){
this.filterText = "";
this.checkedNcl = [];
this.nclSearch();
},
},
vname: "gsb-bwselftmreg"
}
......@@ -19,11 +19,19 @@
line-height: 24px;
}
.jdindentlist-header>div:nth-child(1)>div {
height: 40px;
display: inline-block;
}
.jdindentlist-header>div:nth-child(1)>div>img{
height: 100%;
}
.jdindentlist-header-login {
color: #fff;
margin-right: 13px;
}
.jdindentlist-header-login:hover{
.jdindentlist-header-login:hover {
color: #3171ff;
}
......@@ -222,7 +230,8 @@
width: 100%;
height: 100%;
}
.jdindentlist-null>p{
.jdindentlist-null>p {
text-align: center;
margin-top: 10px;
}
......
.login{
position: fixed;
top:150px;
right:50px;
opacity: 0.7;
#baoguo{
padding: 20px 20px 20px;
background: rgba(255,255,255,1);
border: 1px solid rgba(151,151,151,1);
}
#bychpage .el-form-item>.el-form-item__content{
margin-left: 0 !important;
}
.login-content>.login-content-input{
padding: 20px 20px 20px;
width: auto;
margin-left: 0;
margin-top: 0;
}
.login-div {
position: absolute;
right: 20%;
top: 23%;
}
\ No newline at end of file
<div class="login">
<gsb-form style="width:300px;margin: auto;margin-right:37%" ref="loginFrm" @btnclick="loginclick" :metaData="ldms" :refvalidatemethod="validmethod">
</gsb-form>
</div>
<div id="bychpage" class="login">
<div style="width:100%;margin: 0 auto;">
<div style="z-index:1;position:relative;background-color:#31373b">
<img style="width:100%;height:100%" :src="loginUrl" />
<div class="login-div" v-if="a">
<div class="login-content" id="baoguo" style="height:auto;">
<div style="margin-top: 30px;
padding-left: 28px;">
<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" style="border:none">
<el-menu-item index="1" style="width:130px;height:40px;line-height:40px;font-size: 17px;
font-family: PingFangSC-Regular,PingFang SC;
font-weight: 400;
color: rgba(51,51,51,1);text-align: center;">验证码登录</el-menu-item>
<el-menu-item index="2" style="width:130px;height:40px;line-height:40px;font-size: 17px;
font-family: PingFangSC-Regular,PingFang SC;
font-weight: 400;
color: rgba(51,51,51,1);text-align: center;">密码登录</el-menu-item>
</el-menu>
</div>
<!-- 验证码登录 -->
<div v-if="activeIndex==1" class="login-content-input">
<el-form ref="form1" :rules="rules1" :model="form1" label-width="10px" key="1">
<el-form-item prop="mobile">
<el-input v-model="form1.mobile" placeholder="请输入11位手机号码"><i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input style="width:130px;" v-model="form1.code" placeholder="请输入验证码"><i slot="prefix" class="el-input__icon el-icon-edit"></i></el-input>
<el-button id="loginCode" type="primary" plain style="width: 145px;
background: #128EE9;
color: #fff;"
@click="obtaincode1">
获取验证码</el-button>
</el-form-item>
<div style="font-size:12px;color:#B2B2B2;margin-top: -4px;
margin-left: 85px;">
<span style="color:#108EE9;cursor:pointer" @click="register()">没有账号?去注册</span>
<span style="margin:0 4px;">|</span>
<span style="color:#999999;cursor:pointer" @click="rsetpassword">忘记密码?</span>
</div>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" class="login-content-button" @click="checklogin1" style="margin-top: 50px;">登录</el-button>
</el-form-item>
<div style="font-size:12px;color:#828282;margin-left: 70px;">登录即同意
<span style="color:#108EE9">《服务协议》</span>
</div>
</el-form>
</div>
<!-- 密码登录 -->
<div v-if="activeIndex==2" class="login-content-input">
<el-form ref="form2" :rules="rules2" :model="form2" label-width="10px" key="2">
<el-form-item prop="username">
<el-input v-model="form2.username" placeholder="请输入11位手机号码"><i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form2.password" placeholder="请输入登录密码"><i slot="prefix" class="el-input__icon el-icon-view"></i></el-input>
</el-form-item>
<div style="font-size:12px;color:#B2B2B2;margin-top: -4px;
margin-left: 85px;">
<span style="color:#108EE9;cursor:pointer" @click="register()">没有账号?去注册</span>
<span style="margin:0 4px;">|</span>
<span style="color:#999999;cursor:pointer" @click="rsetpassword">忘记密码?</span>
</div>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" key="xxcccc" class="login-content-button" @click="checklogin2" style="margin-top: 50px;">登录</el-button>
</el-form-item>
<div style="font-size:12px;color:#828282;margin-left: 70px;">登录即同意
<span style="color:#108EE9">《服务协议》</span>
</div>
</el-form>
</div>
</div>
</div>
<!-- 重置密码 -->
<div class="login-div" v-if="b">
<div class="login-content">
<div class="login-content-title">
重置密码
</div>
<div class="login-content-input">
<el-form ref="form3" :rules="rules3" :model="form3" label-width="0px" key="3">
<el-form-item prop="mobile">
<el-input v-model="form3.mobile" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input style="width:120px;" v-model="form3.code" placeholder="请输入验证码"></el-input>
<el-button id="resetCode" type="primary" plain style="width:135px;"
@click="obtaincode2">获取验证码</el-button>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form3.password" placeholder="请设置6-18位密码"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" class="login-content-button" @click="sumbitreset">确定</el-button>
</el-form-item>
<div style="font-size:12px;color:#108EE9;margin-top:26px;text-align:center">
<span style="margin-right:16px;cursor:pointer" @click="login">登录</span>
<span style="cursor:pointer" @click="register">注册</span>
</div>
</el-form>
</div>
</div>
</div>
<!-- 用户注册 -->
<div class="login-div" v-if="c">
<div class="login-content">
<div class="login-content-title">
欢迎注册{{ this.$root.currentCompany?this.$root.currentCompany.sitename:"知圈圈"}}
</div>
<div class="login-content-input">
<el-form ref="form4" :rules="rules4" :model="form4" label-width="0px" key="4">
<el-form-item prop="mobile">
<el-input v-model="form4.mobile" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input style="width:120px;" v-model="form4.code" placeholder="请输入验证码"></el-input>
<el-button id="registerCode" type="primary" plain style="width:135px;"
@click="obtaincode3">获取验证码</el-button>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form4.password" placeholder="请设置6-18位密码,区分大小写"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" class="login-content-button" @click="submitregister">注册</el-button>
</el-form-item>
<div style="font-size:12px;color:#828282">点击“登录”即表示同意
<span style="color:#108EE9">《创知厚德用户协议》</span>
</div>
<div style="font-size:12px;color:#B2B2B2;margin-top:26px;">已有账户?
<span style="color:#108EE9;cursor:pointer" @click="login">去登录</span>
</div>
</el-form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <gsb-pcpage style="text-align:center;margin-top:80px">
<div>
<gsb-form style="width:30%;margin: auto;" ref="loginFrm" :metaData="ldms" :refvalidatemethod="validmethod">
<h2 slot="title" style="margin:0px;padding-top: 20px">欢迎登录{{ this.$root.currentCompany?this.$root.currentCompany.sitename:"知圈圈"}}</h2>
<el-button slot="buttonarea" style="width:80%" type="primary" @click="sbhandler">登录</el-button>
</gsb-form>
</div>
</gsb-pcpage> -->
{
template:'${tmpl}',
data:function(){
var that=this;
var validateMethod=function(rule, value, callback){
console.log(rule);
if(rule.field=="mobile"){
if(/^1[23456789]\d{9}$/.test(value) == false){
return callback(new Error("请输入正确格式的手机号"));
}else{
return callback();
}
}
if(rule.field=="code"){
if(that.rcode!=value){
return callback(new Error("输入验证码有误,请重新输入"));
}
}
return callback();
};
return {
ldms:[],
activeIndex:"1",
loginUrl:"",
form1:{
mobile:"",
code:"",
password:"",
},
form2:{
username:"",
password:"",
},
form3:{
mobile:"",
code:"",
password:"",
},
form4:{
mobile:"",
code:"",
password:"",
},
a:true,
b:false,
c:false,
Num:60,
Num2:60,
Num3:60,
rcode:"",
rules1:{
mobile: [
{required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: validateMethod, trigger: 'blur' },
],
code: [
{required: true, message: '请输入手机接收到的验证码', trigger: 'blur' },
{ validator: validateMethod, trigger: 'blur' },
],
},
rules2:{
username: [
{required: true, message: '请输入账号', trigger: 'blur' },
],
password: [
{required: true, message: '请输入密码', trigger: 'blur' },
],
},
rules3:{
mobile: [
{required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: validateMethod, trigger: 'blur' },
],
code: [
{required: true, message: '请输入手机接收到的验证码', trigger: 'blur' },
{ validator: validateMethod, trigger: 'blur' },
],
password: [
{required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
],
},
rules4:{
mobile: [
{required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: validateMethod, trigger: 'blur' },
],
code: [
{required: true, message: '请输入手机接收到的验证码', trigger: 'blur' },
{ validator: validateMethod, trigger: 'blur' },
],
password: [
{required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
],
},
}
},
mounted:function(){
this.ldms=[
{
"title":"平台登录",
"colnum":1,
ctls:[
{"type":"input","label":"账号","prop":"userName","placeHolder":"请输入登录账号","style":"width:230px",rules:[ { "required": true, "message": ' ', "trigger": 'blur' },,]},
{"type":"input","label":"密码","prop":"password","placeHolder":"请输入登录密码","style":"width:230px",rules:[ { "required": true, "message": ' ', "trigger": 'blur' },]},
{"type":"btn","label":"开始登录","prop":"btnLogin","placeHolder":"请输入手机号","style":{"width":"150px","margin-left":"45px","margin-top":"20px"},"face":"warning"},
]
},
];
},
created:function(){
console.log(this.pfooterinfo);
if(this.pfooterinfo&&this.pfooterinfo.loginUrl){
this.loginUrl=this.pfooterinfo.loginUrl;
}else{
this.loginUrl="https://gsb-zc.oss-cn-beijing.aliyuncs.com//zc_41110157500594182420192913391824zhuce_background.png";
}
},
methods:{
validmethod:function (rule,value,callback) {
handleSelect(key, keyPath) {
console.log(key, keyPath);
this.activeIndex=key;
},
resetall(){
this.form1.mobile="";
this.form1.code="";
this.form1.password="";
this.form2.username="";
this.form2.password="";
this.form3.mobile="";
this.form3.code="";
this.form3.password="";
this.form4.mobile="";
this.form4.code="";
this.form4.password="";
},
rsetpassword(){
this.a=false;
this.b=true;
this.c=false;
this.rcode="";
this.resetall();
},
login(){
this.a=true;
this.b=false;
this.c=false;
this.rcode="";
this.resetall();
},
register(){
this.$root.pushx({
title: "注册",
name: "/register",
});
this.a=false;
this.b=false;
this.c=true;
this.rcode="";
this.resetall();
},
obtaincode1(){
this.fetchVcode(this.form1.mobile)
},
obtaincode2(){
var that=this;
if(/^1[23456789]\d{9}$/.test(that.form3.mobile) == false){
that.$alert('请输入正确格式的手机号码', '提示', {
confirmButtonText: '确定',
callback: action => {
}
});
return;
};
that.$root.postReq("/web/userCtl/getUserByMobile",{mobile:that.form3.mobile}).then(function(d){
if(d.code==0){
var timer= setInterval(function () {
console.log("----------getNumber-----------");
$("#resetCode").attr("disabled", "disabled");
$("#resetCode").css("cursor", "not-allowed");
$("#resetCode").text(that.Num2 + "秒后重新获取");
console.log(that.Num2);
if (that.Num2 > 0) {
console.log(that.Num2);
that.Num2--;
}else{
$("#resetCode").attr("disabled", false);
$("#resetCode").text("获取验证码");
that.Num2 = 60;
clearInterval(timer);
}
},1000);
that.$root.postReq("/web/userCtl/fetchVcode",{mobile:that.form3.mobile}).then(function(d){
console.log(d);
if(d.status==0){
that.rcode=d.data.vcodestr;
}
})
}else{
that.$message({
type: 'error',
message: '用户尚未注册'
});
}
})
},
obtaincode3(){
var that=this;
if(/^1[23456789]\d{9}$/.test(that.form4.mobile) == false){
that.$alert('请输入正确格式的手机号码', '提示', {
confirmButtonText: '确定',
callback: action => {
}
});
return;
};
that.$root.postReq("/web/userCtl/getUserByMobile",{mobile:that.form4.mobile}).then(function(d){
if(d.code==-1){
var timer= setInterval(function () {
console.log("----------getNumber-----------");
$("#registerCode").attr("disabled", "disabled");
$("#registerCode").css("cursor", "not-allowed");
$("#registerCode").text(that.Num3 + "秒后重新获取");
console.log(that.Num3);
if (that.Num3 > 0) {
console.log(that.Num3);
that.Num3--;
}else{
$("#registerCode").attr("disabled", false);
$("#registerCode").text("获取验证码");
that.Num3 = 60;
clearInterval(timer);
}
},1000);
that.$root.postReq("/web/userCtl/fetchVcode",{mobile:that.form4.mobile}).then(function(d){
if(d.status==0){
console.log(d);
that.rcode=d.data.vcodestr;
}
})
}else{
that.$message({
type: 'error',
message: '用户已存在, 请修改并重试'
});
}
})
},
checklogin1(){
var that=this;
var obj={
mobile:that.form1.mobile,
};
that.$refs.form1.validate(valid=>{
if(valid){
that.$root.postReq("/web/userCtl/loginByMobile",{u:obj}).then(function(d){
if(d.status==0){
console.log("..................................................helllo..................................");
that.$root.refreshLoginState(()=>{
console.log("....................................................................................innner");
var afto=localStorage.getItem("afterLogin");
if(afto){
that.$root.pushx(JSON.parse(afto));
localStorage.removeItem("afterLogin");
that.$root.removetab("/login");
}else{
location.reload();
}
});
}
})
}
})
},
checklogin2(){
var that=this;
var obj={
userName:that.form2.username,
password:that.form2.password
};
that.$refs.form2.validate(valid=>{
if(valid){
that.$root.postReq("/web/userCtl/login",{u:obj}).then(function(d){
if(d.status==0){
that.$root.refreshLoginState(()=>{
console.log("....................................................................................innner");
var afto=localStorage.getItem("afterLogin");
if(afto){
that.$root.pushx(JSON.parse(afto));
localStorage.removeItem("afterLogin");
that.$root.removetab("/login");
}else{
location.reload();
}
});
}else{
that.$message({
type: 'error',
message: '用户名或密码错误,请重试.'
});
}
})
}
});
},
sumbitreset(){
var that=this;
var obj={
mobile:this.form3.mobile,
password:this.form3.password
};
that.$refs.form3.validate(valid=>{
if(valid){
that.$root.postReq("/web/userCtl/resetPassword",obj).then(function(d){
if(d.status==0){
that.$message({
type: 'success',
message: '密码重置成功'
});
}
})
}
})
},
submitregister(){
var that=this;
var obj={
mobile:this.form4.mobile,
password:this.form4.password
};
that.$refs.form4.validate(valid=>{
if(valid){
that.$root.postReq("/web/userCtl/submitregister",obj).then(function(d){
if(d.status==0){
that.$message({
type: 'success',
message: '注册成功,请登录'
});
that.login();
}else if(d.status==1){
that.$message({
type: 'error',
message: '该手机号码已注册'
});
}
})
}
})
},
fetchVcode(mobilenum){
var that=this;
if(/^1[23456789]\d{9}$/.test(mobilenum) == false){
this.$alert('请输入正确格式的手机号码', '提示', {
confirmButtonText: '确定',
callback: action => {
}
});
return;
};
var timer= setInterval(function () {
console.log("----------getNumber-----------");
$("#loginCode").attr("disabled", "disabled");
$("#loginCode").css("cursor", "not-allowed");
$("#loginCode").text(that.Num + "秒后重新获取");
console.log(that.Num);
if (that.Num > 0) {
console.log(that.Num);
that.Num--;
}else{
$("#loginCode").attr("disabled", false);
$("#loginCode").text("获取验证码");
that.Num = 60;
clearInterval(timer);
}
},1000);
this.$root.postReq("/web/userCtl/fetchVcode",{mobile:mobilenum}).then(function(d){
if(d.status==0){
that.rcode=d.data.vcodestr;
}
})
},
validmethod:function (rule,value,callback) {
console.log("code validdate");
var self=this;
var fm=this.currentFrm.getFormModel();
return callback();
},
loginclick:function (fm,prop){
sbhandler:function () {
var self=this;
var fm=this.$refs.loginFrm.getFormModel();
this.$refs.loginFrm.overBtnLoading(prop);
this.$refs.loginFrm.validate(function(v){
if(v){
console.log(v);
self.$root.postReq("/web/auth/userCtl/login",{u:fm}).then(function(d){
self.$root.postReq("/web/userCtl/login",{u:fm}).then(function(d){
if(d.status==0){
console.log(d.data);
location.href=d.data.jumpUrl;
}else{
self.$alert('输入的账号或密码有误!', '提示', {
confirmButtonText: '确定',
callback: action => {
console.log("....................................................................................");
self.$root.refreshLoginState(()=>{
console.log("....................................................................................innner");
var afto=localStorage.getItem("afterLogin");
if(afto){
self.$root.pushx(JSON.parse(afto));
localStorage.removeItem("afterLogin");
self.$root.removetab("/login");
}else{
location.reload();
}
});
}else{
self.$message({
type: 'error',
message: '用户名或密码错误,请重试.'
});
}
});
}
});
},
},
vname:"gsb-login"
}
.orderpay_input .el-input.is-disabled .el-input__inner {
height: 30px;
}
.orderpay-card {
background-color: #eee;
}
.el5 {
float: left;
width: 168px;
margin-right: 40px;
}
.el5 .el-button span {
line-height: 35px;
}
.payType_wxzf {
margin-left: 15px;
margin-top: 15px;
width:764px;
height:auto;
min-height: 267px;
background:rgba(255,255,255,1);
box-shadow:0px 0px 8px 0px rgba(0,0,0,0.1);
border:1px solid rgba(225,225,225,1);
text-align: center;
position: relative;
}
.kailong{
position: absolute;
top: -10px;
left: 60px;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid rgba(225,225,225,1);
}
.kailong span{
display: block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
position: absolute;
left: -8px;
top: 2px;
}
.kailong1{
position: absolute;
top: -10px;
left: 270px;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid rgba(225,225,225,1);
}
.kailong1 span{
display: block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
position: absolute;
left: -8px;
top: 2px;
}
.kailong2{
position: absolute;
top: -10px;
left: 470px;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid rgba(225,225,225,1);
}
.kailong2 span{
display: block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
position: absolute;
left: -8px;
top: 2px;
}
\ No newline at end of file
<gsb-pcpage>
<el-card :style="imgHeight" class="orderpay-card">
<div style="width: 1200px;margin: 20px auto;background-color: #fff;padding: 50px;">
<el-row :gutter="20">
<el-col :span="2">
<img src="imgs/icon-payform.png" style="width:60px;" />
</el-col>
<el-col :span="20" style="text-align:left;">
<div style="font-weight:600;font-size:20px;">
订单提交成功,应付金额:
<span style="color:#f50">{{orderInfo.totalSum}}</span>
</div>
<div style="font-size:13px;color:#828282;margin-top:10px;">
支付编号:
<span style="color:#2F2F2F;margin-right: 10px;">{{orderInfo.code}}</span>
服务项目:
<span style="color:#2F2F2F;margin-right: 10px;">{{orderInfo.sveItemName}}</span>
</div>
</el-col>
</el-row>
<div>
<el-row style="margin-top:30px;line-height: 16px;">
<div style="width:2px;height:16px;background-color:#f08c2f;float:left">
</div>
<div style="display: inline-block;margin-left:5px;font-size: 16px;clor: #555;">请选择支付方式</div>
<div style="display: inline-block;margin-left:10px;font-size:12px;color:rgba(130,130,130,1);"> <img
style="vertical-align: middle;margin-bottom: 2px;" src="imgs/exclamation-circle-o.png" alt="">
付款账户为公司账户,则可以为付款的公司账户开具发票;如果是个人账户,则只能为付款人或申请人开具发票,请选择合适的付款账户。</div>
</el-row>
</div>
<div v-if="orderInfo.sveItemCode==\'zzsbzc\'">
<div style="clear:both;width: 100%;height: 20px;"></div>
<el-row :gitter="20" style="margin-top:20px;font-size: 12px;font-weight:400;padding-left: 15px;">
<div class="el5">
<el-button @click="toWxPay" style="font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(130,130,130,1);">
<img style="float: left;
margin-right: 10px;" src="imgs/weixin-3.png" alt="">
微信支付
</el-button>
</div>
<div class="el5">
<el-button @click="toAliPay" style="font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(130,130,130,1);">
<img style="float: left;
margin-right: 10px;width: 36px;height: 36px;" src="imgs/ali-3.jpg" alt="">
支付宝支付
</el-button>
</div>
<div class="el5">
<el-button style="font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(130,130,130,1);" @click="toOfflinePay">
<img style="float: left;
margin-right: 10px;" src="imgs/icon_yinlian.png" alt="">
银行卡支付
</el-button>
</div>
<div class="el5">
<el-button style="font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(130,130,130,1);" @click="toOtherPeoplePay">
<img style="float: left;
margin-right: 10px;" src="imgs/icon_daifu.png" alt="">
他人代付
</el-button>
</div>
</el-row>
</div>
<div v-else>
<!--
<el-row style="margin-top:45px;line-height: 14px;">
<img style="vertical-align: middle;float: left;" src="imgs/icon_kehu.png" alt="">
<div style="float:left;margin-left:10px;font-size: 14px;font-weight:400;">向客户收款</div>
</el-row>
<div style="clear:both;"></div>
<el-row :gitter="20" style="margin-top:20px;font-size: 14px;font-weight:400;padding-left: 15px;">
<el-col :span="12" class="orderpay_input">订单链接:<el-input id="orderpaylink" :disabled="true" style="width:80%;"
:value="\'https://igirl.gongsibao.com/orderpay/orderpay?state=\'+orderInfo.code"></el-input>
</el-col>
<el-col :span="12">
<el-button type="primary" size="small" plain @click="copyLink">
复制链接
</el-button>
<span style="color: #B2B2B2;font-size: 12px;margin-left:5px;">复制订单链接发给客户人确认支付 (微信打开该链接)</span>
</el-col>
</el-row>-->
<el-row style="margin-top:30px;line-height: 14px;">
<img style="vertical-align: middle;float: left;" src="imgs/icon_dailiren.png" alt="">
<!--<div style="float:left;margin-left:10px;font-size: 14px;font-weight:400;">代理人代付</div>-->
<div style="float:left;margin-left:10px;font-size: 14px;font-weight:400;">付款方式</div>
</el-row>
<div style="clear:both"></div>
<el-row v-if="orderInfo.orderPayStatus==\'dfk\'" :gitter="20"
style="margin-top:20px;font-size: 12px;font-weight:400;padding-left: 15px;">
<el-col :span="5" class="el5">
<el-button @click="toWxPay" style="font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(130,130,130,1);">
<img style="float: left;
margin-right: 10px;" src="imgs/weixin-3.png" alt="">
微信支付
</el-button>
</el-col>
<div class="el5">
<el-button @click="toAliPay" style="font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(130,130,130,1);">
<img style="float: left;
margin-right: 10px;width: 36px;height: 36px;" src="imgs/ali-3.jpg" alt="">
支付宝支付
</el-button>
</div>
<el-col :span="5" class="el5">
<el-button style="font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(130,130,130,1);" @click="toOfflinePay">
<img style="float: left;
margin-right: 10px;" src="imgs/icon_yinlian.png" alt="">
线下支付
</el-button>
</el-col>
</el-row>
</div>
<!-- 分割线 -->
<!-- <el-row style="margin-top:40px;text-align:center">
<el-button type="primary" size="medium" style="color:#ffffff;width:140px;">
确定支付</el-button>
</el-row> -->
<!-- 支付弹窗 -->
<div v-if="payType==\'wx\'" class="payType_wxzf">
<div class="kailong">
<span></span>
</div>
<!-- <h4 style="text-align:left;margin-left:2%;">微信支付</h4> -->
<div>
<div v-loading="loading">
<img width="120px" height="120px" style="border:2px dashed #e9e9e9;margin-top: 25px;" :src="qrcode" />
</div>
<div style="color:#828282;width:100%;text-align: center;margin: 8px auto;font-size: 14px;">
请使用微信扫一扫,扫描二维码支付,请在5分钟内完成支付,过期请刷新支付码。
</div>
<div style="padding:10px 0;width:250px;text-align: center;margin: 0 auto;">
<!-- <el-button size="mini" plain @click="function(){payType=\'\';closePayConfirm()}" >取消支付</el-button> -->
<el-button size="mini" type="primary" plain @click="toWxPay">刷新支付码</el-button>
</div>
</div>
<div style="clear:both"></div>
</div>
<div v-if="payType==\'alipay\'" class="payType_wxzf">
<div class="kailong1">
<span></span>
</div>
<!-- <h4 style="text-align:left;margin-left:2%;">微信支付</h4> -->
<div>
<div v-loading="loading">
<img width="120px" height="120px" style="border:2px dashed #e9e9e9;margin-top: 25px;" :src="qrcode" />
</div>
<div style="color:#828282;width:100%;text-align: center;margin: 8px auto;font-size: 14px;">
请使用支付宝扫一扫,扫描二维码支付,请在5分钟内完成支付,过期请刷新支付码。
</div>
<div style="padding:10px 0;width:250px;text-align: center;margin: 0 auto;">
<!-- <el-button size="mini" plain @click="function(){payType=\'\';closePayConfirm()}" >取消支付</el-button> -->
<el-button size="mini" type="primary" plain @click="toWxPay">刷新支付码</el-button>
</div>
</div>
<div style="clear:both"></div>
</div>
<!-- 线下支付 -->
<div v-if="payType==\'offline\'" class="payType_wxzf" style="text-align: left;">
<div class="kailong2">
<span></span>
</div>
<!-- <h4 style="text-align:left;margin-left:2%;">线下支付</h4> -->
<div style="width:100%;padding: 30px;box-sizing: border-box;">
<el-row>
<el-col :span="24">付款账户:
<el-select @change="bankchange" v-model="account_index" placeholder="请选择付款账户">
<el-option v-for="(item,index) in accounts" :key="index" :label="item.name" :value="index">
</el-option>
</el-select>
</el-col>
</el-row>
<el-row v-if="accountinfo && accountinfo.id" :gitter="20" style="margin-top:10px;font-size: 14px;">
<el-col style="line-height: 40px" :span="24"><span
style="color:#828282;">收款人:</span>{{accountinfo.payeeName}}</el-col>
<el-col style="line-height: 40px" :span="24"><span style="color:#828282;">开户行:</span>{{accountinfo.name}}
</el-col>
<el-col style="line-height: 40px" :span="24"><span style="color:#828282;">帐号:</span>{{accountinfo.code}}
</el-col>
<!-- <el-col :span="8">帐户类型:<el-input style="width:70%;" disabled v-model="accountinfo.accountTypeName" placeholder=""></el-input></el-col>
<el-col :span="8">开户行:<el-input style="width:70%;" disabled v-model="accountinfo.name" placeholder=""></el-input></el-col>
<el-col :span="8">帐号:<el-input style="width:70%;" disabled v-model="accountinfo.code" placeholder=""></el-input></el-col> -->
</el-row>
<br />
<gsb-upload2 flag="zfpz" ref="zfpz" :d="d" @setKey="setKey" :action="action" filetype="image/jpeg"
:ifshowlist="false" @uploadsuccess="uploadsuccess2" @error="error">
</gsb-upload2>
<div style="margin-top:20px;">
<span style="color:#828282;font-size: 14px;">
请上传线下支付凭证。
</span>
<!-- <el-button @click="function(){payType=\'\';closePayConfirm()}" >取消支付</el-button> -->
<el-button type="primary" size="mini" v-if="payOrderType" @click="offlinePaySubmit">提交支付凭证</el-button>
</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
<div v-if="payType==\'otherPeople\'" class="payType_wxzf">
<div class="kailong3">
<span></span>
</div>
<div
style="width:100%;display: inline-block;margin-left:30px;margin-top:60px;font-size:12px;color:rgba(130,130,130,1);text-align: left;">
<img style="vertical-align: middle;margin-bottom: 2px;" src="imgs/exclamation-circle-o.png" alt="">
复制订单链接发给朋友代付 (微信打开该链接)</div>
<el-row :gitter="20" style="margin-top:20px;font-size: 14px;font-weight:400;padding-left: 15px;">
<el-col :span="20" class="orderpay_input">订单链接:<el-input id="orderpaylink" :disabled="true" style="width:80%;"
:value="\'https://igirl.gongsibao.com/orderpay/orderpay?state=\'+orderInfo.code"></el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" size="small" plain @click="copyLink">
复制链接
</el-button>
</el-col>
</el-row>
</div>
</div>
</el-card>
</gsb-pcpage>
\ No newline at end of file
{
template: '${tmpl}',
data: function () {
return {
imgHeight: null,
orderNum: "",
orderInfo: {},
payType: "wx",
d: {},
action: "",
zfpzUrl: "",
accounts: [],
account_id: "",
account_index: "",
accountinfo: {},
qrcode: "",
tradekey: "",
time: "",
interval: null,
roleList: null,
isBizemp: false,
loading: false,
payOrderType: false,
email: "",
poliyLevel: "",
address: "",
Deparment: "",
industry: "",
period:"3个月",
}
},
mounted: function () {
this.imgHeight = 'min-height:' + (document.documentElement.clientHeight - 221) + "px;";
var currentUser = this.currentUser;
if (currentUser) {
var roles = currentUser.roles;
if (roles) {
this.roleList = roles.split(",");
}
}
if (this.roleList && this.roleList.length > 0) {
for (var i = 0; i < this.roleList.length; i++) {
if (this.roleList[i] == "bizemp") {
this.isBizemp = true;
}
}
}
this.orderNum = this.$router.history.current.query.orderNum;
var that = this;
this.$root.getReq("/web/orderCtl/getItemTmOrderDetail", {
orderNum: this.orderNum
}).then(function (d) {
if (d.code == 1) {
that.orderInfo = d.data;
that.closePayConfirm();
that.getPayQrCode();
}
});
this.$root.postReq("/web/uploadCtl/getOssConfig", "").then(function (d) {
that.d["key"] = "key";
that.d["Bucket"] = d.Bucket;
that.d["OSSAccessKeyId"] = d.OSSAccessKeyId;
that.d["Signature"] = d.Signature;
that.d["policy"] = d.policy;
that.d["success_action_status"] = d.success_action_status;
that.action = d.url;
});
this.$root.postReq("/web/moneyaccountCtl/findAllOfflineAccount", {}).then(function (d) {
if (d && d.code == 1) {
that.accounts = d.data;
if (that.accounts && that.accounts.length > 0) {
that.account_index = 0;
that.accountinfo = that.accounts[0];
that.account_id = that.accountinfo.id;
}
} else {
that.$message.warning("获取账户信息失败");
}
}).catch(function (e) {
console.log(e);
that.$message.warning("获取账户信息失败");
});
/*接受pay.js界面传的参数*/
this.poliyLevel = this.$router.history.current.query.poliyLevel;
this.address = this.$router.history.current.query.address;
this.Department = this.$router.history.current.query.Department;
this.industry = this.$router.history.current.query.industry;
this.email = this.$router.history.current.query.email;
this.period = this.$router.history.current.query.period;
if (this.$store.state.currentUser) {
this.userName = this.$store.state.currentUser.userName;
this.userId = this.$store.state.currentUser.id;
console.log(this.userName, "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxuser");
}
if (this.$store.state.currentCompany) {
this.currentCompany = this.$store.state.currentCompany.name;
console.log(this.$store.state.currentCompany, "BeginTimexxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxcurrentCompany");
};
this.Subscribe();
},
created: function () {
},
methods: {
afterpayjump() {
var that = this;
this.$root.getReq("/wxop/pushmsgWxop/getQr", {}).then(function (r) {
console.log("rrrrrrr");
console.log(r);
if (r && r.code == 1 && r.data) {
that.$root.pushx({
title: "支付成功",
name: "/paysuccess",
params: {
orderNum: that.orderNum
}
});
} else {
if (that.isBizemp) {
that.$root.pushx({
title: "我的订单",
name: "/myordermag"
});
} else {
that.$root.pushx({
title: "我的订单",
name: "/myorder"
});
}
}
}).catch(e => {
if (that.isBizemp) {
that.$root.pushx({
title: "我的订单",
name: "/myordermag"
});
} else {
that.$root.pushx({
title: "我的订单",
name: "/myorder"
});
}
});
},
bankchange(d) {
var account = this.accounts[d];
console.log(account);
if (account) {
this.accountinfo = account;
this.account_id = account.id;
}
},
copyLink() {
var oInput = document.createElement('input');
oInput.value = "https://igirl.gongsibao.com/orderpay/orderpay?state=" + this.orderNum;
document.body.appendChild(oInput);
oInput.select();
document.execCommand("Copy");
oInput.className = 'oInput';
oInput.style.display = 'none';
this.$message({
type: 'success',
message: '复制成功'
});
},
error(err) {
this.$message.warning(`上传失败,请重新上传`);
console.log(err);
},
setKey(name, flag) {
console.log(name);
console.log(flag);
name = name.substring(name.length - 5);
var myDate = new Date();
var key = "zc_" + Math.round(Math.random() * 500) + myDate.getMonth() + myDate.getTime() + myDate.getFullYear() + myDate.getDate() + myDate.getHours() + myDate.getMinutes() + myDate.getSeconds() + myDate.getMilliseconds() + name.replace(" ", "");
console.log(this.$refs[flag]);
this.$refs[flag].d.key = key;
},
uploadsuccess2(result, obj) {
this.zfpzUrl = result;
this.payOrderType = true;
},
toOfflinePay() {
this.payType = "offline";
this.closePayConfirm();
},
toOtherPeoplePay() {
this.payType = "otherPeople";
this.closePayConfirm();
},
offlinePaySubmit() {
var that = this;
var fileUrl = this.zfpzUrl;
var orderNum = this.orderNum;
var account_id = this.account_id;
if (!fileUrl) {
that.$message.warning("请上传支付凭证");
return;
}
if (!account_id) {
that.$message.warning("请选择付款账户");
return;
}
if (orderNum) {
var obj = {
fileUrl: fileUrl,
orderNum: orderNum,
account_id: account_id,
};
this.$root.showMask();
this.$root.getReq("/web/orderCtl/offlinePay", obj).then(function (d) {
if (d && d.code == 1) {
that.$message.success("支付成功");
that.afterpayjump();
/** if (that.isBizemp) {
that.$root.pushx({
title: "我的订单",
name: "/myordermag"
});
} else {
that.$root.pushx({
title: "我的订单",
name: "/myorder"
});
}*/
} else {
that.$message.warning(d.msg);
}
that.$root.hideMask();
}).catch(function (e) {
that.$message.warning("操作失败");
that.$root.hideMask();
})
} else {
that.$message.warning("参数错误");
}
},
toWxPay() {
this.payType = "wx";
this.closePayConfirm();
this.getPayQrCode();
},
toAliPay() {
this.payType = "alipay";
this.closePayConfirm();
this.getPayQrCode();
},
getPayQrCode: function () {
var self = this;
if (!this.orderInfo || !this.orderInfo.code) {
this.$message.warning(`获取支付码失败,订单信息有误`);
return;
}
self.loading = true;
self.$root.postReq("/web/orderCtl/getQrCodeTl", {
code: this.orderInfo.code,
company_id: this.orderInfo.company_id,
op_type: this.payType
}).then(d => {
console.log(d, "getQrCode........................");
if (d && d.code == 1) {
var data = d.data;
self.qrcode = "http://bigdata.gongsibao.com/api/qc?detailLink=" + encodeURIComponent(data.payinfo);
self.orderInfo.wxPayOrderCode = data.wxPayOrderCode;
self.orderInfo.aliPayOrderCode = data.aliPayOrderCode;
self.time = new Date().getTime();
self.checkOrderStatus();
} else {
self.$message.warning(d.msg);
}
self.loading = false;
}).catch(e => {
self.$message.warning(`获取支付码失败`);
self.loading = false;
});
},
closePayConfirm() {
if (this.interval) {
window.clearInterval(this.interval);
}
},
checkOrderStatus() {
var self = this;
var startTime = Number(this.time);
setTimeout(function () {
var inth = setInterval(function () {
self.$root.postReq("/web/orderCtl/findItemByCodeTl", {
orderCode: self.orderInfo.code,
wxPayOrderCode: self.orderInfo.wxPayOrderCode,
aliPayOrderCode: self.orderInfo.aliPayOrderCode,
company_id: self.orderInfo.company_id,
sub_type: self.orderInfo.subType,
op_type: self.payType
}).then(d => {
if (d && d.code == 1 && d.data && d.data.orderPayStatus == "yfk") {
self.orderInfo = d.data;
window.clearInterval(inth);
self.$message.success("付款成功");
self.afterpayjump();
/**if (self.isBizemp) {
self.$root.pushx({
title: "我的订单",
name: "/myordermag"
});
} else {
self.$root.pushx({
title: "我的订单",
name: "/myorder"
});
} */
return;
} else {
var passTime = (new Date().getTime() - startTime) / 1000;
var p = Math.round((passTime / 300) * 100);
if (passTime > 300) {
clearInterval(inth);
}
}
});
}, 5000);
self.interval = inth;
}, 5000);
},
Subscribe() {
console.log("oooooooooooo");
axios.post('http://106.13.228.212:8010/gsb/Subscribe', {
"userId": this.userId,
"poliyLevel": this.poliyLevel,
"city": this.address,
"Departments": this.Department,
"industry": this.industry,
"BeginTime": this.Date_new(new Date()),
"Email": this.email,
"comanyname": this.currentCompany,
"username": this.userName,
"period": this.period,
"money": this.money,
"pid": this.orderInfo.code
}).then(d => {
console.log(this.cities, "this.cities----------------------");
console.log(this.currentCompany, "this.currentCompany----------------------");
console.log(String(this.cities), "string----------------------");
console.log(JSON.stringify(this.cities), "cities----------------------");
})
},
Date_new(str) {
let date = str || new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hours = date.getHours(),
minutes = date.getMinutes();
second = date.getSeconds();
let a = `${year}-${month}-${day} ${hours}:${minutes}:${second}`;
return a;
},
},
vname: "gsb_orderpay"
}
\ No newline at end of file
.register{
position: fixed;
top:150px;
right:50px;
opacity: 0.7;
}
\ No newline at end of file
.login-title{
position: absolute;
top: 35%;
left: 25%;
width: 30%;
height: 130px;
}
.tong{
font-size: 46px;
font-family: PingFangSC-Medium,PingFang SC;
font-weight: 500;
color: rgba(255,255,255,1);
}
.shujuzi{
font-size:30px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
display: block;
margin-left: 0px;
margin-top: 4px;
}
.logins-title{
width:320px;
height:89px;
line-height:89px;
text-align:center;
font-size:24px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
}
.login-content-inputs{
margin-left: 30px;
width: 315px;
height: 44px;
}
.zhanghao{
margin-left: 160px;
margin-top: -10px;
}
<div class="register">
<gsb-form style="width:400px;margin: auto;margin-right:37%" ref="regFrm" @btnclick="registerclick" :metaData="ldms" :refvalidatemethod="validmethod">
</gsb-form>
<div id="bychpage" class="login">
<div style="width:100%;margin: 0 auto;">
<div style="z-index:1;position:relative;background-color:#31373b">
<img style="width:100%;height:auto" :src="loginUrl" />
<div class="login-title" v-if="companyinfo.company.siteTheme == \'policy\'">
<span class="tong">政企通</span>
<span class="shujuzi">政策大数据服务平台</span>
</div>
<div class="login-div" v-if="a">
<div class="login-content" style="width: 380px;
height: 508px;
background: rgba(255,255,255,1);
border: 1px solid rgba(151,151,151,1);">
<div class="logins-title">
欢迎注册
</div>
<!-- 验证码登录 -->
<div v-if="activeIndex==1" class="login-content-inputs">
<el-form ref="form1" :rules="rules1" :model="form1" label-width="0px" key="1">
<el-form-item>
<el-input v-model="form1.username" placeholder="请输入企业名称"> <i slot="prefix" class="el-input__icon el-icon-tickets"></i></el-input>
</el-form-item>
<el-form-item prop="mobile">
<el-input v-model="form1.mobile" placeholder="请输入11位手机号码"><i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form1.password" placeholder="请输入登录密码"><i slot="prefix" class="el-input__icon el-icon-view"></i></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input style="width:175px;" v-model="form1.code" placeholder="请输入验证码"><i slot="prefix" class="el-input__icon el-icon-edit"></i></el-input>
<el-button id="loginCode" type="primary" plain style="width:135px;background: rgba(18,142,233,1);
color: rgba(255,255,255,1);"
@click="obtaincode1">
获取验证码</el-button>
</el-form-item>
<div class="zhanghao">已有账号?
<span style="color:#108EE9;cursor:pointer" @click="login">立即登录</span>
</div>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" class="login-content-button" @click="checklogin1" style="margin-top: 45px;">注 册</el-button>
</el-form-item>
<div style="font-size: 12px;
color: rgb(130, 130, 130);
margin-left: 100px;">登录即同意
<span style="color:#108EE9">《服务协议》</span>
</div>
</el-form>
</div>
<!-- 密码登录 -->
<div v-if="activeIndex==2" class="login-content-input">
<el-form ref="form2" :rules="rules2" :model="form2" label-width="0px" key="2">
<el-form-item prop="username">
<el-input v-model="form2.username" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form2.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" key="xxcccc" class="login-content-button" @click="checklogin2">登录</el-button>
</el-form-item>
<div style="font-size:12px;color:#828282">点击“登录”即表示同意
<span style="color:#108EE9">《创知厚德用户协议》</span>
</div>
<div style="font-size:12px;color:#B2B2B2;margin-top:26px;">还没有账户?
<span style="color:#108EE9;cursor:pointer" @click="register">立即注册</span>
<span style="margin:0 4px;">|</span>
<span style="color:#108EE9;cursor:pointer" @click="rsetpassword">忘记密码?</span>
</div>
</el-form>
</div>
</div>
</div>
<!-- 重置密码 -->
<div class="login-div" v-if="b">
<div class="login-content">
<div class="login-content-title">
重置密码
</div>
<div class="login-content-input">
<el-form ref="form3" :rules="rules3" :model="form3" label-width="0px" key="3">
<el-form-item prop="mobile">
<el-input v-model="form3.mobile" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input style="width:120px;" v-model="form3.code" placeholder="请输入验证码"></el-input>
<el-button id="resetCode" type="primary" plain style="width:135px;"submitregister
@click="obtaincode2">获取验证码</el-button>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form3.password" placeholder="请设置6-18位密码"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" class="login-content-button" @click="sumbitreset">确定</el-button>
</el-form-item>
<div style="font-size:12px;color:#108EE9;margin-top:26px;text-align:center">
<span style="margin-right:16px;cursor:pointer" @click="login">登录</span>
<span style="cursor:pointer" @click="register">注册</span>
</div>
</el-form>
</div>
</div>
</div>
<!-- 用户注册 -->
<div class="login-div" v-if="c">
<div class="login-content">
<div class="login-content-title">
欢迎注册{{ this.$root.currentCompany?this.$root.currentCompany.sitename:"知圈圈"}}
</div>
<div class="login-content-input">
<el-form ref="form4" :rules="rules4" :model="form4" label-width="0px" key="4">
<el-form-item prop="mobile">
<el-input v-model="form4.mobile" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input style="width:120px;" v-model="form4.code" placeholder="请输入验证码"></el-input>
<el-button id="registerCode" type="primary" plain style="width:135px;"
@click="obtaincode3">获取验证码</el-button>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form4.password" placeholder="请设置6-18位密码,区分大小写"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:8px;">
<el-button type="primary" class="login-content-button" @click="submitregister">注册</el-button>
</el-form-item>
<div style="font-size:12px;color:#828282">点击“登录”即表示同意
<span style="color:#108EE9">《创知厚德用户协议》</span>
</div>
<div style="font-size:12px;color:#B2B2B2;margin-top:26px;">已有账户?
<span style="color:#108EE9;cursor:pointer" @click="login">去登录</span>
</div>
</el-form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <gsb-pcpage style="text-align:center;margin-top:80px">
<div>
<gsb-form style="width:30%;margin: auto;" ref="loginFrm" :metaData="ldms" :refvalidatemethod="validmethod">
<h2 slot="title" style="margin:0px;padding-top: 20px">欢迎登录{{ this.$root.currentCompany?this.$root.currentCompany.sitename:"知圈圈"}}</h2>
<el-button slot="buttonarea" style="width:80%" type="primary" @click="sbhandler">登录</el-button>
</gsb-form>
</div>
</gsb-pcpage> -->
{
template:'${tmpl}',
data:function(){
var that=this;
var validateMethod=function(rule, value, callback){
console.log(rule);
if(rule.field=="mobile"){
if(/^1[23456789]\d{9}$/.test(value) == false){
return callback(new Error("请输入正确格式的手机号"));
}else{
return callback();
}
}
if(rule.field=="code"){
if(that.rcode!=value){
return callback(new Error("输入验证码有误,请重新输入"));
}
}
return callback();
};
return {
ldms:[],
vcode:123
activeIndex:"1",
loginUrl:"",
form1:{
mobile:"",
password:"",
code:"",
},
form2:{
username:"",
password:"",
},
form3:{
mobile:"",
code:"",
password:"",
},
form4:{
mobile:"",
code:"",
password:"",
},
a:true,
b:false,
c:false,
Num:60,
Num2:60,
Num3:60,
rcode:"",
rules1:{
username: [
{required: true, message: '请输入账号', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
],
mobile: [
{required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: validateMethod, trigger: 'blur' },
],
code: [
{required: true, message: '请输入手机接收到的验证码', trigger: 'blur' },
{ validator: validateMethod, trigger: 'blur' },
],
},
rules2:{
username: [
{required: true, message: '请输入账号', trigger: 'blur' },
],
password: [
{required: true, message: '请输入密码', trigger: 'blur' },
],
},
rules3:{
mobile: [
{required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: validateMethod, trigger: 'blur' },
],
code: [
{required: true, message: '请输入手机接收到的验证码', trigger: 'blur' },
{ validator: validateMethod, trigger: 'blur' },
],
password: [
{required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
],
},
rules4:{
mobile: [
{required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: validateMethod, trigger: 'blur' },
],
code: [
{required: true, message: '请输入手机接收到的验证码', trigger: 'blur' },
{ validator: validateMethod, trigger: 'blur' }
],
password: [
{required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
],
},
}
},
mounted:function(){
this.ldms=[
{
"title":"用户注册",
"colnum":2,
ctls:[
{"type":"input","label":"账号","prop":"userName","placeHolder":"请输入登录账号","style":"width:150px",rules:[ { "validator":"validatex","trigger": 'blur' }, { "required": true, "message": ' ', "trigger": 'blur' },,]},
{"type":"input","label":"昵称","prop":"nickName","placeHolder":"请输入昵称","style":"width:150px",rules:[ { "required": true, "message": ' ', "trigger": 'blur' },]},
{"type":"input","label":"密码","prop":"password","placeHolder":"请输入登录密码","style":"width:150px",rules:[ { "required": true, "message": ' ', "trigger": 'blur' },]},
{"type":"input","label":"密码确认","prop":"pwdconfirm","placeHolder":"请输入登录密码确认","style":"width:150px",rules:[ { "validator":"validatex","trigger": 'blur' }, { "required": true, "message": ' ', "trigger": 'blur' },]},
{"type":"input","label":"电话","prop":"mobile","placeHolder":"请输入电话","style":"width:150px",rules:[ { "validator":"validatex","trigger": 'blur' },{ "required": true, "message": ' ', "trigger": 'blur' },]},
{"type":"btn","label":"获取验证码","prop":"fetchvcode","placeHolder":"","style":{"width":"150px","margin-left":"0px","margin-top":"40px"},"face":"primary"},
{"type":"input","label":"验证码","prop":"vcode","placeHolder":"请输入验证码","style":"width:150px",rules:[ { "validator":"validatex","trigger": 'blur' },{ "required": true, "message": ' ', "trigger": 'blur' },]},
{"type":"btn","label":"开始提交","prop":"btnLogin","placeHolder":"请输入手机号","style":{"width":"150px","margin-left":"0px","margin-top":"40px"},"face":"warning"},
]
},
];
},
created:function(){
console.log(this.pfooterinfo);
if(this.pfooterinfo&&this.pfooterinfo.loginUrl){
this.loginUrl=this.pfooterinfo.loginUrl;
}else{
this.loginUrl="https://gsb-zc.oss-cn-beijing.aliyuncs.com//zc_41110157500594182420192913391824zhuce_background.png";
}
},
methods:{
validmethod:async function (rule,value,callback) {
console.log("code validdate");
var self=this;
var fm=this.$refs.regFrm.getFormModel();
if(rule.field=="userName"){
console.log(rule);
var scallbak=callback;
var d= await this.$root.postReq("/web/auth/userCtl/checkSameName",{uname:value});
if(d && d.status==0){
if(d.data.isExist){
return callback("已存在账号名称!");
}
}else{
return callback("服务异常,请稍后再试!");
}
}
if(rule.field=="pwdconfirm"){
var pwv=fm.password;
if(value!=pwv){
return callback("两次输入的密码不相同!");
handleSelect(key, keyPath) {
console.log(key, keyPath);
this.activeIndex=key;
},
resetall(){
this.form1.mobile="";
this.form1.code="";
this.form2.username="";
this.form2.password="";
this.form3.mobile="";
this.form3.code="";
this.form3.password="";
this.form4.mobile="";
this.form4.code="";
this.form4.password="";
},
rsetpassword(){
this.a=false;
this.b=true;
this.c=false;
this.rcode="";
this.resetall();
},
login(){
this.$root.pushx({
title: "登录",
name: "/login"
});
this.a=true;
this.b=false;
this.c=false;
this.rcode="";
this.resetall();
},
register(){
this.a=false;
this.b=false;
this.c=true;
this.rcode="";
this.resetall();
},
obtaincode1(){
this.fetchVcode(this.form1.mobile)
},
obtaincode2(){
var that=this;
if(/^1[23456789]\d{9}$/.test(that.form3.mobile) == false){
that.$alert('请输入正确格式的手机号码', '提示', {
confirmButtonText: '确定',
callback: action => {
}
});
return;
};
that.$root.postReq("/web/userCtl/getUserByMobile",{mobile:that.form3.mobile}).then(function(d){
if(d.code==0){
var timer= setInterval(function () {
console.log("----------getNumber-----------");
$("#resetCode").attr("disabled", "disabled");
$("#resetCode").css("cursor", "not-allowed");
$("#resetCode").text(that.Num2 + "秒后重新获取");
console.log(that.Num2);
if (that.Num2 > 0) {
console.log(that.Num2);
that.Num2--;
}else{
$("#resetCode").attr("disabled", false);
$("#resetCode").text("获取验证码");
that.Num2 = 60;
clearInterval(timer);
}
},1000);
that.$root.postReq("/web/userCtl/fetchVcode",{mobile:that.form3.mobile}).then(function(d){
console.log(d);
if(d.status==0){
that.rcode=d.data.vcodestr;
}
})
}else{
that.$message({
type: 'error',
message: '用户尚未注册'
});
}
if(rule.field=="mobile"){
if(/^1[23456789]\d{9}$/.test(value) == false){
return callback("请检查号码格式!");
}
})
},
obtaincode3(){
var that=this;
if(/^1[23456789]\d{9}$/.test(that.form4.mobile) == false){
that.$alert('请输入正确格式的手机号码', '提示', {
confirmButtonText: '确定',
callback: action => {
}
});
return;
};
that.$root.postReq("/web/userCtl/getUserByMobile",{mobile:that.form4.mobile}).then(function(d){
if(d.code==-1){
var timer= setInterval(function () {
console.log("----------getNumber-----------");
$("#registerCode").attr("disabled", "disabled");
$("#registerCode").css("cursor", "not-allowed");
$("#registerCode").text(that.Num3 + "秒后重新获取");
console.log(that.Num3);
if (that.Num3 > 0) {
console.log(that.Num3);
that.Num3--;
}else{
$("#registerCode").attr("disabled", false);
$("#registerCode").text("获取验证码");
that.Num3 = 60;
clearInterval(timer);
}
},1000);
that.$root.postReq("/web/userCtl/fetchVcode",{mobile:that.form4.mobile}).then(function(d){
if(d.status==0){
console.log(d);
that.rcode=d.data.vcodestr;
}
})
}else{
that.$message({
type: 'error',
message: '用户已存在, 请修改并重试'
});
}
if(rule.field=="vcode"){
if(value != this.vcode){
return callback("验证码有误,可重新获取!");
}
})
},
checklogin1(){
var that=this;
var obj={
mobile:that.form1.mobile,
password:that.form1.password,
};
that.$refs.form1.validate(valid=>{
if(valid){
that.$root.postReq("/web/userCtl/loginByMobile",{u:obj}).then(function(d){
if(d.status==0){
console.log("..................................................helllo..................................");
that.$root.refreshLoginState(()=>{
console.log("....................................................................................innner");
var afto=localStorage.getItem("afterLogin");
if(afto){
that.$root.pushx(JSON.parse(afto));
localStorage.removeItem("afterLogin");
that.$root.removetab("/login");
}else{
location.reload();
that.$root.pushx({
title: "首页",
name: "/"
})
}
});
}
})
}else {
console.log('输入有误')
}
console.log(rule);
return callback();
})
},
registerclick:function (fm,prop){
var self=this;
var fm=this.$refs.regFrm.getFormModel();
if(prop=="fetchvcode"){
if(/^1[23456789]\d{9}$/.test(fm.mobile) == false){
this.$refs.regFrm.overBtnLoading(prop);
return;
checklogin2(){
var that=this;
var obj={
userName:that.form2.username,
password:that.form2.password
};
that.$refs.form2.validate(valid=>{
if(valid){
that.$root.postReq("/web/userCtl/login",{u:obj}).then(function(d){
if(d.status==0){
that.$root.refreshLoginState(()=>{
console.log("....................................................................................innner");
var afto=localStorage.getItem("afterLogin");
if(afto){
that.$root.pushx(JSON.parse(afto));
localStorage.removeItem("afterLogin");
that.$root.removetab("/login");
}else{
location.reload();
}
});
}else{
self.$root.postReq("/web/auth/userCtl/fetchVcode",{u:fm.mobile}).then(function(d){
if(d.status==0){
self.vcode=d.data.vcodestr;
setTimeout(()=>{
self.$refs.regFrm.overBtnLoading(prop);
},3000);
}
that.$message({
type: 'error',
message: '用户名或密码错误,请重试.'
});
}
})
}
});
},
sumbitreset(){
var that=this;
var obj={
mobile:this.form3.mobile,
password:this.form3.password
};
that.$refs.form3.validate(valid=>{
if(valid){
that.$root.postReq("/web/userCtl/resetPassword",obj).then(function(d){
if(d.status==0){
that.$message({
type: 'success',
message: '密码重置成功'
});
}
})
}
})
},
submitregister(){
var that=this;
var obj={
mobile:this.form4.mobile,
password:this.form4.password
};
that.$refs.form4.validate(valid=>{
if(valid){
that.$root.postReq("/web/userCtl/submitregister",obj).then(function(d){
if(d.status==0){
that.$message({
type: 'success',
message: '注册成功,请登录'
});
that.login();
}else if(d.status==1){
that.$message({
type: 'error',
message: '该手机号码已注册'
});
}
return;
})
}
})
},
fetchVcode(mobilenum){
var that=this;
if(/^1[23456789]\d{9}$/.test(mobilenum) == false){
this.$alert('请输入正确格式的手机号码', '提示', {
confirmButtonText: '确定',
callback: action => {
}
});
return;
};
var timer= setInterval(function () {
console.log("----------getNumber-----------");
$("#loginCode").attr("disabled", "disabled");
$("#loginCode").css("cursor", "not-allowed");
$("#loginCode").text(that.Num + "秒后重新获取");
console.log(that.Num);
if (that.Num > 0) {
console.log(that.Num);
that.Num--;
}else{
$("#loginCode").attr("disabled", false);
$("#loginCode").text("获取验证码");
that.Num = 60;
clearInterval(timer);
}
if(this.vcode!=fm.vcode){
this.$refs.regFrm.overBtnLoading(prop);
return;
},1000);
this.$root.postReq("/web/userCtl/fetchVcode",{mobile:mobilenum}).then(function(d){
if(d.status==0){
that.rcode=d.data.vcodestr;
}
this.$refs.regFrm.validate(function(v){
})
},
validmethod:function (rule,value,callback) {
console.log("code validdate");
var self=this;
var fm=this.currentFrm.getFormModel();
return callback();
},
sbhandler:function () {
var self=this;
var fm=this.$refs.loginFrm.getFormModel();
this.$refs.loginFrm.validate(function(v){
if(v){
console.log(v);
self.$refs.regFrm.overBtnLoading(prop);
self.$root.postReq("/web/auth/userCtl/register",{u:fm}).then(function(d){
self.$root.postReq("/web/userCtl/login",{u:fm}).then(function(d){
if(d.status==0){
console.log(d.data);
location.href=d.data.jumpUrl;
console.log("....................................................................................");
self.$root.refreshLoginState(()=>{
console.log("....................................................................................innner");
var afto=localStorage.getItem("afterLogin");
if(afto){
self.$root.pushx(JSON.parse(afto));
localStorage.removeItem("afterLogin");
self.$root.removetab("/login");
}else{
location.reload();
}
});
}else{
self.$message({
type: 'error',
message: '用户名或密码错误,请重试.'
});
}
});
}else{
self.$refs.regFrm.overBtnLoading(prop);
}
});
},
},
vname:"gsb-register"
vname:"gsb-login"
}
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