diff --git a/src/components/widgets/modal.vue b/src/components/widgets/modal.vue
index ef85461..7a2b852 100644
--- a/src/components/widgets/modal.vue
+++ b/src/components/widgets/modal.vue
@@ -48,6 +48,14 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
 .component-widgets-modal {
     z-index: 25;
     position: fixed;
@@ -61,6 +69,7 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    animation: fadeIn 0.2s;
     .modal-mask {
         z-index: 0;
         position: absolute;
diff --git a/src/components/widgets/service.vue b/src/components/widgets/service.vue
new file mode 100644
index 0000000..d4ffcc3
--- /dev/null
+++ b/src/components/widgets/service.vue
@@ -0,0 +1,56 @@
+<template>
+    <view class="components-service">
+        <widget-modal v-show="showService" @close="close" title="请选择客服">
+            <view class="service-list">
+                <button class="btn-item" @click="call">电话客服</button>
+                <button class="btn-item" open-type="contact">微信客服</button>
+            </view>
+        </widget-modal>
+    </view>
+</template>
+
+<script>
+import WidgetModal from "@/components/widgets/modal";
+export default {
+    name: "widget-service",
+    data() {
+        return {};
+    },
+    props: {
+        showService: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    components: {
+        WidgetModal,
+    },
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {
+        close() {
+            this.$emit("close");
+        },
+        call() {},
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.components-service {
+    width: 100%;
+    .service-list {
+        width: 100%;
+    }
+    .btn-item {
+        color: #666666;
+        font-size: 30rpx;
+        background-color: unset;
+        border-bottom: 2rpx solid #e0e0e0;
+    }
+    .btn-item::after {
+        border: 0;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/core/libs/utils.js b/src/core/libs/utils.js
index 5696f02..41d1140 100644
--- a/src/core/libs/utils.js
+++ b/src/core/libs/utils.js
@@ -215,18 +215,6 @@ function formatNumber(num, limit) {
     return num > 0 ? num.toFixed(limit) : 0;
 }
 
-function serviceActions() {
-    uni.showActionSheet({
-        itemList: ['电话客服', '微信客服'],
-        success(res) {
-            console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
-        },
-        fail(res) {
-            console.log(res.errMsg);
-        }
-    });
-}
-
 function chooseImage(count) {
     return new Promise((resolve, reject) => {
         let tempFiles = [];
@@ -308,7 +296,6 @@ export default {
     toPage,
     toast,
     formatNumber,
-    serviceActions,
     chooseImage,
     isType,
 }
diff --git a/src/pages/member/member.vue b/src/pages/member/member.vue
index 7f862d6..19ffaee 100644
--- a/src/pages/member/member.vue
+++ b/src/pages/member/member.vue
@@ -29,7 +29,7 @@
                     <text class="title">意见投诉</text>
                     <text class="iconfont icon-jinru more"></text>
                 </view>
-                <view class="widget-item" @click="utils.serviceActions()">
+                <view class="widget-item" @click="showService = true">
                     <text class="iconfont icon-kefufill icon"></text>
                     <text class="title">联系客服</text>
                     <text class="iconfont icon-jinru more"></text>
@@ -58,21 +58,25 @@
                 </view>
             </view>
         </view>
+        <widget-service :showService="showService" @close="showService = false" />
     </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
+import WidgetService from "@/components/widgets/service";
 import { mapGetters, mapState } from "vuex";
 export default {
     name: "member",
     data() {
         return {
             utils: this.$utils,
+            showService: false,
         };
     },
     components: {
         AppLayout,
+        WidgetService,
     },
     computed: {
         ...mapState({
diff --git a/src/pages/order/detail.vue b/src/pages/order/detail.vue
index ac2f1ef..293a4d9 100644
--- a/src/pages/order/detail.vue
+++ b/src/pages/order/detail.vue
@@ -135,7 +135,7 @@
             </swiper>
         </view>
         <view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
-            <view class="service" @click="utils.serviceActions()">
+            <view class="service" @click="showService = true">
                 <text class="iconfont icon-kefu"></text>
                 <text class="text">客服</text>
             </view>
@@ -143,6 +143,7 @@
                 <order-action :order="order" @refresh="refresh" />
             </view>
         </view>
+        <widget-service :showService="showService" @close="showService = false" />
     </app-layout>
 </template>
 
@@ -151,12 +152,14 @@ import AppLayout from "@/components/layout/layout";
 import WorkerItem from "@/components/worker/item";
 import ServiceInsurance from "@/components/service/insurance";
 import OrderAction from "@/components/order/action";
+import WidgetService from "@/components/widgets/service";
 export default {
     name: "order-detail",
     data() {
         return {
             utils: this.$utils,
             pageConfig: {},
+            showService: false,
             tabIndex: 0,
             tabHeight: 0,
             stateText: "",
@@ -177,6 +180,7 @@ export default {
         WorkerItem,
         ServiceInsurance,
         OrderAction,
+        WidgetService,
     },
     async onLoad(e) {
         this.pageConfig = getApp().globalData.pageConfig;