购买商品按钮 可拖动

miniprogram/app.ts

@@ -7,6 +7,7 @@ App<IAppOption>({
   globalData: {
     // 在客服页面使用
     top: 0,  // 初始的上偏移
+    sectionBoxTop: 0,
     baseUrl: config?.baseUrl,
     appId: '',
     deviceNum: '', // 设备信息
@@ -43,6 +44,7 @@ App<IAppOption>({
     // 设置客服初始位置
     const systemInfo = wx.getWindowInfo();
     this.globalData.top = systemInfo.windowHeight - 180
+    this.globalData.sectionBoxTop = systemInfo.windowHeight - 180
   },
   // userInfoReadyCallback(result) {
   //   console.log(result, 'result')

miniprogram/pages/index/index.less

@@ -48,8 +48,6 @@ page {
   }
 }
 
-.goodsSection {
-}
 .goodsIntro {
   background: #FFFFFF;
   // border-radius: 20rpx;
@@ -112,47 +110,25 @@ page {
 }
 
 .bottom-sectionBox{
-  width: 100%;
-  background-color: #E0F5DA;
-}
-.bottom-section {
-  width: 100%;
-  background: #FFFFFF;
-  box-shadow: 0rpx -2rpx 32rpx 0rpx rgba(0,0,0,0.1);
-  border-radius: 32rpx 32rpx 0rpx 0rpx;
-  padding: 34rpx 40rpx 56rpx 48rpx;
+  position: fixed;
   display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  .orders {
-    display: flex;
-    flex-direction: column;
-    image {
-      width: 48rpx;
-      height: 48rpx;
-    }
-    text {
-      margin-top: 2px;
-      font-weight: 400;
-      font-size: 22rpx;
-      color: #131415;
-      line-height: 32rpx;
-    }
+  flex-direction: column;
+  .orders{
+    width: 148rpx;
+    height: 150rpx;
+    background: url("https://oss.dayaedu.com/ktyq/1739521394910.png") no-repeat;
+    background-size: 100% 100%;
   }
-  .btnSection {
-    margin-left: 48rpx;
-    flex-grow: 1;
-    font-weight: 600;
-    font-size: 32rpx;
-    color: #FFFFFF;
-    line-height: 88rpx;
-    text-align: center;
-    background: url("https://oss.dayaedu.com/ktyq/1738898417485.png") no-repeat;
+  .btnSection{
+    margin-top: 20rpx;
+    width: 148rpx;
+    height: 150rpx;
+    background: url("https://oss.dayaedu.com/ktyq/1739521376993.png") no-repeat;
     background-size: 100% 100%;
-    border-radius: 78rpx;
   }
 }
 
+
 .hide {
   display: none !important;
 }

miniprogram/pages/index/index.ts

@@ -11,11 +11,16 @@ Page({
    * 页面的初始数据
    */
   data: {
+    maxTop: 0,
+    top: 0,  // 初始的上偏移
+    startY: 0, // 触摸起始点 Y 坐标
+    windowHeight: 0, // 屏幕高度
+    elementHeight: 180, // 元素高度
     goodsImgList: [
-      "https://oss.dayaedu.com/ktyq/1739445414362.png",
-      "https://oss.dayaedu.com/ktyq/1739445449067.png",
-      "https://oss.dayaedu.com/ktyq/1739445464592.png",
-      "https://oss.dayaedu.com/ktyq/1739445477533.png"
+      "https://oss.dayaedu.com/ktyq/1739518565519.png",
+      "https://oss.dayaedu.com/ktyq/1739518602666.png",
+      "https://oss.dayaedu.com/ktyq/1739518623253.png",
+      "https://oss.dayaedu.com/ktyq/1739518638007.png"
     ],
     serviceShow: true,
     popupShow: false,
@@ -224,6 +229,7 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow() {
+    this.initPosInfo()
     if (!this.data.isFromPreviewImage && !this.data.popupShow) {
       this.onInit()
       this.setData({
@@ -243,6 +249,56 @@ Page({
       serviceShow: false
     })
   },
+  // 初始化位置信息
+  initPosInfo() {
+    // 获取屏幕宽高
+    const systemInfo = wx.getWindowInfo();
+    const isAndroid = systemInfo.platform === 'android'
+    // const isDevtools = systemInfo.platform === 'devtools'
+    const barHeight = !isAndroid ? 44 : 48;
+    const globalTop = app.globalData.sectionBoxTop
+    this.setData({
+      maxTop: barHeight + systemInfo.safeArea.top,
+      windowHeight: systemInfo.windowHeight,
+      top: globalTop
+    });
+  },
+  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.sectionBoxTop = 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.sectionBoxTop = this.data.maxTop
+      }); // 吸附到顶部
+    } else if (moveHeight >= windowHeight) {
+      this.setData({ top: windowHeight - elementHeight }, () => {
+        app.globalData.sectionBoxTop = windowHeight - elementHeight
+      })
+    } else {
+      this.setData({ top }, () => {
+        app.globalData.sectionBoxTop = top
+      })
+    }
+  },
   onScroll(e: { detail: any }) {
     // console.log(e, 'any')
     const scrollTop = e.detail.scrollTop || 0

miniprogram/pages/index/index.wxml

@@ -11,18 +11,10 @@
         </view>
       </view>
     </view>
-    <view class="bottom-sectionBox">
-      <view class="bottom-section">
-        <view class="orders" bind:tap="onOrder">
-          <image class="appImg" src="./images/order.png"></image>
-          <text>订单</text>
-        </view>
-        <button class="btnSection" bind:tap="onBuyShop">
-          立即购买
-        </button>
-        <!-- <button bind:tap="onOrder" type="primary" disabled="{{ isOverSaled }}">我的订单</button>
-        <button bind:tap="onBuyShop" type="primary" disabled="{{ isOverSaled }}">立即购买</button> -->
-      </view>
+
+    <view class="bottom-sectionBox" style="top: {{top}}px; right: 10px;" bind:touchstart="onTouchStart" catch:touchmove="onTouchMove" bind:touchend="onTouchEnd">
+      <view class="orders" bind:tap="onOrder"></view>
+      <view class="btnSection" bind:tap="onBuyShop"></view>
     </view>
 
     <view class="popup-section" wx:if="{{popupShow}}">

typings/index.d.ts

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