pet-system-fulfiller-app/pages/mine/settings/profile/edit-name/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 no-border">
                <text class="form-label">真实姓名</text>
                <input 
                    class="form-input" 
                    type="text" 
                    v-model="name" 
                    placeholder="请输入真实姓名"
                    placeholder-class="placeholder"
                    maxlength="20"
                />
            </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 { updateName } from '@/api/fulfiller/fulfiller'

export default {
    data() {
        return {
            name: ''
        }
    },
    onLoad(options) {
        if (options.name) {
            this.name = decodeURIComponent(options.name);
        }
    },
    methods: {
        navBack() {
            uni.navigateBack({ delta: 1 });
        },
        
        // 提交修改 @author steelwei
        async submitChange() {
            // 验证输入
            if (!this.name || !this.name.trim()) {
                uni.showToast({ title: '请输入姓名', icon: 'none' });
                return;
            }
            if (this.name.trim().length < 2) {
                uni.showToast({ title: '姓名至少2个字符', icon: 'none' });
                return;
            }
            
            uni.showLoading({ title: '提交中...' });
            try {
                const res = await updateName(this.name.trim());
                
                if (res.code === 200) {
                    uni.showToast({ 
                        title: '修改成功', 
                        icon: 'success',
                        duration: 2000
                    });
                    
                    // 通知上一页更新姓名
                    uni.$emit('updateName', this.name.trim());
                    
                    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;
}

.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>