Skip to content

S
SuperMan
Commit 9aefc929 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent c1d3bc2e
Hide whitespace changes
Inline Side-by-side
Showing with 1130 additions and 1022 deletions
src/components/PersonalInfoSet.vue
View file @ 9aefc929
<style> <style>
.Person_Content{ .Person_Content {
/* width:100%; */ height: 96%;
height:96%; margin: 18px;
margin:18px; overflow: hidden;
overflow: hidden; }
}
.PerSon_LeftNav{ .PerSon_LeftNav {
width:418px; width: 418px;
height:96%; height: 96%;
position: absolute; position: absolute;
overflow-y: auto; overflow-y: auto;
background-color: #fff; background-color: #fff;
display: inline-block; display: inline-block;
} }
.Person_Right{
margin-left:440px; .Person_Right {
width:100%; margin-left: 440px;
height:100%; width: 100%;
overflow-y: auto; height: 100%;
background-color: #fff; overflow-y: auto;
} background-color: #fff;
.PerSon_Edit{ }
text-align: right;
width:100%; .PerSon_Edit {
color:#BBBBBB; text-align: right;
font-size:12px; width: 100%;
padding:30px; color: #BBBBBB;
} font-size: 12px;
.PerSon_Edit span{ padding: 30px;
cursor: pointer; }
}
.PerSon_Edit i{ .PerSon_Edit span {
font-size:12px; cursor: pointer;
} }
.Person_Header{
width:120px; .PerSon_Edit i {
height:120px; font-size: 12px;
margin:30px auto; }
border:1px solid #F4F4F4;
padding:3px; .Person_Header {
border-radius: 50%; width: 120px;
} height: 120px;
.Person_Header img{ margin: 30px auto;
width:100%; border: 1px solid #F4F4F4;
height:100%; padding: 3px;
border-radius:50%; border-radius: 50%;
} }
.Person_ComCenter{
width:100%; .Person_Header img {
font-size:14px; width: 100%;
color:#333333; height: 100%;
text-align: center; border-radius: 50%;
} }
.Person_MenuList{
margin-top:45px; .Person_ComCenter {
} width: 100%;
.Person_MenuList li{ font-size: 14px;
list-style-type: none; color: #333333;
width:100%; text-align: center;
height:54px; }
padding:0 30px;
display: flex; .Person_MenuList {
align-items: center; margin-top: 45px;
border-bottom:1px solid #F3F3F3; }
}
.Person_MenuList li .Person_Pname{ .Person_MenuList li {
display: flex; list-style-type: none;
align-items: center; width: 100%;
width:26%; height: 54px;
height:100%; padding: 0 30px;
font-size:12px; display: flex;
color:#999999; align-items: center;
} border-bottom: 1px solid #F3F3F3;
.Person_Jobs{ }
display: inline-block;
padding:5px 8px; .Person_MenuList li .Person_Pname {
background-color: #007EFF; display: flex;
color:#fff; align-items: center;
font-size:12px; width: 26%;
border-radius:8px; height: 100%;
margin-left:10px; font-size: 12px;
} color: #999999;
.Person_Company{ }
color:#333333;
font-size:14px;
display: inline-block;
}
.Person_Wrong{
color:#999999;
font-size:12px;
text-align: right;
}
.Person_CenterList{
display: inline-block;
width:72%;
font-size:14px;
}
.Per_Jiantou i{
font-size:12px;
color:#999999;
}
.Person_menuCked li:hover{
cursor: pointer;
background-color: #F1F8FF;
}
.P_cked{
background-color: #F1F8FF;
}
.Shouji_Top{
width:100%;
height:54px;
line-height: 54px;
padding:0 30px;
font-size:14px;
color:#333333;
border-bottom:1px solid #F3F3F3;
}
.Shouji_Conteng{
margin:70px 0 0 120px;
}
.phone_commonBotm{
width:400px;
position:relative;
}
.phone_commonBotm .input{
width:400px;
height:44px;
outline:none;
padding-left: 17px;
border:none;
border: 1px solid #DCDFE6;
}
.phone_commonBotm .input::-webkit-input-placeholder{
color: #D3D6DC;
}
.phone_commonBotm .validatCode {
position: absolute;
right: 10px;
top: 16px;
height:12px;
line-height: 12px;
padding-left: 10px;
color: #007EFF;
font-size: 12px;
letter-spacing: 2px;
border-left: 1px solid #DCDFE6;
}
.phone_bangding{
color:#333333;
margin:0 0 29px 100px;
font-size:16px;
}
.phone_bangding span{
margin-left:21px;
}
.Shouji_Conteng .el-input .el-input__inner{
height:44px;
}
.PI_qiehuan{
font-size:14px;
color:#333333;
}
.PI_comMoshi{
color:#999999
}
.PI_QiehuanImg{
width:370px;
height:174px;
margin-top:18px;
cursor: pointer;
margin-left:20px;
border:4px solid #fff;
}
.ckedQieImg{
border:4px solid #007EFF;
}
.PI_QiehuanImg img{
width:100%;
height:100%;
}
.Account_NumList{
margin-top:68px;
min-height: 80px;
margin:0 30px;
border-bottom: 1px dashed #BBBBBB;
}
.Account_NumList table{
padding:30px 0 30px 160px;
font-size:16px;
}
.Account_NumList table td{
height:30px;
}
.AC_bankName{
color:#333333;
font-weight: bold;
margin-right:11px;
}
.AC_jeibang{
width:80px;
text-align: right;
color:#999999;
font-size:12px;
}
.bank_Count{
position: absolute;
display: inline-block;
width:14px;
height:14px;
background-color: #007EFF;
color:#fff;
border-radius: 50%;
right:25px;
line-height: 14px;
text-align: center;
top:20px;
}
.bind_Imidetly{
color: rgb(0, 126, 255);
cursor: pointer;
display: inline-block;
width: 70%;
font-size: 14px;
}
.addAccountTitle{
margin:0 0 20px 97px;
font-size:14px;
}
.Person_Content .FPF_s{
cursor: pointer;
}
.Person_Jobs {
display: inline-block;
padding: 5px 8px;
background-color: #007EFF;
color: #fff;
font-size: 12px;
border-radius: 8px;
margin-left: 10px;
}
.Person_Company {
color: #333333;
font-size: 14px;
display: inline-block;
}
.Person_Wrong {
color: #999999;
font-size: 12px;
text-align: right;
}
.Person_CenterList {
display: inline-block;
width: 72%;
font-size: 14px;
}
.Per_Jiantou i {
font-size: 12px;
color: #999999;
}
.Person_menuCked li:hover {
cursor: pointer;
background-color: #F1F8FF;
}
.P_cked {
background-color: #F1F8FF;
}
.Shouji_Top {
width: 100%;
height: 54px;
line-height: 54px;
padding: 0 30px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #F3F3F3;
}
.Shouji_Conteng {
margin: 70px 0 0 120px;
}
.phone_commonBotm {
width: 400px;
position: relative;
}
.phone_commonBotm .input {
width: 400px;
height: 44px;
outline: none;
padding-left: 17px;
border: none;
border: 1px solid #DCDFE6;
}
.phone_commonBotm .input::-webkit-input-placeholder {
color: #D3D6DC;
}
.phone_commonBotm .validatCode {
position: absolute;
right: 10px;
top: 16px;
height: 12px;
line-height: 12px;
padding-left: 10px;
color: #007EFF;
font-size: 12px;
letter-spacing: 2px;
border-left: 1px solid #DCDFE6;
}
.phone_bangding {
color: #333333;
margin: 0 0 29px 100px;
font-size: 16px;
}
.phone_bangding span {
margin-left: 21px;
}
.Shouji_Conteng .el-input .el-input__inner {
height: 44px;
}
.PI_qiehuan {
font-size: 14px;
color: #333333;
}
#demo #button { .PI_comMoshi {
position: absolute; color: #999999
right: 10px;
width: 80px;
height: 40px;
border:none;
cursor: pointer;
color:#fff;
border-radius: 5px;
background:#E95252;
} }
.PI_QiehuanImg {
width: 370px;
height: 174px;
margin-top: 18px;
cursor: pointer;
margin-left: 20px;
border: 4px solid #fff;
}
.ckedQieImg {
border: 4px solid #007EFF;
}
.PI_QiehuanImg img {
width: 100%;
height: 100%;
}
.Account_NumList {
margin-top: 68px;
min-height: 80px;
margin: 0 30px;
border-bottom: 1px dashed #BBBBBB;
}
.Account_NumList table {
padding: 30px 0 30px 160px;
font-size: 16px;
}
.Account_NumList table td {
height: 30px;
}
.AC_bankName {
color: #333333;
font-weight: bold;
margin-right: 11px;
}
.AC_jeibang {
width: 80px;
text-align: right;
color: #999999;
font-size: 12px;
}
.bank_Count {
position: absolute;
display: inline-block;
width: 14px;
height: 14px;
background-color: #007EFF;
color: #fff;
border-radius: 50%;
right: 25px;
line-height: 14px;
text-align: center;
top: 20px;
}
.bind_Imidetly {
color: rgb(0, 126, 255);
cursor: pointer;
display: inline-block;
width: 70%;
font-size: 14px;
}
.addAccountTitle {
margin: 0 0 20px 97px;
font-size: 14px;
}
.Person_Content .FPF_s {
cursor: pointer;
}
#demo #button {
position: absolute;
right: 10px;
width: 80px;
height: 40px;
border: none;
cursor: pointer;
color: #fff;
border-radius: 5px;
background: #E95252;
}
#demo .show { #demo .show {
width: 100px; width: 100px;
height: 100px; height: 100px;
...@@ -251,6 +291,7 @@ ...@@ -251,6 +291,7 @@
border-radius: 50%; border-radius: 50%;
border: 1px solid #d5d5d5; border: 1px solid #d5d5d5;
} }
#demo .picture { #demo .picture {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -259,6 +300,7 @@ ...@@ -259,6 +300,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
#demo .container { #demo .container {
z-index: 9999999; z-index: 9999999;
position: fixed; position: fixed;
...@@ -267,47 +309,32 @@ ...@@ -267,47 +309,32 @@
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background:rgba(0,0,0,0.4); background: rgba(0, 0, 0, 0.4);
} }
#demo #image { #demo #image {
max-width: 100%; max-width: 100%;
} }
.cropper-view-box,.cropper-face { .cropper-view-box,
.cropper-face {
border-radius: 50%; border-radius: 50%;
} }
/*!
* Cropper.js v1.0.0-rc
* https://github.com/fengyuanchen/cropperjs
*
* Copyright (c) 2017 Fengyuan Chen
* Released under the MIT license
*
* Date: 2017-03-25T12:02:21.062Z
*/
.cropper-container { .cropper-container {
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
position: relative; position: relative;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
direction: ltr; direction: ltr;
-ms-touch-action: none; -ms-touch-action: none;
touch-action: none touch-action: none
} }
.cropper-container img { .cropper-container img {
/* Avoid margin top issue (Occur only when margin-top <= -height) */
display: block; display: block;
min-width: 0 !important; min-width: 0 !important;
max-width: none !important; max-width: none !important;
...@@ -317,7 +344,7 @@ ...@@ -317,7 +344,7 @@
height: 100%; height: 100%;
image-orientation: 0deg image-orientation: 0deg
} }
.cropper-wrap-box, .cropper-wrap-box,
.cropper-canvas, .cropper-canvas,
.cropper-drag-box, .cropper-drag-box,
...@@ -329,19 +356,19 @@ ...@@ -329,19 +356,19 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.cropper-wrap-box { .cropper-wrap-box {
overflow: hidden; overflow: hidden;
} }
.cropper-drag-box { .cropper-drag-box {
opacity: 0; opacity: 0;
} }
.cropper-modal { .cropper-modal {
opacity: .5; opacity: .5;
} }
.cropper-view-box { .cropper-view-box {
display: block; display: block;
overflow: hidden; overflow: hidden;
...@@ -350,16 +377,14 @@ ...@@ -350,16 +377,14 @@
outline: 1px solid #e95252; outline: 1px solid #e95252;
outline-color: #e95252; outline-color: #e95252;
} }
.cropper-dashed { .cropper-dashed {
position: absolute; position: absolute;
display: block; display: block;
opacity: .5; opacity: .5;
border: 0 dashed #e95252 border: 0 dashed #e95252
} }
.cropper-dashed.dashed-h { .cropper-dashed.dashed-h {
top: 33.33333%; top: 33.33333%;
left: 0; left: 0;
...@@ -368,7 +393,7 @@ ...@@ -368,7 +393,7 @@
border-top-width: 1px; border-top-width: 1px;
border-bottom-width: 1px border-bottom-width: 1px
} }
.cropper-dashed.dashed-v { .cropper-dashed.dashed-v {
top: 0; top: 0;
left: 33.33333%; left: 33.33333%;
...@@ -377,141 +402,134 @@ ...@@ -377,141 +402,134 @@
border-right-width: 1px; border-right-width: 1px;
border-left-width: 1px border-left-width: 1px
} }
.cropper-center { .cropper-center {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
opacity: .75 opacity: .75
} }
.cropper-center:before, .cropper-center:before,
.cropper-center:after { .cropper-center:after {
position: absolute; position: absolute;
display: block; display: block;
content: ' '; content: ' ';
} }
.cropper-center:before { .cropper-center:before {
top: 0; top: 0;
left: -3px; left: -3px;
width: 7px; width: 7px;
height: 1px height: 1px
} }
.cropper-center:after { .cropper-center:after {
top: -3px; top: -3px;
left: 0; left: 0;
width: 1px; width: 1px;
height: 7px height: 7px
} }
.cropper-face, .cropper-face,
.cropper-line, .cropper-line,
.cropper-point { .cropper-point {
position: absolute; position: absolute;
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: .1; opacity: .1;
} }
.cropper-face { .cropper-face {
top: 0; top: 0;
left: 0; left: 0;
} }
.cropper-line.line-e { .cropper-line.line-e {
top: 0; top: 0;
right: -3px; right: -3px;
width: 5px; width: 5px;
cursor: e-resize cursor: e-resize
} }
.cropper-line.line-n { .cropper-line.line-n {
top: -3px; top: -3px;
left: 0; left: 0;
height: 5px; height: 5px;
cursor: n-resize cursor: n-resize
} }
.cropper-line.line-w { .cropper-line.line-w {
top: 0; top: 0;
left: -3px; left: -3px;
width: 5px; width: 5px;
cursor: w-resize cursor: w-resize
} }
.cropper-line.line-s { .cropper-line.line-s {
bottom: -3px; bottom: -3px;
left: 0; left: 0;
height: 5px; height: 5px;
cursor: s-resize cursor: s-resize
} }
.cropper-point { .cropper-point {
width: 5px; width: 5px;
height: 5px; height: 5px;
opacity: .75; opacity: .75;
} }
.cropper-point.point-e { .cropper-point.point-e {
top: 50%; top: 50%;
right: -3px; right: -3px;
margin-top: -3px; margin-top: -3px;
cursor: e-resize cursor: e-resize
} }
.cropper-point.point-n { .cropper-point.point-n {
top: -3px; top: -3px;
left: 50%; left: 50%;
margin-left: -3px; margin-left: -3px;
cursor: n-resize cursor: n-resize
} }
.cropper-point.point-w { .cropper-point.point-w {
top: 50%; top: 50%;
left: -3px; left: -3px;
margin-top: -3px; margin-top: -3px;
cursor: w-resize cursor: w-resize
} }
.cropper-point.point-s { .cropper-point.point-s {
bottom: -3px; bottom: -3px;
left: 50%; left: 50%;
margin-left: -3px; margin-left: -3px;
cursor: s-resize cursor: s-resize
} }
.cropper-point.point-ne { .cropper-point.point-ne {
top: -3px; top: -3px;
right: -3px; right: -3px;
cursor: ne-resize cursor: ne-resize
} }
.cropper-point.point-nw { .cropper-point.point-nw {
top: -3px; top: -3px;
left: -3px; left: -3px;
cursor: nw-resize cursor: nw-resize
} }
.cropper-point.point-sw { .cropper-point.point-sw {
bottom: -3px; bottom: -3px;
left: -3px; left: -3px;
cursor: sw-resize cursor: sw-resize
} }
.cropper-point.point-se { .cropper-point.point-se {
right: -3px; right: -3px;
bottom: -3px; bottom: -3px;
...@@ -520,32 +538,30 @@ ...@@ -520,32 +538,30 @@
cursor: se-resize; cursor: se-resize;
opacity: 1 opacity: 1
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.cropper-point.point-se { .cropper-point.point-se {
width: 15px; width: 15px;
height: 15px height: 15px
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.cropper-point.point-se { .cropper-point.point-se {
width: 10px; width: 10px;
height: 10px height: 10px
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.cropper-point.point-se { .cropper-point.point-se {
width: 5px; width: 5px;
height: 5px; height: 5px;
opacity: .75 opacity: .75
} }
} }
.cropper-point.point-se:before { .cropper-point.point-se:before {
position: absolute; position: absolute;
right: -50%; right: -50%;
...@@ -556,35 +572,37 @@ ...@@ -556,35 +572,37 @@
content: ' '; content: ' ';
opacity: 0; opacity: 0;
} }
.cropper-invisible { .cropper-invisible {
opacity: 0; opacity: 0;
} }
.cropper-hide { .cropper-hide {
position: absolute; position: absolute;
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
} }
.cropper-hidden { .cropper-hidden {
display: none !important; display: none !important;
} }
.cropper-move { .cropper-move {
cursor: move; cursor: move;
} }
.cropper-crop { .cropper-crop {
cursor: crosshair; cursor: crosshair;
} }
.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face, .cropper-disabled .cropper-face,
.cropper-disabled .cropper-line, .cropper-disabled .cropper-line,
.cropper-disabled .cropper-point { .cropper-disabled .cropper-point {
cursor: not-allowed; cursor: not-allowed;
} }
.a-upload { .a-upload {
padding: 4px 10px; padding: 4px 10px;
height: 20px; height: 20px;
...@@ -607,770 +625,853 @@ ...@@ -607,770 +625,853 @@
opacity: 0; opacity: 0;
filter: alpha(opacity=0); filter: alpha(opacity=0);
cursor: pointer cursor: pointer
} }
.cancel_Btnn{
background-color: #fff!important; .cancel_Btnn {
border:1px solid #e95252!important; background-color: #fff !important;
color:#e95252!important; border: 1px solid #e95252 !important;
} color: #e95252 !important;
}
</style> </style>
<template> <template>
<div class="Person_Content"> <div class="Person_Content">
<div class="PerSon_LeftNav"> <div class="PerSon_LeftNav">
<div class="PerSon_Edit"> <div class="PerSon_Edit">
<a href="javascript:;" class="a-upload"> <a href="javascript:;" class="a-upload">
<i class="iconfont icon-Edit"></i>&nbsp;&nbsp;修改头像</span> <i class="iconfont icon-Edit"></i>&nbsp;&nbsp;修改头像</span>
<input type="file" id="change" accept="image" @change="change"> <input type="file" id="change" accept="image" @change="change">
</a> </a>
</div> </div>
<div class="Person_Header"> <div class="Person_Header">
<img v-if="dataList.EmPhoto" :src="dataList.EmPhoto" alt/> <img v-if="dataList.EmPhoto" :src="dataList.EmPhoto" :onerror="defaultHeadImg" alt />
<img v-else src="../assets/img/default_head_img.jpg" alt/> <img v-else src="../assets/img/default_head_img.jpg" alt />
</div> </div>
<div class="Person_ComCenter" style="margin-bottom:14px;"> <div class="Person_ComCenter" style="margin-bottom:14px;">
{{dataList.EmName}} {{dataList.EmName}}
</div> </div>
<div class="Person_ComCenter"> <div class="Person_ComCenter">
<i class="iconfont icon-dianhua"></i>&nbsp;&nbsp;{{dataList.EmLoginMobile}} <i class="iconfont icon-dianhua"></i>&nbsp;&nbsp;{{dataList.EmLoginMobile}}
</div> </div>
<ul class="Person_MenuList"> <ul class="Person_MenuList">
<li> <li>
<span class="Person_Pname">部门</span> <span class="Person_Pname">部门</span>
<span class="Person_Company"> <span class="Person_Company">
{{u.BranchName}} {{u.BranchName}}
<span class="Person_Jobs">{{u.PostName}}</span> <span class="Person_Jobs">{{u.PostName}}</span>
</span> </span>
</li> </li>
<li> <li>
<span class="Person_Pname">用户名</span> <span class="Person_Pname">用户名</span>
<span class="Person_Company" style="width:43%;">{{dataList.EmName}}</span> <span class="Person_Company" style="width:43%;">{{dataList.EmName}}</span>
<span class="Person_Wrong">如有错误请联系行政</span> <span class="Person_Wrong">如有错误请联系行政</span>
</li> </li>
</ul> </ul>
<ul class="Person_MenuList Person_menuCked" style="margin-top:0;"> <ul class="Person_MenuList Person_menuCked" style="margin-top:0;">
<li @click="ckedNum=1,resetPhoneNum()" :class="{'P_cked':ckedNum==1}"> <li @click="ckedNum=1,resetPhoneNum()" :class="{'P_cked':ckedNum==1}">
<span class="Person_Pname">绑定手机</span> <span class="Person_Pname">绑定手机</span>
<span class="Person_CenterList"> <span class="Person_CenterList">
{{getBangding(dataList.EmLoginMobile)}} {{getBangding(dataList.EmLoginMobile)}}
</span> </span>
<span class="Per_Jiantou"> <span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i> <i class="iconfont icon-jiantouyou1"></i>
</span> </span>
</li> </li>
<li @click="ckedNum=2" :class="{'P_cked':ckedNum==2}"> <li @click="ckedNum=2" :class="{'P_cked':ckedNum==2}">
<span class="Person_Pname">密码</span> <span class="Person_Pname">密码</span>
<span class="Person_CenterList"> <span class="Person_CenterList">
****** ******
</span> </span>
<span class="Per_Jiantou"> <span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i> <i class="iconfont icon-jiantouyou1"></i>
</span> </span>
</li> </li>
<li @click="ckedNum=3" :class="{'P_cked':ckedNum==3}"> <li @click="ckedNum=3" :class="{'P_cked':ckedNum==3}">
<span class="Person_Pname" style="position:relative;"> <span class="Person_Pname" style="position:relative;">
银行账户 银行账户
<span class="bank_Count">{{AccCount}}</span> <span class="bank_Count">{{AccCount}}</span>
</span> </span>
<span v-if="AccCount==0" class="bind_Imidetly"> <span v-if="AccCount==0" class="bind_Imidetly">
立即绑定 立即绑定
</span> </span>
<span v-else class="Person_CenterList"> <span v-else class="Person_CenterList">
{{AccDataList.BankName}} {{AccDataList.BankName}}
<span style="margin-left:10px;">{{getBankNum(AccDataList.CardNum)}}</span> <span style="margin-left:10px;">{{getBankNum(AccDataList.CardNum)}}</span>
</span> </span>
<span class="Per_Jiantou"> <span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i> <i class="iconfont icon-jiantouyou1"></i>
</span> </span>
</li> </li>
<li @click="ckedNum=4" :class="{'P_cked':ckedNum==4}"> <li @click="ckedNum=4" :class="{'P_cked':ckedNum==4}">
<span class="Person_Pname">页面切换方式</span> <span class="Person_Pname">页面切换方式</span>
<span class="Person_CenterList" v-if="openMode==1"> <span class="Person_CenterList" v-if="openMode==1">
单页面多标签模式 单页面多标签模式
</span> </span>
<span class="Person_CenterList" v-else> <span class="Person_CenterList" v-else>
多页面单标签模式 多页面单标签模式
</span> </span>
<span class="Per_Jiantou"> <span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i> <i class="iconfont icon-jiantouyou1"></i>
</span> </span>
</li> </li>
</ul> <li @click="ckedNum=5" :class="{'P_cked':ckedNum==5}">
</div> <span class="Person_Pname">绑定商城、微信</span>
<div class="Person_Right"> <span class="Person_CenterList" v-if="dataList.MallUserId>0">
<!-- 绑定手机号 --> 已绑定微信/店铺
<div class="Per_Shouji" v-if="ckedNum==1"> </span>
<div class="Shouji_Top">绑定手机</div> <span class="Person_CenterList" v-else>
<div class="Shouji_Conteng"> 未绑定微信
<div class="phone_bangding" v-if="dataList.EmLoginMobile"> </span>
已绑定手机号 <span>{{getBangding(dataList.EmLoginMobile)}}</span> <span class="Per_Jiantou">
</div> <i class="iconfont icon-jiantouyou1"></i>
<el-form :model="phoneMsg" ref="phoneMsg" label-position="right" :rules="rules" label-width="100px"> </span>
<el-form-item label="新手机号" prop="LoginMobile" style="margin-bottom:40px;"> </li>
<div class="phone_commonBotm"> </ul>
<input class="input" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="phoneMsg.LoginMobile" type="text" placeholder="11位数字"/> </div>
<div class="validatCode"> <div class="Person_Right">
<span v-show="showCode" @click="getCode" class="FPF_s">发送验证码</span> <!-- 绑定手机号 -->
<span v-show="!showCode" class="count FPF_s">{{count}}s重新获取</span> <div class="Per_Shouji" v-if="ckedNum==1">
</div> <div class="Shouji_Top">绑定手机</div>
</div> <div class="Shouji_Conteng">
</el-form-item> <div class="phone_bangding" v-if="dataList.EmLoginMobile">
<el-form-item label="验证码" prop="code"> 已绑定手机号 <span>{{getBangding(dataList.EmLoginMobile)}}</span>
<el-input v-model="phoneMsg.code" class="w150" placeholder="4位验证码" maxlength="4"></el-input> </div>
</el-form-item> <el-form :model="phoneMsg" ref="phoneMsg" label-position="right" :rules="rules" label-width="100px">
</el-form> <el-form-item label="新手机号" prop="LoginMobile" style="margin-bottom:40px;">
<button class="normalBtn" style="margin:30px 0 0 100px;" @click="submitForm1('phoneMsg')">确定</button> <div class="phone_commonBotm">
</div> <input class="input" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')"
</div> v-model="phoneMsg.LoginMobile" type="text" placeholder="11位数字" />
<!-- 修改密码 --> <div class="validatCode">
<div class="Per_Shouji" v-if="ckedNum==2"> <span v-show="showCode" @click="getCode" class="FPF_s">发送验证码</span>
<div class="Shouji_Top">密码</div> <span v-show="!showCode" class="count FPF_s">{{count}}s重新获取</span>
<div class="Shouji_Conteng">
<el-form :model="passWordMsg" ref="passWordMsg" label-position="right" :rules="rules2" label-width="100px">
<el-form-item v-if="sureOldPwd" label="旧密码" prop="OldPwd" style="margin-bottom:30px;">
<el-input type="password" class="w400" v-model="passWordMsg.OldPwd" maxlength="15">
<i slot="suffix" title="显示密码" @click="changePassOld('show')" style="cursor:pointer;"
class="el-input__icon iconfont icon-yincang"></i>
</el-input>
</el-form-item>
<el-form-item v-else label="旧密码" prop="OldPwd" style="margin-bottom:30px;">
<el-input type="text" class="w400" v-model="passWordMsg.OldPwd" maxlength="15">
<i slot="suffix" title="隐藏密码" @click="changePassOld('hide')" style="cursor:pointer;"
class="el-input__icon iconfont icon-xianshi"></i>
</el-input>
</el-form-item>
<el-form-item v-if="visible" label="新密码" style="margin-bottom:30px;" prop="Pwd">
<el-input type="password" class="w400" v-model="passWordMsg.Pwd" maxlength="15" placeholder="请输入新密码">
<i slot="suffix" title="显示密码" @click="changePass('show')" style="cursor:pointer;"
class="el-input__icon iconfont icon-yincang"></i>
</el-input>
</el-form-item>
<el-form-item v-else label="新密码" style="margin-bottom:30px;" prop="Pwd">
<el-input type="text" class="w400" v-model="passWordMsg.Pwd" maxlength="15" placeholder="请输入新密码">
<i slot="suffix" title="隐藏密码" @click="changePass('hide')" style="cursor:pointer;"
class="el-input__icon iconfont icon-xianshi"></i>
</el-input>
</el-form-item>
<el-form-item v-if="SureVisible" label="确认密码" style="margin-bottom:30px;" prop="surePassword">
<el-input type="password" class="w400" v-model="passWordMsg.surePassword" maxlength="15" placeholder="请输入新密码">
<i slot="suffix" title="显示密码" @click="changePass2('show')" style="cursor:pointer;"
class="el-input__icon iconfont icon-yincang"></i>
</el-input>
</el-form-item>
<el-form-item v-else label="确认密码" style="margin-bottom:30px;" prop="surePassword">
<el-input type="text" class="w400" v-model="passWordMsg.surePassword" maxlength="15" placeholder="请输入新密码">
<i slot="suffix" title="隐藏密码" @click="changePass2('hide')" style="cursor:pointer;"
class="el-input__icon iconfont icon-xianshi"></i>
</el-input>
</el-form-item>
</el-form>
<button class="normalBtn" style="margin:30px 0 0 100px;" @click="submitForm2('passWordMsg')">确定</button>
</div>
</div>
<!-- 银行账户 -->
<div class="Per_Shouji" v-if="ckedNum==3">
<div class="Shouji_Top">银行账户</div>
<div class="Account_NumList" v-if="AcountData.length>0">
<table>
<tr v-for="(item,index) in AcountData">
<td style="width:100px">
<template v-if="index==0">银行账户</template>
</td>
<td>
<span class="AC_bankName">{{item.BankName}}</span><span>{{getBankNum(item.CardNum)}}</span>
</td>
<td class="AC_jeibang">
<span style="cursor:pointer;color:#007EFF;" v-if='item.Status==0' @click="deleteData(item.ID)">冻结</span>
<span style="cursor:pointer;color:#007EFF;" v-if='item.Status==1' @click="deleteData(item.ID)">启用</span>
</td>
</tr>
</table>
</div>
<div class="Shouji_Conteng">
<div class="addAccountTitle" v-if="AcountData.length>0">添加新银行账户</div>
<el-form :model="addAccountMsg" ref="addAccountMsg" label-position="right" :rules="rules3" label-width="100px">
<el-form-item label="账户分类" prop="oldPassword" style="margin-bottom:30px;">
<el-select v-model='addAccountMsg.AccountClassify' class="w400" placeholder="请选择" @change='changeTitle'>
<el-option label='银行' value='2' key='2'></el-option>
<el-option label='虚拟账户' value='3' key='3'></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="addAccountMsg.AccountClassify==2" label="所属机构" prop="BankName">
<el-input type="text" class="w400" v-model="addAccountMsg.BankName" placeholder="例如：中国建行"></el-input>
</el-form-item>
<el-form-item v-if='addAccountMsg.AccountClassify!=3' :label="nameA" prop="OpenBankName">
<el-input type="text" class="w400" v-model="addAccountMsg.OpenBankName" placeholder="例如：锦江支行"></el-input>
</el-form-item>
<el-form-item v-if='addAccountMsg.AccountClassify!=3' :label="nameB" prop="AccountHolder">
<el-input type="text" class="w400" v-model="addAccountMsg.AccountHolder"></el-input>
</el-form-item>
<el-form-item :label="nameC" prop="CardNum">
<el-input type="text" class="w400" v-model="addAccountMsg.CardNum" @keyup.native="checkInteger(addAccountMsg,'CardNum'),resetAccountNum(addAccountMsg.CardNum)"></el-input>
</el-form-item>
<el-form-item :label="nameD" prop="AccountAlias" >
<el-input type="text" class="w400" v-model="addAccountMsg.AccountAlias"></el-input>
</el-form-item>
</el-form>
<button class="normalBtn" style="margin:30px 0 0 100px;" @click="submitForm3('addAccountMsg')">确定</button>
</div>
</div>
<!-- 页面切换方式 -->
<div class="Per_Shouji" v-if="ckedNum==4">
<div class="Shouji_Top">页面切换方式</div>
<div class="Shouji_Conteng">
<div class="phone_bangding" style="margin-left:25px;">
当前切换方式
<span style="font-weight:bold;" v-if="radio==1">单页面多标签模式</span>
<span style="font-weight:bold;" v-else>多页面单标签模式</span>
</div>
<div class="PI_qiehuan" style="margin-bottom:50px;">
<el-radio v-model="radio" label="1">单页面多标签模式<span class="PI_comMoshi">（此模式适合电脑性能高的用户）</span>
<div class="PI_QiehuanImg" :class="{'ckedQieImg':radio==1}" @click="radio=1">
<img src='../assets/img/chosen_one.png' />
</div>
</el-radio>
</div>
<div class="PI_qiehuan">
<el-radio v-model="radio" label="2">多页面单标签模式<span class="PI_comMoshi">（此模式适合电脑性能较低的用户）</span>
<div class="PI_QiehuanImg" :class="{'ckedQieImg':radio==2}" @click="radio=2">
<img src='../assets/img/chosen_two.png' />
</div>
</el-radio>
</div>
<button class="normalBtn" style="margin:30px 0 20px 20px;" @click="SureType">确定</button>
</div> </div>
</div>
</div> </el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model="phoneMsg.code" class="w150" placeholder="4位验证码" maxlength="4"></el-input>
</el-form-item>
</el-form>
<button class="normalBtn" style="margin:30px 0 0 100px;" @click="submitForm1('phoneMsg')">确定</button>
</div> </div>
<div id="demo"> </div>
<div class="container" v-show="panel"> <!-- 修改密码 -->
<div style="width:400px;height:400px;margin:5% 0 0 36%;position:relative;background-color:#fff;"> <div class="Per_Shouji" v-if="ckedNum==2">
<img id="image" :src="url" alt="Picture"> <div class="Shouji_Top">密码</div>
<button type="button" class="cancel_Btnn" id="button" style="bottom:-50px;right:105px;" @click="CancelUpImg">取消</button> <div class="Shouji_Conteng">
<button type="button" id="button" style="bottom:-50px;" @click="crop">确定</button> <el-form :model="passWordMsg" ref="passWordMsg" label-position="right" :rules="rules2" label-width="100px">
</div> <el-form-item v-if="sureOldPwd" label="旧密码" prop="OldPwd" style="margin-bottom:30px;">
</div> <el-input type="password" class="w400" v-model="passWordMsg.OldPwd" maxlength="15">
<div style="padding:20px;display:none;"> <i slot="suffix" title="显示密码" @click="changePassOld('show')" style="cursor:pointer;"
<div class="show"> class="el-input__icon iconfont icon-yincang"></i>
<div class="picture" :style="'backgroundImage:url('+headerImage+')'"> </el-input>
</div> </el-form-item>
</div> <el-form-item v-else label="旧密码" prop="OldPwd" style="margin-bottom:30px;">
<div style="margin-top:20px;"> <el-input type="text" class="w400" v-model="passWordMsg.OldPwd" maxlength="15">
<i slot="suffix" title="隐藏密码" @click="changePassOld('hide')" style="cursor:pointer;"
</div> class="el-input__icon iconfont icon-xianshi"></i>
</div> </el-input>
</el-form-item>
<el-form-item v-if="visible" label="新密码" style="margin-bottom:30px;" prop="Pwd">
<el-input type="password" class="w400" v-model="passWordMsg.Pwd" maxlength="15" placeholder="请输入新密码">
<i slot="suffix" title="显示密码" @click="changePass('show')" style="cursor:pointer;"
class="el-input__icon iconfont icon-yincang"></i>
</el-input>
</el-form-item>
<el-form-item v-else label="新密码" style="margin-bottom:30px;" prop="Pwd">
<el-input type="text" class="w400" v-model="passWordMsg.Pwd" maxlength="15" placeholder="请输入新密码">
<i slot="suffix" title="隐藏密码" @click="changePass('hide')" style="cursor:pointer;"
class="el-input__icon iconfont icon-xianshi"></i>
</el-input>
</el-form-item>
<el-form-item v-if="SureVisible" label="确认密码" style="margin-bottom:30px;" prop="surePassword">
<el-input type="password" class="w400" v-model="passWordMsg.surePassword" maxlength="15"
placeholder="请输入新密码">
<i slot="suffix" title="显示密码" @click="changePass2('show')" style="cursor:pointer;"
class="el-input__icon iconfont icon-yincang"></i>
</el-input>
</el-form-item>
<el-form-item v-else label="确认密码" style="margin-bottom:30px;" prop="surePassword">
<el-input type="text" class="w400" v-model="passWordMsg.surePassword" maxlength="15" placeholder="请输入新密码">
<i slot="suffix" title="隐藏密码" @click="changePass2('hide')" style="cursor:pointer;"
class="el-input__icon iconfont icon-xianshi"></i>
</el-input>
</el-form-item>
</el-form>
<button class="normalBtn" style="margin:30px 0 0 100px;" @click="submitForm2('passWordMsg')">确定</button>
</div> </div>
</div>
<!-- 银行账户 -->
<div class="Per_Shouji" v-if="ckedNum==3">
<div class="Shouji_Top">银行账户</div>
<div class="Account_NumList" v-if="AcountData.length>0">
<table>
<tr v-for="(item,index) in AcountData">
<td style="width:100px">
<template v-if="index==0">银行账户</template>
</td>
<td>
<span class="AC_bankName">{{item.BankName}}</span><span>{{getBankNum(item.CardNum)}}</span>
</td>
<td class="AC_jeibang">
<span style="cursor:pointer;color:#007EFF;" v-if='item.Status==0' @click="deleteData(item.ID)">冻结</span>
<span style="cursor:pointer;color:#007EFF;" v-if='item.Status==1' @click="deleteData(item.ID)">启用</span>
</td>
</tr>
</table>
</div>
<div class="Shouji_Conteng">
<div class="addAccountTitle" v-if="AcountData.length>0">添加新银行账户</div>
<el-form :model="addAccountMsg" ref="addAccountMsg" label-position="right" :rules="rules3"
label-width="100px">
<el-form-item label="账户分类" prop="oldPassword" style="margin-bottom:30px;">
<el-select v-model='addAccountMsg.AccountClassify' class="w400" placeholder="请选择" @change='changeTitle'>
<el-option label='银行' value='2' key='2'></el-option>
<el-option label='虚拟账户' value='3' key='3'></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="addAccountMsg.AccountClassify==2" label="所属机构" prop="BankName">
<el-input type="text" class="w400" v-model="addAccountMsg.BankName" placeholder="例如：中国建行"></el-input>
</el-form-item>
<el-form-item v-if='addAccountMsg.AccountClassify!=3' :label="nameA" prop="OpenBankName">
<el-input type="text" class="w400" v-model="addAccountMsg.OpenBankName" placeholder="例如：锦江支行"></el-input>
</el-form-item>
<el-form-item v-if='addAccountMsg.AccountClassify!=3' :label="nameB" prop="AccountHolder">
<el-input type="text" class="w400" v-model="addAccountMsg.AccountHolder"></el-input>
</el-form-item>
<el-form-item :label="nameC" prop="CardNum">
<el-input type="text" class="w400" v-model="addAccountMsg.CardNum"
@keyup.native="checkInteger(addAccountMsg,'CardNum'),resetAccountNum(addAccountMsg.CardNum)"></el-input>
</el-form-item>
<el-form-item :label="nameD" prop="AccountAlias">
<el-input type="text" class="w400" v-model="addAccountMsg.AccountAlias"></el-input>
</el-form-item>
</el-form>
<button class="normalBtn" style="margin:30px 0 0 100px;" @click="submitForm3('addAccountMsg')">确定</button>
</div>
</div>
<!-- 页面切换方式 -->
<div class="Per_Shouji" v-if="ckedNum==4">
<div class="Shouji_Top">页面切换方式</div>
<div class="Shouji_Conteng">
<div class="phone_bangding" style="margin-left:25px;">
当前切换方式
<span style="font-weight:bold;" v-if="radio==1">单页面多标签模式</span>
<span style="font-weight:bold;" v-else>多页面单标签模式</span>
</div>
<div class="PI_qiehuan" style="margin-bottom:50px;">
<el-radio v-model="radio" label="1">单页面多标签模式<span class="PI_comMoshi">（此模式适合电脑性能高的用户）</span>
<div class="PI_QiehuanImg" :class="{'ckedQieImg':radio==1}" @click="radio=1">
<img src='../assets/img/chosen_one.png' />
</div>
</el-radio>
</div>
<div class="PI_qiehuan">
<el-radio v-model="radio" label="2">多页面单标签模式<span class="PI_comMoshi">（此模式适合电脑性能较低的用户）</span>
<div class="PI_QiehuanImg" :class="{'ckedQieImg':radio==2}" @click="radio=2">
<img src='../assets/img/chosen_two.png' />
</div>
</el-radio>
</div>
<button class="normalBtn" style="margin:30px 0 20px 20px;" @click="SureType">确定</button>
</div>
</div>
<!-- 绑定商城微信和商城 -->
<div class="Per_Shouji" v-if="ckedNum==5">
<div class="Shouji_Top">赞羊商城微信绑定</div>
<div class="Shouji_Conteng">
<el-form label-position="right" label-width="100px">
<el-form-item label="微信" style="margin-bottom:30px;">
<el-select v-model="mallUserId" filterable remote reserve-keyword placeholder="请输入微信昵称"
:remote-method="getWechatData" @change="weChatChange">
<el-option v-for="wItem in weChatData" :key="wItem.Id" :label="wItem.Name" :value="wItem.Id">
<span style="float: left">{{ wItem.Name }}
<template v-if="wItem.ShopId>0">
<span style="color:red;">【{{ wItem.ShopName }}】</span>
</template>
</span>
</el-option>
</el-select>
</el-form-item>
</el-form>
<button class="normalBtn" style="margin:30px 0 0 100px;" @click="saveWechat()">确定</button>
</div>
</div>
</div>
<div id="demo">
<div class="container" v-show="panel">
<div style="width:400px;height:400px;margin:5% 0 0 36%;position:relative;background-color:#fff;">
<img id="image" :src="url" alt="Picture">
<button type="button" class="cancel_Btnn" id="button" style="bottom:-50px;right:105px;"
@click="CancelUpImg">取消</button>
<button type="button" id="button" style="bottom:-50px;" @click="crop">确定</button>
</div>
</div>
<div style="padding:20px;display:none;">
<div class="show">
<div class="picture" :style="'backgroundImage:url('+headerImage+')'">
</div>
</div>
<div style="margin-top:20px;">
</div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import Cropper from "cropperjs" import Cropper from "cropperjs"
export default { export default {
data() { data() {
return { return {
defaultHeadImg: 'this.src="' + require("../assets/img/default_head_img.jpg") + '"',
//页面切换方式 //页面切换方式
openMode:0, openMode: 0,
u:{}, u: {},
outerVisible:false, outerVisible: false,
nameA:'账户名称', nameA: '账户名称',
nameB:'开户人', nameB: '开户人',
nameC:'卡号', nameC: '卡号',
nameD:'账户别名', nameD: '账户别名',
//切换选项卡 //切换选项卡
ckedNum:1, ckedNum: 1,
showCode:true, showCode: true,
count: "", count: "",
//验证码参数 //验证码参数
phoneMsg:{ phoneMsg: {
LoginMobile:'', LoginMobile: '',
code:'' code: ''
}, },
//修改密码 //修改密码
passWordMsg:{ passWordMsg: {
OldPwd:'', OldPwd: '',
Pwd:'', Pwd: '',
surePassword:'' surePassword: ''
}, },
sureOldPwd:true, sureOldPwd: true,
visible:true, visible: true,
SureVisible:true, SureVisible: true,
//切换方式 //切换方式
radio:'1', radio: '1',
msg: { msg: {},
rules: {
}, LoginMobile: [{
rules:{ required: true,
LoginMobile: [ message: '请输入新手机号',
{ required: true, message: '请输入新手机号', trigger: 'blur' } trigger: 'blur'
], }],
code: [ code: [{
{ required: true, message: '请输入验证码', trigger: 'blur' } required: true,
] message: '请输入验证码',
trigger: 'blur'
}]
}, },
rules2:{ rules2: {
OldPwd: [ OldPwd: [{
{ required: true, message: '请输入旧密码', trigger: 'blur' } required: true,
], message: '请输入旧密码',
Pwd: [ trigger: 'blur'
{ required: true, message: '请输入新密码', trigger: 'blur' } }],
], Pwd: [{
surePassword: [ required: true,
{ required: true, message: '请输入确认密码', trigger: 'blur' } message: '请输入新密码',
] trigger: 'blur'
}],
surePassword: [{
required: true,
message: '请输入确认密码',
trigger: 'blur'
}]
}, },
rules3:{ rules3: {
BankName:[{ required: true, message: '请填写银行', trigger: 'blur' }], BankName: [{
AccountHolder:[{ required: true, message: '请填写开户人', trigger: 'blur' }], required: true,
OpenBankName:[{ required: true, message: '请填写账户名称', trigger: 'blur' }], message: '请填写银行',
CardNum:[{ required: true, message: '请填写卡号', trigger: 'blur' }], trigger: 'blur'
AccountAlias:[{ required: true, message: '请填写账户别名', trigger: 'blur' }], }],
AccountHolder: [{
required: true,
message: '请填写开户人',
trigger: 'blur'
}],
OpenBankName: [{
required: true,
message: '请填写账户名称',
trigger: 'blur'
}],
CardNum: [{
required: true,
message: '请填写卡号',
trigger: 'blur'
}],
AccountAlias: [{
required: true,
message: '请填写账户别名',
trigger: 'blur'
}],
}, },
//获取银行账户参数 //获取银行账户参数
AccountMsg:{ AccountMsg: {
BranchId:'-1', BranchId: '-1',
EmpId:'-1', EmpId: '-1',
BankId:'', BankId: '',
AccountHolder:'', AccountHolder: '',
AccountAlias:'', AccountAlias: '',
pageIndex:1, pageIndex: 1,
pageSize:15, pageSize: 15,
Type:9, Type: 9,
}, },
AccDataList:{}, AccDataList: {},
//银行所有账户 //银行所有账户
AcountData:[], AcountData: [],
AccCount:0, AccCount: 0,
//添加银行账户参数 //添加银行账户参数
addAccountMsg:{ addAccountMsg: {
Id:'0', Id: '0',
ObjID:'-1', ObjID: '-1',
BankId:'-1', BankId: '-1',
OpenBankName:'', OpenBankName: '',
BankName: '', BankName: '',
AccountHolder:'', AccountHolder: '',
CardNum:'', CardNum: '',
AccountAlias:'', AccountAlias: '',
AccountType:'1', AccountType: '1',
AccountClassify:'2', AccountClassify: '2',
Type:'9' Type: '9'
}, },
dataList:{}, dataList: {},
headerImage: '',
picValue: '',
headerImage:'', cropper: '',
picValue:'', croppable: false,
cropper:'', panel: false,
croppable:false, url: '',
panel:false, //暂时用户Id
url:'' mallUserId: "",
//赞羊商城对象
weChatMsg: {
MallUserId: 0, //赞羊商城用户Id
MallSmallShopsId: 0, //赞羊用户商城Id
},
weChatData: [],
}; };
}, },
methods: { methods: {
//绑定手机 //绑定手机
submitForm1(formName) { submitForm1(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
this.doBind(); this.doBind();
} else {
}
});
},
//修改密码
submitForm2(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
this.changePwd();
} else {
}
});
},
//新增银行账户
submitForm3(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
this.addAccountNum();
} else {
}
});
},
//新增银行账户
addAccountNum(){
this.addAccountMsg.ObjID=this.dataList.EmployeeId;
if(this.addAccountMsg.AccountClassify!='3'){
if(this.addAccountMsg.OpenBankName==''){
this.Error('请填写'+this.nameA)
return
}
if(this.addAccountMsg.AccountHolder==''){
this.Error('请填写'+this.nameB)
return
}
}
if(this.addAccountMsg.CardNum==''){
this.Error('请填写'+this.nameC)
return
}
if(this.addAccountMsg.AccountAlias==''){
this.Error('请填写'+this.nameD)
return
}
this.addAccountMsg.CardNum=this.addAccountMsg.CardNum.replace(/\s+/g,"");
this.apipost("admin_post_SetEmpBankAccount",this.addAccountMsg,res=>{
if(res.data.resultCode==1)
{
this.Success(res.data.message)
this.getList()
this.resetAccountMsg();
}else{
this.Error(res.data.message)
}
},err=>{})
},
//重置信息
resetAccountMsg(){
this.addAccountMsg.OpenBankName='';
this.addAccountMsg.BankName='';
this.addAccountMsg.AccountHolder='';
this.addAccountMsg.CardNum='';
this.addAccountMsg.AccountAlias='';
},
//修改密码方法
changePwd(){
if(this.passWordMsg.Pwd!=this.passWordMsg.surePassword){
this.Error('新密码和确认密码不一致');
return;
}
this.apipost('admin_get_MySelfResetPwd',this.passWordMsg,res=>{
if(res.data.resultCode==1){
this.Success(res.data.message);
this.passWordMsg.OldPwd='';
this.passWordMsg.Pwd='';
this.passWordMsg.surePassword='';
// //修改成功后退出登录
setTimeout(()=>{
this.$store.dispatch("logout")
localStorage.removeItem("userInfo");
localStorage.removeItem("previousPathInfo");
location.href='/'
}, 1000);
}else{
this.Error(res.data.message);
}
},err=>{})
},
//获取银行账户信息
getAccount(){
this.AccountMsg.EmpId=this.dataList.EmployeeId;
this.apipost("admin_get_GetEmpBankAccountPageList", this.AccountMsg, res => {
if(res.data.resultCode==1){
this.AcountData=res.data.data.pageData;
this.AccDataList=res.data.data.pageData[0];
this.AccCount=res.data.data.count;
}else{
this.Error(res.data.message);
}
}, err => {})
},
//获取验证码
getCode() {
var phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
//电话
var phone = this.phoneMsg.LoginMobile.replace(/^\s+|\s+$/gm, "");
if (!phoneReg.test(phone)) {
this.nameErrorMsg = "请输入有效的手机号码！";
return false;
}
const TIME_COUNT = 60;
this.phoneMsg.code = "";
if (!this.timer) {
this.count = TIME_COUNT;
this.showCode = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.showCode = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
let msg = {
mobileNumber: this.phoneMsg.LoginMobile,
mobileCodeType: 1
};
this.apipost("user_get_moblieNumber_code", msg, res => {
if (res.data.resultCode == 1) {
} else {
this.$notify.error({
title: "提示",
customClass: "msgTips",
message: res.data.message,
showClose: false,
duration: 3000
});
}
});
},
//绑定手机号
doBind() {
if (this.phoneMsg.LoginMobile == "") {
this.Error('请输入手机号');
return;
} else if (this.phoneMsg.code == "") {
this.Error('请输入验证码');
return;
}
this.apipost("admin_get_MySelfResetLoginMobile", this.phoneMsg, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message);
this.getList();
this.phoneMsg.LoginMobile='';
this.phoneMsg.code='';
} else {
this.Error(res.data.message);
}
});
},
//重置手机
resetPhoneNum(){
this.phoneMsg.LoginMobile='';
this.phoneMsg.code='';
},
changePassOld(value){
this.sureOldPwd = !(value === 'show');
},
changePass(value) {
this.visible = !(value === 'show');
}, //判断渲染，true:暗文显示，false:明文显示
changePass2(value){
this.SureVisible = !(value === 'show');
},
//获取用户信息
getList(){
let userInfo = this.getLocalStorage();
let msg={
Id:userInfo.EmployeeId
}
this.apipost('admin_get_EmployeeGet',msg,res=>{
if(res.data.resultCode==1){
this.dataList=res.data.data;
this.getAccount();
}else{
this.Error(res.data.message);
}
},err=>{})
},
//过滤电话号码
getBangding(val){
if(val){
return val.substr(0, 3) + "****" + val.substr(-4,4)
} }
}, });
//过滤银行卡号 },
getBankNum(bankNumber){ //修改密码
if(bankNumber){ submitForm2(formName) {
return bankNumber.substr(0,4)+"********"+bankNumber.substr(-4); this.$refs[formName].validate((valid) => {
if (valid) {
this.changePwd();
} }
}, });
//冻结启用银行账户 },
deleteData(id){ //新增银行账户
this.$confirm('确认启用/冻结该账户信息?', '提示', { submitForm3(formName) {
confirmButtonText: '确定', this.$refs[formName].validate((valid) => {
cancelButtonText: '取消', if (valid) {
type: 'warning' this.addAccountNum();
}).then(() => { }
this.apipost('admin_post_DelEmpBankAccount', { });
BAId:id },
}, res => { //新增银行账户
if(res.data.resultCode == 1) { addAccountNum() {
this.Success('保存成功！') this.addAccountMsg.ObjID = this.dataList.EmployeeId;
this.getList(); if (this.addAccountMsg.AccountClassify != '3') {
} if (this.addAccountMsg.OpenBankName == '') {
}, err => {}) this.Error('请填写' + this.nameA)
return;
}).catch(() => { }
this.$message.info('已取消！') if (this.addAccountMsg.AccountHolder == '') {
}); this.Error('请填写' + this.nameB)
}, return;
changeTitle(){ }
if(this.addAccountMsg.AccountClassify==1){ }
this.nameA='平台名称' if (this.addAccountMsg.CardNum == '') {
this.nameB='用户名称' this.Error('请填写' + this.nameC)
this.nameC='平台账户' return;
this.nameD='账户别名' }
this.addAccountMsg.AccountType='1' if (this.addAccountMsg.AccountAlias == '') {
}else if(this.addAccountMsg.AccountClassify==2){ this.Error('请填写' + this.nameD)
this.nameA='账户名称' return;
this.nameB='开户人' }
this.nameC='卡号' this.addAccountMsg.CardNum = this.addAccountMsg.CardNum.replace(/\s+/g, "");
this.nameD='账户别名' this.apipost("admin_post_SetEmpBankAccount", this.addAccountMsg, res => {
}else{ if (res.data.resultCode == 1) {
this.nameA='平台名称' this.Success(res.data.message)
this.nameB='用户名称' this.getList()
this.nameC='平台账户' this.resetAccountMsg();
this.nameD='账户别名' } else {
} this.Error(res.data.message)
}, }
//确认方式 }, err => {})
SureType(){ },
localStorage.openMode=this.radio; //重置信息
window.location.reload() resetAccountMsg() {
}, this.addAccountMsg.OpenBankName = '';
//重置卡号 this.addAccountMsg.BankName = '';
resetAccountNum(val){ this.addAccountMsg.AccountHolder = '';
this.addAccountMsg.CardNum=this.addAccountMsg.CardNum.replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1 "); this.addAccountMsg.CardNum = '';
}, this.addAccountMsg.AccountAlias = '';
getObjectURL (file) { },
var url = null ; //修改密码方法
if (window.createObjectURL!=undefined) { // basic changePwd() {
url = window.createObjectURL(file) ; if (this.passWordMsg.Pwd != this.passWordMsg.surePassword) {
} else if (window.URL!=undefined) { // mozilla(firefox) this.Error('新密码和确认密码不一致');
url = window.URL.createObjectURL(file) ; return;
} else if (window.webkitURL!=undefined) { // webkit or chrome }
url = window.webkitURL.createObjectURL(file) ; this.apipost('admin_get_MySelfResetPwd', this.passWordMsg, res => {
} if (res.data.resultCode == 1) {
return url ; this.Success(res.data.message);
}, this.passWordMsg.OldPwd = '';
change (e) { this.passWordMsg.Pwd = '';
let files = e.target.files || e.dataTransfer.files; this.passWordMsg.surePassword = '';
if (!files.length) return; // //修改成功后退出登录
this.panel = true; setTimeout(() => {
this.outerVisible=true; this.$store.dispatch("logout")
this.picValue = files[0]; localStorage.removeItem("userInfo");
localStorage.removeItem("previousPathInfo");
this.url = this.getObjectURL(this.picValue); location.href = '/'
//每次替换图片要重新得到新的url }, 1000);
if(this.cropper){ } else {
this.cropper.replace(this.url); this.Error(res.data.message);
} }
this.panel = true; }, err => {})
},
}, //获取银行账户信息
crop () { getAccount() {
this.panel = false; this.AccountMsg.EmpId = this.dataList.EmployeeId;
var croppedCanvas; this.apipost("admin_get_GetEmpBankAccountPageList", this.AccountMsg, res => {
var roundedCanvas; if (res.data.resultCode == 1) {
this.AcountData = res.data.data.pageData;
if (!this.croppable) { this.AccDataList = res.data.data.pageData[0];
return; this.AccCount = res.data.data.count;
} } else {
// Crop this.Error(res.data.message);
croppedCanvas = this.cropper.getCroppedCanvas(); }
// Round }, err => {})
roundedCanvas = this.getRoundedCanvas(croppedCanvas); },
//获取验证码
this.headerImage = roundedCanvas.toDataURL(); getCode() {
let that = this; var phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
let blob = that.base64ToBlob(this.headerImage); //电话
let newArr = []; var phone = this.phoneMsg.LoginMobile.replace(/^\s+|\s+$/gm, "");
newArr.push(blob); if (!phoneReg.test(phone)) {
var fileName = `${that.uuid(10,10)}.png`; this.nameErrorMsg = "请输入有效的手机号码！";
var path = `/Upload/Temporary`; return false;
that.uploadSelfBlob(path, newArr, x => { }
let allPath = that.domainManager().ViittoFileUrl + x.data.FilePath; const TIME_COUNT = 60;
this.postImg(allPath) this.phoneMsg.code = "";
}) if (!this.timer) {
}, this.count = TIME_COUNT;
base64ToBlob(code) { this.showCode = false;
let parts = code.split(';base64,'); this.timer = setInterval(() => {
let contentType = parts[0].split(':')[1]; if (this.count > 0 && this.count <= TIME_COUNT) {
let raw = window.atob(parts[1]); this.count--;
let rawLength = raw.length; } else {
this.showCode = true;
let uInt8Array = new Uint8Array(rawLength); clearInterval(this.timer);
this.timer = null;
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
} }
return new Blob([uInt8Array], { }, 1000);
type: contentType }
let msg = {
mobileNumber: this.phoneMsg.LoginMobile,
mobileCodeType: 1
};
this.apipost("user_get_moblieNumber_code", msg, res => {
if (res.data.resultCode == 1) {} else {
this.$notify.error({
title: "提示",
customClass: "msgTips",
message: res.data.message,
showClose: false,
duration: 3000
}); });
}, }
uuid(len, radix) { });
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split(''); },
let uuid = [], //绑定手机号
i; doBind() {
radix = radix || chars.length; if (this.phoneMsg.LoginMobile == "") {
if (len) { this.Error('请输入手机号');
// Compact form return;
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]; } else if (this.phoneMsg.code == "") {
} else { this.Error('请输入验证码');
let r; return;
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'; }
uuid[14] = '4'; this.apipost("admin_get_MySelfResetLoginMobile", this.phoneMsg, res => {
for (i = 0; i < 36; i++) { if (res.data.resultCode == 1) {
if (!uuid[i]) { this.Success(res.data.message);
r = 0 | Math.random() * 16; this.getList();
uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]; this.phoneMsg.LoginMobile = '';
} this.phoneMsg.code = '';
} else {
this.Error(res.data.message);
}
});
},
//重置手机
resetPhoneNum() {
this.phoneMsg.LoginMobile = '';
this.phoneMsg.code = '';
},
changePassOld(value) {
this.sureOldPwd = !(value === 'show');
},
changePass(value) {
this.visible = !(value === 'show');
}, //判断渲染，true:暗文显示，false:明文显示
changePass2(value) {
this.SureVisible = !(value === 'show');
},
//获取用户信息
getList() {
let userInfo = this.getLocalStorage();
let msg = {
Id: userInfo.EmployeeId
}
this.apipost('admin_get_EmployeeGet', msg, res => {
if (res.data.resultCode == 1) {
this.dataList = res.data.data;
this.getAccount();
} else {
this.Error(res.data.message);
}
}, err => {})
},
//过滤电话号码
getBangding(val) {
if (val) {
return val.substr(0, 3) + "****" + val.substr(-4, 4)
}
},
//过滤银行卡号
getBankNum(bankNumber) {
if (bankNumber) {
return bankNumber.substr(0, 4) + "********" + bankNumber.substr(-4);
}
},
//冻结启用银行账户
deleteData(id) {
this.$confirm('确认启用/冻结该账户信息?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.apipost('admin_post_DelEmpBankAccount', {
BAId: id
}, res => {
if (res.data.resultCode == 1) {
this.Success('保存成功！')
this.getList();
} }
}, err => {})
}).catch(() => {
this.$message.info('已取消！')
});
},
changeTitle() {
if (this.addAccountMsg.AccountClassify == 1) {
this.nameA = '平台名称'
this.nameB = '用户名称'
this.nameC = '平台账户'
this.nameD = '账户别名'
this.addAccountMsg.AccountType = '1'
} else if (this.addAccountMsg.AccountClassify == 2) {
this.nameA = '账户名称'
this.nameB = '开户人'
this.nameC = '卡号'
this.nameD = '账户别名'
} else {
this.nameA = '平台名称'
this.nameB = '用户名称'
this.nameC = '平台账户'
this.nameD = '账户别名'
}
},
//确认方式
SureType() {
localStorage.openMode = this.radio;
window.location.reload()
},
//重置卡号
resetAccountNum(val) {
this.addAccountMsg.CardNum = this.addAccountMsg.CardNum.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
},
getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
},
change(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.panel = true;
this.outerVisible = true;
this.picValue = files[0];
this.url = this.getObjectURL(this.picValue);
//每次替换图片要重新得到新的url
if (this.cropper) {
this.cropper.replace(this.url);
}
this.panel = true;
},
crop() {
this.panel = false;
var croppedCanvas;
var roundedCanvas;
if (!this.croppable) {
return;
}
// Crop
croppedCanvas = this.cropper.getCroppedCanvas();
// Round
roundedCanvas = this.getRoundedCanvas(croppedCanvas);
this.headerImage = roundedCanvas.toDataURL();
let that = this;
let blob = that.base64ToBlob(this.headerImage);
let newArr = [];
newArr.push(blob);
var fileName = `${that.uuid(10,10)}.png`;
var path = `/Upload/Temporary`;
that.uploadSelfBlob(path, newArr, x => {
let allPath = that.domainManager().ViittoFileUrl + x.data.FilePath;
this.postImg(allPath)
})
},
base64ToBlob(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {
type: contentType
});
},
uuid(len, radix) {
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
let uuid = [],
i;
radix = radix || chars.length;
if (len) {
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
} else {
let r;
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
uuid[14] = '4';
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random() * 16;
uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r];
} }
return uuid.join(''); }
}, }
return uuid.join('');
},
getRoundedCanvas(sourceCanvas) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var width = sourceCanvas.width;
var height = sourceCanvas.height;
canvas.width = width;
canvas.height = height;
context.imageSmoothingEnabled = true;
context.drawImage(sourceCanvas, 0, 0, width, height);
context.globalCompositeOperation = 'destination-in';
context.beginPath();
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
context.fill();
return canvas;
},
postImg(path) {
//这边写图片的上传
let msg = {
icon: path
}
this.apipost('app_get_employee_modify_icon', msg, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message);
this.getList();
} else {
this.Error(res.data.message);
}
}, err => {})
getRoundedCanvas (sourceCanvas) { },
var canvas = document.createElement('canvas'); //取消上传
var context = canvas.getContext('2d'); CancelUpImg() {
var width = sourceCanvas.width; this.panel = false;
var height = sourceCanvas.height; },
canvas.width = width; //获取微信用户列表
canvas.height = height; getWechatData(keyWords) {
context.imageSmoothingEnabled = true; this.weChatData = [];
context.drawImage(sourceCanvas, 0, 0, width, height); var qMsg = {
context.globalCompositeOperation = 'destination-in'; Name: keyWords
context.beginPath(); };
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true); this.mallapipost(
context.fill(); "/api/User/GetMemberUserListExt",
return canvas; qMsg,
}, res => {
postImg (path) { if (res.data.resultCode == 1) {
//这边写图片的上传 this.weChatData = res.data.data;
let msg={
icon:path
} }
this.apipost('app_get_employee_modify_icon',msg,res=>{ });
if(res.data.resultCode==1){ },
this.Success(res.data.message); //选择切换
this.getList(); weChatChange() {
}else{ let obj = this.weChatData.find(item => item.Id == this.mallUserId);
this.Error(res.data.message); if (obj) {
} this.weChatMsg.MallUserId = obj.Id;
},err=>{}) this.weChatMsg.MallSmallShopsId = obj.ShopId;
},
//取消上传
CancelUpImg(){
this.panel=false;
} }
},
//保存微信
saveWechat() {
this.apipost("admin_post_BindWeChat", this.weChatMsg, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message);
this.getList();
} else {
this.Error(res.data.message)
}
}, err => {})
}
}, },
mounted() { mounted() {
this.u = this.getLocalStorage(); this.u = this.getLocalStorage();
this.getList(); this.getList();
this.openMode=localStorage.openMode; this.openMode = localStorage.openMode;
this.radio=localStorage.openMode; this.radio = localStorage.openMode;
//初始化这个裁剪框 //初始化这个裁剪框
var self = this; var self = this;
var image = document.getElementById('image'); var image = document.getElementById('image');
this.cropper = new Cropper(image, { this.cropper = new Cropper(image, {
aspectRatio: 1, aspectRatio: 1,
viewMode: 1, viewMode: 1,
background:false, background: false,
zoomable:false, zoomable: false,
ready: function () { ready: function () {
self.croppable = true; self.croppable = true;
} }
}); });
} }
}; };
</script>
</script>
src/components/mall/goodlist.vue
View file @ 9aefc929
...@@ -157,13 +157,20 @@ ...@@ -157,13 +157,20 @@
Name: "", //商品名称 Name: "", //商品名称
CategoryIds: "", //商品分类 CategoryIds: "", //商品分类
IsGetShare: 1, //获取分销 IsGetShare: 1, //获取分销
ERPUserId: "19992" ERPUserId: 0, //商城用户Id
ERPSmallShopId: 0, //用户店铺Id
}, },
}; };
}, },
methods: { methods: {
//获取商品列表 //获取商品列表
getGoodList() { getGoodList() {
if (this.getLocalStorage().MallUserId) {
this.msg.ERPUserId = this.getLocalStorage().MallUserId;
}
if (this.getLocalStorage().MallSmallShopsId) {
this.msg.ERPSmallShopId = this.getLocalStorage().MallSmallShopsId;
}
this.loading = true; this.loading = true;
this.DataList = []; this.DataList = [];
this.mallapipost( this.mallapipost(
......
src/components/personalCenter.vue
View file @ 9aefc929
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<span class="v">{{CurrentUserInfo.DepartName}}</span> <span class="v">{{CurrentUserInfo.DepartName}}</span>
</div> </div>
</div> </div>
<div class="n-info" ><!-- v-if="CurrentUserInfo.RB_Group_id==2 || EditBtn" --> <div class="n-info" >
<div class="item" @click="changeBoard(0)"> <div class="item" @click="changeBoard(0)">
<i class="iconfont icon-yichuheimingdan"></i> <i class="iconfont icon-yichuheimingdan"></i>
<span class="n-name">个人首页</span> <span class="n-name">个人首页</span>
......
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