pet-system-fulfiller-app/pages/mine/settings/security/change-phone/index.vue

<template>
    <view class="container">
        <!-- 自定义头部 -->
        <view class="custom-header">
            <view class="header-left" @click="navBack">
                <image class="back-icon" src="/static/icons/chevron_right_dark.svg" style="transform: rotate(180deg);"></image>
            </view>
            <text class="header-title">修改手机号</text>
            <view class="header-right"></view>
        </view>
        <view class="header-placeholder"></view>

        <view class="form-card">
            <view class="form-item">
                <text class="form-label">新手机号</text>
                <input 
                    class="form-input" 
                    type="number" 
                    v-model="phone" 
                    placeholder="请输入新手机号"
                    placeholder-class="placeholder"
                    maxlength="11"
                />
            </view>
            <view class="form-item no-border">
                <text class="form-label">验证码</text>
                <input 
                    class="form-input" 
                    type="number" 
                    v-model="code" 
                    placeholder="请输入验证码"
                    placeholder-class="placeholder"
                    maxlength="6"
                />
                <button 
                    class="code-btn" 
                    :disabled="countdown > 0"
                    @click="sendCode">
                    {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
                </button>
            </view>
        </view>

        <view class="btn-area">
            <button class="submit-btn" @click="submitChange">确认修改</button>
        </view>

        <view class="tips">
            <text class="tips-text">• 修改手机号后，新手机号将作为登录账号</text>
            <text class="tips-text">• 请确保新手机号可以正常接收短信</text>
        </view>
    </view>
</template>

<script>
// 引入 API @author steelwei
import { updatePhone } from '@/api/fulfiller/fulfiller'

export default {
    data() {
        return {
            phone: '',
            code: '',
            countdown: 0,
            timer: null
        }
    },
    onUnload() {
        if (this.timer) {
            clearInterval(this.timer);
        }
    },
    methods: {
        navBack() {
            uni.navigateBack({ delta: 1 });
        },
        
        // 发送验证码 @author steelwei
        sendCode() {
            // 验证手机号
            if (!this.phone) {
                uni.showToast({ title: '请输入手机号', icon: 'none' });
                return;
            }
            if (!/^1[3-9]\d{9}$/.test(this.phone)) {
                uni.showToast({ title: '手机号格式不正确', icon: 'none' });
                return;
            }
            
            // TODO: 调用发送验证码接口
            uni.showToast({ title: '验证码已发送', icon: 'success' });
            
            // 开始倒计时
            this.countdown = 60;
            this.timer = setInterval(() => {
                this.countdown--;
                if (this.countdown <= 0) {
                    clearInterval(this.timer);
                }
            }, 1000);
        },
        
        // 提交修改 @author steelwei
        async submitChange() {
            // 验证输入
            if (!this.phone) {
                uni.showToast({ title: '请输入手机号', icon: 'none' });
                return;
            }
            if (!/^1[3-9]\d{9}$/.test(this.phone)) {
                uni.showToast({ title: '手机号格式不正确', icon: 'none' });
                return;
            }
            if (!this.code) {
                uni.showToast({ title: '请输入验证码', icon: 'none' });
                return;
            }
            
            uni.showLoading({ title: '提交中...' });
            try {
                const res = await updatePhone(this.phone, this.code);
                
                if (res.code === 200) {
                    uni.showToast({ 
                        title: '修改成功', 
                        icon: 'success',
                        duration: 2000
                    });
                    setTimeout(() => {
                        uni.navigateBack({ delta: 1 });
                    }, 2000);
                } else {
                    uni.showToast({ 
                        title: res.msg || '修改失败', 
                        icon: 'none' 
                    });
                }
            } catch (error) {
                console.error('修改手机号失败:', error);
                uni.showToast({ title: error.message || error.msg || '请求失败', icon: 'none' });
            } finally {
                uni.hideLoading();
            }
        }
    }
}
</script>

<style>
page {
    background-color: #F8F8F8;
}
.custom-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88rpx;
    padding-top: var(--status-bar-height);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 30rpx;
    padding-right: 30rpx;
    box-sizing: content-box;
    z-index: 100;
}
.header-placeholder {
    height: calc(88rpx + var(--status-bar-height));
}
.back-icon {
    width: 40rpx;
    height: 40rpx;
}
.header-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
}
.header-right {
    width: 40rpx;
}

.container {
    padding: 20rpx 30rpx;
}
.form-card {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 0 30rpx;
    margin-bottom: 30rpx;
}
.form-item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1px solid #F5F5F5;
}
.form-item.no-border {
    border-bottom: none;
}
.form-label {
    width: 160rpx;
    font-size: 28rpx;
    color: #333;
}
.form-input {
    flex: 1;
    font-size: 28rpx;
    color: #333;
}
.placeholder {
    color: #999;
}
.code-btn {
    width: 180rpx;
    height: 60rpx;
    line-height: 60rpx;
    background-color: #FF5722;
    color: #fff;
    font-size: 24rpx;
    border-radius: 30rpx;
    padding: 0;
    margin-left: 20rpx;
}
.code-btn[disabled] {
    background-color: #ccc;
}

.btn-area {
    padding: 40rpx 0;
}
.submit-btn {
    background-color: #FF5722;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    height: 88rpx;
    line-height: 88rpx;
    border: none;
}

.tips {
    padding: 20rpx 30rpx;
}
.tips-text {
    display: block;
    font-size: 24rpx;
    color: #999;
    line-height: 40rpx;
}
</style>