1 <template> 2 <div id="corp-info" class="module"> 3 <!--<span>{{this.fileList}}</span>--> 4 <el-form ref="form" :model="form" label-width="80px"> 5 <el-form-item label="头像"> 6 <div class="imgblock"> 7 <img :src="fileList[0].url" alt> 8 </div> 9 <el-popover placement="top" width="360" v-model="visible2"> 10 <el-upload 11 class="upload-demo" 12 name="files" 13 ref="upload" 14 action="https://api.kuaipidev.com/kp-server-back-oss/oss/corp/upload" 15 :on-success="handleSuccess" 16 :file-list="fileList" 17  :on-change="handleChange" 18 :auto-upload="false" 19 :show-file-list="false" 20 accept=".jpg, .png, .JPG" 21 > 22 <el-button slot="trigger" size="small" type="primary">选取照片</el-button> 23 <el-button 24 style="margin-left: 10px;" 25 size="small" 26 type="success" 27 @click="submitUpload" 28 >上传到服务器</el-button> 29 <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10M</div> 30 </el-upload> 31 <el-button slot="reference">修改</el-button> 32 </el-popover> 33 </el-form-item> 34 <el-form-item label="姓名"> 35 <el-input v-model="form.name"></el-input> 36 </el-form-item> 37 <el-form-item label="手机"> 38 <el-input v-model="form.tel" @focus="centerDialogVisible = true"></el-input> 39 </el-form-item> 40 <el-form-item label="邮箱"> 41 <el-input v-model="form.email" @focus="centerDialogVisible_eml = true"></el-input> 42 </el-form-item> 43 <el-form-item label="微信"> 44 <el-input v-model="form.wx" @focus="wxBind"></el-input> 45 <span v-if="closewx" class="close" @click="unTry">解绑</span> 46 </el-form-item> 47 <el-form-item> 48 <el-button type="primary" @click="onSubmit">保存</el-button> 49 </el-form-item> 50 </el-form> 51 <el-dialog title :visible.sync="centerDialogVisible" width="30%" center> 52 <p class="person_title">修改手机</p> 53 <div class="person_from"> 54 <input 55 v-model="phone_num" 56 placeholder="请输入大陆的手机号码" 57 class="person_input" 58 maxlength="11" 59 onkeyup="value=value.replace(/[^\d]/g,‘‘)" 60 > 61  62 <div class="person_div"> 63 <input 64 v-model="psw_num" 65 placeholder="验证码" 66 class="person_inp" 67 maxlength="4" 68 onkeyup="value=value.replace(/[^\d]/g,‘‘)" 69 > 70 <button @click="sendMsg" :disabled="isDisabled">{{buttonName}}</button> 71 </div> 72 </div> 73 <span slot="footer" class="dialog-footer"> 74 <button class="per_btn" @click="phone_pass">提交</button> 75 </span> 76 </el-dialog> 77 <el-dialog title :visible.sync="centerDialogVisible_eml" width="30%" center> 78 <p class="person_title">修改邮箱</p> 79 <div class="person_from"> 80 <input 81 v-model="email_num" 82 placeholder="请输入邮箱" 83 class="person_input" 84 > 85 <div class="person_div"> 86 <input 87 v-model="emlpsw_num" 88 placeholder="验证码" 89 class="person_inp" 90 maxlength="4" 91 onkeyup="value=value.replace(/[^\d]/g,‘‘)" 92 > 93 <button @click="sendMsg_eml" :disabled="isDisabled_eml">{{buttonName_eml}}</button> 94 </div> 95 </div> 96 <span slot="footer" class="dialog-footer"> 97 <button class="per_btn" @click="email_pass">提交</button> 98 </span> 99 </el-dialog>100 <div style="width:0;height:0;overflow:hidden;display: inline-block;" id="wwx"></div>101 <el-dialog title :visible.sync="wx_dialog" width="30%" center>102 <p class="person_title">微信绑定</p>103 <div ref="domm" id="xwwx"></div>104 </el-dialog>105 </div>106 </template>107 108 <script>109 import { getUserData, updateUserData, accountBindWx, accountUnBindWx, updatePhomail, updateEmail } from "@/api/personal";110 import { sendSms } from "@/api/login";111 import { kpMessage } from "@/components/notice/index";112 import { randomn } from "@/lib/utils";113 import format from "@/lib/format";114 115 export default {116  data() {117 return {118 closewx: false, //隐藏解绑119 QRcode: true,120 isshow: false, //提示错误信息121 isDisabled_eml:false,122 isgood: false, //手机弹窗提交123 img_star: true, //微信登陆中图片显示流程124 img_load: false,125 img_end: false,126 istrue: true, //控制微信登陆前后提示文字127 buttonName: "获取验证码",128 buttonName_eml:"获取验证码",129 isDisabled: false,130 time: 60,131 time_eml:60,132 wx_dialog: false,133 centerDialogVisible: false, //手机弹窗134 centerDialogVisible_eml: false,//邮箱弹窗135  fileList: [136  {137 name: " ",138 url: " "139  }140  ],141 visible2: false, //弹窗142  form: {143 name: "",144 tel: "",145 email:"",146 wx: "未绑定"147  },148 phone_num: "",149 email_num:"",150 emlpsw_num:"",151 psw_num: "",152 uuid: "",153 mockUrl: ‘http://localhost:8080/?code=021YODYe0khn0u1nBW1f0oDqYe0YODYP&state=accountwxbind‘154  };155  },156  created() {157 if (this.form.wx = ‘未绑定‘ && sessionStorage.wxbindcode) {158  accountBindWx({159 ‘accountId‘: sessionStorage.accountId || 0,160 ‘appId‘: ‘wx4185833c33deeabe‘,161 ‘code‘: sessionStorage.wxbindcode || ‘‘,162 ‘corpId‘: sessionStorage.corpId || 0163 }).then(res => {164 if (res.code === 0) {165 sessionStorage.removeItem(‘wxbindcode‘)166 this.form.wx = ‘已绑定‘167 this.loadUserData()168 } else {169 sessionStorage.removeItem(‘wxbindcode‘)170 kpMessage.warning("微信绑定失败")171 this.closewx = false172  }173  })174  }175 this.loadUserData()176  },177  mounted() {178 this.$nextTick(() => {179 let wx = new WxLogin({180 id: "wwx",181 appid: "wx4185833c33deeabe",182 scope: "snsapi_login",183 redirect_uri: "https://boss.kuaipiyun.com",184 state: "accountwxbind",185 style: "black",186 href: "https://kptom.com/api/static/stylesheets/wechat/login.css"187  });188  });189  },190  methods: {191  wxBind() {192 if (this.form.wx === ‘已绑定‘) return193 this.wx_dialog = true;194 this.QRcode = false;195 this.$nextTick(() => {196 let dom = document.getElementById("wwx");197 dom.style.height = "375px";198 dom.style.width = "300px";199 this.$refs["domm"].appendChild(dom);200  });201  },202  loadUserData () {203 //渲染204  getUserData({205 userId: sessionStorage.getItem("userId")206 }).then(res => {207 if (res.code == 0) {208 //获取用户信息209 this.fileList[0].url ="http://kp7files.oss-cn-shanghai.aliyuncs.com" +"/" + res.data.userAvatar;210 this.form.name = res.data.userName;211 this.form.tel = res.data.userPhone;212 this.form.email = res.data.userEmail;213 if (res.data.wxOpenid) {214 this.form.wx = ‘已绑定‘215 this.closewx = true216 } else {217 this.form.wx = ‘未绑定‘218 this.closewx = false219  }220 } else {221 kpMessage.warning("获取用户信息失败")222 this.closewx = false223  }224  })225  },226  onSubmit() {227 let sendData = {228 type: 2,229 accountId: sessionStorage.accountId || "",230 userId: sessionStorage.userId || "",231 userName: this.form.name,232 userPhone: this.form.tel,233 userEmail:this.form.email,234 requestId: "4" + new Date().getTime() + randomn(4)235  };236 updateUserData(sendData).then(res => {237 if (res.code == 0) {238 kpMessage.warning("设置成功");239  console.log(res);240 } else {241 kpMessage.warning("设置失败");242  }243  });244  },245 // change事件246  handleChange(file) {247 Object.defineProperty(file.raw, "name", {248 //通过修改原型中的name249 writable: true250  });251 let timeTamp = format.timeFormatter(new Date(), "yyyy-MM-dd");252 const uuidV1 = require("uuid/v1");253 this.uuid = file.raw.name =254 "boss_img" +255 "/" +256 sessionStorage.userId +257 "/" +258 timeTamp +259 "-" +260 uuidV1(); //图片路径261 let testmsg=file.name.substring(file.name.lastIndexOf(‘.‘)+1) 262 const extension = testmsg === ‘jpg‘ 263 const extension2 = testmsg === ‘png‘ 264 const isLt10M = file.size / 1024 / 1024 < 10;265 if(!extension && !extension2) { 266 kpMessage.warning("上传文件只能是 jpg、png格式!");267 this.visible2= false268  } 269 if (!isLt10M) {270 kpMessage.warning("上传头像图片大小不能超过 10MB!");271  }272 return isLt10M;273  },274  submitUpload() {275 //上传276 this.$refs.upload.submit();277 let sendData = {278 type: 1,279 userAvatar: this.uuid,280 userId: sessionStorage.userId || "0"281  };282 updateUserData(sendData).then(res => {283 if (res.code == 0) {284 this.visible2= false285 kpMessage.warning("上传服务器成功");286 } else {287 kpMessage.warning("上传服务器失败");288  }289  });290  },291  handleSuccess(response, file, fileList) {292  console.log(fileList);293 let data = {294 name: response.data[0].fileName,295 url: response.data[0].remoteUrl296  };297 this.fileList.unshift(data);298  },299 sendMsg() {//手机发送短信300 let _this = this;301 _this.isDisabled = true;302 let interval = window.setInterval(function() {303 _this.buttonName = "再次获取（" + _this.time + "s）"304 --_this.time;305 if (_this.time < 0) {306 _this.buttonName = "获取验证码"307 _this.time = 60308 _this.isDisabled = false309  window.clearInterval(interval)310  }311 }, 1000);312 let sendData = {313 phone: this.phone_num,314 type: 3315  };316 sendSms(sendData).then(res => {317 if (res.code == 0) {318 kpMessage.warning("短信已发送")319 } else {320 kpMessage.warning("短信获取失败")321  }322  });323  },324 sendMsg_eml() {//发送邮箱325 let _this = this;326 _this.isDisabled_eml = true;327 let interval = window.setInterval(function() {328 _this.buttonName_eml = "再次获取（" + _this.time_eml + "s）";329 --_this.time_eml;330 if (_this.time_eml < 0) {331 _this.buttonName_eml = "获取验证码"332 _this.time_eml = 60;333 _this.isDisabled_eml = false334  window.clearInterval(interval)335  }336 }, 1000);337 let sendData = {338 email: this.email_num,339 type: 3340  };341 updateEmail(sendData).then(res => {342 if (res.code == 0) {343 kpMessage.warning("验证码已发送")344 } else {345 kpMessage.warning("验证码发送失败")346  }347  });348  },349 phone_pass() {//手机提交350 let sendData = {351 type: 1,352 accountId : sessionStorage.getItem("accountId"),353 number: this.phone_num,354 code: this.psw_num355  };356 updatePhomail(sendData).then(res => {357 if (res.code == 0) {358 kpMessage.warning("手机设置成功")359 this.form.tel = this.phone_num360 this.centerDialogVisible = false361 } else {362 if(res.msg=="verification code expires"){363 kpMessage.warning("验证码错误，请重试")364 }else{365 kpMessage.warning("该手机号已被占用，请选择另外的手机号")366  }367  }368  });369  },370 email_pass() {//邮箱提交371 let sendData = {372 type: 2,373 accountId : sessionStorage.getItem("accountId"),374 number: this.email_num,//此时把邮箱的数据传给后台375 code: this.emlpsw_num376  };377 updatePhomail(sendData).then(res => {378 if (res.code == 0) {379 kpMessage.warning("邮箱设置成功")380 this.form.email = this.email_num//弹窗的邮箱数据赋值给展示页面的邮箱381 this.centerDialogVisible_eml = false382 } else {383 if(res.msg=="verification code expires"){384 kpMessage.warning("验证码错误，请重试")385 }else{386 kpMessage.warning("该邮箱号已被占用，请选择另外的邮箱号")387  } 388  }389  });390  },391  unTry() {392 let sendData = {393 accountId: sessionStorage.accountId || ‘‘394  }395 accountUnBindWx(sendData).then(res => {396 if (res.code == 0) {397 kpMessage.warning("解除绑定成功")398 this.loadUserData()399 } else {400 kpMessage.warning("解除绑定失败")401  }402  });403  }404  }405 };406 </script>407 408 <style rel="stylesheet/less" lang="less" scoped>409 .module {410  width: 450px;411  .imgblock {412  width: 50px;413  height: 50px;414 margin-right: 20px;415 line-height: 1;416 float: left;417  border: 1px solid #ccc;418 display: inline-table;419  overflow: hidden;420 border-radius: 5px;421  img {422  display: block;423 width: 100%;424  }425  }426 }427 428 .person_from {429  width: 280px;430  margin: auto;431 }432 433 .person_title {434 line-height: 18px;435 font-size: 23px;436 font-weight: bold;437 color: #333;438 text-align: center;439 margin: 0;440 padding: 0;441 }442 443 .person_div {444  width: 280px;445  border: 1px solid #bfcbd9;446 margin-top: 20px;447 border-radius: 4px;448 }449 450 .person_input {451  width: 270px;452  height: 30px;453 border-radius: 4px;454 padding-left: 10px;455  border: 1px solid #bfcbd9;456 margin-top: 50px;457 }458 459 .person_inp {460  width: 150px;461  height: 30px;462 padding-left: 10px;463  border: none;464 float: left;465 }466 467 .person_div button {468  width: 112px;469  height: 32px;470  border: none;471 font-size: 12px;472  background: none;473 display: inline-block;474 color: #0082e6;475 }476 477 * {478  outline: none;479 }480 481 .per_btn {482  width: 200px;483  height: 30px;484 background: #0082e6;485 border-radius: 4px;486  border: none;487  color: #fff;488  display: block;489  margin: auto;490 margin-bottom: 50px;491 }492 493 .person_box {494  width: 210px;495  height: 210px;496 box-shadow: 2px 2px 5px #999;497 border: 1px solid #999;498  margin: auto;499 margin-top: 20px;500  position: relative;501  img {502  width: 180px;503  height: 180px;504  margin: auto;505  display: block;506  position: absolute;507 left: 0;508 top: 0;509 right: 0;510 bottom: 0;511  }512  .img_load {513  background: #eee;514  width: 180px;515  height: 180px;516  margin: auto;517  display: block;518  position: absolute;519 left: 0;520 top: 0;521 right: 0;522 bottom: 0;523 text-align: center;524 line-height: 180px;525 font-size: 16px;526  p {527  position: relative;528 top: -175px;529 left: 0;530  }531  }532 }533 534 .per_p {535  margin: auto;536 width: 100%;537 text-align: center;538 margin-top: 5px;539 }540 541 .el-icon-success {542 font-size: 30px;543  color: green;544 }545 546 .peron_kp {547  width: 250px;548  margin: auto;549 }550 551 .pperon {552 display: inline-block;553  width: 200px;554  height: 30px;555 span:first-child {556 font-size: 18px;557 font-weight: 600;558  }559 }560 561 .close {562  background: none;563  border: none;564  position: absolute;565  right: 20px;566 top: 0;567 color: #0082e6;568 }569 570 .display_ {571 height: 0;572 width: 0;573  overflow: hidden;574 }575 576 #xwwx {577 text-align: center;578 }579 </style>