添加客服二维码

miniprogram/app.ts

@@ -4,6 +4,7 @@ const config = require("./config");
 
 App<IAppOption>({
   globalData: {
+    top: 0,
     baseUrl: config?.baseUrl,
     appId: '',
     deviceNum: '', // 设备信息
@@ -37,6 +38,10 @@ App<IAppOption>({
       // 品牌 设备型号 操作系统及版本 客户端平台
     const deviceNum = deviceInfo.brand + '-' + deviceInfo.model + '-' + deviceInfo.platform + '-' + deviceInfo.system
     this.globalData.deviceNum = deviceNum
+
+    // 设置客服初始位置
+    const systemInfo = wx.getWindowInfo();
+    this.globalData.top = systemInfo.windowHeight - 180;
   },
   /** 微信登录 */
   async onLogin(code: string) {

miniprogram/components/service/service.less

@@ -1,4 +1,12 @@
 /* components/service/service.wxss */
+.iconSerivce {
+  position: fixed;
+  // bottom: 198rpx;
+  // right: 8rpx;
+  width: 120rpx;
+  height: 120rpx;
+  z-index: 998;
+}
 .service-container {
   position: fixed;
   top: 0;
@@ -23,14 +31,17 @@
     left: 50%;
     text-align: center;
     .iconImg {
-      width: 590rpx;
-      height: 848.22rpx;
+      width: 630rpx;
+      height: 972rpx;
     }
 
     .iconClose {
-      margin-top: 40rpx;
-      width: 60rpx;
-      height: 60rpx;
+      position: absolute;
+      z-index: 1;
+      top: 28rpx;
+      right: 30rpx;
+      width: 40rpx;
+      height: 40rpx;
     }
   }
 }

miniprogram/components/service/service.ts

@@ -1,32 +1,94 @@
 // components/service/service.ts
+// 获取应用实例
+const app = getApp<IAppOption>()
 Component({
-
-  /**
-   * 组件的属性列表
-   */
-  properties: {
-    popShow: {
-      type: Boolean,
-      default: false
-    }
-  },
-
   /**
    * 组件的初始数据
    */
   data: {
-
+    popShow: false,
+    btnShow: true,
+    maxTop: 0,
+    top: 0,  // 初始的上偏移
+    startY: 0, // 触摸起始点 Y 坐标
+    windowWidth: 0, // 屏幕宽度
+    windowHeight: 0, // 屏幕高度
+    elementHeight: 60 // 元素高度
   },
+  lifetimes: {
+    attached() {
+      // 获取屏幕宽高
+      const systemInfo = wx.getWindowInfo();
+      const isAndroid = systemInfo.platform === 'android'
+      // const isDevtools = systemInfo.platform === 'devtools'
+      const barHeight = !isAndroid ? 44 : 48;
 
+      const globalTop = app.globalData.top
+      this.setData({
+        maxTop: barHeight + systemInfo.safeArea.top,
+        windowWidth: systemInfo.windowWidth,
+        windowHeight: systemInfo.windowHeight,
+        top: globalTop
+      });
+    }
+  },
   /**
    * 组件的方法列表
    */
   methods: {
     onClose() {
-      this.triggerEvent('changePop', false)
+      // this.triggerEvent('changePop', false)
+      this.setData({
+        popShow: false
+      })
     },
     onOpen() {
-// 
+      // 
+    },
+    onShow() {
+      this.setData({
+        popShow: true
+      })
+    },
+    onTouchStart(e: any) {
+      // 记录触摸起始点的 Y 坐标
+      this.setData({
+        startY: e.touches[0].clientY
+      });
+    },
+  
+    onTouchMove(e: any) {
+      // 计算上下方向的偏移量
+      const deltaY = e.touches[0].clientY - this.data.startY;
+  
+      // 更新元素的垂直位置
+      app.globalData.top = this.data.top + deltaY
+      this.setData({
+        top: this.data.top + deltaY,
+        startY: e.touches[0].clientY
+      });
+    },
+  
+    onTouchEnd() {
+      const { top, windowHeight, elementHeight } = this.data;
+
+      // 计算与顶部和底部边界的距离
+      const distanceTop = top;
+      const moveHeight = top + elementHeight
+      // 判断元素与顶部和底部的距离，选择最近的边界
+      if (distanceTop < this.data.maxTop) {
+        this.setData({ top: this.data.maxTop }, () => {
+          app.globalData.top = this.data.maxTop
+        }); // 吸附到顶部
+      } else if(moveHeight >= windowHeight) {
+        this.setData({ top: windowHeight - elementHeight }, () => {
+          app.globalData.top = windowHeight - elementHeight
+        })
+      } else {
+        this.setData({ top }, () => {
+          app.globalData.top = top
+        })
+      }
     }
   }
 })

miniprogram/components/service/service.wxml

@@ -1,9 +1,12 @@
 <!--components/service/service.wxml-->
-<view class="service-container" wx:if="{{ popShow }}">
-  <view class="service-mask" bind:tap="onClose"></view>
-  <view class="service-section" bind:tap="onClose">
-    <image src="https://oss.dayaedu.com/ktyq/1732682074265.png" data-src="https://oss.dayaedu.com/ktyq/1732682074265.png" mode="aspectFill" catch:tap="onOpen" show-menu-by-longpress="true" catch:longtap="onPerview" class="iconImg"></image>
+<view>
+  <view class="service-container" wx:if="{{ popShow }}">
+    <view class="service-mask" bind:tap="onClose"></view>
+    <view class="service-section" bind:tap="onClose">
+      <image src="https://oss.dayaedu.com/ktyq/12/1766068021474.png" data-src="https://oss.dayaedu.com/ktyq/12/1766068021474.png" mode="aspectFill" catch:tap="onOpen" show-menu-by-longpress="true" catch:longtap="onPerview" class="iconImg"></image>
 
-    <image src="./images/icon-close.png" catch:tap="onClose" class="iconClose"></image>
+      <image src="./images/icon-close.png" catch:tap="onClose" class="iconClose"></image>
+    </view>
   </view>
+  <image wx:if="{{ btnShow }}" src="./images/icon-service.png" catch:tap="onShow" style="top: {{top}}px; right: 4px;" bind:touchstart="onTouchStart" catch:touchmove="onTouchMove" bind:touchend="onTouchEnd" class="iconSerivce"></image>
 </view>

miniprogram/pages/index/index.ts

@@ -13,6 +13,17 @@ Page({
       'https://oss.dayaedu.com/ktyq/1740018144423.png',
       'https://oss.dayaedu.com/ktyq/1740018154816.png'
     ],
+    serviceShow: true,
+  },
+  onShow() {
+    this.setData({
+      serviceShow: true
+    })
+  },
+  onHide() {
+    this.setData({
+      serviceShow: false
+    })
   },
   isLogin() {
     // 判断是否登录

miniprogram/pages/index/index.wxml

@@ -25,5 +25,7 @@
         </view>
       </view>
     </view>
+    <!-- 客服功能 -->
+    <service wx:if="{{serviceShow}}"></service>
   </scroll-view>
 </view>

miniprogram/pages/orders/order-detail.ts

@@ -41,6 +41,7 @@ Page({
     showArea: false,
     areaList: [] as any,
 
+    serviceShow: true,
   },
 
   /**
@@ -336,18 +337,6 @@ Page({
       }
     })
   },
-  /** 客服 */
-  onService() {
-    // console.log("showService")
-    this.setData({
-      showService: true
-    })
-  },
-  changePop(event: { detail: any }) {
-    this.setData({
-      showService: event.detail
-    })
-  },
   /**
    * 生命周期函数--监听页面显示
    */
@@ -362,6 +351,15 @@ Page({
       })
     }
     this.getAddress()
+
+    this.setData({
+      serviceShow: true,
+    })
+  },
+  onHide() {
+    this.setData({
+      serviceShow: false
+    })
   },
   /** 地址列表 */
   async getAddress() {

miniprogram/pages/orders/order-detail.wxml

@@ -114,4 +114,7 @@
     <view class="title">下单时间</view>
     <view class="value">{{ goodsInfo.createTime }}</view>
   </view>
+
+  <!-- 客服功能 -->
+  <!-- <service wx:if="{{serviceShow}}"></service> -->
 </template>

miniprogram/pages/orders/order-result.ts

@@ -45,7 +45,8 @@ Page({
     timer: null as any,
     goodsInfo: {} as any,
     orderNo: "" as string,
-    isExpanded: false // 是否展开
+    isExpanded: false, // 是否展开
+    serviceShow: true,
   },
 
   /**
@@ -72,6 +73,15 @@ Page({
     //   this.getDetail(this.onTimeout)
     // }
     this.onTimeing()
+
+    this.setData({
+      serviceShow: true
+    })
+  },
+  onHide() {
+    this.setData({
+      serviceShow: false
+    })
   },
   async getDetail(callback?: any) {
     if (!this.data.orderNo) {

miniprogram/pages/orders/order-result.wxml

@@ -86,6 +86,8 @@
   <!-- <view class="order-btn" wx:if="{{ goodsInfo.wechatStatus != 'WAIT_PAY' }}">
     <button type="primary" bind:tap="onSubmit">再来一单</button>
   </view> -->
+  <!-- 客服功能 -->
+  <service wx:if="{{serviceShow}}"></service>
 </view>
 
 

miniprogram/pages/orders/orders.json

@@ -1,7 +1,8 @@
 {
   "usingComponents": {
     "navigation-bar": "/components/navigation-bar/navigation-bar",
-    "apply-refound": "/components/apply-refound/apply-refound"
+    "apply-refound": "/components/apply-refound/apply-refound",
+    "service": "/components/service/service"
   },
   "disableScroll": true
 }

miniprogram/pages/orders/orders.ts

@@ -47,6 +47,8 @@ Page({
     cancelRefoundStatus: false,
     paymentChannel: '',
     goodsInfo: {}, // 选中的数据
+
+    serviceShow: true,
   },
 
   /**
@@ -62,6 +64,15 @@ Page({
     }, () => {
       this.getList()
     })
+
+    this.setData({
+      serviceShow: true,
+    })
+  },
+  onHide() {
+    this.setData({
+      serviceShow: false
+    })
   },
   /** 切换分类 */
   switchTab(e: { currentTarget: { dataset: { idx: any } } }) {

miniprogram/pages/orders/orders.wxml

@@ -75,4 +75,7 @@
   </view>
   <!-- 申请退款 -->
   <!-- <apply-refound refoundStatus="{{ refoundStatus }}" goodsInfo="{{goodsInfo}}" bind:changeRefoundStatus="changeRefoundStatus" bind:onConfirm="onRefoundComfirm"></apply-refound> -->
+
+  <!-- 客服功能 -->
+  <service wx:if="{{serviceShow}}"></service>
 </view>

miniprogram/pages/select-goods/index.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
-    "navigation-bar": "/components/navigation-bar/navigation-bar"
+    "navigation-bar": "/components/navigation-bar/navigation-bar",
+    "service": "/components/service/service"
   },
   "disableScroll": true
 }

miniprogram/pages/select-goods/index.ts

@@ -32,7 +32,8 @@ Page({
       name: '',
       phoneNumber: '',
       schoolInfo: ''
-    }
+    },
+    serviceShow: true,
   },
 
   /**
@@ -313,5 +314,13 @@ Page({
       })
     }
 
+    this.setData({
+      serviceShow: true
+    })
+  },
+  onHide() {
+    this.setData({
+      serviceShow: false
+    })
   }
 })

miniprogram/pages/select-goods/index.wxml

@@ -122,4 +122,7 @@
       </view>
     </view>
   </view>
+
+  <!-- 客服功能 -->
+  <!-- <service wx:if="{{serviceShow}}"></service> -->
 </view>

typings/index.d.ts

@@ -2,6 +2,7 @@
 
 interface IAppOption {
   globalData: {
+    top: number,
     userInfo?: any,
     baseUrl: string,
     appId: string,