nsgk_mobile/src/views/homesteadSurvey/settle.vue

<template>
  <div class="app-container">
    <div class="bannerBg" style="">
      <van-nav-bar
        style="background:transparent;border-bottom-width:0;"
        @click-left="$router.back(-1)"
      >
        <template #left>
          <van-icon name="arrow-left" size="18" color="#fff" />
        </template>
        <template #title>
          <p style="color:#fff">设置</p>
        </template>
      </van-nav-bar>
    </div>
<!--    <van-cell title="个人信息" is-link style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px;background:#fff;padding:20px;">
      <template #icon>
        <van-icon :name="require('../../assets/images/housesteadSurvey/little1.png')" size="18" color="#fff" style="margin:10px;"/>
      </template>

    </van-cell>-->
    <div @click="userMessage" style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px;background:#fff;padding:20px;display: flex;align-items: center;">
      <van-icon :name="require('../../assets/images/housesteadSurvey/btn3.png')" size="18"/>
      <p style="font-size: 14px;color: #666666;margin-left: 5px;">个人信息</p>
    </div>
    <div @click="showPassword=true,oldPassword='',newPassword='',confirmPassword='' " style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px;background:#fff;padding:20px;display: flex;align-items: center;">
      <van-icon :name="require('../../assets/images/housesteadSurvey/btn2.png')" size="18"/>
      <p style="font-size: 14px;color: #666666;margin-left: 5px;">修改密码</p>
    </div>

<!--    <div @click="showUpload = true " style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px;background:#fff;padding:20px;display: flex;align-items: center;">
      <van-icon :name="require('../../assets/images/housesteadSurvey/btn3.png')" size="18"/>
      <p style="font-size: 14px;color: #666666;margin-left: 5px;">上传设置</p>
    </div>-->

    <div @click="logout" style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px;background:#fff;padding:20px;display: flex;align-items: center;">
      <van-icon :name="require('../../assets/images/housesteadSurvey/btn4.png')" size="18"/>
      <p style="font-size: 14px;color: #666666;margin-left: 5px;">退出软件</p>
    </div>

    <van-popup v-model:show="showPassword" position="bottom" style="width:100%;padding:20px;">
      <van-cell-group >
        <van-field v-model="oldPassword" label="原密码" type="password" placeholder="请输入" />
        <van-field v-model="newPassword" label="新密码" type="password" placeholder="请输入" />
        <van-field v-model="confirmPassword" label="确认新密码" type="password" placeholder="请输入" />
        <van-row style="text-align: center;margin-top: 40px">
          <van-button round block color="#7AC943" @click="submit">保存</van-button>
        </van-row>
      </van-cell-group>
    </van-popup>

    <van-popup v-model:show="showMessage" position="bottom" style="width:100%;padding:20px;">
      <van-cell-group >
        <van-field v-model="userName" label="账号"  readonly />
        <van-field v-model="nickName" label="昵称" readonly/>
        <van-row style="text-align: center;margin-top: 40px">
          <van-button round block color="#7AC943" @click="cancelMessage">关闭</van-button>
        </van-row>
      </van-cell-group>
    </van-popup>

    <van-popup v-model:show="showUpload" position="bottom" style="width:100%;padding:20px;">
      <van-cell center title="批量上传">
        <template #right-icon>
          <van-switch v-model="checked" size="24" @change="changeUpload"/>
        </template>
      </van-cell>
    </van-popup>

  </div>
</template>

<script>
    import {updateUserPwd} from "../../api/onlineHome/my";
    import {logout} from "../../api/login";

    export default {
        name: "homesteadSettle",
      data(){
          return{
            showPassword:false,
            showMessage:false,
            userName:null,
            nickName:null,
            jsName:null,
            oldPassword: "",
            newPassword: "",
            confirmPassword: "",
            checked:$cookies.get("upload")!=null?true:false,
            showUpload:false,
        }},
      methods:{
         logout() {
          logout().then(res => {
           this.$router.push({path:"../homesteadLogin"})
          })
        },
        changeUpload(){
          if(this.checked){
            this.$cookies.set("upload",1)
          }else{
            this.$cookies.set("upload",0)
          }

        },
        userMessage(){
          this.userName = this.$store.getters.name;
          this.nickName = this.$store.getters.nickName;
          this.showMessage = true;
        },
        cancelMessage(){
           this.showMessage = false;
        },
          submit() {
            if(this.confirmPassword
              !=this.newPassword){
              this.$toast({
                icon: 'error', // 找到自己需要的图标
                message: '两次密码不同，请重新输入',
                duration:"1000",
                onClose:function(){
                  this.oldPassword=""
                  this.newPassword=""
                  this.confirmPassword=""
                  return false;
                }
              })
            }else{
              updateUserPwd(this.oldPassword, this.newPassword).then(
                response => {
                  let _this =this
                  this.$toast({
                    icon: 'success', // 找到自己需要的图标
                    message: '修改成功',
                    duration:"1000",
                    onClose:function(){
                      _this.showPassword = false
                    }
                  })
                }
              );
            }
          }
        }

    }
</script>

<style scoped>
  >>> .bannerBg{
    width: 100%;
    color:#fff;
    padding:10px;
    background: linear-gradient(134deg,#7ac943 1%, #22b7f2);
  }
  >>> .van-hairline--bottom::after {
    border-bottom-width: 0;
  }
</style>