项目初始化

gaoluyang

4 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/pages_template/pages/address/index.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,256 @@
import { ref, reactive, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';

/**
 * åœ°å€ä¿¡æ¯æŽ¥å£
 */
export interface AddressInfo {
    id: string;          // åœ°å€ID
    name: string;        // æ”¶è´§äººå§“名
    phone: string;       // æ‰‹æœºå·ç (已脱敏)
    region: string;      // åœ°åŒº(如: å¹¿ä¸œçœæ·±åœ³å¸‚南山区)
    address: string;     // è¯¦ç»†åœ°å€
    tag: string;         // åœ°å€æ ‡ç­¾(如: å®¶ã€å…¬å¸ã€å­¦æ ¡)
    isDefault: boolean;  // æ˜¯å¦ä¸ºé»˜è®¤åœ°å€
}

/**
 * ç¤ºä¾‹åœ°å€æ•°æ®
 */
const sampleAddresses: AddressInfo[] = [
    {
        id: '1',
        name: '张三',
        phone: '13712348888',
        region: '广东省深圳市南山区',
        address: '科技园南路888号创新大厦A座10楼',
        tag: '公司',
        isDefault: true
    },
    {
        id: '2',
        name: '李四',
        phone: '13912345678',
        region: '广东省深圳市福田区',
        address: '福中路1000号海城大厦B座20楼2001室',
        tag: '家',
        isDefault: false
    },
    {
        id: '3',
        name: '王五',
        phone: '15812342233',
        region: '广东省广州市天河区',
        address: '天河路100号天河城购物中心附近小区A栋3单元701室',
        tag: '学校',
        isDefault: false
    }
];

// å…±äº«çš„地址数据
const addressStore = {
    list: ref<AddressInfo[]>([]),
    tags: ref(['家', '公司', '学校'])
};

/**
 * æ ¼å¼åŒ–手机号，中间4位用星号代替
 */
export function formatPhoneNumber(phone: string): string {
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}

/**
 * åœ°å€åˆ—表页面Hook
 * @description æä¾›åœ°å€åˆ—表页面所需的状态和方法
 */
export function useAddressListPage() {
    // ä»Žå…±äº«store获取响应式数据
    const addressList = addressStore.list;

    // ä½¿ç”¨è®¡ç®—属性计算是否为空状态
    const emptyStatus = computed(() => addressList.value.length === 0);

    // æ›´æ–°åœ°å€åˆ—表
    function refreshAddressList() {
        addressList.value = sampleAddresses
        // å®žé™…项目中，这里应该调用API获取最新的地址列表
        // const response = await api.getAddressList();
        // addressList.value = response.data;
    }

    // è®¾ç½®é»˜è®¤åœ°å€
    function setDefaultAddress(id: string): boolean {
        const index = addressList.value.findIndex(item => item.id === id);

        if (index === -1) return false;

        // æ›´æ–°æ‰€æœ‰åœ°å€çš„默认状态
        addressList.value = addressList.value.map(item => ({
            ...item,
            isDefault: item.id === id
        }));

        return true;
    }

    // åˆ é™¤åœ°å€
    function deleteAddress(id: string): boolean {
        const initialLength = addressList.value.length;
        addressList.value = addressList.value.filter(item => item.id !== id);
        return addressList.value.length !== initialLength;
    }

    // é¡µé¢æ˜¾ç¤ºæ—¶åˆ·æ–°æ•°æ®
    onShow(() => {
        refreshAddressList();
    });

    return {
        // å“åº”式状态
        addressList,
        emptyStatus,
        // æ–¹æ³•
        setDefaultAddress,
        deleteAddress,
        refreshAddressList
    };
}

/**
 * åœ°å€ç¼–辑页面Hook
 * @description æä¾›åœ°å€ç¼–辑页面所需的状态和方法
 */
export function useAddressEditPage() {
    // ä»Žå…±äº«store获取响应式数据
    const addressList = addressStore.list;
    const addressTags = addressStore.tags;

    // é¡µé¢çŠ¶æ€
    const isEdit = ref(false);
    const editId = ref('');
    const defaultAddress = ref(false);
    const selectedTag = ref('家');

    // è¡¨å•æ•°æ®
    const form = reactive({
        name: '',
        phone: '',
        region: '',
        address: ''
    });

    // åŠ è½½ç¼–辑数据
    function loadAddressData(id: string): boolean {
        const address = addressList.value.find(item => item.id === id);

        if (!address) return false;

        // å¡«å……表单数据
        form.name = address.name;
        form.phone = address.phone;
        form.region = address.region;
        form.address = address.address;
        selectedTag.value = address.tag;
        defaultAddress.value = address.isDefault;

        return true;
    }

    // åˆå§‹åŒ–页面
    function initEditPage(id?: string) {
        // é‡ç½®çŠ¶æ€
        isEdit.value = !!id;
        editId.value = id || '';
        defaultAddress.value = false;
        selectedTag.value = '家';

        form.name = '';
        form.phone = '';
        form.region = '';
        form.address = '';

        // å¦‚果是编辑模式，加载地址数据
        if (id) {
            loadAddressData(id);
        }
    }

    // ä¿å­˜åœ°å€
    function saveAddress(): boolean {
        if (isEdit.value) {
            // ç¼–辑现有地址
            const index = addressList.value.findIndex(item => item.id === editId.value);
            if (index === -1) return false;

            // å¦‚果设为默认，更新其他地址
            if (defaultAddress.value) {
                addressList.value = addressList.value.map(item => {
                    if (item.id !== editId.value) {
                        return { ...item, isDefault: false };
                    }
                    return item;
                });
            }

            // æ›´æ–°å½“前地址
            addressList.value[index] = {
                ...addressList.value[index],
                name: form.name,
                phone: form.phone,
                region: form.region,
                address: form.address,
                tag: selectedTag.value,
                isDefault: defaultAddress.value
            };
        } else {
            // æ·»åŠ æ–°åœ°å€
            const newId = Date.now().toString();

            // å¦‚果设为默认，更新其他地址
            if (defaultAddress.value) {
                addressList.value = addressList.value.map(item => ({
                    ...item,
                    isDefault: false
                }));
            }

            // æ·»åŠ æ–°åœ°å€
            addressList.value.push({
                id: newId,
                name: form.name,
                phone: form.phone,
                region: form.region,
                address: form.address,
                tag: selectedTag.value,
                isDefault: defaultAddress.value
            });
        }

        return true;
    }

    // åˆ é™¤åœ°å€
    function deleteAddress(): boolean {
        if (!isEdit.value) return false;

        const initialLength = addressList.value.length;
        addressList.value = addressList.value.filter(item => item.id !== editId.value);

        return addressList.value.length !== initialLength;
    }

    return {
        // å“åº”式状态
        isEdit,
        editId,
        form,
        defaultAddress,
        selectedTag,
        addressTags,
        // æ–¹æ³•
        initEditPage,
        saveAddress,
        deleteAddress
    };
}