完善消息

src/core/apis.js

@@ -12,6 +12,19 @@ const apis = {
         carefree: {
             url: "/user/workerinfo/carefree",
             auth: true,
+        },
+        notify: {
+            cate: {
+                url: "/wxapp/index/newcate",
+                showLoading: true,
+            },
+            list: {
+                url: "/wxapp/index/newlistbycateid",
+                showLoading: true,
+            },
+            detail: {
+                url: ""
+            }
         }
     },
     user: {

src/core/models/system.js

@@ -83,4 +83,53 @@ export default {
             });
         });
     },
-}
+    /**
+     * 服务数据
+     */
+    serviceData() {
+        return new Promise((resolve, reject) => {
+            prototype.$request({
+                api: "system.serviceData",
+            }).then(response => {
+                if (response.code == 1) {
+                    return resolve(response.data);
+                }
+                return reject(response.msg);
+            }).catch(e => { });
+        });
+    },
+    /**
+     * 公告分类
+     */
+    notifyCate() {
+        return new Promise((resolve, reject) => {
+            prototype.$request({
+                api: "system.notify.cate"
+            }).then((response) => {
+                if (response.code == 1) {
+                    return resolve(response.data);
+                }
+                return reject(response.msg);
+            });
+        });
+    },
+    /**
+     * 公告列表
+     */
+    notifyList(cateId, page) {
+        return new Promise((resolve, reject) => {
+            prototype.$request({
+                api: "system.notify.list",
+                data: {
+                    cateid: cateId,
+                    page: page,
+                }
+            }).then((response) => {
+                if (response.code == 1) {
+                    return resolve(response.data);
+                }
+                return reject(response.msg);
+            });
+        });
+    }
+}

src/pages/index/index.vue

@@ -36,9 +36,21 @@
                         </view>
                     </view>
                     <view class="nav">
-                        <view class="nav-item" v-for="(item, index) in navList" :key="index" @click="utils.toPage(item.page)">
+                        <view class="nav-item" @click="utils.toPage('/pages/get/index')">
-                            <image class="icon" :src="item.icon" mode="aspectFill" />
+                            <image class="icon" :src="require('@/static/temp/index/1.png')" mode="aspectFill" />
-                            <text class="title">{{ item.name }}</text>
+                            <text class="title">接单大厅</text>
+                        </view>
+                        <view class="nav-item" @click="toMessage(1)">
+                            <image class="icon" :src="require('@/static/temp/index/2.png')" mode="aspectFill" />
+                            <text class="title">平台规则</text>
+                        </view>
+                        <view class="nav-item" @click="utils.serviceActions()">
+                            <image class="icon" :src="require('@/static/temp/index/3.png')" mode="aspectFill" />
+                            <text class="title">平台客服</text>
+                        </view>
+                        <view class="nav-item" @click="toMessage(2)">
+                            <image class="icon" :src="require('@/static/temp/index/4.png')" mode="aspectFill" />
+                            <text class="title">帮助中心</text>
                         </view>
                     </view>
                     <view class="action-group">
@@ -74,54 +86,7 @@ export default {
             utils: this.$utils,
             safePt: 0,
             backgroundImage: require("@/static/temp/1.png"),
-            notifyList: [
+            notifyList: [],
-                {
-                    id: 1,
-                    title: "恭喜成都市王先生订购xxxxxx服务一套",
-                },
-                {
-                    id: 2,
-                    title: "恭喜成都市王先生订购xxxxxx服务一套",
-                },
-                {
-                    id: 3,
-                    title: "恭喜成都市王先生订购xxxxxx服务一套",
-                },
-                {
-                    id: 4,
-                    title: "恭喜成都市王先生订购xxxxxx服务一套",
-                },
-                {
-                    id: 5,
-                    title: "恭喜成都市王先生订购xxxxxx服务一套",
-                },
-            ],
-            navList: [
-                {
-                    id: 1,
-                    icon: require("@/static/temp/index/1.png"),
-                    name: "接单大厅",
-                    page: "/pages/get/index",
-                },
-                {
-                    id: 1,
-                    icon: require("@/static/temp/index/2.png"),
-                    name: "平台规则",
-                    page: "",
-                },
-                {
-                    id: 1,
-                    icon: require("@/static/temp/index/3.png"),
-                    name: "平台客服",
-                    page: "",
-                },
-                {
-                    id: 1,
-                    icon: require("@/static/temp/index/4.png"),
-                    name: "帮助中心",
-                    page: "",
-                },
-            ],
             action: {
                 item1: 0,
                 item2: 0,
@@ -133,25 +98,28 @@ export default {
     components: {
         AppLayout,
     },
-    onLoad() {},
+    onLoad() {
+        this.$models.system.notifyList(1, 1).then((list) => {
+            this.notifyList = list;
+        });
+    },
     onShow() {
-        this.$request({
+        this.$models.system.serviceData().then((data) => {
-            api: "system.serviceData",
+            this.action.item1 = data.order1;
-        })
+            this.action.item2 = data.order2;
-            .then((response) => {
+            this.action.item3 = data.order3;
-                if (response.code == 1) {
+            this.action.item4 = data.order4;
-                    this.action.item1 = response.data.order1;
+        });
-                    this.action.item2 = response.data.order2;
-                    this.action.item3 = response.data.order3;
-                    this.action.item4 = response.data.order4;
-                }
-            })
-            .catch((e) => {});
     },
     onReady() {},
     onReachBottom() {},
     onPullDownRefresh() {},
-    methods: {},
+    methods: {
+        toMessage(id) {
+            this.$store.commit("system/messageTabIndex", id);
+            this.$utils.toPage("/pages/message/message", {}, "switch");
+        },
+    },
 };
 </script>
 

src/pages/message/message.vue

@@ -12,16 +12,15 @@
             </view>
         </scroll-view>
         <view class="message-container">
-            <swiper :current="tabIndex" :style="{ minHeight: '75vh', height: tabHeight + 'px' }" @change="changeTab">
+            <swiper
+                :current="tabIndex"
+                :style="{ minHeight: '75vh', height: tabHeight + 'px' }"
+                @change="switchTab($event.detail.current)"
+            >
                 <swiper-item v-for="(item, index) in tabList" :key="index">
                     <view :class="['tab' + index]">
-                        <view
+                        <view class="message-item" v-for="(v, k) in item.list" :key="k" @click="toDetail(v.id)">
-                            class="message-item"
+                            <text class="title limit-line clamp-1">{{ v.title }}</text>
-                            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>
@@ -33,92 +32,52 @@
 
 <script>
 import AppLayout from "@/components/layout/layout";
+import { mapState } from "vuex";
 export default {
     name: "message",
     data() {
         return {
             utils: this.$utils,
             bodyPt: 0,
+            timer: null,
             tabIndex: 0,
             tabHeight: 0,
-            tabList: [
+            tabList: [],
-                {
-                    id: 1,
-                    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,
-                    name: "平台规则",
-                    list: [
-                        {
-                            id: 5,
-                            title: "接单后要求多久与客户预约安装时间？",
-                            date: "2022-11-01 18:14",
-                            read: false,
-                        },
-                    ],
-                },
-                {
-                    id: 3,
-                    name: "帮助中心",
-                    list: [],
-                },
-                {
-                    id: 4,
-                    name: "平台消息",
-                    list: [],
-                },
-            ],
         };
     },
     components: {
         AppLayout,
     },
-    computed: {},
+    computed: {
-    onLoad() {
+        ...mapState({
-        this.$nextTick(() => {
+            messageTabIndex: (state) => state.system.messageTabIndex,
-            this.setTabHeight();
+        }),
-        });
+    },
+    onLoad() {},
+    async onShow() {
+        await this.loadCate();
+        this.switchTab(this.messageTabIndex);
     },
-    onShow() {},
     onReady() {},
-    onReachBottom() {},
+    onReachBottom() {
+        let currentTab = this.tabList[this.tabIndex];
+        if (currentTab.more) {
+            this.loadList(this.tabIndex);
+        }
+    },
     onPullDownRefresh() {},
     methods: {
         switchTab(index) {
             this.tabIndex = index;
-            this.$nextTick(() => {
+            this.$store.commit("system/messageTabIndex", index);
-                this.setTabHeight();
+            let currentTab = this.tabList[this.tabIndex];
-            });
+            currentTab.page = 1;
-        },
+            currentTab.list = [];
-        changeTab(e) {
+            currentTab.more = true;
-            this.switchTab(e.detail.current);
+            clearTimeout(this.timer);
+            this.timer = setTimeout(() => {
+                this.loadList(index);
+            }, 100);
         },
         setTabHeight() {
             let query = uni.createSelectorQuery().in(this);
@@ -129,6 +88,50 @@ export default {
                 }
             });
         },
+        /**
+         * 加载分类
+         */
+        async loadCate() {
+            this.tabList = [];
+            await this.$models.system.notifyCate().then((cate) => {
+                cate.forEach((item) => {
+                    this.tabList.push({
+                        id: item.id,
+                        name: item.title,
+                        more: true,
+                        page: 1,
+                        list: [],
+                    });
+                });
+            });
+        },
+        /**
+         * 加载列表
+         */
+        loadList() {
+            let currentTab = this.tabList[this.tabIndex];
+            this.$models.system.notifyList(currentTab.id, currentTab.page).then((list) => {
+                if (list.length > 0) {
+                    list.forEach((item) => {
+                        currentTab.list.push({
+                            id: item.id,
+                            title: item.title,
+                            date: item.times,
+                        });
+                    });
+                    currentTab.page++;
+                } else {
+                    currentTab.more = false;
+                }
+                this.$nextTick(() => {
+                    this.setTabHeight();
+                });
+            });
+        },
+        /**
+         * 详情
+         */
+        toDetail(id) {},
     },
 };
 </script>

src/store/modules/system.js

@@ -1,7 +1,13 @@
 export default {
     namespaced: true,
-    state: {},
+    state: {
+        messageTabIndex: 0,
+    },
     getters: {},
-    mutations: {},
+    mutations: {
+        messageTabIndex(state, data) {
+            state.messageTabIndex = data;
+        }
+    },
     actions: {}
 }