diff --git a/src/core/apis.js b/src/core/apis.js
index 01fa593..9a9c0b6 100644
--- a/src/core/apis.js
+++ b/src/core/apis.js
@@ -11,6 +11,7 @@ const apis = {
         },
         carefree: {
             url: "/user/workerinfo/carefree",
+            showLoading: true,
             auth: true,
         },
         notify: {
diff --git a/src/pages.json b/src/pages.json
index e557acc..2c70ba7 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -49,24 +49,12 @@
 				"navigationBarTitleText": "消息"
 			}
 		},
-		{
-			"path": "pages/message/detail",
-			"style": {
-				"navigationBarTitleText": "详情"
-			}
-		},
 		{
 			"path": "pages/member/member",
 			"style": {
 				"navigationBarTitleText": "我的"
 			}
 		},
-		{
-			"path": "pages/member/carefree",
-			"style": {
-				"navigationBarTitleText": "无忧保"
-			}
-		},
 		{
 			"path": "pages/member/password",
 			"style": {
diff --git a/src/pages/member/carefree.vue b/src/pages/member/carefree.vue
deleted file mode 100644
index 612f731..0000000
--- a/src/pages/member/carefree.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-    <app-layout title="无忧保">
-        <rich-text :nodes="content"></rich-text>
-    </app-layout>
-</template>
-
-<script>
-import AppLayout from "@/components/layout/layout";
-export default {
-    name: "member-carefree",
-    data() {
-        return {
-            content: "",
-        };
-    },
-    components: {
-        AppLayout,
-    },
-    onLoad() {
-        this.$request({
-            api: "system.carefree",
-        }).then((response) => {
-            this.content = response.data.content;
-        });
-    },
-    onShow() {},
-    onReady() {},
-    onReachBottom() {},
-    onPullDownRefresh() {},
-    methods: {},
-};
-</script>
-
-<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/src/pages/member/member.vue b/src/pages/member/member.vue
index a5a93e5..2a54f10 100644
--- a/src/pages/member/member.vue
+++ b/src/pages/member/member.vue
@@ -68,7 +68,7 @@
                         <text class="title limit-line clamp-1">我要提现</text>
                         <text class="iconfont icon-jinru"></text>
                     </view>
-                    <view class="widget-item" @click="toPage('/pages/member/carefree')">
+                    <view class="widget-item" @click="showCarefree">
                         <text class="title limit-line clamp-1">服务无忧保</text>
                         <text class="iconfont icon-jinru"></text>
                     </view>
@@ -101,12 +101,18 @@
                 </view>
             </view>
         </view>
+        <widget-modal v-show="showCarefreeModal" title="服务无忧保" @close="showCarefreeModal = false">
+            <view class="modal-content-box">
+                <rich-text :nodes="carefreeContent"></rich-text>
+            </view>
+        </widget-modal>
     </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
 import WidgetSwitch from "@/components/widgets/switch";
+import WidgetModal from "@/components/widgets/modal";
 import { mapGetters, mapState } from "vuex";
 export default {
     name: "member",
@@ -120,6 +126,8 @@ export default {
             acceptOrderState: false,
             typeText: "",
             typeTextColor: "",
+            showCarefreeModal: false,
+            carefreeContent: "",
             serviceData: {
                 times: 0,
                 favorableRate: "0",
@@ -132,6 +140,7 @@ export default {
     components: {
         AppLayout,
         WidgetSwitch,
+        WidgetModal,
     },
     computed: {
         ...mapGetters({
@@ -167,6 +176,14 @@ export default {
             }
             this.$utils.toPage(url);
         },
+        showCarefree() {
+            this.showCarefreeModal = true;
+            this.$request({
+                api: "system.carefree",
+            }).then((response) => {
+                this.carefreeContent = response.data.content;
+            });
+        },
     },
 };
 </script>
@@ -298,4 +315,8 @@ export default {
         margin-right: 14rpx;
     }
 }
+.modal-content-box {
+    max-height: 400rpx;
+    overflow-y: scroll;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/message/detail.vue b/src/pages/message/detail.vue
deleted file mode 100644
index fe80414..0000000
--- a/src/pages/message/detail.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<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 cde5b91..dc424d2 100644
--- a/src/pages/message/message.vue
+++ b/src/pages/message/message.vue
@@ -19,7 +19,7 @@
             >
                 <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="toDetail(v.id)">
+                        <view class="message-item" v-for="(v, k) in item.list" :key="k" @click="toDetail(v)">
                             <text class="title limit-line clamp-1">{{ v.title }}</text>
                             <text class="date">{{ v.date }}</text>
                         </view>
@@ -27,11 +27,17 @@
                 </swiper-item>
             </swiper>
         </view>
+        <widget-modal v-show="showDetail" :title="detail.title" @close="showDetail = false">
+            <view class="message-box">
+                <rich-text :nodes="detail.content"></rich-text>
+            </view>
+        </widget-modal>
     </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
+import WidgetModal from "@/components/widgets/modal";
 import { mapState } from "vuex";
 export default {
     name: "message",
@@ -43,10 +49,16 @@ export default {
             tabIndex: 0,
             tabHeight: 0,
             tabList: [],
+            showDetail: false,
+            detail: {
+                title: "",
+                content: "",
+            },
         };
     },
     components: {
         AppLayout,
+        WidgetModal,
     },
     computed: {
         ...mapState({
@@ -117,6 +129,7 @@ export default {
                             id: item.id,
                             title: item.title,
                             date: item.times,
+                            content: item.message,
                         });
                     });
                     currentTab.page++;
@@ -131,7 +144,11 @@ export default {
         /**
          * 详情
          */
-        toDetail(id) {},
+        toDetail(detail) {
+            this.showDetail = true;
+            this.detail.title = detail.title;
+            this.detail.content = detail.content;
+        },
     },
 };
 </script>
@@ -193,4 +210,8 @@ export default {
         }
     }
 }
+.message-box {
+    max-height: 400rpx;
+    overflow-y: scroll;
+}
 </style>
\ No newline at end of file