list.js

const util = new window.publicMethod() ;

new Vue({
    el: '#app',
    data: {
        loginInfo: JSON.parse(localStorage.getItem('appLoginInfo') || '{}'),

        activeTab: 'tab1',
        searchQuery: '',

        todoData: [],
        completedData: [],

        // 下拉刷新相关
        isRefreshing: false,
        isPulling: false,
        refreshText: '下拉刷新',
        startY: 0,
        currentY: 0,
        pullDistance: 0
    },
    computed: {
        currentData() {
            return this.activeTab === 'tab1' ? this.todoData : this.completedData;
        },
        filteredData() {
            if (!this.searchQuery.trim()) {
                return this.currentData;
            }

            let query = this.searchQuery.toLowerCase();
            let arr = this.currentData.filter(item =>
                item.accNbr.toLowerCase().includes(query)
            );
            console.log(arr)
            return arr;
        }
    },
    methods: {
        logout(){
            localStorage.removeItem('appLoginInfo');
            window.location.replace('login.html');
        },
        switchTab(tab) {
            this.activeTab = tab;
            this.searchQuery = ''; // 切换标签时清空搜索

            this.queryList()
        },

        handleItemClick(item) {
            this.savePageState(item);
            sessionStorage.removeItem('huaiAnAppParam')
            sessionStorage.setItem('listInfoParam',JSON.stringify(item))

            window.location.href = 'index.html'
        },
        queryList(){
            if(this.activeTab==='tab1' && this.todoData.length>0 && !this.isRefreshing){
                return Promise.resolve()
            }
            if(this.activeTab==='tab2' && this.completedData.length>0 && !this.isRefreshing){
                return Promise.resolve()
            }

            return util.httpRequest({
                url: '/zj/'+(this.activeTab==='tab1'?'pending':'completed'),
                middleUrl: '/zhijian-trial/api',
                data: {
                   campaignId: this.loginInfo.campaignId,
                   accNbr: this.searchQuery,
                },
            }).then(res=>{
                if(res.code == 200){
                    if(this.activeTab==='tab1'){
                        this.todoData = res.data.records || []
                    }
                    if(this.activeTab==='tab2'){
                        this.completedData = res.data.records || []
                    }

                    this.$nextTick(() => {
                        const savedState = sessionStorage.getItem('listPageState');
                        sessionStorage.removeItem('listPageState');
                        if (savedState) {
                            const pageState = JSON.parse(savedState);
                            this.searchQuery = pageState.searchQuery || '';
                            setTimeout(() => {
                                this.scrollToSelected(pageState.selectedItemId);
                            }, 300);
                        }
                    });
                }else if(res.code == 401){
                    util.toast('登录已过期，请重新登录')
                    setTimeout(()=>{
                        localStorage.removeItem('appLoginInfo');
                        window.location.replace('login.html');
                    },100)
                }else{
                    util.toast(res.msg || '获取失败')
                    return Promise.reject(res.msg || '获取失败')
                }
            })
        },
        savePageState(item) {
            const pageState = {
                searchQuery: this.searchQuery,
                activeTab: this.activeTab,
                selectedItemId: item.accNbr
            };
            sessionStorage.setItem('listPageState', JSON.stringify(pageState));
        },
        restorePageState() {
            const savedState = sessionStorage.getItem('listPageState');
            if (savedState) {
                const pageState = JSON.parse(savedState);
                this.activeTab = pageState.activeTab || 'tab1';
            }
        },
        scrollToSelected(itemId) {
            if (!itemId) return;

            const elementRef = this.$refs['item-' + itemId];
            if (elementRef && elementRef[0]) {
                elementRef[0].scrollIntoView({
                    behavior: 'smooth',
                    block: 'center'
                });
            }
        },
        clearPageState() {
            //sessionStorage.removeItem('listPageState');
        },

        // 下拉刷新相关方法
        handleTouchStart(e) {
            if (this.isRefreshing) return;

            this.startY = e.touches[0].clientY;
            const listSection = this.$refs.listSection;
            if (listSection.scrollTop === 0) {
                this.isPulling = true;
            }
        },

        handleTouchMove(e) {
            if (!this.isPulling || this.isRefreshing) return;

            this.currentY = e.touches[0].clientY;
            this.pullDistance = this.currentY - this.startY;

            if (this.pullDistance > 0 && this.pullDistance <= 120) {
                e.preventDefault();
                const pullRefresh = this.$refs.pullRefresh;
                const height = Math.min(this.pullDistance * 0.5, 60);
                const opacity = Math.min(height / 60, 1);
                pullRefresh.style.height = height + 'px';
                pullRefresh.style.opacity = opacity;

                if (this.pullDistance > 80) {
                    this.refreshText = '释放立即刷新';
                } else {
                    this.refreshText = '下拉刷新';
                }
            }
        },

        handleTouchEnd(e) {
            if (!this.isPulling || this.isRefreshing) return;

            if (this.pullDistance > 80) {
                this.triggerRefresh();
            } else {
                const pullRefresh = this.$refs.pullRefresh;
                pullRefresh.style.transition = 'height 0.3s ease, opacity 0.3s ease';
                this.resetPullRefresh();
            }

            this.isPulling = false;
            this.pullDistance = 0;
        },

        triggerRefresh() {
            this.isRefreshing = true;
            this.refreshText = '正在刷新...';

            this.queryList().then(() => {
                setTimeout(() => {
                    this.resetPullRefresh();
                    this.isRefreshing = false;
                    this.refreshText = '刷新完成';
                    setTimeout(() => {
                        this.refreshText = '下拉刷新';
                    }, 1000);
                }, 500);
            }).catch(() => {
                setTimeout(() => {
                    this.resetPullRefresh();
                    this.isRefreshing = false;
                    this.refreshText = '刷新失败';
                    setTimeout(() => {
                        this.refreshText = '下拉刷新';
                    }, 1000);
                }, 200);
            });
        },

        resetPullRefresh() {
            const pullRefresh = this.$refs.pullRefresh;
            pullRefresh.style.transition = 'height 0.3s ease, opacity 0.3s ease';
            pullRefresh.style.height = '0';
            pullRefresh.style.opacity = '0';
        },

        addPullRefreshListeners() {
            const listSection = this.$refs.listSection;
            if (listSection) {
                listSection.addEventListener('touchstart', this.handleTouchStart, { passive: true });
                listSection.addEventListener('touchmove', this.handleTouchMove, { passive: false });
                listSection.addEventListener('touchend', this.handleTouchEnd, { passive: true });
            }
        },

        removePullRefreshListeners() {
            const listSection = this.$refs.listSection;
            if (listSection) {
                listSection.removeEventListener('touchstart', this.handleTouchStart);
                listSection.removeEventListener('touchmove', this.handleTouchMove);
                listSection.removeEventListener('touchend', this.handleTouchEnd);
            }
        }
    },

    mounted() {
        this.restorePageState();
        this.queryList();

        // 添加下拉刷新事件监听
        this.addPullRefreshListeners();

        window.addEventListener('beforeunload', this.clearPageState);
    },
    beforeDestroy() {
        // 移除下拉刷新事件监听
        this.removePullRefreshListeners();
        window.removeEventListener('beforeunload', this.clearPageState);
    },
});