ZhiHuiJiaoWu_UniApp/pages/market/my/update_pass.vue

<!--修改密码-->
<template>
	<view>
		<view class="title">
			<view :class="{'green-text': tset_style === 1}">1.验证旧密码</view>
			<view :class="{'green-text': tset_style === 2}">2.设置新密码</view>
		</view>
		<view :style="{'background-color':'#fff','width':'100%','height':'100vh' }">
			<view style="width: 95%;height: 30rpx;"></view>
			<view v-if="tset_style == 1">
				<view class="describe">
					为保障您的账号安全，修改密码前请填写原密码
				</view>
				<view style="width: 95%;margin:30rpx auto;">
					<fui-input borderTop placeholder="请输入原登录密码" v-model="old_password"
						backgroundColor="#f2f2f2"></fui-input>
				</view>
			</view>
			<view v-if="tset_style == 2">
				<view style="width: 95%;margin:30rpx auto;">
					<fui-input borderTop placeholder="请设置6-20位新的登录密码" v-model="formData.new_password" @input="input"
						backgroundColor="#f2f2f2"></fui-input>
				</view>
				<view style="width: 95%;margin: auto;">
					<fui-input borderTop :padding="['20rpx','32rpx']" v-model="formData.new_password_2" placeholder="请再次输入新的登录密码" @input="input"
						backgroundColor="#f2f2f2">
					</fui-input>
				</view>
			</view>
			<view style="width: 95%;margin:60rpx auto;">
        <view class="btn_box">
          <fui-button
              background="#465cff"
              radius="5rpx"
              @click="nextStep(1)"
              v-if="tset_style != 1">上一步
          </fui-button>

          <fui-button background="#00be8c" radius="5rpx" @click="nextStep(2)" v-if="tset_style == 1">下一步</fui-button>

          <fui-button background="#00be8c" radius="5rpx" @click="submit" v-if="tset_style == 2">提交</fui-button>
        </view>


				<view style="width: 95%;margin:60rpx auto;">
					<fui-button background="#fff" radius="5rpx" @click="forgot" color="#999999" v-if="tset_style == 1">忘记原密码</fui-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

	export default {
		data() {
			return {
				code: '',
				user: '',
				tset_style: 1,//tab栏目|1=验证旧密码页,2=设置新密码页

        old_password:'',//旧密码


        formData:{
          phone:'',//当前登录用户的手机号
          new_password:'',//新密码
          new_password_2:'',//二次新密码
          key_value:'',//修改密码的key_value
        },
			}
		},
		onLoad() {},
    onShow() {
      this.init()//初始化
    },
		methods: {
      //初始化
		  async init(){
		    await this.getUserInfo()
      },
      //获取用户信息
      async getUserInfo() {
        let res = await apiRoute.getPersonnelInfo({})
        if (res.code != 1) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }
        this.formData.phone = res.data.phone//用户手机号
      },

      //上/下一步切换
			async nextStep(tset_style){
			  //tset_style|1=第一页,2=第二页
        if(tset_style == 2){
          if(!this.old_password){
            uni.showToast({
              title: '请输入原登录密码',
              icon: 'none'
            })
            return
          }
          //验证旧密码
          let params = {
            old_password: this.old_password
          }
          //验证旧密码是否正确
          let res = await apiRoute.common_personnelCheckOldPwd(params)
          if(!res.code){
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
            return
          }
          this.formData.key_value = res.data.key_value
        }
				this.tset_style = Number(tset_style)
			},
      //忘记密码
			forgot() {
				uni.navigateTo({
					url: '/pages/student/login/forgot'
				})
			},

      //提交
      async submit() {
        //验证数据
        if (!this.formData.new_password) {
          uni.showToast({
            title: '请输入新密码',
            icon: 'none'
          })
          return
        }

        if (this.formData.new_password.length < 6 || this.formData.new_password.length > 20) {
          uni.showToast({
            title: '新密码长度为6-20位',
            icon: 'none'
          })
          return
        }

        if (!this.formData.new_password) {
          uni.showToast({
            title: '请输入新密码',
            icon: 'none'
          })
          return
        }
        //验证两次密码是否一致
        if (this.formData.new_password != this.formData.new_password_2) {
          uni.showToast({
            title: '两次密码不一致',
            icon: 'none'
          })
          return
        }

        let res = await apiRoute.common_personnelEdidPassword(this.formData)
        if(!res.code){
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }
        uni.showToast({
          title: res.msg,
          icon: 'success'
        })
        //延迟1s执行
        setTimeout(() => {
          //跳转页面-个人中心
          uni.navigateTo({
            url: `/pages/market/my/index`
          })
        }, 1000)
      },
    }
	}
</script>

<style lang="less" scoped>
	page {
		font-weight: normal;
	}

	.fui-section__title {
		margin-left: 32rpx;
	}

	.fui-left__icon {
		padding-right: 24rpx;
	}

	.title {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		width: 100%;
		background-color: #fff;
		font-size: 26rpx;
		border: 4rpx #f5f5f5 solid;
	}
	
	.green-text{
		color: #36d6b9;
	}
	
	.describe{
		color: #999999;
		padding-left: 30rpx;
	}

  .btn_box{
    display: flex;
    flex-direction: column;
    gap: 40rpx;
  }
</style>