lex-xin 4 months ago
parent
commit
4d96249338

+ 5 - 0
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')

+ 24 - 22
miniprogram/components/service/service.ts

@@ -1,35 +1,30 @@
 // components/service/service.ts
+// 获取应用实例
+const app = getApp<IAppOption>()
 Component({
   /**
-   * 组件的属性列表
-   */
-  // properties: {
-  //   popShow: {
-  //     type: Boolean,
-  //     default: false
-  //   }
-  // },
-
-  /**
    * 组件的初始数据
    */
   data: {
     popShow: false,
+    btnShow: true,
     top: 0,  // 初始的上偏移
-    startX: 0, // 触摸起始点 X 坐标
     startY: 0, // 触摸起始点 Y 坐标
     windowWidth: 0, // 屏幕宽度
     windowHeight: 0, // 屏幕高度
     elementHeight: 60 // 元素高度
   },
-  attached() {
-    // 获取屏幕宽高
-    const systemInfo = wx.getWindowInfo();
-    this.setData({
-      windowWidth: systemInfo.windowWidth,
-      windowHeight: systemInfo.windowHeight,
-      top: systemInfo.windowHeight - 180
-    });
+  lifetimes: {
+    attached() {
+      // 获取屏幕宽高
+      const systemInfo = wx.getWindowInfo();
+      const globalTop = app.globalData.top
+      this.setData({
+        windowWidth: systemInfo.windowWidth,
+        windowHeight: systemInfo.windowHeight,
+        top: globalTop
+      });
+    }
   },
   /**
    * 组件的方法列表
@@ -61,6 +56,7 @@ Component({
       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
@@ -75,11 +71,17 @@ Component({
       const moveHeight = top + elementHeight
       // 判断元素与顶部和底部的距离,选择最近的边界
       if (distanceTop < 0) {
-        this.setData({ top: 0 }); // 吸附到顶部
+        this.setData({ top: 0 }, () => {
+          app.globalData.top = 0
+        }); // 吸附到顶部
       } else if(moveHeight >= windowHeight) {
-        this.setData({ top: windowHeight - elementHeight })
+        this.setData({ top: windowHeight - elementHeight }, () => {
+          app.globalData.top = windowHeight - elementHeight
+        })
       } else {
-        this.setData({ top })
+        this.setData({ top }, () => {
+          app.globalData.top = top
+        })
       }
     }
   }

+ 1 - 5
miniprogram/components/service/service.wxml

@@ -8,9 +8,5 @@
       <image src="./images/icon-close.png" catch:tap="onClose" class="iconClose"></image>
     </view>
   </view>
-  <image src="./images/icon-service.png" bind:tap="onShow" 
-  style="top: {{top}}px; right: 4px;" 
-    bindtouchstart="onTouchStart" 
-    bindtouchmove="onTouchMove" 
-    bindtouchend="onTouchEnd" class="iconSerivce"></image>
+  <image wx:if="{{ btnShow }}" src="./images/icon-service.png" bind:tap="onShow" style="top: {{top}}px; right: 4px;" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd" class="iconSerivce"></image>
 </view>

+ 27 - 1
miniprogram/pages/index/index.ts

@@ -11,6 +11,8 @@ Page({
    * 页面的初始数据
    */
   data: {
+    serviceShow: true,
+    scrollTop: 0,
     current: 0,
     autoplay: false,
     interval: 5000,
@@ -170,12 +172,36 @@ Page({
    */
   onShow() {
     this.onInit()
+    this.setData({
+      serviceShow: true
+    })
+  },
+  onHide() {
+    this.setData({
+      serviceShow: false
+    })
   },
+  // onReady() {
+  //   const scrollView = this.selectComponent('#scrollarea');
+  //   console.log(scrollView, 'scrollView')
+  // },
   // 页面滚动时颜色变化
   onScrollView(e: { detail: any }) {
     const top = e.detail.scrollTop || 0
     this.setData({
       opacity: top > 150 ? 1 : top / 150
     })
+  },
+  onTapAnchor(e: { currentTarget: { dataset: any } }) {
+    console.log(e, 'e')
+    const scrollView = this.selectComponent('.scrollarea');
+    console.log(scrollView, 'scrollView')
+    const that = this
+    wx.createSelectorQuery().select('#' + e.currentTarget.dataset.type).boundingClientRect(function (rect) {
+      console.log(rect)
+      that.setData({
+          scrollTop: rect.top
+      });
+    }).exec();
   }
-})
+})

+ 8 - 8
miniprogram/pages/index/index.wxml

@@ -1,5 +1,5 @@
 <!--index.wxml-->
-<scroll-view class="scrollarea" scroll-y="{{popupShow ? false : true}}" type="list" bindscroll="onScrollView">
+<scroll-view class="scrollarea" id="scroll-view" scroll-y="{{popupShow ? false : true}}" type="list" bindscroll="onScrollView" scroll-top="{{scrollTop}}">
   <view class="container">
     <!-- <view class="topShadow"></view> -->
     <view class="slider-count">{{current + 1}}/{{8}}</view>
@@ -101,9 +101,9 @@
     <view class="scroll-header" style="opacity: {{opacity}}">
       <navigation-bar back="{{false}}" title="商品详情"></navigation-bar>
       <view class="product-catagory">
-        <view class="item selected">产品介绍</view>
-        <view class="item">互通案例</view>
-        <view class="item">购买流程</view>
+        <view class="item selected" bind:tap="onTapAnchor" data-type="type1">产品介绍</view>
+        <view class="item" bind:tap="onTapAnchor" data-type="type2">互通案例</view>
+        <view class="item" bind:tap="onTapAnchor" data-type="type3">购买流程</view>
       </view>
     </view>
 
@@ -115,11 +115,11 @@
       </view>
       <view class="goodsIntro">
         <view class="images">
-          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175006625.png"></image>
+          <image id="type1" mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175006625.png"></image>
           <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175021350.png"></image>
           <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175031878.png"></image>
-          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175041724.png"></image>
-          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175051612.png"></image>
+          <image id="type2" mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175041724.png"></image>
+          <image id="type3" mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732175051612.png"></image>
         </view>
       </view>
     </view>
@@ -177,5 +177,5 @@
     </view>
   </view>
   <!-- 客服功能 -->
-  <service></service>
+  <service wx:if="{{serviceShow}}"></service>
 </scroll-view>

+ 11 - 0
miniprogram/pages/orders/order-detail.ts

@@ -8,6 +8,7 @@ Page({
    * 页面的初始数据
    */
   data: {
+    serviceShow: true,
     status: 'ing',
     statusList: {
       ing: {
@@ -36,6 +37,16 @@ Page({
       });
     }
   },
+  onShow() {
+    this.setData({
+      serviceShow: true
+    })
+  },
+  onHide() {
+    this.setData({
+      serviceShow: false
+    })
+  },
   // 获取后台配置的支付方式
   async queryPayType() {
     try {

+ 1 - 1
miniprogram/pages/orders/order-detail.wxml

@@ -56,5 +56,5 @@
       <button type="primary" bind:tap="onSubmit">{{ goodsInfo.orderNo ? '继续支付' : '立即支付' }}</button>
   </view>
 
-  <service popShow="{{ showService }}" bind:changePop="changePop"></service>
+  <service wx:if="{{serviceShow}}"></service>
 </view>

+ 11 - 0
miniprogram/pages/orders/order-result.ts

@@ -8,6 +8,7 @@ Page({
    * 页面的初始数据
    */
   data: {
+    serviceShow: true,
     status: 'WAIT_PAY',
     statusList: {
       WAIT_PAY: {
@@ -64,6 +65,16 @@ Page({
       });
     }
   },
+  onShow() {
+    this.setData({
+      serviceShow: true
+    })
+  },
+  onHide() {
+    this.setData({
+      serviceShow: false
+    })
+  },
   async getDetail(callback?: any) {
     try {
       const { data } = await api_userPaymentOrderDetail(this.data.orderNo);

+ 1 - 1
miniprogram/pages/orders/order-result.wxml

@@ -80,7 +80,7 @@
     </block>
   </view>
 
-  <service popShow="{{ showService }}" bind:changePop="changePop"></service>
+  <service wx:if="{{serviceShow}}"></service>
 
   <view class="useRefound-pop" wx:if="{{ refoundStatus }}">
     <view class="useRefound-mask"></view>

+ 7 - 0
miniprogram/pages/orders/orders.ts

@@ -7,6 +7,7 @@ Page({
    * 页面的初始数据
    */
   data: {
+    serviceShow: true,
     tabList: [
       {
         id: 0,
@@ -51,6 +52,7 @@ Page({
   },
   onShow() {
     this.setData({
+      serviceShow: true,
       page: 1,
       maxPage: 1,
       recordList: [],
@@ -58,6 +60,11 @@ Page({
       this.getList()
     })
   },
+  onHide() {
+    this.setData({
+      serviceShow: false
+    })
+  },
   /** 切换分类 */
   switchTab(e: { currentTarget: { dataset: { idx: any } } }) {
     const idx = e.currentTarget.dataset.idx;

+ 1 - 1
miniprogram/pages/orders/orders.wxml

@@ -49,5 +49,5 @@
   </view>
 
   <!-- 客服 -->
-  <service></service>
+  <service wx:if="{{ serviceShow }}"></service>
 </view>

+ 22 - 0
miniprogram/utils/EventBus.ts

@@ -0,0 +1,22 @@
+// event-bus.js
+const EventBus = {
+  events: {} as any,
+  // 重新定义的 on 方法,用于注册事件监听器,现在同一个 eventName 只会保留最后注册的那个监听器
+  on: function (eventName: string, callback: Function) {
+      this.events[eventName] = callback;
+  },
+  // 用于触发事件,通知注册的监听器执行相应逻辑
+  emit: function (eventName: string, data: any) {
+      if (this.events[eventName]) {
+          this.events[eventName](data);
+      }
+  },
+  // 新增的关闭事件方法,用于移除指定事件的监听器
+  off: function (eventName: string) {
+      if (this.events[eventName]) {
+          delete this.events[eventName];
+      }
+  }
+};
+
+export default EventBus;

+ 1 - 1
project.config.json

@@ -14,7 +14,7 @@
     },
     "coverView": false,
     "postcss": false,
-    "minified": false,
+    "minified": true,
     "enhance": true,
     "showShadowRootInWxmlPanel": false,
     "packNpmRelationList": [],

+ 2 - 0
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
 }