qingdao-employment-service/pages/msglog/msglog.vue

<template>
    <view class="app-custom-root">
        <view class="app-container">
            <!-- 顶部头部区域 -->
            <view class="container-header">
                <view class="header-btnLf button-click" @click="changeType(0)" :class="{ active: state.current === 0 }">
                    全部消息
                    <!-- <view class="btns-wd"></view> -->
                </view>
                <view class="header-btnLf button-click" @click="changeType(1)" :class="{ active: state.current === 1 }">
                    未读消息
                    <view class="btns-wd" v-if="unreadCount"></view>
                </view>
            </view>

            <!-- 主体内容区域 -->
            <view class="container-main">
                <swiper
                    class="swiper"
                    :disable-touch="disableTouch"
                    :current="state.current"
                    @change="changeSwiperType"
                >
                    <swiper-item
                        class="swiper-item"
                        @touchstart.passive="handleTouchStart"
                        @touchmove.passive="handleTouchMove"
                        @touchend="disableTouch = false"
                        v-for="(_, index) in 2"
                        :key="index"
                    >
                        <!-- #ifndef MP-WEIXIN -->
                        <component :is="components[index]" :ref="(el) => handelComponentsRef(el, index)" />
                        <!-- #endif -->
                        <!-- #ifdef MP-WEIXIN -->
                        <ReadComponent v-show="currentIndex === 0" :ref="(el) => handelComponentsRef(el, index)" />
                        <UnreadComponent v-show="currentIndex === 1" :ref="(el) => handelComponentsRef(el, index)" />
                        <!-- #endif -->
                    </swiper-item>
                </swiper>
            </view>

            <!-- <Tabbar :currentpage="3"></Tabbar> -->
        </view>
    </view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import Tabbar from '@/components/tabbar/midell-box.vue';
import ReadComponent from './read.vue';
import UnreadComponent from './unread.vue';
const loadedMap = reactive([false, false]);
const swiperRefs = [ref(null), ref(null)];
const components = [ReadComponent, UnreadComponent];
import { storeToRefs } from 'pinia';
import { useReadMsg } from '@/stores/useReadMsg';
const { unreadCount } = storeToRefs(useReadMsg());

const disableTouch = ref(false);
const startPointX = ref(0);
const totalPage = 2;
const THRESHOLD = 5;

onShow(() => {
    // 获取消息列表
    useReadMsg().fetchMessages();
});
const state = reactive({
    current: 0,
    all: [{}],
});

onMounted(() => {
    handleTabChange(state.current);
});

function handleTouchStart(e) {
    // 确保有触摸点
    if (e.touches.length > 0) {
        startPointX.value = e.touches[0].clientX;
        disableTouch.value = false;
    }
}

function handleTouchMove(e) {
    if (e.touches.length === 0) return;

    const currentX = e.touches[0].clientX;
    const diffX = currentX - startPointX.value;

    if (state.current === 0) {
        if (diffX > THRESHOLD) {
            disableTouch.value = true;
        } else {
            disableTouch.value = false;
        }
        return;
    }

    if (state.current === totalPage - 1) {
        if (diffX < -THRESHOLD) {
            disableTouch.value = true;
        } else {
            disableTouch.value = false;
        }
        return;
    }
    disableTouch.value = false;
}

const handelComponentsRef = (el, index) => {
    if (el) {
        swiperRefs[index].value = el;
    }
};
// 查看消息类型
function changeSwiperType(e) {
    const newIndex = e.detail.current;
    const lastIndex = state.current;

    const isSwipingRight = newIndex < lastIndex;
    const isSwipingLeft = newIndex > lastIndex;

    if (lastIndex === 0 && isSwipingRight) {
        disableTouch.value = true;
        state.current = 0;
        setTimeout(() => {
            disableTouch.value = false;
        }, 50);
        return;
    }

    if (lastIndex === totalPage - 1 && isSwipingLeft) {
        disableTouch.value = true;
        state.current = lastIndex;

        setTimeout(() => {
            disableTouch.value = false;
        }, 50);
        return;
    }

    const index = e.detail.current;
    state.current = index;
    handleTabChange(index);
    disableTouch.value = false;
}
function changeType(index) {
    state.current = index;
    handleTabChange(index);
}

function handleTabChange(index) {
    if (!loadedMap[index]) {
        swiperRefs[index].value?.loadData();
        loadedMap[index] = true;
    }
}

// 查看消息类型
function changeSwiperMsgType(e) {
    const currented = e.detail.current;
    state.current = currented;
}
</script>

<style lang="stylus" scoped>
.app-custom-root {
    position: fixed;
    z-index: 10;
    width: 100vw;
    height: calc(100% - var(--window-bottom));
    overflow: hidden;
}
.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    .container-header {
        height: calc(88rpx - 14rpx);
        text-align: center;
        line-height: calc(88rpx - 14rpx);
        font-size: 32rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 16rpx 44rpx 36rpx 44rpx;
        background: url('@/static/icon/msgTopbg.png') 0 0 no-repeat;
        background-size: 100% 100%;
        .header-title {
            color: #000000;
            font-weight: bold;
        }
        .header-btnLf {
            font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: calc(60rpx * 3);
            font-weight: 500;
            font-size: 40rpx;
            color: #696969;
            margin-right: 44rpx;
            position: relative;
            .btns-wd{
                position: absolute
                top: 2rpx;
                right: 2rpx
                width: 16rpx;
                height: 16rpx;
                background: #F73636;
                border-radius: 50%;
                border: 4rpx solid #EEEEFF;
            }
        }
        .active {
            font-weight: 600;
            font-size: 40rpx;
            color: #000000;
        }
    }
}

.container-main {
    flex: 1;
    overflow: hidden;
    background-color: #f4f4f4;
}
.main-scroll {
    width: 100%
    height: 100%;
}
.scrollmain{
    padding: 28rpx
}
.swiper
    height: 100%;
    width: 100%
    .list
        width: 100%
        display: flex;
        flex-direction: column;
</style>


<style lang="scss" scoped>
@media(min-width: 800px){
   .app-container{
        .container-header{
            padding: 40rpx 44rpx 36rpx 50rpx;
            .header-btnLf{
                font-size: 42rpx;
                width: 250rpx;
            }
            .active{
                font-size: 46rpx;
            }
        }
   }
}
</style>