新政修改密码功能

zhangxiaoxu

2026-01-06 89761212ad3ac02b68276d82c26ab6cd767ea216

 pages/home/home.vue

@@ -145,7 +145,7 @@
                  <view class="num">{{item.lyDSum || 0}}</view>

                </view>

                <view class="caol-block">

                  <view class="name">日合计(元)</view>

                  <view class="name">日合计(吨)</view>

                  <view class="num">{{item.d1 || 0}}</view>

                </view>

              </view>

@@ -529,6 +529,14 @@
      <!-- 菜单栏 -->

      <!-- <popup-menu @menuShow="menushow" ref="menuRef"></popup-menu> -->

      <u-gap height="15" bgColor="#eeeeee"></u-gap>







    <view class="editorPass" @click="handlePwd">

        <image class="icon" src="@/static/home/editorIcon.png"></image>

        <view class="">修改密码</view>

    </view>

    <view class="huiseBox"></view>

      <view class="utils">

         <view class="utils-container">

            <view class="utils-container-body" @click="redirectLogin">

@@ -542,6 +550,66 @@
         </view>

      </view>

      <u-gap height="60" bgColor="#eeeeee"></u-gap>



    <view class="passWord-main-box">

      <u-popup :show="passShow"

               :closeable="true"

               :closeOnClickOverlay="true"

               @close="handleClosePassShow"

               mode="center"

               width="90%"

               class="passBox">

        <view class="popup-box">

          <u-form :model="formData" ref="uForm" borderBottom :rules="rules" :label-width="150">

            <u-form-item prop="password" label="原密码" borderBottom>

              <u-input

                  class="flex-1"

                  type="password"

                  v-model="formData.password"

                  :border="false"

                  placeholder="请输入原来的密码"

              />

            </u-form-item>

            <u-form-item prop="newpassword1" label="新密码" borderBottom>

              <u-input

                  class="flex-1"

                  type="password"

                  v-model="formData.newpassword1"

                  placeholder="密码应由8-16位数字、字母、符号组成。请不要使用容易被猜到的密码"

                  :border="false"

              />

            </u-form-item>

            <view class="intensity">

              <view class="psdText">密码强度</view>

              <view

                  class="line"

                  :class="[level.includes('low') ? 'low' : '']"></view>

              <view

                  class="line"

                  :class="[level.includes('middle') ? 'middle' : '']"></view>

              <view

                  class="line"

                  :class="[level.includes('high') ? 'high' : '']"></view>

              <div class="warningtext">

                密码应由8-16位数字、字母、符号组成。请不要使用容易被猜到的密码

              </div>

            </view>

            <u-form-item prop="newpassword2" label="确认密码" borderBottom>

              <u-input

                  class="flex-1"

                  type="password"

                  v-model="formData.newpassword2"

                  placeholder="再次输入新密码"

                  :border="false"

              />

            </u-form-item>

          </u-form>

          <view class="sumbmit-box">

            <u-button type="primary" shape="circle" @click="handlePassConfirm" :loading="sumbLoading"> 确定 </u-button>

          </view>

        </view>

      </u-popup>

    </view>

   </view>

</template>



@@ -576,7 +644,83 @@
      }

   },

   data() {

    const validatePass = (rule, value, callback) => {

      if (this.formData.newpassword1 !== "") {

        if (value !== this.formData.newpassword1) {

          callback(new Error("两次输入密码不一致!"));

        } else {

          callback();

        }

      } else {

        callback();

      }

    };

    const checkPassword = (rule, value, callback) => {

      // let roles = this.$store.getters.roles;//当前用户角色id

      // let passL = 8;

      // if (roles.concat(1)){

      //   passL = 10

      // }

      let passL = 8;

      this.level = []

      if(!value) {

        return callback('密码不能为空')

      }

      if(value.length < passL) {

        return callback(`密码不能少于${passL}位`)

      }

      if(value.length > 16) {

        return callback('密码不能大于16位')

      }

      //校验是数字

      const regex1 = /^\d+$/

      // 校验字母

      const regex2 = /^[A-Za-z]+$/

      // 校验符号

      const regex3 =

          /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/

      if(regex1.test(value)) {

        this.level.push('low')

        return callback('密码强度过低')

      }else if(regex2.test(value)) {

        this.level.push('low')

        return callback('密码强度过低')

      }else if(regex3.test(value)) {

        this.level.push('low')

        return callback('密码强度过低')

      }else if(/^[A-Za-z\d]+$/.test(value)) {

        this.level.push('low')

        this.level.push('middle')

        return callback('密码强度过低')

      }else if(

          /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(

              value

          )

      ) {

        this.level.push('low')

        this.level.push('middle')

        return callback('密码强度过低')

      }else if(

          /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(

              value

          )

      ) {

        this.level.push('low')

        this.level.push('middle')

        return callback('密码强度过低')

      } else if (

          /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(

              value

          )

      ) {

        this.level.push('low')

        this.level.push('middle')

        this.level.push('high')

      }

      return callback()

    };

      return {

      level:[],

         // ucharts图表

         chartData: {},

         opts: {

@@ -652,7 +796,6 @@
         procInstId: '',

         // 选择器

         statusSeletShow: false,

         statusList: [['中国', '美国', '日本']],

         // data

         shenqingData: [],

         daibanData: [],

@@ -694,12 +837,37 @@
      d1Sum:0,  //总计

      lyDSumSum:0,  //路运

      dsumSum:0,  //汽运

      passShow: false,  //密码弹框

      sumbLoading: false,

      formData: {

        password:'',

        newpassword1:'',

        newpassword2:'',

      },

      rules: {

        password: [{

          type: 'string',

          required: true,

          message: '请填写密码',

          trigger: ['blur', 'change']

        }],

        newpassword1: [{

          required: true,

          validator: checkPassword,

          trigger: 'change'

        }],

        newpassword2: [{

          required: true,

          validator: validatePass,

          trigger: "blur"

        }]

      }

      };

   },

   // 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发

   // onReady() {



   // },

   onReady() {

    this.$refs.uForm.setRules(this.rules)

   },

   // 点击导航栏菜单后

   onNavigationBarButtonTap(e) {

      console.log('退出导航栏按钮事件', e);

@@ -776,6 +944,41 @@
    },

  },

   methods: {

    handlePassConfirm() { //修改密码

      //列表查询

      this.$refs.uForm.validate().then(res => {

        this.sumbLoading = true

        uni.showLoading({

          title: '正在加载...'

        });

        this.formData.deptId = uni.getStorageSync('userInfo')?.deptId

        this.formData.username = uni.getStorageSync('userInfo')?.username

        this.$reqPut('editInfo',this.formData).then(res => {

          if (res.code == 0) {

            this.passShow = false

            this.sumbLoading = false

            this.$u.toast('修改密码成功!');

            setTimeout(() => {

              uni.reLaunch({

                url:"/pages/login/login"

              })

            }, 1000)

            uni.hideLoading();

          }else {

            this.$u.toast(res.msg || '修改密码失败');

            this.sumbLoading = false

            uni.hideLoading();

          }

        })

      })



    },

    handleClosePassShow() {

      this.passShow = false

    },

    handlePwd() {

      this.passShow = true

    },

    handleShouKuanIsMore() {  //当日收款情况

      this.shoukuanIsMore = !this.shoukuanIsMore

    },

@@ -1225,6 +1428,17 @@
::v-deep{

  .uni-table-td,.uni-table-th{

    color: #000;

  }

  .u-popup__content{

    width: 85%;

    padding: 40rpx;

    box-sizing: border-box;

    border-radius: 10rpx;

  }

  .passWord-main-box{

    .u-icon__icon{

      font-size: 28rpx!important;

    }

  }

}

::v-deep.home {

@@ -1745,4 +1959,63 @@
    }

  }

}

.sumbmit-box{

  margin-top: 40rpx;

}

.editorPass{

  width: 100%;

  justify-content: center;

  display: flex;

  margin: 20rpx 0;

  align-items: center;

  .icon{

    width: 46rpx;

    height: 46rpx;

    margin-right: 10rpx;

  }

}

.huiseBox{

  width: 100%;

  height: 12rpx;

  background: #eeeeee;

}

.intensity {

  width: 100%;

  margin-top: 10rpx;

  .psdText {

    font-size: 14px;

    margin-right: 10px;

  }



  .line {

    display: inline-block;

    width: 70rpx;

    height: 8rpx;

    background: #d8d8d8;

    border-radius: 6rpx;

    margin-right: 16rpx;



    &.low {

      background: #f4664a;

    }



    &.middle {

      background: #ffb700;

    }



    &.high {

      background: #2cbb79;

    }

  }



  .level {

    margin: 0 32rpx 0 16rpx;

  }



  .warningtext {

    color: #5a5a5a;

    font-size: 24rpx;

    margin-top: 10rpx;

  }

}

</style>