init

pages/msglog/msglog.vue

@@ -0,0 +1,169 @@
+<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" :current="state.current" @change="changeSwiperType">
+                    <swiper-item class="swiper-item" 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());
+
+onShow(() => {
+    // 获取消息列表
+    useReadMsg().fetchMessages();
+});
+const state = reactive({
+    current: 0,
+    all: [{}],
+});
+
+onMounted(() => {
+    handleTabChange(state.current);
+});
+
+const handelComponentsRef = (el, index) => {
+    if (el) {
+        swiperRefs[index].value = el;
+    }
+};
+// 查看消息类型
+function changeSwiperType(e) {
+    const index = e.detail.current;
+    state.current = index;
+    handleTabChange(index);
+}
+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>