From 6c9cf8cd2f9cd16bf43b8add73344d1d382dbb91 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 20:47:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=B6=88=E6=81=AF=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/message/detail.vue  |  61 +++++++++++++++++++
 src/pages/message/message.vue | 106 +++++++++++++++++++---------------
 2 files changed, 121 insertions(+), 46 deletions(-)
 create mode 100644 src/pages/message/detail.vue

diff --git a/src/pages/message/detail.vue b/src/pages/message/detail.vue
new file mode 100644
index 0000000..fe80414
--- /dev/null
+++ b/src/pages/message/detail.vue
@@ -0,0 +1,61 @@
+<template>
+    <app-layout title="详情">
+        <div class="message-container">
+            <view class="head">
+                <text class="title limit-line clamp-1">{{ title }}</text>
+                <text class="date">{{ date }}</text>
+            </view>
+            <view class="body">
+                <rich-text :nodes="content"></rich-text>
+            </view>
+        </div>
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+export default {
+    name: "message-detail",
+    data() {
+        return {
+            title: "接单后要求多久与客户预约安装时间？",
+            date: "2022-11-01 18:14",
+            content: "哈哈哈",
+        };
+    },
+    components: {
+        AppLayout,
+    },
+    onLoad() {},
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.message-container {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 40rpx;
+    .head {
+        width: 100%;
+        font-size: 30rpx;
+        font-weight: bold;
+        line-height: 30rpx;
+        .title {
+            color: #333333;
+        }
+        .date {
+            display: inline-block;
+            color: #999999;
+            margin-top: 24rpx;
+        }
+    }
+    .body {
+        margin-top: 40rpx;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/message/message.vue b/src/pages/message/message.vue
index 9c842a0..3436996 100644
--- a/src/pages/message/message.vue
+++ b/src/pages/message/message.vue
@@ -1,42 +1,28 @@
 <template>
     <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>
+            <view
+                class="cate-item"
+                v-for="(item, index) in tabList"
+                :key="index"
+                :class="{ active: tabIndex == index }"
+                @click="tabIndex = index"
+            >
+                {{ item.name }}
+            </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>
+                <swiper-item v-for="(item, index) in tabList" :key="index">
+                    <view :class="['tab' + index]">
+                        <view
+                            class="message-item"
+                            v-for="(v, k) in item.list"
+                            :key="k"
+                            @click="utils.toPage('/pages/message/detail?id=' + v.id)"
+                        >
+                            <text class="title limit-line clamp-1" :class="{ active: !v.read }">{{ v.title }}</text>
+                            <text class="date">{{ v.date }}</text>
                         </view>
                     </view>
                 </swiper-item>
@@ -55,30 +41,58 @@ export default {
             bodyPt: 0,
             tabIndex: 0,
             tabHeight: 0,
-            list: [
+            tabList: [
                 {
                     id: 1,
-                    title: "接单后要求多久与客户预约安装时间？",
-                    date: "2022-11-01 18:14",
-                    read: false,
+                    name: "公告",
+                    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,
+                        },
+                    ],
                 },
                 {
                     id: 2,
-                    title: "接单后要求多久与客户预约安装时间？",
-                    date: "2022-11-01 18:14",
-                    read: true,
+                    name: "平台规则",
+                    list: [
+                        {
+                            id: 5,
+                            title: "接单后要求多久与客户预约安装时间？",
+                            date: "2022-11-01 18:14",
+                            read: false,
+                        },
+                    ],
                 },
                 {
                     id: 3,
-                    title: "接单后要求多久与客户预约安装时间？",
-                    date: "2022-11-01 18:14",
-                    read: true,
+                    name: "帮助中心",
+                    list: [],
                 },
                 {
                     id: 4,
-                    title: "接单后要求多久与客户预约安装时间？",
-                    date: "2022-11-01 18:14",
-                    read: true,
+                    name: "平台消息",
+                    list: [],
                 },
             ],
         };