1

miniprogram/app.ts

@@ -4,6 +4,7 @@ const config = require("./config");
 
 App<IAppOption>({
   globalData: {
+    top: 0,
     baseUrl: config?.baseUrl,
     appId: '',
     deviceNum: '', // 设备信息
@@ -41,6 +42,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;
   },
   // userInfoReadyCallback(result) {
   //   console.log(result, 'result')

miniprogram/components/service/service.less

@@ -1,4 +1,12 @@
 /* components/service/service.wxss */
+.iconSerivce {
+  position: fixed;
+  // bottom: 198rpx;
+  // right: 8rpx;
+  width: 112rpx;
+  height: 119rpx;
+  z-index: 2998;
+}
 .service-container {
   position: fixed;
   top: 0;
@@ -23,14 +31,17 @@
     left: 50%;
     text-align: center;
     .iconImg {
-      width: 590rpx;
-      height: 848.22rpx;
+      width: 578rpx;
+      height: 686rpx;
     }
 
     .iconClose {
-      margin-top: 40rpx;
-      width: 60rpx;
-      height: 60rpx;
+      position: absolute;
+      z-index: 1;
+      top: 34rpx;
+      right: 16rpx;
+      width: 44rpx;
+      height: 44rpx;
     }
   }
 }

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/1732518474110.png" data-src="https://oss.dayaedu.com/ktyq/1732518474110.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

@@ -158,7 +158,8 @@ Page({
     buyerLoading: false,
     // currentIndex: 0,
 
-    timer: null as any
+    timer: null as any,
+    serviceShow: true,
   },
 
   /**
@@ -527,6 +528,14 @@ Page({
         isFromPreviewImage: false
       })
     }
+    this.setData({
+      serviceShow: true,
+    });
+  },
+  onHide() {
+    this.setData({
+      serviceShow: false,
+    });
   },
   onShareAppMessage() {
     return {

miniprogram/pages/index/index.wxml

@@ -91,14 +91,13 @@
 
 
         </view>
-
       </scroll-view>
-
-
     </view>
   </swiper-item>
 </swiper>
 
+<!-- 客服功能 -->
+<service wx:if="{{serviceShow}}"></service>
 <van-popup show="{{ popupShow }}" safe-area-inset-bottom="{{false}}" lock-scroll="{{true}}" bind:close="onClose" position="bottom" round z-index="101" bind:close="onClose">
   <view class="popup-section">
     <image bind:tap="onClose" src="./images/icon-close-1.png" class="iconClose"></image>

typings/index.d.ts

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