pet-system-merchant-app/pages/my/user/add/index.vue

<template>
	<view class="user-add-page">
		<NavBar title="新增用户" bgColor="#fff" color="#000"></NavBar>

		<!-- 基本资料 -->
		<view class="section-title">基本资料</view>
		<view class="form-card">
			<view class="form-item">
				<text class="form-label require">姓名</text>
				<input class="form-input" v-model="form.name" placeholder="请输入姓名" />
			</view>
			<view class="form-item">
				<text class="form-label require">手机号</text>
				<input class="form-input" v-model="form.phone" type="number" placeholder="请输入手机号" />
			</view>
			<view class="form-item">
				<text class="form-label">性别</text>
				<picker :range="genderOptions" range-key="label" @change="onGenderChange">
					<view class="picker-value" :class="{'placeholder': form.gender === undefined}">
						{{ getGenderLabel }}
					</view>
				</picker>
			</view>
		</view>

		<!-- 居住信息 -->
		<view class="section-title">居住信息</view>
		<view class="form-card">
			<view class="form-item">
				<text class="form-label require">所属站点</text>
				<picker mode="multiSelector" :range="stationOptions" range-key="name" @change="onStationChange" @columnchange="onStationColumnChange" :value="stationIndex">
					<view class="picker-value" :class="{'placeholder': form.stationId === undefined}">
						{{ getStationLabel }}
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="form-label require">详细住址</text>
				<input class="form-input" v-model="form.address" placeholder="请输入街道/门牌号" />
			</view>
			<view class="form-item">
				<text class="form-label">房屋类型</text>
				<picker :range="houseTypeOptions" range-key="label" @change="onHouseTypeChange">
					<view class="picker-value" :class="{'placeholder': !form.houseType}">
						{{ getHouseTypeLabel }}
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="form-label require">入门方式</text>
				<picker :range="entryMethodOptions" range-key="label" @change="onEntryMethodChange">
					<view class="picker-value" :class="{'placeholder': !form.entryMethod}">
						{{ getEntryMethodLabel }}
					</view>
				</picker>
			</view>
			<view class="form-item" v-if="form.entryMethod === 'password'">
				<text class="form-label require">开门密码</text>
				<input class="form-input" v-model="form.entryPassword" placeholder="请输入密码" />
			</view>
			<view class="form-item" v-if="form.entryMethod === 'key'">
				<text class="form-label require">钥匙位置</text>
				<input class="form-input" v-model="form.keyLocation" placeholder="如：地毯下" />
			</view>
		</view>

		<!-- 其他 -->
		<view class="section-title">其他</view>
		<view class="form-card">
			<view class="form-item vertical">
				<text class="form-label">备注说明</text>
				<textarea class="form-textarea" v-model="form.remark" placeholder="请输入备注" />
			</view>
		</view>

		<!-- 底部固定操作栏 -->
		<view class="footer-bar">
			<button class="save-btn" :loading="saving" @click="onSave">新增用户</button>
		</view>
	</view>
</template>

<script setup>
// @Author: Antigravity
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import NavBar from '@/components/nav-bar/index.vue'
import { addCustomer } from '@/api/archieves/customer'
import { getInfo } from '@/api/system/user'
import { listAreaStation } from '@/api/system/areaStation'
import customerEnums from '@/json/customer.json'

const { houseTypeOptions, entryMethodOptions } = customerEnums
const genderOptions = [{ label: '男', value: 0 }, { label: '女', value: 1 }]

const saving = ref(false)
const stationOptions = ref([[], [], []])
const stationIndex = ref([0, 0, 0])
const allStationNodes = ref([])

const form = reactive({
    name: '',
    phone: '',
    gender: undefined,
    areaId: undefined,
    stationId: undefined,
    address: '',
    houseType: '',
    entryMethod: '',
    entryPassword: '',
    keyLocation: '',
    remark: ''
})

onLoad(async () => {
    try {
        const stationRes = await listAreaStation()
        allStationNodes.value = Array.isArray(stationRes) ? stationRes : (stationRes?.data || [])
        initStationPicker()
    } catch (err) {
        console.error('获取站点失败', err)
    }
})

// 初始化三级联动
const initStationPicker = () => {
    const nodes = allStationNodes.value
    // 第一级：城市 (parentId == 0)
    const cities = nodes.filter(n => String(n.parentId) === '0')
    if (cities.length === 0) return

    // 第二级：默认第一个城市的区域
    const areas = nodes.filter(n => String(n.parentId) === String(cities[0].id))
    
    // 第三级：默认第一个区域的站点
    const stations = areas.length > 0 ? nodes.filter(n => String(n.parentId) === String(areas[0].id)) : []

    stationOptions.value = [cities, areas, stations]
    stationIndex.value = [0, 0, 0]
}

// 监听滚动变动
const onStationColumnChange = (e) => {
    const column = e.detail.column
    const value = e.detail.value
    stationIndex.value[column] = value
    const nodes = allStationNodes.value

    if (column === 0) {
        // 切城市：更新区域和站点
        const selectedCity = stationOptions.value[0][value]
        if (selectedCity) {
            const newAreas = nodes.filter(n => String(n.parentId) === String(selectedCity.id))
            stationOptions.value[1] = newAreas
            stationOptions.value[2] = newAreas.length > 0 ? nodes.filter(n => String(n.parentId) === String(newAreas[0].id)) : []
        } else {
            stationOptions.value[1] = []
            stationOptions.value[2] = []
        }
        stationIndex.value.splice(1, 1, 0)
        stationIndex.value.splice(2, 1, 0)
    } else if (column === 1) {
        // 切区域：更新站点
        const selectedArea = stationOptions.value[1][value]
        if (selectedArea) {
            const newStations = nodes.filter(n => String(n.parentId) === String(selectedArea.id))
            stationOptions.value[2] = newStations
        } else {
            stationOptions.value[2] = []
        }
        stationIndex.value.splice(2, 1, 0)
    }
}

// 确认选择
const onStationChange = (e) => {
    stationIndex.value = e.detail.value
    const stations = stationOptions.value[2]
    const selectedStation = stations[stationIndex.value[2]]
    if (selectedStation && String(selectedStation.type) === '2') {
        form.stationId = selectedStation.id
        form.areaId = selectedStation.parentId
    } else {
        uni.showToast({ title: '请选择到具体的站点层级', icon: 'none' })
    }
}

const getGenderLabel = computed(() => genderOptions.find(o => o.value === form.gender)?.label || '请选择')
const getHouseTypeLabel = computed(() => houseTypeOptions.find(o => o.value === form.houseType)?.label || '请选择')
const getEntryMethodLabel = computed(() => entryMethodOptions.find(o => o.value === form.entryMethod)?.label || '请选择')

const getStationLabel = computed(() => {
    if (!form.stationId) return '请选择'
    const city = stationOptions.value[0][stationIndex.value[0]]?.name || ''
    const area = stationOptions.value[1][stationIndex.value[1]]?.name || ''
    const station = stationOptions.value[2][stationIndex.value[2]]?.name || ''
    return `${city} - ${area} - ${station}`
})
const onGenderChange = (e) => { form.gender = genderOptions[e.detail.value].value }
const onHouseTypeChange = (e) => { form.houseType = houseTypeOptions[e.detail.value].value }
const onEntryMethodChange = (e) => {
    form.entryMethod = entryMethodOptions[e.detail.value].value
    form.entryPassword = ''
    form.keyLocation = ''
}

const onSave = async () => {
    if (!form.name) return uni.showToast({ title: '请输入姓名', icon: 'none' })
    if (!form.phone) return uni.showToast({ title: '请输入手机号', icon: 'none' })
    if (!form.stationId) return uni.showToast({ title: '请选择所属站点', icon: 'none' })
    if (!form.address) return uni.showToast({ title: '请输入详细住址', icon: 'none' })
    if (!form.entryMethod) return uni.showToast({ title: '请选择入门方式', icon: 'none' })
    if (form.entryMethod === 'password' && !form.entryPassword) return uni.showToast({ title: '请输入开门密码', icon: 'none' })
    if (form.entryMethod === 'key' && !form.keyLocation) return uni.showToast({ title: '请输入钥匙位置', icon: 'none' })

    saving.value = true
    try {
        const submitData = { ...form }
        let tenantId = uni.getStorageSync('tenantId')
        
        // 如果本地没有获取到，重新调用接口获取一遍
        if (!tenantId) {
            const userRes = await getInfo()
            if (userRes && userRes.user && userRes.user.tenantId) {
                tenantId = userRes.user.tenantId
                uni.setStorageSync('tenantId', tenantId) // 顺便存回本地
            }
        }
        
        if (tenantId) submitData.tenantId = tenantId
        
        await addCustomer(submitData)
        uni.showToast({ title: '新增成功', icon: 'success' })
        setTimeout(() => uni.navigateBack(), 1000)
    } catch(err) {
        // 500 错误由 request 拦截器统一弹出 res.msg，无需二次封装
    } finally {
        saving.value = false
    }
}
</script>

<style lang="scss" scoped>
.user-add-page { min-height: 100vh; background: #f7f8fa; padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); }

.section-title {
    font-size: 28rpx; font-weight: bold; color: #666;
    padding: 24rpx 32rpx 12rpx;
}

.form-card { background: #fff; border-radius: 24rpx; padding: 8rpx 32rpx; margin: 0 24rpx 24rpx; }
.form-item { display: flex; align-items: center; padding: 28rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.form-item:last-child { border-bottom: none; }
.form-item.vertical { flex-direction: column; align-items: flex-start; }
.form-item.vertical .form-textarea { width: 100%; height: 160rpx; margin-top: 16rpx; background: #f9f9f9; padding: 16rpx; box-sizing: border-box; border-radius: 12rpx; font-size: 28rpx; }

.form-label { width: 200rpx; font-size: 28rpx; color: #333; flex-shrink: 0; }
.form-label.require::before { content: '*'; color: #f56c6c; margin-right: 4rpx; }
.form-input { flex: 1; font-size: 28rpx; color: #333; text-align: right; }
.picker-value { flex: 1; font-size: 28rpx; color: #333; text-align: right; min-height: 40rpx; }
.picker-value.placeholder { color: #ccc; }

.footer-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
	z-index: 100;
}

.save-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(90deg, #ffd53f, #ff9500);
    color: #333; border: none; border-radius: 44rpx;
    font-size: 32rpx; font-weight: bold; line-height: 88rpx;
}
</style>