myBusi.js

// 商机信息页面 Vue 应用
const utils = new publicMethod()

new Vue({
    el: '#app',
    data: {
        isWorker: true,
        detail: {
            records: []
        },

        searchKeyword: '',
        activeTab: 'all',
        tagId: 'all',
        filterTags: [
            { id: 'all', name: '全部', selected: true, nodeId: '355:535' },
            { id: '3', name: '成单待审核', selected: false, nodeId: '355:537' },
            { id: '4', name: '已成单', selected: false, nodeId: '355:540' },
            { id: '5', name: '已关闭', selected: false, nodeId: '355:543' }
        ],
        businessList: [],
        scrollTop: 0
    },
    computed: {
        
    },
    methods: {
        addressShow(value){
            if(!value || value==':'){
                return '--'
            }

            return value.split(":")[1]
        },
        switchTime(value){
            return utils.detailTime(new Date(value).getTime(),true)
        },
        queryBusiList(){
            let status 
            if(this.activeTab == 'all'){
                status = ''
            }else{
                if(this.activeTab == '3,4,5'){
                    if(this.tagId == 'all'){
                        status = '3,4,5'
                    }else{
                        status = this.tagId
                    }
                }else{
                    status = this.activeTab
                }
            }

            utils.httpRequest({
                url: '/opportunity/list',
                data: {
                    customerPhone: this.searchKeyword,
                    status: status,
                    pageNum: 1,
                    pageSize: 1000
                }
            }).then(res=>{
                if(res.code == 200){
                    this.detail = res.data

                    this.$nextTick(() => {
                        this.updateActiveIndicator(this.activeTab);
                        document.querySelector('#listDiv').scrollTop = this.scrollTop||0
                    });
                }
            })
        },

        // 切换标签页
        switchTab(tab) {
            this.activeTab = tab
            this.updateActiveIndicator(tab)
            if(tab == '3,4,5'){
                this.tagId = 'all'
            }
            
            this.queryBusiList()
        },

        // 更新活跃指示器位置
        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 '1': targetIndex = 1; break;
                case '2': targetIndex = 2; break;
                case '3,4,5': 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.tagId = tagId

            this.queryBusiList()
        },

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

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

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

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

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

        // 执行搜索
        performSearch() {
            this.queryBusiList()
        },
        getStatusCalss(status){
            if(status == '1'){
                return 'pending'
            }else if(status == '2'){
                return 'follow-up'   
            }else if(status == '5'){
                return 'closed'   
            }else{
                return 'completed'
            }
        },
        // 保存页面状态
        savePageState() {
            const state = {
                searchKeyword: this.searchKeyword,
                activeTab: this.activeTab,
                tagId: this.tagId,
                scrollTop: document.querySelector('#listDiv').scrollTop,
                timestamp: Date.now()
            };
            localStorage.setItem('myBusiPageState', JSON.stringify(state));
        },

        // 恢复页面状态
        restorePageState() {
            const savedState = localStorage.getItem('myBusiPageState');
            if (savedState) {
                try {
                    const state = JSON.parse(savedState);
                    // 检查状态是否在30分钟内保存的（避免过期状态）
                    const isRecent = (Date.now() - state.timestamp) < 30 * 60 * 1000;

                    if (isRecent) {
                        this.searchKeyword = state.searchKeyword || '';
                        this.activeTab = state.activeTab || 'all';
                        this.tagId = state.tagId || 'all';
                        this.scrollTop = state.scrollTop
                    }
                } catch (e) {
                    console.error('恢复页面状态失败:', e);
                }

                this.clearPageState()
            }
        },

        // 清除页面状态
        clearPageState() {
            localStorage.removeItem('myBusiPageState');
        },

        loginOut(){
            localStorage.removeItem('userInfo')
            localStorage.removeItem('tokenInfo')
            this.clearPageState()

            location.replace('login.html?platform='+localStorage.getItem('platform'))
        }
    },

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

    // 生命周期钩子
    mounted() {
        this.isWorker = localStorage.getItem('platform')=='gw'

        // 恢复页面状态
        this.restorePageState();

        this.queryBusiList()
    },

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