修改

miniprogram/app.ts

@@ -4,6 +4,8 @@ const config = require("./config");
 
 App<IAppOption>({
   globalData: {
+    // 在客服页面使用
+    top: 0,  // 初始的上偏移
     baseUrl: config?.baseUrl,
     appId: '',
     deviceNum: '', // 设备信息
@@ -42,6 +44,9 @@ 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: 998;
+}
 .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/1732155965679.png" data-src="https://oss.dayaedu.com/ktyq/1732155965679.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.less

@@ -294,6 +294,7 @@ page {
   }
   .btnSection {
     flex: 1 auto;
+    display: flex;
     button {
       width: 100%;
       line-height: 88rpx;
@@ -308,6 +309,15 @@ page {
       &[disabled][type=primary] {
         opacity: 0.7;
       }
+
+      &:first-child {
+        background: linear-gradient( 135deg, #FF9800 0%, #FFB300 100%);
+        border-radius: 16rpx 0rpx 0rpx 16rpx;
+      }
+      &:last-child {
+        background: linear-gradient( 315deg, #FF4A00 0%, #FE8C00 100%);
+        border-radius: 0rpx 16rpx 16rpx 0rpx;
+      }
     }
   }
 }

miniprogram/pages/index/index.ts

@@ -12,17 +12,18 @@ Page({
    */
   data: {
     imgList: [
-      'https://oss.dayaedu.com/ktyq/1731664204915.png',
-      'https://oss.dayaedu.com/ktyq/1731664238525.png',
-      'https://oss.dayaedu.com/ktyq/1731664250837.png',
-      'https://oss.dayaedu.com/ktyq/1731664259087.png',
-      'https://oss.dayaedu.com/ktyq/1731664269098.png',
+      'https://oss.dayaedu.com/ktyq/1732101023155.png',
+      'https://oss.dayaedu.com/ktyq/1732101058157.png',
+      'https://oss.dayaedu.com/ktyq/1732101072881.png',
+      'https://oss.dayaedu.com/ktyq/1732101091093.png',
+      'https://oss.dayaedu.com/ktyq/1732101102921.png',
     ],
+    
     goodsImgList: [
-      'https://oss.dayaedu.com/ktyq/1731664304424.png',
-      'https://oss.dayaedu.com/ktyq/1731664318588.png',
-      'https://oss.dayaedu.com/ktyq/1731664330981.png',
-      'https://oss.dayaedu.com/ktyq/1732085582320.png'
+      "https://oss.dayaedu.com/ktyq/1732101129195.png",
+      "https://oss.dayaedu.com/ktyq/1732101146406.png",
+      "https://oss.dayaedu.com/ktyq/1732101158356.png",
+      "https://oss.dayaedu.com/ktyq/1732101169900.png"
     ],
     current: 0,
     autoplay: false,

miniprogram/pages/index/index.wxml

@@ -56,16 +56,12 @@
       </view>
     </view>
 
-      <!-- <view class="orders" bind:tap="onService">
-        <image src="./images/icon-service.png" />
-        <text>客服</text>
-      </view>
-       -->
        <view class="orders" bind:tap="onOrder">
         <image src="./images/icon-order.png" />
       </view>
     <view class="bottom-section">
       <view class="btnSection">
+        <button bind:tap="onOrder" type="primary" disabled="{{ isOverSaled }}">我的订单</button>
         <button bind:tap="onBuyShop" type="primary" disabled="{{ isOverSaled }}">立即购买</button>
       </view>
     </view>
@@ -110,5 +106,6 @@
     </view>
   </view>
 
-  <service popShow="{{ showService }}" bind:changePop="changePop"></service>
+  <!-- 客服 -->
+  <service></service>
 </scroll-view>

typings/index.d.ts

@@ -2,6 +2,7 @@
 
 interface IAppOption {
   globalData: {
+    top: number,
     userInfo?: any,
     baseUrl: string,
     appId: string,
@@ -10,5 +11,6 @@ interface IAppOption {
   }
   userInfoReadyCallback?: WechatMiniprogram.GetUserInfoSuccessCallback,
   setAppId(): void,
+  onSerivceLocationChange?(): void,
   onLogin(code: string): void
 }