pet-system-fulfiller-app/pages/login/reset-pwd-verify.vue

<template>
    <view class="reset-container">
        <!-- 顶部导航栏 (自定义或使用原生) -->
        <!-- 这里假设使用原生导航栏，标题 "重置密码" -->

        <view class="content">
            <view class="tip-text">请输入 +86 {{ mobileMask }} 收到的短信验证码，进行验证~</view>

            <view class="input-group">
                <text class="label">验证码</text>
                <view class="input-wrapper">
                    <input 
                        class="code-input" 
                        type="number" 
                        maxlength="6" 
                        v-model="code"
                    />
                    <view class="get-code-btn" @click="getVerifyCode">
                        <text class="btn-text">{{ countDown > 0 ? `${countDown}s` : '获取验证码' }}</text>
                    </view>
                </view>
            </view>
            
            <button class="next-btn" @click="nextStep">下一步</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            mobile: '',
            code: '',
            countDown: 0,
            timer: null
        }
    },
    computed: {
        mobileMask() {
            if (!this.mobile) return '';
            return this.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
        }
    },
    onLoad(options) {
        if (options.mobile) {
            this.mobile = options.mobile;
        } else {
            // 测试用默认手机号
            this.mobile = '13412346783';
        }
    },
    methods: {
        getVerifyCode() {
            if (this.countDown > 0) return;
            
            this.countDown = 60;
            this.timer = setInterval(() => {
                this.countDown--;
                if (this.countDown <= 0) {
                    clearInterval(this.timer);
                }
            }, 1000);
            
            uni.showToast({ title: '验证码已发送', icon: 'none' });
        },
        nextStep() {
            if (!this.code) {
                uni.showToast({ title: '请输入验证码', icon: 'none' });
                return;
            }
            // 跳转到设置密码页
            uni.navigateTo({
                url: '/pages/login/reset-pwd-set'
            });
        }
    }
}
</script>

<style>
page {
    background-color: #fff;
}
.reset-container {
    padding: 40rpx;
}
.tip-text {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 60rpx;
    line-height: 1.5;
}
.input-group {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20rpx;
    margin-bottom: 60rpx;
}
.label {
    font-size: 30rpx;
    color: #333;
    width: 120rpx;
}
.input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.code-input {
    flex: 1;
    font-size: 30rpx;
    color: #333;
}
.get-code-btn {
    background-color: #F8F8F8;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
}
.btn-text {
    font-size: 26rpx;
    color: #FF5722;
}
.next-btn {
    background: linear-gradient(90deg, #FF6F00 0%, #FF5722 100%);
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    border-radius: 8rpx; /* 图2也是带圆角的矩形，和登录页一致 */
    height: 88rpx;
    line-height: 88rpx;
}
.next-btn::after {
    border: none;
}
</style>