taibai_shopping/app/static/js/address_form.js

// 地址表单页面JavaScript功能

// 全局变量，避免重复初始化
let addressFormInitialized = false;

// 页面完全加载后初始化
window.addEventListener('load', function() {
    console.log('=== 地址表单初始化开始 ===');

    // 显示调试信息
    document.getElementById('debugAlert').style.display = 'block';

    // 检查数据是否加载
    if (typeof cityData === 'undefined') {
        console.error('❌ cityData 未加载');
        document.getElementById('debugInfo').innerHTML = '<span class="text-danger">❌ 地址数据加载失败</span>';
        showAlert('地址数据加载失败，请刷新页面重试', 'error');
        return;
    }

    console.log('✅ cityData 已加载，省份数量:', Object.keys(cityData).length);
    document.getElementById('debugInfo').innerHTML = '<span class="text-success">✅ 地址数据已加载，省份数量: ' + Object.keys(cityData).length + '</span>';

    // 避免重复初始化
    if (addressFormInitialized) {
        console.log('地址表单已初始化，跳过');
        return;
    }

    addressFormInitialized = true;

    // 初始化省份列表
    initializeProvinces();

    // 设置事件监听器
    setupEventListeners();

    // 如果是编辑模式，设置初始值
    const savedProvince = document.getElementById('provinceValue').value;
    const savedCity = document.getElementById('cityValue').value;
    const savedDistrict = document.getElementById('districtValue').value;

    console.log('初始值:', {savedProvince, savedCity, savedDistrict});

    if (savedProvince) {
        setTimeout(() => {
            setInitialValues(savedProvince, savedCity, savedDistrict);
        }, 500); // 增加延迟确保DOM完全准备好
    }

    console.log('=== 地址表单初始化完成 ===');
});

// 初始化省份列表
function initializeProvinces() {
    const provinceSelect = document.getElementById('province');

    if (!provinceSelect) {
        console.error('省份选择框未找到');
        return;
    }

    console.log('开始初始化省份列表...');

    // 清空并添加默认选项
    provinceSelect.innerHTML = '<option value="">请选择省份</option>';

    // 添加所有省份
    const provinces = Object.keys(cityData);
    console.log('可用省份:', provinces);

    provinces.forEach(province => {
        const option = document.createElement('option');
        option.value = province;
        option.textContent = province;
        provinceSelect.appendChild(option);
        console.log('添加省份:', province);
    });

    console.log('省份列表初始化完成，总计:', provinces.length, '个');
}

// 设置事件监听器
function setupEventListeners() {
    console.log('设置事件监听器...');

    // 省份变化事件
    const provinceSelect = document.getElementById('province');
    if (provinceSelect) {
        provinceSelect.addEventListener('change', function() {
            const province = this.value;
            console.log('选择省份:', province);
            updateCities(province);
            clearDistricts();
        });
    }

    // 城市变化事件
    const citySelect = document.getElementById('city');
    if (citySelect) {
        citySelect.addEventListener('change', function() {
            const province = document.getElementById('province').value;
            const city = this.value;
            console.log('选择城市:', city, '省份:', province);
            updateDistricts(province, city);
        });
    }

    // 表单提交验证
    document.getElementById('addressForm').addEventListener('submit', function(e) {
        const province = document.getElementById('province').value;
        const city = document.getElementById('city').value;
        const district = document.getElementById('district').value;

        console.log('表单验证:', {province, city, district});

        if (!province) {
            e.preventDefault();
            showAlert('请选择省份', 'warning');
            return false;
        }

        if (!city) {
            e.preventDefault();
            showAlert('请选择城市', 'warning');
            return false;
        }

        if (!district) {
            e.preventDefault();
            showAlert('请选择区县', 'warning');
            return false;
        }

        return true;
    });

    console.log('事件监听器设置完成');
}

// 更新城市列表
function updateCities(province) {
    const citySelect = document.getElementById('city');
    citySelect.innerHTML = '<option value="">请选择城市</option>';

    console.log('更新城市列表，省份:', province);

    if (!province || !cityData[province]) {
        console.log('省份为空或数据不存在');
        return;
    }

    const cities = Object.keys(cityData[province]);
    console.log('可用城市:', cities);

    cities.forEach(city => {
        const option = document.createElement('option');
        option.value = city;
        option.textContent = city;
        citySelect.appendChild(option);
    });

    console.log('城市列表更新完成，总计:', cities.length, '个');
}

// 更新区县列表
function updateDistricts(province, city) {
    const districtSelect = document.getElementById('district');
    districtSelect.innerHTML = '<option value="">请选择区县</option>';

    console.log('更新区县列表，省份:', province, '城市:', city);

    if (!province || !city || !cityData[province] || !cityData[province][city]) {
        console.log('省份或城市为空或数据不存在');
        return;
    }

    const districts = cityData[province][city];
    console.log('可用区县:', districts);

    districts.forEach(district => {
        const option = document.createElement('option');
        option.value = district;
        option.textContent = district;
        districtSelect.appendChild(option);
    });

    console.log('区县列表更新完成，总计:', districts.length, '个');
}

// 清空区县列表
function clearDistricts() {
    const districtSelect = document.getElementById('district');
    districtSelect.innerHTML = '<option value="">请选择区县</option>';
    console.log('区县列表已清空');
}

// 设置初始值（编辑模式）
function setInitialValues(province, city, district) {
    console.log('设置初始值:', {province, city, district});

    const provinceSelect = document.getElementById('province');
    const citySelect = document.getElementById('city');
    const districtSelect = document.getElementById('district');

    // 设置省份
    if (province && provinceSelect) {
        provinceSelect.value = province;
        console.log('省份设置为:', province);
        updateCities(province);

        // 延迟设置城市
        setTimeout(() => {
            if (city && citySelect) {
                citySelect.value = city;
                console.log('城市设置为:', city);
                updateDistricts(province, city);

                // 延迟设置区县
                setTimeout(() => {
                    if (district && districtSelect) {
                        districtSelect.value = district;
                        console.log('区县设置为:', district);
                    }
                }, 200);
            }
        }, 200);
    }
}