myBusi.js

new Vue({
    el: '#app',
    data: {
        searchKeyword: '',
        activeTab: 'completed',
        filterTags: [
            { id: 1, name: '全部', selected: true, nodeId: '355:535' },
            { id: 2, name: '成单待审核', selected: false, nodeId: '355:537' },
            { id: 3, name: '已成单', selected: false, nodeId: '355:540' },
            { id: 4, name: '已关闭', selected: false, nodeId: '355:543' }
        ],
        businessList: [
            {
                id: 1,
                orderNumber: 'OP20250928002',
                status: 'follow-up',
                statusText: '跟进中',
                statusClass: 'follow-up',
                nodeId: '355:430',
                address: '江苏省淮安市淮安区淮海南路456号',
                contactPhone: '13477895643',
                tags: [
                    { id: 1, name: '宽带升级', nodeId: '355:453' },
                    { id: 2, name: '家庭安防', nodeId: '355:455' }
                ],
                processor: '李四',
                submitTime: '2025-09-28 16:45',
                updateTime: '2025-09-29 09:30'
            },
            {
                id: 2,
                orderNumber: 'OP20250928003',
                status: 'completed',
                statusText: '已完结',
                statusClass: 'completed',
                nodeId: '355:465',
                address: '江苏省淮安市淮安区淮海南路456号',
                contactPhone: '13477895643',
                tags: [
                    { id: 1, name: '宽带升级', nodeId: '355:488' },
                    { id: 2, name: '家庭安防', nodeId: '355:490' }
                ],
                processor: '张三',
                submitTime: '2025-09-28 16:45',
                updateTime: '2025-09-29 09:30'
            },
            {
                id: 3,
                orderNumber: 'OP20250927001',
                status: 'pending',
                statusText: '待跟进',
                statusClass: 'pending',
                nodeId: '355:491',
                address: '江苏省淮安市清江浦区健康东路123号',
                contactPhone: '13912345678',
                tags: [
                    { id: 3, name: '企业宽带', nodeId: '355:492' }
                ],
                processor: '王五',
                submitTime: '2025-09-27 10:20',
                updateTime: '2025-09-28 14:15'
            },
            {
                id: 4,
                orderNumber: 'OP20250926005',
                status: 'closed',
                statusText: '已关闭',
                statusClass: 'closed',
                nodeId: '355:493',
                address: '江苏省淮安市经济技术开发区枚皋中路789号',
                contactPhone: '15898765432',
                tags: [
                    { id: 4, name: '云服务', nodeId: '355:494' },
                    { id: 5, name: 'IDC业务', nodeId: '355:495' }
                ],
                processor: '赵六',
                submitTime: '2025-09-26 15:30',
                updateTime: '2025-09-27 11:45'
            }
        ]
    },
    computed: {
        // 统计各状态数量
        totalCount() {
            return this.businessList.length;
        },
        pendingCount() {
            return this.businessList.filter(item => item.status === 'pending').length;
        },
        followUpCount() {
            return this.businessList.filter(item => item.status === 'follow-up').length;
        },
        completedCount() {
            return this.businessList.filter(item => item.status === 'completed').length;
        },

        // 筛选后的商机列表
        filteredBusinessList() {
            let list = this.businessList;

            // 按标签页筛选
            if (this.activeTab !== 'all') {
                list = list.filter(item => item.status === this.activeTab);
            }

            // 按筛选标签筛选
            const selectedTag = this.filterTags.find(tag => tag.selected);
            if (selectedTag && selectedTag.id !== 1) {
                // 这里可以根据实际业务逻辑进行筛选
                switch(selectedTag.id) {
                    case 2: // 成单待审核
                        list = list.filter(item => item.status === 'completed');
                        break;
                    case 3: // 已成单
                        list = list.filter(item => item.status === 'completed');
                        break;
                    case 4: // 已关闭
                        list = list.filter(item => item.status === 'closed');
                        break;
                }
            }

            // 按搜索关键词筛选
            if (this.searchKeyword) {
                const keyword = this.searchKeyword.toLowerCase();
                list = list.filter(item =>
                    item.orderNumber.toLowerCase().includes(keyword) ||
                    item.address.toLowerCase().includes(keyword) ||
                    item.contactPhone.includes(keyword) ||
                    item.processor.toLowerCase().includes(keyword)
                );
            }

            return list;
        }
    },
    methods: {
        // 切换标签页
        switchTab(tab) {
            this.activeTab = tab;
            this.updateActiveIndicator(tab);
        },

        // 更新活跃指示器位置
        updateActiveIndicator(tab) {
            const indicator = document.querySelector('.active-indicator');
            const tabTexts = document.querySelectorAll('.tab-text');

            let targetIndex = 0;
            switch(tab) {
                case 'all': targetIndex = 0; break;
                case 'pending': targetIndex = 1; break;
                case 'follow-up': targetIndex = 2; break;
                case 'completed': targetIndex = 3; break;
            }

            if (indicator && tabTexts[targetIndex]) {
                const targetTab = tabTexts[targetIndex];
                const targetLeft = targetTab.offsetLeft;
                const targetWidth = targetTab.offsetWidth;

                indicator.style.left = targetLeft + 'px';
                indicator.style.width = targetWidth + 'px';
            }
        },

        // 选择筛选标签
        selectFilterTag(tagId) {
            this.filterTags.forEach(tag => {
                tag.selected = tag.id === tagId;
            });
        },

        // 查看商机详情
        viewBusinessDetail(business) {
            console.log('查看商机详情:', business);
            // 实际项目中这里应该跳转到详情页面
            // window.location.href = `busiDetail.html?id=${business.id}`;

            // 或者显示详情弹窗
            alert(`查看商机详情: ${business.orderNumber}`);
        },

        // 跳转到收集商机页面
        navigateToCollect() {
            console.log('跳转到收集商机页面');
            window.location.href = 'addbusi.html';
        },

        // 搜索功能
        handleSearch() {
            console.log('搜索关键词:', this.searchKeyword);

            // 防抖处理，避免频繁搜索
            if (this.searchTimer) {
                clearTimeout(this.searchTimer);
            }

            this.searchTimer = setTimeout(() => {
                this.performSearch();
            }, 300);
        },

        // 执行搜索
        performSearch() {
            console.log('执行搜索:', this.searchKeyword);
            // 搜索逻辑已在computed中实现
        },

        // 格式化时间
        formatTime(timeString) {
            if (!timeString) return '';
            return timeString;
        },

        // 获取商机状态样式类
        getStatusClass(status) {
            const statusMap = {
                'pending': 'pending',
                'follow-up': 'follow-up',
                'completed': 'completed',
                'closed': 'closed'
            };
            return statusMap[status] || 'pending';
        },

        // 获取商机状态文本
        getStatusText(status) {
            const statusMap = {
                'pending': '待跟进',
                'follow-up': '跟进中',
                'completed': '已完结',
                'closed': '已关闭'
            };
            return statusMap[status] || '待跟进';
        },

        // 初始化数据
        initializeData() {
            console.log('初始化数据');

            // 延迟更新指示器位置，确保DOM已渲染
            this.$nextTick(() => {
                this.updateActiveIndicator(this.activeTab);
            });
        },

        // 处理页面可见性变化
        handleVisibilityChange() {
            if (document.visibilityState === 'visible') {
                console.log('页面重新可见，刷新数据');
                this.refreshData();
            }
        },

        // 处理网络连接恢复
        handleOnline() {
            console.log('网络连接恢复');
            this.refreshData();
        },

        // 处理网络断开
        handleOffline() {
            console.log('网络连接断开');
            this.showNetworkError();
        },

        // 刷新数据
        refreshData() {
            console.log('刷新商机列表数据');
            // 实际项目中这里应该重新调用API获取最新数据
        },

        // 显示网络错误提示
        showNetworkError() {
            console.error('网络连接断开，请检查网络设置');
        },

        // 显示错误信息
        showError(message) {
            console.error(message);
            alert(message);
        },

        // 显示成功信息
        showSuccess(message) {
            console.log(message);
            alert(message);
        }
    },

    // 监听搜索关键词变化
    watch: {
        searchKeyword: {
            handler(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.handleSearch();
                }
            }
        }
    },

    // 生命周期钩子
    mounted() {
        console.log('我的商机页面已加载');

        // 初始化数据
        this.initializeData();

        // 添加页面可见性变化监听
        document.addEventListener('visibilitychange', this.handleVisibilityChange);

        // 添加网络状态监听
        window.addEventListener('online', this.handleOnline);
        window.addEventListener('offline', this.handleOffline);

        // 监听窗口大小变化，更新指示器位置
        window.addEventListener('resize', () => {
            this.updateActiveIndicator(this.activeTab);
        });
    },

    beforeDestroy() {
        // 清理定时器
        if (this.searchTimer) {
            clearTimeout(this.searchTimer);
        }

        // 移除事件监听
        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
        window.removeEventListener('online', this.handleOnline);
        window.removeEventListener('offline', this.handleOffline);
        window.removeEventListener('resize', this.updateActiveIndicator);
    }
});