feat(user, miniapp): 完成C端小程序收货地址完整功能闭环

zjk

5 小时以前 a4afcfdb179e62a498b62cc6860d8cd46701a08f

 hugray-user-miniapp/pages/address/add.vue

@@ -72,17 +72,19 @@

        <!-- 底部固定提交栏：尺寸/圆角与地址列表页「新增地址」按钮一致 -->
        <view class="submit-bar">
            <view class="submit-btn" @tap="_handleSubmit">提交</view>
            <view class="submit-btn" @tap="_handleSubmit">{{ isEdit ? '保存' : '提交' }}</view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getAddressDetail, createAddress, updateAddress } from '@/api/index.js'

// ======================== 数据定义区域 ========================

// 新增地址表单
// 地址表单（新增/编辑共用）
const form = reactive({
    name: '',
    phone: '',
@@ -97,7 +99,48 @@
// 地区文本：拼接为「省 市 区」，为空时由模板展示占位文案
const regionText = computed(() => form.region.join(' '))

// 是否编辑模式（onLoad 带 id 时为编辑，复用新增页）
const isEdit = ref(false)

// 编辑模式下的地址ID
const addressId = ref(null)

// ======================== 方法定义区域 ========================

/** 拉取地址详情并回填表单（编辑模式） */
const _loadAddressDetail = async (id) => {
    try {
        const res = await getAddressDetail(id)
        const data = res.data || {}
        form.name = data.consignee || ''
        form.phone = data.consigneePhone || ''
        form.isDefault = data.isDefault === '1'
        // 拆分单字段 address：约定前 3 段为省/市/区，其余段 rejoin 还原详细地址；
        // 段数 < 4（历史/后台手工录入的非约定格式）时地区留空、整串填入详细地址
        const tokens = (data.address || '').split(' ')
        if (tokens.length >= 4) {
            form.region = tokens.slice(0, 3)
            form.detail = tokens.slice(3).join(' ')
        } else {
            form.region = []
            form.detail = data.address || ''
        }
        regionValue.value = [...form.region]
    } catch (e) {
        console.error('[ADDRESS_DETAIL] 加载地址详情失败', e)
        uni.showToast({ title: e.message || '加载失败', icon: 'none' })
    }
}

// 页面加载：带 id → 编辑模式（回填表单 + 切换标题）；不带 id → 新增模式
onLoad((options) => {
    const id = options && options.id
    if (!id) return
    isEdit.value = true
    addressId.value = id
    uni.setNavigationBarTitle({ title: '编辑地址' })
    _loadAddressDetail(id)
})

/** 切换「设为默认」 */
const _handleDefaultChange = (e) => {
@@ -121,16 +164,32 @@
    return ''
}

/** 提交：校验通过后保存并返回地址列表页（地址新增接口未就绪，暂以本地成功反馈占位） */
const _handleSubmit = () => {
/** 提交：校验通过后按模式调用新增/编辑接口，成功返回列表页（列表页 onShow 自动刷新） */
const _handleSubmit = async () => {
    const errorMsg = _validateForm()
    if (errorMsg) {
        uni.showToast({ title: errorMsg, icon: 'none' })
        return
    }

    uni.showToast({ title: '保存成功', icon: 'none' })
    setTimeout(() => uni.navigateBack(), 600)
    // 单字段 address 约定：省 市 区 详细地址（空格分隔）
    const payload = {
        consignee: form.name.trim(),
        consigneePhone: form.phone.trim(),
        address: [...form.region, form.detail.trim()].join(' '),
        isDefault: form.isDefault ? '1' : '0'
    }
    try {
        if (isEdit.value) {
            await updateAddress({ ...payload, id: addressId.value })
        } else {
            await createAddress(payload)
        }
        uni.showToast({ title: '保存成功', icon: 'none' })
        setTimeout(() => uni.navigateBack(), 600)
    } catch (e) {
        console.error('[ADDRESS_SAVE] 保存收货地址失败', e)
        uni.showToast({ title: e.message || '保存失败', icon: 'none' })
    }
}
</script>