THJ_Mobile/src/packages/mobile/views/mine/address/index.vue

<template>
    <app-view class="mine-address">
        <template #header>
            <app-navbar title="收货地址管理" />
        </template>
        <div class="mine-address__container">
            <ul class="list">
                <li class="list-item" v-for="(item, index) in dataList" :key="index">
                    <div class="list-item__">
                        <Checkbox v-model="item.isdefault" />
                    </div>
                    <div class="list-item__">
                        <div>{{ item.receivername }}</div>
                        <div>{{ [item.provincename, item.cityname, item.districtname, item.address].join(' ') }}</div>
                    </div>
                    <div class="list-item__">
                        <Button icon="edit" @click="onEdit(item)" />
                    </div>
                </li>
            </ul>
        </div>
        <template #footer>
            <div class="g-form__footer">
                <Button type="primary" @click="onEdit" round block>新增地址</Button>
            </div>
            <component ref="componentRef" v-bind="{selectedRow}" :is="componentMap.get(componentId)"
                @closed="closeComponent" v-if="componentId" />
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, defineAsyncComponent } from 'vue'
import { Checkbox, Button } from 'vant'
import { useNavigation } from '@/hooks/navigation'
import { useComponent } from '@/hooks/component'
import { useAddress } from '@/business/user'

const componentMap = new Map<string, unknown>([
    ['edit', defineAsyncComponent(() => import('./components/edit/index.vue'))],
])

const { beforeRouteLeave } = useNavigation()
const { dataList, getUserAddressList } = useAddress()
const { componentRef, componentId, openComponent, closeComponent, closeComponentEach } = useComponent(getUserAddressList)
const selectedRow = shallowRef<Model.UserReceiveInfoRsp>()

const onEdit = (item?: Model.UserReceiveInfoRsp) => {
    selectedRow.value = item
    openComponent('edit')
}

getUserAddressList()
beforeRouteLeave(() => closeComponentEach())
</script>

<style lang="less">
@import './index.less';
</style>