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>-->
    <van-cell title="修改密码" @click="showPassword=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;">
      <template #icon>
        <van-icon :name="require('../../assets/images/housesteadSurvey/little2.png')" size="18" color="#fff" style="margin:10px;"/>
      </template>
    </van-cell>
    <van-cell title="退出软件" is-link to="/homesteadLogin" 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/little2.png')" size="18" color="#fff" style="margin:10px;"/>
      </template>
    </van-cell>
    <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>
  </div>
</template>

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

    export default {
        name: "homesteadSettle",
      data(){
          return{
            showPassword:false,
            oldPassword: "",
            newPassword: "",
            confirmPassword: "",
        }},
            methods:{
          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>