Browse Source

feat 页面底部客服

anxiaoxia 1 year ago
parent
commit
8b1f18ec77

+ 25 - 0
src/api/common.js

@@ -0,0 +1,25 @@
+import $http from '@/common/request.js'
+import config from '@/config'
+import store from '@/store/index.js'
+function getProjectId() {
+  const userInfo = store.state.user.userInfo
+  return userInfo
+}
+//  客服
+function customerservice() {
+  let params = {
+    'criteria': {
+      'projectId': getProjectId().projectId,
+      'state': 1
+    }
+  }
+  return $http({
+    serverSp: config.brsgServer.duoduoUrl,
+    url: `/server/duoduoenv/customerservice/query`,
+    method: 'POST',
+    isNotShowErrorToast: true,
+    errorSave: true,
+    data: JSON.stringify(params)
+  })
+}
+export { customerservice }

+ 132 - 0
src/components/coustome/custome-service-panel.wpy

@@ -0,0 +1,132 @@
+<style lang="less">
+.custome-service-panel {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 2;
+    &.show {
+        display: flex;
+    }
+    &.hide {
+        display: none;
+    }
+    .panel-mask {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.2);
+    }
+    .content {
+        position: absolute;
+        bottom: 0px;
+        text-align: center;
+        border-radius: 16px 16px 0px 0px;
+        background: #ffffff;
+        width: 100%;
+        height: 296rpx;
+
+        .sp-text {
+            height: 100rpx;
+            color: #1db1b2;
+            font-family: PingFang SC;
+            font-size: 32rpx;
+            font-weight: 400;
+            line-height: 100rpx;
+        }
+        .dir {
+            height: 16rpx;
+            background: #f1f4f6;
+        }
+        .text {
+            color: #8b949e;
+            font-family: PingFang SC;
+            font-size: 32rpx;
+            font-weight: 400;
+            line-height: 100rpx;
+        }
+    }
+}
+</style>
+
+<template>
+    <cover-view
+        class="{{'custome-service-panel '+(show?'show':'hide')}}"
+        v-on:touchmove.stop="stopProgration"
+    >
+        <cover-view
+            class="panel-mask"
+            v-on:click="closePanel"
+        ></cover-view>
+        <cover-view class="content">
+            <cover-view>
+                <cover-view
+                    class="sp-text"
+                    @click="callPhone"
+                >
+                    呼叫 {{ phone }}
+                </cover-view>
+                <cover-view class="dir"></cover-view>
+                <cover-view
+                    class="text"
+                    v-on:click="closePanel"
+                >取消</cover-view>
+            </cover-view>
+        </cover-view>
+    </cover-view>
+</template>
+
+<script>
+import wepy from '@wepy/core'
+import config from '@config'
+import { mapState } from '@wepy/x'
+import store from '@/store'
+
+wepy.component({
+  store,
+  data: {
+    h5StaticPath: config.h5StaticPath,
+    h5Origin: config.h5Origin,
+    showLink: `${config.h5Origin}/#/wx-external-link`
+  },
+  props: {
+    show: Boolean,
+    phone: String
+
+  },
+  computed: {
+    ...mapState({ userInfo: state => state.user.userInfo })
+  },
+  created() {
+
+  },
+  methods: {
+    callPhone() {
+      let _this = this
+      wx.makePhoneCall({
+        phoneNumber: this.phone,
+        complete() {
+          _this.$emit('custome-service-close', false)
+        }
+      })
+    },
+    closePanel() {
+      this.$emit('custome-service-close', false)
+    },
+    stopProgration() { }
+  }
+})
+</script>
+
+
+<config>
+{
+  
+}
+</config>

+ 5 - 1
src/packagesEnv/pages/personalCenter/footer.wpy

@@ -76,7 +76,7 @@
 
 import wepy from '@wepy/core'
 import config from '@/config'
-import { customerservice } from '../../api/personalCenter.js'
+import { customerservice } from '../../api/common.js'
 wepy.component({
   name: 'Footer',
   props: {
@@ -100,8 +100,12 @@ wepy.component({
         let phone = null
         if (res.count) {
           phone = res.content[0].phone
+          this.IsShowPhone = true
+        } else {
+          this.IsShowPhone = false
         }
         this.phone = phone
+        this.$emit('custome-phone-show', phone)
       })
     }
   }

+ 8 - 3
src/packagesEnv/pages/personalCenter/index.wpy

@@ -193,7 +193,7 @@ page {
 
             </div>
         </div>
-        <footer @callPhone="openPhonePanel"></footer>
+        <footer v-show="hasCustomePhone" @callPhone="openPhonePanel" @custome-phone-show="customePhoneShow"></footer>
         <custome-service-panel
             :show="visiblePhone"
             :phone="phone"
@@ -216,6 +216,7 @@ wepy.page({
   components: {},
   props: {},
   data: {
+    hasCustomePhone: null,
     visiblePhone: false,
     phone: '',
     userInfo: null,
@@ -234,6 +235,10 @@ wepy.page({
 
   computed: {},
   methods: {
+    // 是否有客服
+    customePhoneShow(val) {
+      this.hasCustomePhone = val
+    },
     getUserInfo() {
       queryUserById().then(res => {
         this.userInfo = res.data
@@ -273,8 +278,8 @@ wepy.page({
     usingComponents: {
         'page-top-bar': '~@/components/common/page-top-bar', 
         'add-miniprogram-to-desk-panel': './component/add-miniprogram-to-desk-panel', 
-        'custome-service-panel': './component/custome-service-panel', 
-        'footer':'./footer'     
+        'custome-service-panel': '~@/components/coustome/custome-service-panel', 
+        'footer':'~@/components/coustome/footer'     
     },
     "componentPlaceholder": {
         "add-miniprogram-to-desk-panel": "view",