payment/src/views/information/index.vue

<template>
  <div class="mianBox">
    <van-row class="headerBox" >
      <van-col class="returnWrap" @click="$router.go(-1)">
        <van-icon name="arrow-left" class="arrow-left" />
      </van-col>
      <van-col class="title">信息修改</van-col>
    </van-row>
    
    <van-row class="my" >
      <!-- <van-row class="msg">
        <van-row class="left">
          头像
        </van-row>
        <van-row class="right">
          <van-uploader :after-read="afterRead" class="upload" />
          <van-image :src="portrait" class="portrait" style="margin-top:-4px" />
          <van-image :src="require('../../assets/image/right.png')" class="right_icon" />
        </van-row>
      </van-row> -->
      <van-row class="msg" @click="mm">
        <van-row class="left">
          密码修改
        </van-row>
        <van-row class="right">
           <van-image :src="require('../../assets/image/right.png')" class="right_icon" style="top:-8px;" />
        </van-row>
      </van-row>
      <van-row class="msg" @click="outLogin">
        <van-row class="left">
          注销
        </van-row>
        <van-row class="right">
          <van-image :src="require('../../assets/image/right.png')" class="right_icon" style="top:-8px;" />
        </van-row>
      </van-row>
    </van-row>
    <van-row class="pass" v-if="loading">
      <van-row class="title">
        密码修改
      </van-row>
      <van-row class="text">
        请填写原始密码和新密码
      </van-row>
      <van-form>
        <van-field
          v-model="oldPass"
          name="原密码"
          placeholder="请填写原密码"
          :rules="[{ required: true, message: '请填写原密码' }]"
        />
        <van-field
          v-model="newPass"
          type="password"
          name="新密码"
          placeholder="请填写新密码"
          :rules="[{ required: true, message: '请填写新密码' }]"
        />
        <div class="operation" >
          <div class="cancel" @click="cancel">
            取消
          </div> 
          <div class="submit"  @click="submit">
            提交
          </div> 
        </div>
      </van-form>
    </van-row>
    <!-- <van-overlay :show="loading" style="z-index: 1; position: fixed;background-color: rgba(0,0,0,0.6);" /> -->
    <div v-if="loading" style="z-index: 1; position: fixed;top:0;left:0;width:100%;height:100%;background-color: rgba(0,0,0,0.6);" />
  </div>
</template>
<script>
import { Dialog } from 'vant';
import { Toast } from "vant";
import Cookies from "js-cookie";
import { encrypt, encrypt2, decrypt } from '../../utils/jsencrypt';
import axios from "axios";

export default {
  data() {
    return {
      portrait:undefined,
      params:undefined,
      oldPass: '',
      newPass: '',
      nonce:undefined,
      timestamp:undefined,
      token:undefined,
      userId:undefined,
      loading:false,
      formData:undefined,
      username:undefined,
    };
  },
  created(){
    if(Cookies.get("userId57")){
      this.userId = Cookies.get("userId57")
    }else{
      this.$router.push({ path: "/login"})
    }
    this.portrait = Cookies.get("portrait57")
    if(Cookies.get("token57")){
      this.token = Cookies.get("token57")
    }
    if(Cookies.get("nonce57")){
      this.nonce = Cookies.get("nonce57")
    }
    if(Cookies.get("timestamp57")){
      this.timestamp = Cookies.get("timestamp57")
    }
    if(Cookies.get("username57")){
      this.username = Cookies.get("username57")
    }
    if(Cookies.get("password57")){
      this.password = decrypt(Cookies.get("password57"))
    }
    if(!Cookies.get("openid57") || !Cookies.get("username57") || !Cookies.get("password57")){
      this.outLogin()
    }
  },
  mounted(){
    document.title = '中国东信智慧园区'
    
  },
  methods: {
    afterRead(param) {
      this.formData = new FormData()// FormData 对象
      this.formData.append('file', param.file)// 文件对象
      let params = JSON.stringify({nonce:this.nonce,timestamp:this.timestamp,query:{userId:this.userId}})
      this.formData.append('params', params)// 参数
      this.formData.append('multipartFile', param.file)// 参数
      axios.post(`https://smartpark.caih.com/zkxt/api/thirdparty/v1/user/edit/zkuser/picture` ,this.formData, 
        {headers: {
              'Content-Type': "multipart/form-data",
              "XYTACCESSTOKEN":this.token
          }
        }).then(res => {
            axios.get(`https://smartpark.caih.com/zkxt/api/thirdparty/v1/user/appLogin?name=${this.username}&pass=${this.password}`).then(res => {
              if (res?.data?.data?.data?.cipher) {
                  localStorage.setItem("cipher57",res?.data?.data?.data?.cipher)
                  localStorage.setItem("classify","1")
                  Cookies.set("password57", encrypt(this.password), { expires: 300 });
                  Cookies.set("portrait57", res.data.data.data.user.avatarName, { expires: 300 });
                  Cookies.set("userId57", res.data.data.data.userId, { expires: 300 });
                  Cookies.set("token57", res.data.data.data.token, { expires: 300 });
                  Cookies.set("nonce57", res.data.data.data.nonce, { expires: 300 });
                  Cookies.set("timestamp57", res.data.data.data.timestamp, { expires: 300 });
                  this.portrait = res.data.data.data.user.avatarName
              } 
            }).catch(err =>{
              Toast(err.response.data.message)
            })

          }).catch(err =>{
            Toast(err.response.data.message)
        })
    },
    //一卡通
    ykt(){
      this.$router.push({ path: `/amount?token=${localStorage.getItem('cipher57')}&classify`})
    },
    //世茂
    sm(url){
      let param = {
        userid:encrypt(Cookies.get("username57")),
        password:Cookies.get("password57"),
        type:"wx_yt"
      }
      window.location.href = `${url}?param=${encodeURIComponent(JSON.stringify(param))}`
    },
    mm(){
      this.loading = true
    },
    cancel(){
      this.loading = false
    },
    submit(){
      if(this.oldPass && this.newPass){
        axios.post(`https://smartpark.caih.com/zkxt/api/thirdparty/v1/user/edit/zkuser/pass`, 
          {
            "nonce": Cookies.get("nonce57"),
            "timestamp": Cookies.get("timestamp57"),
            "query": {
              "userId":Cookies.get("userId57"),
              "oldPass": encrypt2(this.oldPass),
              "newPass": encrypt2(this.newPass)
            }
          },
          {headers: {
              "XYTACCESSTOKEN":Cookies.get("token57")
            }
          }).then(res => {
              Toast("密码修改成功")
              this.loading = false
              Cookies.remove("password57");
              Cookies.remove("userId57");
              Cookies.remove("token57");
              Cookies.remove("nonce57");
              Cookies.remove("timestamp57");
              this.$router.push({ path: "/"})
            }).catch(err =>{
              Toast(err.response.data.message)
          })
      }else if(!this.oldPass){
        Toast("原密码不能为空")
      }else if(!this.newPass){
        Toast("新密码不能为空")
      }
    },
    outLogin(){
      Dialog.confirm({
        title: '提示',
        message: '确定退出登录吗？',
      }).then(() => {
        axios.put('/dxtop/staff', {
          id:Cookies.get("userId57"),
          openId:""
        })
        Cookies.remove("timestamp57");
        //Cookies.remove("classify");
        Cookies.remove("username57");
        Cookies.remove("rememberMe57");
        Cookies.remove("password57");
        Cookies.remove("portrait57");
        Cookies.remove("userId57");
        Cookies.remove("token57");
        Cookies.remove("nonce57");
        
        Cookies.remove("timestamp57");
        Cookies.remove("nickName57");
        Cookies.remove("dept57");
        Cookies.remove("phone57");
        Cookies.remove("people57");
        Cookies.remove("openid57");
        Cookies.remove("cardId57");
        
        
        
    
        localStorage.removeItem("amount57");
        localStorage.removeItem("passageway");
        localStorage.removeItem("user_wt")
              // localStorage.setItem("user_wt", "0001T110000000002HBL") //测试id
        localStorage.removeItem("cardId57")
        localStorage.removeItem("classify")
        localStorage.removeItem("type")
        localStorage.removeItem("cipher57")
        localStorage.removeItem("dwtype")
        localStorage.removeItem("cipher")
        localStorage.removeItem("pcy")
        

        this.$router.push({ path: "/"})

        
      });
      
    }
  },
};
</script>
<style lang="scss" scoped>
.mianBox{
    height: 100%;
    width: 100%;
    color: #FFF;
    padding-top: 44px;
    box-sizing: border-box;
    background-color: #F7F7F7;
    .my{
      width:96%;
      margin:0 auto;
      height:calc(100% - 44px);
      overflow-y:scroll;
      .msg{
        height:50px;
        line-height: 50px;
        border-bottom:1px solid #ccc;
        text-align: center;
        .left{
          width:50%;
          text-align: left;
          color:#000;
          display: inline-block;
          vertical-align: middle;
        }
        .right{
          width:50%;
          text-align: right;
          display: inline-block;
          vertical-align: middle;
          position: relative;
          .upload{
            position: absolute;
            width:100px;
            height:50px;
            overflow: hidden;
            top:0px;
            right:0;
            opacity: 0;
            z-index: 10;
          }
          .portrait{
            width:30px !important;
            margin:0 30px 0 0;
            vertical-align: middle;
            ::v-deep .van-image__img{
              border-radius: 50% !important;
            }
          }
          .right_icon{
            width:8px !important;
            text-align: center;
            position: absolute;
            top:16px;
            right:0px;
            img{
              width:20px !important;
            }
          }
        }
      }
    }
    .pass{
      width:80%;
      background-color: #fff;
      border-radius: 10px;
      position: absolute;
      z-index: 2;
      top:30%;
      left:10%;
      color:#808080;
      
      .title{
        font-size: 14px;
        text-align: center;
        padding:10px 15px;
      }
      .text{
        font-size: 12px;
        text-align: left;
        margin-top:10px;
        padding:10px 15px;
      }
      .van-cell{
        padding:0;
        width:calc(100% - 30px);
        margin:10px 0 0 15px;
        background-color: #fff;
        border:none !important;
        
        line-height: 30px;
        ::v-deep .van-field__body{
           .van-field__control{
            background-color: #fff !important;
            padding-left:10px !important;
            border:1px solid #D3D3D3 !important;
            border-radius: 6px;
            
          }
        }
       
      }
      .operation{
        height:40px;
        line-height: 40px;
        border-top:1px solid #D3D3D3;
        text-align: center;
        margin-top:30px;
        .cancel{
          width:50%;
          border-right: 1px solid #D3D3D3;
          box-sizing: border-box;
          display: inline-block;

        }
        .submit{
          width:50%;
          box-sizing: border-box;
          display: inline-block;
        }
      }
    }
}


</style>