完成客服

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;

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>

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 = [];
@@ -281,6 +269,5 @@ export default {
     toPage,
     toast,
     formatNumber,
-    serviceActions,
     chooseImage,
 }

src/pages/member/member.vue

@@ -90,7 +90,7 @@
                         <text class="title limit-line clamp-1">我的评价</text>
                         <text class="iconfont icon-jinru"></text>
                     </view>
-                    <view class="widget-item" @click="utils.serviceActions()">
+                    <view class="widget-item" @click="showService = true">
                         <text class="title limit-line clamp-1">在线客服</text>
                         <text class="iconfont icon-jinru"></text>
                     </view>
@@ -106,6 +106,7 @@
                 <rich-text :nodes="carefreeContent"></rich-text>
             </view>
         </widget-modal>
+        <widget-service :showService="showService" @close="showService = false" />
     </app-layout>
 </template>
 
@@ -113,6 +114,7 @@
 import AppLayout from "@/components/layout/layout";
 import WidgetSwitch from "@/components/widgets/switch";
 import WidgetModal from "@/components/widgets/modal";
+import WidgetService from "@/components/widgets/service";
 import { mapGetters, mapState } from "vuex";
 export default {
     name: "member",
@@ -126,6 +128,7 @@ export default {
             acceptOrderState: false,
             typeText: "",
             typeTextColor: "",
+            showService: false,
             showCarefreeModal: false,
             carefreeContent: "",
             serviceData: {
@@ -141,6 +144,7 @@ export default {
         AppLayout,
         WidgetSwitch,
         WidgetModal,
+        WidgetService,
     },
     computed: {
         ...mapGetters({

src/pages/message/message.vue

@@ -68,6 +68,7 @@ export default {
     onLoad() {},
     async onShow() {
         if (this.messageTabIndex != this.tabIndex) {
+            this.tabList = [];
             await this.loadCate();
             this.switchTab(this.messageTabIndex);
         }
@@ -106,7 +107,6 @@ export default {
          * 加载分类
          */
         async loadCate() {
-            this.tabList = [];
             await this.$models.system.notifyCate().then((cate) => {
                 cate.forEach((item) => {
                     this.tabList.push({

src/pages/order/detail.vue

@@ -112,7 +112,7 @@
             </view>
         </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>
@@ -121,6 +121,7 @@
             </view>
         </view>
         <order-confirm-price v-show="showConfirmModal" @close="showConfirmModal = false" @confirm="finishOrder" />
+        <widget-service :showService="showService" @close="showService = false" />
     </app-layout>
 </template>
 
@@ -129,6 +130,7 @@ import AppLayout from "@/components/layout/layout";
 import OrderAction from "@/components/order/action";
 import GetAction from "@/components/get/action";
 import OrderConfirmPrice from "@/components/order/confirm-price";
+import WidgetService from "@/components/widgets/service";
 export default {
     name: "order-detail",
     data() {
@@ -142,6 +144,7 @@ export default {
             typeTextBg: "",
             stateText: "",
             stateTextColor: "",
+            showService: false,
             order: {
                 address: {},
             },
@@ -152,6 +155,7 @@ export default {
         OrderAction,
         GetAction,
         OrderConfirmPrice,
+        WidgetService,
     },
     onLoad(e) {
         this.pageConfig = getApp().globalData.pageConfig;