Dining_Hall/pages/newPassword.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view class="password-page">
    <view class="title">设置新密码</view>
    <view class="subtitle">新密码至少8个字符，不能全是字母或数字</view>

    <u--form labelPosition="top" :model="form" ref="uForm">
      <u-form-item label="新密码" prop="password" leftIcon="lock" leftIconStyle="font-size: 42rpx" labelWidth="80">
        <u-input
          v-model="form.password"
          :type="showPassword ? 'text' : 'password'"
          placeholder="请输入新密码（字母加数字组合）"
          border="none"
          clearable
        >
          <template slot="suffix">
            <u-icon
              :name="showPassword ? 'eye-fill' : 'eye-off'"
              size="20"
              color="#c0c4cc"
              @click="showPassword = !showPassword"
            ></u-icon>
          </template>
        </u-input>
      </u-form-item>

      <u-form-item label="确认密码" prop="confirmPassword" leftIcon="lock" leftIconStyle="font-size: 42rpx" labelWidth="120">
        <u-input
          v-model="form.confirmPassword"
          :type="showConfirmPassword ? 'text' : 'password'"
          placeholder="请再次输入新密码（字母加数字组合）"
          border="none"
          clearable
        >
          <template slot="suffix">
            <u-icon
              :name="showConfirmPassword ? 'eye-fill' : 'eye-off'"
              size="20"
              color="#c0c4cc"
              @click="showConfirmPassword = !showConfirmPassword"
            ></u-icon>
          </template>
        </u-input>
      </u-form-item>
    </u--form>

    <view class="button-wrap">
      <u-button
        type="warning"
        text="确定"
        shape="circle"
        @click="handleSubmit"
        :customStyle="{
          width: '100%',
          height: '90rpx',
          background: '#ff6b00',
          border: 'none'
        }"
      ></u-button>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
		fontValue:uni.getStorageSync('fontSize') || 8,
		form: {
			password: '',
			confirmPassword: ''
		},
		showPassword: false,
		showConfirmPassword: false
    }
  },
  methods: {
    validatePassword(password) {
      // 至少8个字符，必须包含字母和数字
      const reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/
      return reg.test(password)
    },

    handleSubmit() {
      if (!this.form.password || !this.form.confirmPassword) {
        uni.$u.toast('请填写完整信息')
        return
      }

      if (!this.validatePassword(this.form.password)) {
        uni.$u.toast('密码必须至少8个字符，包含字母和数字')
        return
      }

      if (this.form.password !== this.form.confirmPassword) {
        uni.$u.toast('两次输入的密码不一致')
        return
      }

      // 提交新密码
      uni.$u.toast('密码修改成功')
      // 跳转到登录页或其他页面
    }
  }
}
</script>

<style lang="scss" scoped>
.password-page {
  padding: 40rpx;
  background-color: #ffffff; 
  height: 94vh;
  overflow-y: auto;

  .title {
    font-size: 40rpx;
    font-weight: 550;
    color: #333;
    margin-bottom: 20rpx;
  }

  .subtitle {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 60rpx;
  }

  .button-wrap {
    margin-top: 80rpx;
  }
}

::v-deep .u-form-item {
  margin-bottom: 30rpx;

  &__body {
    padding: 24rpx 0;
    border-bottom: 1px solid #eee;
  }
}

::v-deep .u-input {
  &__content__prefix-icon {
    margin-right: 10rpx;
  }

  &__content__suffix-icon {
    margin-left: 10rpx;
  }
}
</style>