From b8fbb6207ec58de653e162556315c895cac94db6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TOP=E7=B3=AF=E7=B1=B3?= <1130395124@qq.com>
Date: Tue, 28 Feb 2023 19:57:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=B6=88=E6=81=AF=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/message/message.vue | 166 +++++++++++++++++++++++++++++++++-
 1 file changed, 161 insertions(+), 5 deletions(-)

diff --git a/src/pages/message/message.vue b/src/pages/message/message.vue
index 929008f..9c842a0 100644
--- a/src/pages/message/message.vue
+++ b/src/pages/message/message.vue
@@ -1,5 +1,48 @@
 <template>
-    <app-layout title="消息" btnType="unset"></app-layout>
+    <app-layout v-model="bodyPt" title="消息" btnType="unset">
+        <scroll-view class="tab-cate-group" :style="{ top: bodyPt + 'px' }" scroll-x>
+            <view class="cate-item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">公告</view>
+            <view class="cate-item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">平台规则</view>
+            <view class="cate-item" :class="{ active: tabIndex == 2 }" @click="tabIndex = 2">帮助中心</view>
+            <view class="cate-item" :class="{ active: tabIndex == 3 }" @click="tabIndex = 3">平台消息</view>
+        </scroll-view>
+        <view class="message-container">
+            <swiper :current="tabIndex" :style="{ height: tabHeight + 'px' }" @change="changeTab">
+                <swiper-item>
+                    <view class="tab0">
+                        <view class="message-item" v-for="(item, index) in list" :key="index">
+                            <text class="title limit-line clamp-1" :class="{ active: !item.read }">{{ item.title }}</text>
+                            <text class="date">{{ item.date }}</text>
+                        </view>
+                    </view>
+                </swiper-item>
+                <swiper-item>
+                    <view class="tab1">
+                        <view class="message-item" v-for="(item, index) in list" :key="index">
+                            <text class="title limit-line clamp-1" :class="{ active: !item.read }">{{ item.title }}</text>
+                            <text class="date">{{ item.date }}</text>
+                        </view>
+                    </view>
+                </swiper-item>
+                <swiper-item>
+                    <view class="tab2">
+                        <view class="message-item" v-for="(item, index) in list" :key="index">
+                            <text class="title limit-line clamp-1" :class="{ active: !item.read }">{{ item.title }}</text>
+                            <text class="date">{{ item.date }}</text>
+                        </view>
+                    </view>
+                </swiper-item>
+                <swiper-item>
+                    <view class="tab3">
+                        <view class="message-item" v-for="(item, index) in list" :key="index">
+                            <text class="title limit-line clamp-1" :class="{ active: !item.read }">{{ item.title }}</text>
+                            <text class="date">{{ item.date }}</text>
+                        </view>
+                    </view>
+                </swiper-item>
+            </swiper>
+        </view>
+    </app-layout>
 </template>
 
 <script>
@@ -7,18 +50,131 @@ import AppLayout from "@/components/layout/layout";
 export default {
     name: "message",
     data() {
-        return {};
+        return {
+            utils: this.$utils,
+            bodyPt: 0,
+            tabIndex: 0,
+            tabHeight: 0,
+            list: [
+                {
+                    id: 1,
+                    title: "接单后要求多久与客户预约安装时间？",
+                    date: "2022-11-01 18:14",
+                    read: false,
+                },
+                {
+                    id: 2,
+                    title: "接单后要求多久与客户预约安装时间？",
+                    date: "2022-11-01 18:14",
+                    read: true,
+                },
+                {
+                    id: 3,
+                    title: "接单后要求多久与客户预约安装时间？",
+                    date: "2022-11-01 18:14",
+                    read: true,
+                },
+                {
+                    id: 4,
+                    title: "接单后要求多久与客户预约安装时间？",
+                    date: "2022-11-01 18:14",
+                    read: true,
+                },
+            ],
+        };
     },
     components: {
         AppLayout,
     },
-    onLoad() {},
+    computed: {},
+    onLoad() {
+        this.$nextTick(() => {
+            this.setTabHeight();
+        });
+    },
     onShow() {},
     onReady() {},
     onReachBottom() {},
     onPullDownRefresh() {},
-    methods: {},
+    methods: {
+        switchTab(index) {
+            this.tabIndex = index;
+            this.$nextTick(() => {
+                this.setTabHeight();
+            });
+        },
+        changeTab(e) {
+            this.switchTab(e.detail.current);
+        },
+        setTabHeight() {
+            let element = ".tab" + this.tabIndex;
+            let query = uni.createSelectorQuery().in(this);
+            query.select(element).boundingClientRect();
+            query.exec((res) => {
+                if (res && res[0]) {
+                    this.tabHeight = res[0].height;
+                }
+            });
+        },
+    },
 };
 </script>
 
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped>
+.tab-cate-group {
+    z-index: 15;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    white-space: nowrap;
+    box-sizing: border-box;
+    padding: 0 40rpx;
+    background-color: #ffffff;
+    .cate-item {
+        display: inline-block;
+        width: 167rpx;
+        height: 100rpx;
+        line-height: 100rpx;
+        text-align: center;
+        font-size: 30rpx;
+        font-weight: bold;
+        color: #999999;
+        box-sizing: border-box;
+    }
+    .cate-item.active {
+        color: #8b9aeb;
+        border-bottom: 7rpx solid #8b9aeb;
+    }
+}
+.message-container {
+    z-index: 10;
+    position: relative;
+    top: 100rpx;
+    padding: 20rpx 0;
+    .message-item:first-child {
+        margin-top: 0;
+    }
+    .message-item {
+        width: 670rpx;
+        margin: 20rpx auto 0 auto;
+        background-color: #ffffff;
+        font-weight: bold;
+        font-size: 30rpx;
+        line-height: 30rpx;
+        box-sizing: border-box;
+        padding: 30rpx;
+        .title {
+            color: #999999;
+        }
+        .title.active {
+            color: #333333;
+        }
+        .date {
+            display: block;
+            color: #999999;
+            margin-top: 24rpx;
+        }
+    }
+}
+</style>
\ No newline at end of file