pet-system-fulfiller-app/pages/mine/settings/profile/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="group-card">
            <view class="list-item" @click="changeAvatar">
                <text class="item-title">头像</text>
                <view class="item-right">
                    <image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
                    <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
                </view>
            </view>
            <view class="list-item" @click="editName">
                <text class="item-title">真实姓名</text>
                <view class="item-right">
                    <text class="item-value">{{ userInfo.name }}</text>
                    <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
                </view>
            </view>
        </view>

        <view class="group-card">
            <view class="list-item">
                <text class="item-title">工作类型</text>
                <view class="tag-blue-outline">{{ userInfo.workType }}</view>
            </view>
            <view class="list-item" @click="showStatusPicker">
                <text class="item-title">工作状态</text>
                <view class="item-right">
                    <text class="item-value-black">{{ userInfo.workStatus }}</text>
                    <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
                </view>
            </view>
        </view>

        <view class="group-card">
            <view class="list-item" @click="showCityPicker">
                <text class="item-title">工作城市</text>
                <view class="item-right">
                    <text class="item-value">{{ userInfo.city }}</text>
                    <image class="arrow-icon" src="/static/icons/chevron_right.svg"></image>
                </view>
            </view>
            <view class="list-item no-border">
                <text class="item-title">所属站点</text>
                <view class="item-right">
                    <text class="item-value">深圳市龙华区民治街道第一站</text>
                </view>
            </view>
        </view>

        <!-- 工作状态选择弹窗 -->
        <view class="popup-mask" v-if="isStatusPickerShow" @click="closeStatusPicker">
            <view class="popup-content" @click.stop>
                <view class="popup-title">选择工作状态</view>
                <view class="popup-item" @click="selectStatus('接单中')">接单中</view>
                <view class="popup-item" @click="selectStatus('休息中')">休息中</view>
                <view class="popup-cancel" @click="closeStatusPicker">取消</view>
            </view>
        </view>

        <!-- 城市选择弹窗 (模拟) -->
        <view class="popup-mask" v-if="isCityPickerShow" @click="closeCityPicker">
            <view class="popup-content" @click.stop>
                <view class="popup-header-row">
                    <text class="popup-btn-cancel" @click="closeCityPicker">取消</text>
                    <text class="popup-title-text">请选择工作城市</text>
                    <text class="popup-btn-confirm" @click="confirmCity">确定</text>
                </view>
                <view class="city-tabs">
                    <view 
                        class="city-tab-item" 
                        :class="{ 'active': cityStep > 0, 'active-red': cityStep === 0 }"
                        @click="changeCityStep(0)">
                        {{ selectedProvince || '请选择' }}
                    </view>
                    <view 
                        class="city-tab-item" 
                        :class="{ 'active': cityStep > 1, 'active-red': cityStep === 1 }"
                        v-if="selectedProvince"
                        @click="changeCityStep(1)">
                        {{ selectedCity || '请选择' }}
                    </view>
                     <view 
                        class="city-tab-item" 
                        :class="{ 'active-red': cityStep === 2 }"
                        v-if="selectedCity"
                        @click="changeCityStep(2)">
                        {{ selectedDistrict || '请选择' }}
                    </view>
                </view>
                <scroll-view scroll-y class="city-list">
                    <view 
                        class="city-item" 
                        v-for="(item, index) in currentList" 
                        :key="index"
                        @click="selectItem(item)">
                        {{ item }}
                        <text v-if="isSelected(item)" style="float: right; color: #FF5722;">✓</text>
                    </view>
                </scroll-view>
            </view>
        </view>

    </view>
</template>

<script>
export default {
    data() {
        return {
            userInfo: {
                name: '张*哥',
                workType: '全职',
                workStatus: '接单中',
                city: '广东省 深圳市 龙华区',
                avatar: '/static/touxiang.png'
            },
            isStatusPickerShow: false,
            isCityPickerShow: false,
            
            // 城市选择相关
            cityStep: 0, // 0: 省, 1: 市, 2: 区
            selectedProvince: '',
            selectedCity: '',
            selectedDistrict: '',
            
            // 模拟数据
            provinces: ['广东省', '湖南省', '江西省'],
            cities: {
                '广东省': ['深圳市', '广州市', '东莞市'],
                '湖南省': ['长沙市', '株洲市'],
                '江西省': ['南昌市', '九江市']
            },
            districts: {
                '深圳市': ['龙华区', '南山区', '福田区', '宝安区'],
                '广州市': ['天河区', '越秀区', '海珠区'],
                '东莞市': ['南城区', '东城区'],
                '长沙市': ['岳麓区', '芙蓉区'],
                '南昌市': ['红谷滩区', '东湖区']
            }
        }
    },
    computed: {
        currentList() {
            if (this.cityStep === 0) {
                return this.provinces;
            } else if (this.cityStep === 1) {
                return this.cities[this.selectedProvince] || [];
            } else if (this.cityStep === 2) {
                return this.districts[this.selectedCity] || [];
            }
            return [];
        }
    },
    onLoad() {
        // 监听姓名修改
        uni.$on('updateName', (newName) => {
            this.userInfo.name = newName;
        });
    },
    onUnload() {
        uni.$off('updateName');
    },
    methods: {
        navBack() {
             uni.navigateBack({
                delta: 1
            });
        },
        changeAvatar() {
            uni.chooseImage({
                count: 1,
                success: (res) => {
                    console.log(res.tempFilePaths);
                    this.userInfo.avatar = res.tempFilePaths[0];
                }
            });
        },
        editName() {
            uni.navigateTo({
                url: `/pages/mine/settings/profile/edit-name?name=${this.userInfo.name}`
            });
        },
        toggleWorkType() {
            // 简单模拟切换
            this.userInfo.workType = this.userInfo.workType === '全职' ? '兼职' : '全职';
        },
        showStatusPicker() {
            this.isStatusPickerShow = true;
        },
        closeStatusPicker() {
            this.isStatusPickerShow = false;
        },
        selectStatus(status) {
            this.userInfo.workStatus = status;
            this.closeStatusPicker();
        },
        
        // 城市选择逻辑
        showCityPicker() {
            this.isCityPickerShow = true;
            // 初始化/重置
            this.cityStep = 0;
            this.selectedProvince = '';
            this.selectedCity = '';
            this.selectedDistrict = '';
            
            // 如果已有值，尝试回显 (这里简化处理，只重置)
            // 实际开发可解析 this.userInfo.city 进行回显
        },
        closeCityPicker() {
            this.isCityPickerShow = false;
        },
        changeCityStep(step) {
            this.cityStep = step;
        },
        selectItem(item) {
            if (this.cityStep === 0) {
                this.selectedProvince = item;
                this.cityStep = 1;
                this.selectedCity = ''; // 重置下级
                this.selectedDistrict = '';
            } else if (this.cityStep === 1) {
                this.selectedCity = item;
                this.cityStep = 2;
                this.selectedDistrict = '';
            } else if (this.cityStep === 2) {
                this.selectedDistrict = item;
            }
        },
        isSelected(item) {
            if (this.cityStep === 0) return this.selectedProvince === item;
            if (this.cityStep === 1) return this.selectedCity === item;
            if (this.cityStep === 2) return this.selectedDistrict === item;
            return false;
        },
        confirmCity() {
            if (this.selectedProvince && this.selectedCity && this.selectedDistrict) {
                this.userInfo.city = `${this.selectedProvince} ${this.selectedCity} ${this.selectedDistrict}`;
                this.closeCityPicker();
            } else {
                uni.showToast({
                    title: '请选择完整的省市区',
                    icon: 'none'
                });
            }
        }
    }
}
</script>

<style>
page {
    background-color: #F8F8F8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.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; /* 14pt */
    font-weight: bold;
    color: #333;
}
.header-right {
    width: 40rpx;
}

.container {
    padding: 20rpx 30rpx;
}
.group-card {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 0 30rpx;
    margin-bottom: 30rpx;
}
.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    border-bottom: 1px solid #F5F5F5;
}
.list-item.no-border {
    border-bottom: none;
}
.item-title {
    font-size: 28rpx;
    color: #333;
}
.item-right {
    display: flex;
    align-items: center;
}
.arrow-icon {
    width: 28rpx;
    height: 28rpx;
    opacity: 0.5;
    margin-left: 10rpx;
}
.user-avatar {
    width: 64rpx; /* Smaller avatar */
    height: 64rpx;
    border-radius: 50%;
}
.item-value {
    font-size: 28rpx;
    color: #999;
}
.item-value-black {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
}
.tag-blue-outline {
    font-size: 24rpx;
    color: #2979FF;
    border: 1px solid #2979FF;
    padding: 4rpx 20rpx;
    border-radius: 30rpx;
    background-color: #fff;
}

/* Popup Styles */
.popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
    display: flex;
    align-items: flex-end;
}
.popup-content {
    width: 100%;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    padding-bottom: 30rpx; /* Safe area */
}
.popup-title {
    text-align: center;
    font-size: 28rpx;
    color: #999;
    padding: 30rpx 0;
    border-bottom: 1px solid #eee;
}
.popup-item {
    text-align: center;
    font-size: 32rpx;
    color: #333;
    padding: 30rpx 0;
    border-bottom: 1px solid #eee;
}
.popup-cancel {
    text-align: center;
    font-size: 32rpx;
    color: #333;
    padding: 30rpx 0;
    margin-top: 20rpx;
    border-top: 10rpx solid #f5f5f5;
}

.popup-header-row {
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1px solid #eee;
}
.popup-btn-cancel { font-size: 28rpx; color: #666; }
.popup-title-text { font-size: 32rpx; font-weight: bold; color: #333; }
.popup-btn-confirm { font-size: 28rpx; color: #FF5722; font-weight: bold; }

.city-tabs {
    display: flex;
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #eee;
}
.city-tab-item {
    font-size: 28rpx;
    margin-right: 40rpx;
    position: relative;
    padding-bottom: 10rpx;
}
.city-tab-item.active { color: #333; }
.city-tab-item.active-red { color: #FF5722; font-weight: bold; }
.city-tab-item.active-red::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40rpx;
    height: 4rpx;
    background-color: #FF5722;
    border-radius: 2rpx;
}
.city-list {
    height: 400rpx;
}
.city-item {
    padding: 30rpx;
    font-size: 28rpx;
    color: #333;
}
</style>