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>
.Person_Content{
/* width:100%; */
height:96%;
margin:18px;
overflow: hidden;
}
.PerSon_LeftNav{
width:418px;
height:96%;
position: absolute;
overflow-y: auto;
background-color: #fff;
display: inline-block;
}
.Person_Right{
margin-left:440px;
width:100%;
height:100%;
overflow-y: auto;
background-color: #fff;
}
.PerSon_Edit{
text-align: right;
width:100%;
color:#BBBBBB;
font-size:12px;
padding:30px;
}
.PerSon_Edit span{
cursor: pointer;
}
.PerSon_Edit i{
font-size:12px;
}
.Person_Header{
width:120px;
height:120px;
margin:30px auto;
border:1px solid #F4F4F4;
padding:3px;
border-radius: 50%;
}
.Person_Header img{
width:100%;
height:100%;
border-radius:50%;
}
.Person_ComCenter{
width:100%;
font-size:14px;
color:#333333;
text-align: center;
}
.Person_MenuList{
margin-top:45px;
}
.Person_MenuList li{
list-style-type: none;
width:100%;
height:54px;
padding:0 30px;
display: flex;
align-items: center;
border-bottom:1px solid #F3F3F3;
}
.Person_MenuList li .Person_Pname{
display: flex;
align-items: center;
width:26%;
height:100%;
font-size:12px;
color:#999999;
}
.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;
}
.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_Content {
height: 96%;
margin: 18px;
overflow: hidden;
}
.PerSon_LeftNav {
width: 418px;
height: 96%;
position: absolute;
overflow-y: auto;
background-color: #fff;
display: inline-block;
}
.Person_Right {
margin-left: 440px;
width: 100%;
height: 100%;
overflow-y: auto;
background-color: #fff;
}
.PerSon_Edit {
text-align: right;
width: 100%;
color: #BBBBBB;
font-size: 12px;
padding: 30px;
}
.PerSon_Edit span {
cursor: pointer;
}
.PerSon_Edit i {
font-size: 12px;
}
.Person_Header {
width: 120px;
height: 120px;
margin: 30px auto;
border: 1px solid #F4F4F4;
padding: 3px;
border-radius: 50%;
}
.Person_Header img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.Person_ComCenter {
width: 100%;
font-size: 14px;
color: #333333;
text-align: center;
}
.Person_MenuList {
margin-top: 45px;
}
.Person_MenuList li {
list-style-type: none;
width: 100%;
height: 54px;
padding: 0 30px;
display: flex;
align-items: center;
border-bottom: 1px solid #F3F3F3;
}
.Person_MenuList li .Person_Pname {
display: flex;
align-items: center;
width: 26%;
height: 100%;
font-size: 12px;
color: #999999;
}
.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 {
position: absolute;
right: 10px;
width: 80px;
height: 40px;
border:none;
cursor: pointer;
color:#fff;
border-radius: 5px;
background:#E95252;
.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;
}
#demo #button {
position: absolute;
right: 10px;
width: 80px;
height: 40px;
border: none;
cursor: pointer;
color: #fff;
border-radius: 5px;
background: #E95252;
}
#demo .show {
width: 100px;
height: 100px;
......@@ -251,6 +291,7 @@
border-radius: 50%;
border: 1px solid #d5d5d5;
}
#demo .picture {
width: 100%;
height: 100%;
......@@ -259,6 +300,7 @@
background-repeat: no-repeat;
background-size: cover;
}
#demo .container {
z-index: 9999999;
position: fixed;
......@@ -267,47 +309,32 @@
top: 0;
right: 0;
bottom: 0;
background:rgba(0,0,0,0.4);
background: rgba(0, 0, 0, 0.4);
}
#demo #image {
max-width: 100%;
}
.cropper-view-box,.cropper-face {
.cropper-view-box,
.cropper-face {
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 {
font-size: 0;
line-height: 0;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
direction: ltr;
-ms-touch-action: none;
touch-action: none
}
.cropper-container img {
/* Avoid margin top issue (Occur only when margin-top <= -height) */
display: block;
min-width: 0 !important;
max-width: none !important;
......@@ -317,7 +344,7 @@
height: 100%;
image-orientation: 0deg
}
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
......@@ -329,19 +356,19 @@
bottom: 0;
left: 0;
}
.cropper-wrap-box {
overflow: hidden;
}
.cropper-drag-box {
opacity: 0;
}
.cropper-modal {
opacity: .5;
}
.cropper-view-box {
display: block;
overflow: hidden;
......@@ -350,16 +377,14 @@
outline: 1px solid #e95252;
outline-color: #e95252;
}
.cropper-dashed {
position: absolute;
display: block;
opacity: .5;
border: 0 dashed #e95252
}
.cropper-dashed.dashed-h {
top: 33.33333%;
left: 0;
......@@ -368,7 +393,7 @@
border-top-width: 1px;
border-bottom-width: 1px
}
.cropper-dashed.dashed-v {
top: 0;
left: 33.33333%;
......@@ -377,141 +402,134 @@
border-right-width: 1px;
border-left-width: 1px
}
.cropper-center {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0;
height: 0;
opacity: .75
}
.cropper-center:before,
.cropper-center:after {
position: absolute;
display: block;
content: ' ';
}
.cropper-center:before {
top: 0;
left: -3px;
width: 7px;
height: 1px
}
.cropper-center:after {
top: -3px;
left: 0;
width: 1px;
height: 7px
}
.cropper-face,
.cropper-line,
.cropper-point {
position: absolute;
display: block;
width: 100%;
height: 100%;
opacity: .1;
}
.cropper-face {
top: 0;
left: 0;
}
.cropper-line.line-e {
top: 0;
right: -3px;
width: 5px;
cursor: e-resize
}
.cropper-line.line-n {
top: -3px;
left: 0;
height: 5px;
cursor: n-resize
}
.cropper-line.line-w {
top: 0;
left: -3px;
width: 5px;
cursor: w-resize
}
.cropper-line.line-s {
bottom: -3px;
left: 0;
height: 5px;
cursor: s-resize
}
.cropper-point {
width: 5px;
height: 5px;
opacity: .75;
}
.cropper-point.point-e {
top: 50%;
right: -3px;
margin-top: -3px;
cursor: e-resize
}
.cropper-point.point-n {
top: -3px;
left: 50%;
margin-left: -3px;
cursor: n-resize
}
.cropper-point.point-w {
top: 50%;
left: -3px;
margin-top: -3px;
cursor: w-resize
}
.cropper-point.point-s {
bottom: -3px;
left: 50%;
margin-left: -3px;
cursor: s-resize
}
.cropper-point.point-ne {
top: -3px;
right: -3px;
cursor: ne-resize
}
.cropper-point.point-nw {
top: -3px;
left: -3px;
cursor: nw-resize
}
.cropper-point.point-sw {
bottom: -3px;
left: -3px;
cursor: sw-resize
}
.cropper-point.point-se {
right: -3px;
bottom: -3px;
......@@ -520,32 +538,30 @@
cursor: se-resize;
opacity: 1
}
@media (min-width: 768px) {
.cropper-point.point-se {
width: 15px;
height: 15px
}
}
@media (min-width: 992px) {
.cropper-point.point-se {
width: 10px;
height: 10px
}
}
@media (min-width: 1200px) {
.cropper-point.point-se {
width: 5px;
height: 5px;
opacity: .75
}
}
.cropper-point.point-se:before {
position: absolute;
right: -50%;
......@@ -556,35 +572,37 @@
content: ' ';
opacity: 0;
}
.cropper-invisible {
opacity: 0;
}
.cropper-hide {
position: absolute;
display: block;
width: 0;
height: 0;
}
.cropper-hidden {
display: none !important;
}
.cropper-move {
cursor: move;
}
.cropper-crop {
cursor: crosshair;
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
cursor: not-allowed;
}
.a-upload {
padding: 4px 10px;
height: 20px;
......@@ -607,770 +625,853 @@
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.cancel_Btnn{
background-color: #fff!important;
border:1px solid #e95252!important;
color:#e95252!important;
}
}
.cancel_Btnn {
background-color: #fff !important;
border: 1px solid #e95252 !important;
color: #e95252 !important;
}
</style>
<template>
<div class="Person_Content">
<div class="PerSon_LeftNav">
<div class="PerSon_Edit">
<a href="javascript:;" class="a-upload">
<i class="iconfont icon-Edit"></i>&nbsp;&nbsp;修改头像</span>
<input type="file" id="change" accept="image" @change="change">
</a>
</div>
<div class="Person_Header">
<img v-if="dataList.EmPhoto" :src="dataList.EmPhoto" alt/>
<img v-else src="../assets/img/default_head_img.jpg" alt/>
</div>
<div class="Person_ComCenter" style="margin-bottom:14px;">
{{dataList.EmName}}
</div>
<div class="Person_ComCenter">
<i class="iconfont icon-dianhua"></i>&nbsp;&nbsp;{{dataList.EmLoginMobile}}
</div>
<ul class="Person_MenuList">
<li>
<span class="Person_Pname">部门</span>
<span class="Person_Company">
{{u.BranchName}}
<span class="Person_Jobs">{{u.PostName}}</span>
</span>
</li>
<li>
<span class="Person_Pname">用户名</span>
<span class="Person_Company" style="width:43%;">{{dataList.EmName}}</span>
<span class="Person_Wrong">如有错误请联系行政</span>
</li>
</ul>
<ul class="Person_MenuList Person_menuCked" style="margin-top:0;">
<li @click="ckedNum=1,resetPhoneNum()" :class="{'P_cked':ckedNum==1}">
<span class="Person_Pname">绑定手机</span>
<span class="Person_CenterList">
{{getBangding(dataList.EmLoginMobile)}}
</span>
<span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i>
</span>
</li>
<li @click="ckedNum=2" :class="{'P_cked':ckedNum==2}">
<span class="Person_Pname">密码</span>
<span class="Person_CenterList">
******
</span>
<span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i>
</span>
</li>
<li @click="ckedNum=3" :class="{'P_cked':ckedNum==3}">
<span class="Person_Pname" style="position:relative;">
银行账户
<span class="bank_Count">{{AccCount}}</span>
</span>
<span v-if="AccCount==0" class="bind_Imidetly">
立即绑定
</span>
<span v-else class="Person_CenterList">
{{AccDataList.BankName}}
<span style="margin-left:10px;">{{getBankNum(AccDataList.CardNum)}}</span>
</span>
<span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i>
</span>
</li>
<li @click="ckedNum=4" :class="{'P_cked':ckedNum==4}">
<span class="Person_Pname">页面切换方式</span>
<span class="Person_CenterList" v-if="openMode==1">
单页面多标签模式
</span>
<span class="Person_CenterList" v-else>
多页面单标签模式
</span>
<span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i>
</span>
</li>
</ul>
</div>
<div class="Person_Right">
<!-- 绑定手机号 -->
<div class="Per_Shouji" v-if="ckedNum==1">
<div class="Shouji_Top">绑定手机</div>
<div class="Shouji_Conteng">
<div class="phone_bangding" v-if="dataList.EmLoginMobile">
已绑定手机号 <span>{{getBangding(dataList.EmLoginMobile)}}</span>
</div>
<el-form :model="phoneMsg" ref="phoneMsg" label-position="right" :rules="rules" label-width="100px">
<el-form-item label="新手机号" prop="LoginMobile" style="margin-bottom:40px;">
<div class="phone_commonBotm">
<input class="input" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="phoneMsg.LoginMobile" type="text" placeholder="11位数字"/>
<div class="validatCode">
<span v-show="showCode" @click="getCode" class="FPF_s">发送验证码</span>
<span v-show="!showCode" class="count FPF_s">{{count}}s重新获取</span>
</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 class="Per_Shouji" v-if="ckedNum==2">
<div class="Shouji_Top">密码</div>
<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 class="Person_Content">
<div class="PerSon_LeftNav">
<div class="PerSon_Edit">
<a href="javascript:;" class="a-upload">
<i class="iconfont icon-Edit"></i>&nbsp;&nbsp;修改头像</span>
<input type="file" id="change" accept="image" @change="change">
</a>
</div>
<div class="Person_Header">
<img v-if="dataList.EmPhoto" :src="dataList.EmPhoto" :onerror="defaultHeadImg" alt />
<img v-else src="../assets/img/default_head_img.jpg" alt />
</div>
<div class="Person_ComCenter" style="margin-bottom:14px;">
{{dataList.EmName}}
</div>
<div class="Person_ComCenter">
<i class="iconfont icon-dianhua"></i>&nbsp;&nbsp;{{dataList.EmLoginMobile}}
</div>
<ul class="Person_MenuList">
<li>
<span class="Person_Pname">部门</span>
<span class="Person_Company">
{{u.BranchName}}
<span class="Person_Jobs">{{u.PostName}}</span>
</span>
</li>
<li>
<span class="Person_Pname">用户名</span>
<span class="Person_Company" style="width:43%;">{{dataList.EmName}}</span>
<span class="Person_Wrong">如有错误请联系行政</span>
</li>
</ul>
<ul class="Person_MenuList Person_menuCked" style="margin-top:0;">
<li @click="ckedNum=1,resetPhoneNum()" :class="{'P_cked':ckedNum==1}">
<span class="Person_Pname">绑定手机</span>
<span class="Person_CenterList">
{{getBangding(dataList.EmLoginMobile)}}
</span>
<span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i>
</span>
</li>
<li @click="ckedNum=2" :class="{'P_cked':ckedNum==2}">
<span class="Person_Pname">密码</span>
<span class="Person_CenterList">
******
</span>
<span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i>
</span>
</li>
<li @click="ckedNum=3" :class="{'P_cked':ckedNum==3}">
<span class="Person_Pname" style="position:relative;">
银行账户
<span class="bank_Count">{{AccCount}}</span>
</span>
<span v-if="AccCount==0" class="bind_Imidetly">
立即绑定
</span>
<span v-else class="Person_CenterList">
{{AccDataList.BankName}}
<span style="margin-left:10px;">{{getBankNum(AccDataList.CardNum)}}</span>
</span>
<span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i>
</span>
</li>
<li @click="ckedNum=4" :class="{'P_cked':ckedNum==4}">
<span class="Person_Pname">页面切换方式</span>
<span class="Person_CenterList" v-if="openMode==1">
单页面多标签模式
</span>
<span class="Person_CenterList" v-else>
多页面单标签模式
</span>
<span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i>
</span>
</li>
<li @click="ckedNum=5" :class="{'P_cked':ckedNum==5}">
<span class="Person_Pname">绑定商城、微信</span>
<span class="Person_CenterList" v-if="dataList.MallUserId>0">
已绑定微信/店铺
</span>
<span class="Person_CenterList" v-else>
未绑定微信
</span>
<span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i>
</span>
</li>
</ul>
</div>
<div class="Person_Right">
<!-- 绑定手机号 -->
<div class="Per_Shouji" v-if="ckedNum==1">
<div class="Shouji_Top">绑定手机</div>
<div class="Shouji_Conteng">
<div class="phone_bangding" v-if="dataList.EmLoginMobile">
已绑定手机号 <span>{{getBangding(dataList.EmLoginMobile)}}</span>
</div>
<el-form :model="phoneMsg" ref="phoneMsg" label-position="right" :rules="rules" label-width="100px">
<el-form-item label="新手机号" prop="LoginMobile" style="margin-bottom:40px;">
<div class="phone_commonBotm">
<input class="input" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')"
v-model="phoneMsg.LoginMobile" type="text" placeholder="11位数字" />
<div class="validatCode">
<span v-show="showCode" @click="getCode" class="FPF_s">发送验证码</span>
<span v-show="!showCode" class="count FPF_s">{{count}}s重新获取</span>
</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 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 class="Per_Shouji" v-if="ckedNum==2">
<div class="Shouji_Top">密码</div>
<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 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>
</template>
<script>
import Cropper from "cropperjs"
export default {
data() {
return {
defaultHeadImg: 'this.src="' + require("../assets/img/default_head_img.jpg") + '"',
//页面切换方式
openMode:0,
u:{},
outerVisible:false,
nameA:'账户名称',
nameB:'开户人',
nameC:'卡号',
nameD:'账户别名',
openMode: 0,
u: {},
outerVisible: false,
nameA: '账户名称',
nameB: '开户人',
nameC: '卡号',
nameD: '账户别名',
//切换选项卡
ckedNum:1,
showCode:true,
ckedNum: 1,
showCode: true,
count: "",
//验证码参数
phoneMsg:{
LoginMobile:'',
code:''
phoneMsg: {
LoginMobile: '',
code: ''
},
//修改密码
passWordMsg:{
OldPwd:'',
Pwd:'',
surePassword:''
passWordMsg: {
OldPwd: '',
Pwd: '',
surePassword: ''
},
sureOldPwd:true,
visible:true,
SureVisible:true,
sureOldPwd: true,
visible: true,
SureVisible: true,
//切换方式
radio:'1',
msg: {
},
rules:{
LoginMobile: [
{ required: true, message: '请输入新手机号', trigger: 'blur' }
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' }
]
radio: '1',
msg: {},
rules: {
LoginMobile: [{
required: true,
message: '请输入新手机号',
trigger: 'blur'
}],
code: [{
required: true,
message: '请输入验证码',
trigger: 'blur'
}]
},
rules2:{
OldPwd: [
{ required: true, message: '请输入旧密码', trigger: 'blur' }
],
Pwd: [
{ required: true, message: '请输入新密码', trigger: 'blur' }
],
surePassword: [
{ required: true, message: '请输入确认密码', trigger: 'blur' }
]
rules2: {
OldPwd: [{
required: true,
message: '请输入旧密码',
trigger: 'blur'
}],
Pwd: [{
required: true,
message: '请输入新密码',
trigger: 'blur'
}],
surePassword: [{
required: true,
message: '请输入确认密码',
trigger: 'blur'
}]
},
rules3:{
BankName:[{ 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' }],
rules3: {
BankName: [{
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:{
BranchId:'-1',
EmpId:'-1',
BankId:'',
AccountHolder:'',
AccountAlias:'',
pageIndex:1,
pageSize:15,
Type:9,
AccountMsg: {
BranchId: '-1',
EmpId: '-1',
BankId: '',
AccountHolder: '',
AccountAlias: '',
pageIndex: 1,
pageSize: 15,
Type: 9,
},
AccDataList:{},
AccDataList: {},
//银行所有账户
AcountData:[],
AccCount:0,
AcountData: [],
AccCount: 0,
//添加银行账户参数
addAccountMsg:{
Id:'0',
ObjID:'-1',
BankId:'-1',
OpenBankName:'',
BankName: '',
AccountHolder:'',
CardNum:'',
AccountAlias:'',
AccountType:'1',
AccountClassify:'2',
Type:'9'
addAccountMsg: {
Id: '0',
ObjID: '-1',
BankId: '-1',
OpenBankName: '',
BankName: '',
AccountHolder: '',
CardNum: '',
AccountAlias: '',
AccountType: '1',
AccountClassify: '2',
Type: '9'
},
dataList:{},
headerImage:'',
picValue:'',
cropper:'',
croppable:false,
panel:false,
url:''
dataList: {},
headerImage: '',
picValue: '',
cropper: '',
croppable: false,
panel: false,
url: '',
//暂时用户Id
mallUserId: "",
//赞羊商城对象
weChatMsg: {
MallUserId: 0, //赞羊商城用户Id
MallSmallShopsId: 0, //赞羊用户商城Id
},
weChatData: [],
};
},
methods: {
//绑定手机
submitForm1(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
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)
//绑定手机
submitForm1(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.doBind();
}
},
//过滤银行卡号
getBankNum(bankNumber){
if(bankNumber){
return bankNumber.substr(0,4)+"********"+bankNumber.substr(-4);
});
},
//修改密码
submitForm2(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.changePwd();
}
},
//冻结启用银行账户
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);
});
},
//新增银行账户
submitForm3(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.addAccountNum();
}
});
},
//新增银行账户
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;
}
return new Blob([uInt8Array], {
type: contentType
}, 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
});
},
uuid(len, radix) {
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
let uuid = [],
i;
radix = radix || chars.length;
if (len) {
// Compact form
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];
}
}
});
},
//绑定手机号
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) {
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');
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
},
//取消上传
CancelUpImg() {
this.panel = false;
},
//获取微信用户列表
getWechatData(keyWords) {
this.weChatData = [];
var qMsg = {
Name: keyWords
};
this.mallapipost(
"/api/User/GetMemberUserListExt",
qMsg,
res => {
if (res.data.resultCode == 1) {
this.weChatData = res.data.data;
}
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=>{})
},
//取消上传
CancelUpImg(){
this.panel=false;
});
},
//选择切换
weChatChange() {
let obj = this.weChatData.find(item => item.Id == this.mallUserId);
if (obj) {
this.weChatMsg.MallUserId = obj.Id;
this.weChatMsg.MallSmallShopsId = obj.ShopId;
}
},
//保存微信
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() {
this.u = this.getLocalStorage();
this.getList();
this.openMode=localStorage.openMode;
this.radio=localStorage.openMode;
this.openMode = localStorage.openMode;
this.radio = localStorage.openMode;
//初始化这个裁剪框
var self = this;
var image = document.getElementById('image');
this.cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
background:false,
zoomable:false,
background: false,
zoomable: false,
ready: function () {
self.croppable = true;
}
});
}
};
</script>
</script>
src/components/mall/goodlist.vue
View file @ 9aefc929
......@@ -157,13 +157,20 @@
Name: "", //商品名称
CategoryIds: "", //商品分类
IsGetShare: 1, //获取分销
ERPUserId: "19992"
ERPUserId: 0, //商城用户Id
ERPSmallShopId: 0, //用户店铺Id
},
};
},
methods: {
//获取商品列表
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.DataList = [];
this.mallapipost(
......
src/components/personalCenter.vue
View file @ 9aefc929
......@@ -24,7 +24,7 @@
<span class="v">{{CurrentUserInfo.DepartName}}</span>
</div>
</div>
<div class="n-info" ><!-- v-if="CurrentUserInfo.RB_Group_id==2 || EditBtn" -->
<div class="n-info" >
<div class="item" @click="changeBoard(0)">
<i class="iconfont icon-yichuheimingdan"></i>
<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