Просмотр исходного кода

fix(home): 修复首页配置开关交互与布局

- 约束团购和秒杀配置开关占位,修复 App 端开关错位
- 为金刚区操作项增加拖拽忽略标记,恢复小程序编辑与开关交互
shizhongqi 1 день назад
Родитель
Сommit
144d04268d

+ 22 - 7
hdApp/src/admin/homePageConfig/groupBuy.vue

@@ -42,14 +42,19 @@
       </tui-list-cell>
 
       <!-- 显示倒计时与商品展开同排:展开开启后首页按1排1列展示全部商品 -->
+      <!-- switch 外包固定宽 view:App 原生 switch 会撑满剩余宽度并把滑块画在右侧 -->
       <tui-list-cell class="line-cell between" :hover="false">
         <view class="switch-item">
           <view class="tui-title switch-title-narrow">显示倒计时</view>
-          <switch class="switch-ctrl" :checked="form.showCountdown == 1" color="#09C567" @change="onShowCountdownChange" />
+          <view class="switch-ctrl-wrap">
+            <switch class="switch-ctrl" :checked="form.showCountdown == 1" color="#09C567" @change="onShowCountdownChange" />
+          </view>
         </view>
         <view class="switch-item">
           <view class="tui-title switch-title-narrow">商品展开</view>
-          <switch class="switch-ctrl" :checked="form.expand == 1" color="#09C567" @change="onExpandChange" />
+          <view class="switch-ctrl-wrap">
+            <switch class="switch-ctrl" :checked="form.expand == 1" color="#09C567" @change="onExpandChange" />
+          </view>
         </view>
       </tui-list-cell>
 
@@ -414,19 +419,29 @@ export default {
 .switch-item {
   @include disFlex(center, flex-start);
   flex: 1;
+  min-width: 0;
 }
 
 // common.scss 中全局定义了 .input-line-wrap .line-cell .tui-title { width: 210upx },
-// 页面内联 style 的优先级理论上更高,但和该全局选择器同处一个 scoped 样式合并时曾出现被覆盖的情况,
-// 这里用 !important 明确保证该模块下的标题宽度按需生效(同类写法见 hb-select.vue)。
+// 这里改为随文案收缩,避免 App 端固定宽标题把原生 switch 挤到右侧。
 .switch-title-narrow {
-  width: 140px !important;
+  width: auto !important;
+  flex-shrink: 0;
+  margin-right: 12upx;
+}
+
+// 固定宽高锁住原生 switch 占位,防止 App 端撑满 .switch-item 剩余宽度
+.switch-ctrl-wrap {
+  width: 102upx;
+  height: 64upx;
+  flex-shrink: 0;
+  overflow: hidden;
+  @include disFlex(center, flex-start);
 }
 
 .switch-ctrl {
-  margin-left: 12upx;
   transform: scale(0.85);
-  transform-origin: center right;
+  transform-origin: left center;
 }
 
 // 标题与状态徽标横排,整体不随右侧 switch 被压缩

+ 29 - 4
hdApp/src/admin/homePageConfig/navGrid.vue

@@ -44,9 +44,19 @@
           <view class="list-main" @click.stop="goEditByIndex(index)">
             <view class="list-title">{{ item.name || '未命名' }}</view>
           </view>
-          <view class="list-edit" @click.stop="goEditByIndex(index)" @touchstart.stop="noop">编辑</view>
-          <view class="list-switch" @click.stop="noop" @touchstart.stop="noop">
+          <view class="list-edit" @click.stop="goEditByIndex(index)" data-drag-ignore="true">
+            编辑
+          </view>
+          <!--
+            注意:这里不能用 @touchstart.stop 之类的 catch 写法拦截触摸事件。
+            微信小程序里 catch 会在原生手势层面“吃掉”触摸,导致内置 <switch>
+            自身的滑动/点击手势也收不到事件,表现为开关完全点不动;编辑按钮同理点不了。
+            所以改为:不拦截事件冒泡,而是给操作区域打上 data-drag-ignore 标记,
+            在 dragStart 里识别到该标记后直接放弃进入拖拽,把触摸交还给按钮/switch 自己处理。
+          -->
+          <view class="list-switch" data-drag-ignore="true">
             <switch
+              data-drag-ignore="true"
               :checked="item.enabled == 1"
               color="#09C567"
               @change="toggleItemEnabledByIndex(index, $event)"
@@ -246,8 +256,6 @@ export default {
       this.persistDraft()
       this.pageTo('/admin/homePageConfig/navGridEdit')
     },
-    /** 空事件:阻断拖拽区域点击冒泡,避免小程序空 @click.stop 编译异常 */
-    noop() {},
     /**
      * 按列表下标进入编辑页
      * @param {number} index 当前导航项下标
@@ -296,6 +304,21 @@ export default {
           this.saving = false
         })
     },
+    /**
+     * 判断触摸目标是否位于标记了 data-drag-ignore 的区域(如编辑按钮、开关)。
+     * 小程序端 e.target 是精简对象,只能直接读 dataset;
+     * H5/App 端是真实 DOM 节点,兼容用 closest 向上查找,防止触摸到 switch 内部子节点时漏判。
+     */
+    isDragIgnoreTarget(target) {
+      if (!target) return false
+      if (target.dataset && (target.dataset.dragIgnore === 'true' || target.dataset.dragIgnore === true)) {
+        return true
+      }
+      if (typeof target.closest === 'function') {
+        return !!target.closest('[data-drag-ignore="true"]')
+      }
+      return false
+    },
     transformStyle(index) {
       if (!this.isDragging || this.draggedIndex < 0) {
         return 'translateY(0upx)'
@@ -318,6 +341,8 @@ export default {
     },
     dragStart(e) {
       if (this.isDragging) return
+      // 触摸起点落在编辑/开关区域时不进入拖拽,避免抢占按钮点击和 switch 自身手势
+      if (this.isDragIgnoreTarget(e.target)) return
       const index = parseInt(e.currentTarget.dataset.index, 10)
       if (isNaN(index) || index < 0 || index >= this.form.list.length) {
         return

+ 23 - 5
hdApp/src/admin/homePageConfig/seckill.vue

@@ -42,14 +42,19 @@
       </tui-list-cell>
 
       <!-- 显示倒计时与商品展开同排:展开开启后首页按1排1列展示全部商品 -->
+      <!-- switch 外包固定宽 view:App 原生 switch 会撑满剩余宽度并把滑块画在右侧 -->
       <tui-list-cell class="line-cell between" :hover="false">
         <view class="switch-item">
           <view class="tui-title switch-title-narrow">显示倒计时</view>
-          <switch class="switch-ctrl" :checked="form.showCountdown == 1" color="#09C567" @change="onShowCountdownChange" />
+          <view class="switch-ctrl-wrap">
+            <switch class="switch-ctrl" :checked="form.showCountdown == 1" color="#09C567" @change="onShowCountdownChange" />
+          </view>
         </view>
         <view class="switch-item">
           <view class="tui-title switch-title-narrow">商品展开</view>
-          <switch class="switch-ctrl" :checked="form.expand == 1" color="#09C567" @change="onExpandChange" />
+          <view class="switch-ctrl-wrap">
+            <switch class="switch-ctrl" :checked="form.expand == 1" color="#09C567" @change="onExpandChange" />
+          </view>
         </view>
       </tui-list-cell>
 
@@ -409,16 +414,29 @@ export default {
 .switch-item {
   @include disFlex(center, flex-start);
   flex: 1;
+  min-width: 0;
 }
 
+// common.scss 中全局定义了 .input-line-wrap .line-cell .tui-title { width: 210upx },
+// 这里改为随文案收缩,避免 App 端固定宽标题把原生 switch 挤到右侧。
 .switch-title-narrow {
-  width: 140px !important;
+  width: auto !important;
+  flex-shrink: 0;
+  margin-right: 12upx;
+}
+
+// 固定宽高锁住原生 switch 占位,防止 App 端撑满 .switch-item 剩余宽度
+.switch-ctrl-wrap {
+  width: 102upx;
+  height: 64upx;
+  flex-shrink: 0;
+  overflow: hidden;
+  @include disFlex(center, flex-start);
 }
 
 .switch-ctrl {
-  margin-left: 12upx;
   transform: scale(0.85);
-  transform-origin: center right;
+  transform-origin: left center;
 }
 
 // 标题与状态徽标横排,整体不随右侧 switch 被压缩