Dining_Hall/pages/amendPassword.vue

<template>
  <view class="password-page">
    <view class="title">修改密码</view>
    <view class="subtitle">输入手机号获取验证码设置新密码</view>

    <u--form labelPosition="top" :model="form" ref="uForm">
      <u-form-item label="手机号" prop="phone" leftIcon="phone" leftIconStyle="font-size: 22px" labelWidth="80">
        <u--input
          v-model="form.phone"
          placeholder="请输入手机号"
          border="none"
          clearable
        ></u--input>
      </u-form-item>

      <u-form-item label="验证码" prop="code" leftIcon="chat" leftIconStyle="font-size: 22px" labelWidth="80">
        <u-input
          v-model="form.code"
          placeholder="请输入验证码"
          border="none"
          clearable
        >
          <template slot="suffix">
            <span
              class="verify-code"
              :class="{ disabled: counting }"
              @click="getVerifyCode"
            >
              {{ counting ? `${counter}s后重新获取` : '获取验证码' }}
            </span>
          </template>
        </u-input>
      </u-form-item>
    </u--form>

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

<script>
export default {
  data() {
    return {
      form: {
        phone: '',
        code: ''
      },
      counter: 60,
      counting: false
    }
  },
  methods: {
    getVerifyCode() {
      if (this.counting) return

      // 验证手机号
      if (!this.form.phone) {
        uni.$u.toast('请输入手机号')
        return
      }

      this.counting = true
      this.counter = 60

      const timer = setInterval(() => {
        if (this.counter > 0) {
          this.counter--
        } else {
          this.counting = false
          clearInterval(timer)
        }
      }, 1000)

      // 发送验证码请求
      uni.$u.toast('验证码已发送')
    },

    handleNext() {
      if (!this.form.phone || !this.form.code) {
        uni.$u.toast('请填写完整信息')
        return
      }

      // 验证通过，跳转到设置新密码页面
      uni.navigateTo({
        url: '/pages/newPassword'
      })
    }
  }
}
</script>

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

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

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

  .verify-code {
    color: #3c9cff;
    font-size: 28rpx;
    padding-left: 24rpx;

    &.disabled {
      color: #999;
    }
  }

  .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;
  }
}
</style>