Ver Fonte

我的股票修改

Zhangbw há 3 meses atrás
pai
commit
be5b3b1689

+ 1 - 0
dist/dev/mp-weixin/common/vendor.js

@@ -6822,6 +6822,7 @@ exports.onLoad = onLoad;
 exports.onMounted = onMounted;
 exports.onShow = onShow;
 exports.onUnload = onUnload;
+exports.onUnmounted = onUnmounted;
 exports.p = p;
 exports.ref = ref;
 exports.resolveComponent = resolveComponent;

+ 34 - 0
dist/dev/mp-weixin/components/StockListItem.js

@@ -19,6 +19,21 @@ const _sfc_main = {
     const deleteWidth = 60;
     const moveX = common_vendor.ref(0);
     let currentX = 0;
+    let autoResetTimer = null;
+    const AUTO_RESET_DELAY = 2e3;
+    const startAutoResetTimer = () => {
+      clearAutoResetTimer();
+      autoResetTimer = setTimeout(() => {
+        moveX.value = 0;
+        currentX = 0;
+      }, AUTO_RESET_DELAY);
+    };
+    const clearAutoResetTimer = () => {
+      if (autoResetTimer) {
+        clearTimeout(autoResetTimer);
+        autoResetTimer = null;
+      }
+    };
     const canvasId = common_vendor.ref(`chart-${props.stock.code}-${Math.random().toString(36).slice(2, 11)}`);
     const getMarketTag = (code) => {
       if (code.startsWith("6"))
@@ -125,17 +140,24 @@ const _sfc_main = {
     };
     const handleMoveChange = (e) => {
       currentX = e.detail.x;
+      if (props.showDelete && currentX <= -deleteWidth / 2) {
+        startAutoResetTimer();
+      }
     };
     const handleMoveEnd = () => {
       if (!props.showDelete)
         return;
       if (currentX < -deleteWidth / 3) {
         moveX.value = -deleteWidth;
+        startAutoResetTimer();
       } else {
         moveX.value = 0;
+        currentX = 0;
+        clearAutoResetTimer();
       }
     };
     const handleDelete = () => {
+      clearAutoResetTimer();
       moveX.value = 0;
       emit("delete");
     };
@@ -163,6 +185,18 @@ const _sfc_main = {
         });
       }
     });
+    common_vendor.watch(moveX, (newVal) => {
+      if (newVal < 0 && props.showDelete) {
+        if (!autoResetTimer) {
+          startAutoResetTimer();
+        }
+      } else if (newVal === 0) {
+        clearAutoResetTimer();
+      }
+    });
+    common_vendor.onUnmounted(() => {
+      clearAutoResetTimer();
+    });
     return (_ctx, _cache) => {
       return common_vendor.e({
         a: common_vendor.t(__props.stock.name),

+ 1 - 1
dist/dev/mp-weixin/components/StockListItem.wxml

@@ -1 +1 @@
-<view class="stock-item-wrapper data-v-29af7fd7"><movable-area class="movable-area data-v-29af7fd7"><movable-view class="movable-view data-v-29af7fd7" direction="horizontal" x="{{m}}" damping="{{40}}" friction="{{5}}" out-of-bounds="{{false}}" bindchange="{{n}}" bindtouchend="{{o}}"><view class="stock-list-item data-v-29af7fd7"><view class="stock-left data-v-29af7fd7"><view class="stock-name-row data-v-29af7fd7"><text class="stock-name data-v-29af7fd7">{{a}}</text><text class="{{['data-v-29af7fd7', 'stock-tag', c]}}">{{b}}</text></view><text class="stock-code data-v-29af7fd7">{{d}}</text></view><view class="stock-chart data-v-29af7fd7"><block wx:if="{{r0}}"><canvas canvas-id="{{e}}" id="{{f}}" class="trend-canvas data-v-29af7fd7"></canvas></block></view><view class="stock-right data-v-29af7fd7"><view wx:if="{{g}}" class="{{['data-v-29af7fd7', 'change-percent', i]}}">{{h}}</view><text class="stock-price data-v-29af7fd7">{{j}}</text></view><view wx:if="{{k}}" class="delete-action data-v-29af7fd7" catchtap="{{l}}"><view class="delete-icon-wrapper data-v-29af7fd7"><text class="delete-icon data-v-29af7fd7"></text></view></view></view></movable-view></movable-area></view>
+<view class="stock-item-wrapper data-v-29af7fd7"><movable-area class="movable-area data-v-29af7fd7"><movable-view class="movable-view data-v-29af7fd7" direction="horizontal" x="{{m}}" damping="{{40}}" friction="{{5}}" out-of-bounds="{{false}}" bindchange="{{n}}" bindtouchend="{{o}}"><view class="stock-list-item data-v-29af7fd7"><view class="stock-left data-v-29af7fd7"><view class="stock-name-row data-v-29af7fd7"><text class="stock-name data-v-29af7fd7">{{a}}</text><text class="{{['data-v-29af7fd7', 'stock-tag', c]}}">{{b}}</text></view><text class="stock-code data-v-29af7fd7">{{d}}</text></view><view class="stock-chart data-v-29af7fd7"><block wx:if="{{r0}}"><canvas canvas-id="{{e}}" id="{{f}}" class="trend-canvas data-v-29af7fd7"></canvas></block></view><view class="stock-right data-v-29af7fd7"><view wx:if="{{g}}" class="{{['data-v-29af7fd7', 'change-percent', i]}}">{{h}}</view><text class="stock-price data-v-29af7fd7">{{j}}</text></view><view wx:if="{{k}}" class="delete-action data-v-29af7fd7" catchtap="{{l}}"><view class="delete-icon-wrapper data-v-29af7fd7"><text class="delete-icon data-v-29af7fd7"></text></view></view></view></movable-view></movable-area></view>

+ 1 - 1
dist/dev/mp-weixin/pages/strong/strong.wxss

@@ -126,7 +126,7 @@
   box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
 }
 .buy-btn {
-  background: #3abf81;
+  background: linear-gradient(135deg, #5d55e8, #7568ff);
 }
 .action-icon {
   font-size: 32rpx;

+ 49 - 2
src/components/StockListItem.vue

@@ -45,7 +45,7 @@
           <!-- 删除按钮(在内容右侧) -->
           <view v-if="showDelete" class="delete-action" @click.stop="handleDelete">
             <view class="delete-icon-wrapper">
-              <text class="delete-icon"></text>
+              <text class="delete-icon"></text>
             </view>
           </view>
         </view>
@@ -55,7 +55,7 @@
 </template>
 
 <script setup>
-import { onMounted, nextTick, getCurrentInstance, ref, watch } from 'vue'
+import { onMounted, onUnmounted, nextTick, getCurrentInstance, ref, watch } from 'vue'
 
 const props = defineProps({
   stock: {
@@ -77,6 +77,25 @@ let componentInstance = null
 const deleteWidth = 60 // 删除按钮宽度(px)
 const moveX = ref(0)
 let currentX = 0
+let autoResetTimer = null // 自动还原计时器
+const AUTO_RESET_DELAY = 2000 // 自动还原延迟时间(ms)
+
+// 启动自动还原计时器
+const startAutoResetTimer = () => {
+  clearAutoResetTimer()
+  autoResetTimer = setTimeout(() => {
+    moveX.value = 0
+    currentX = 0
+  }, AUTO_RESET_DELAY)
+}
+
+// 清除自动还原计时器
+const clearAutoResetTimer = () => {
+  if (autoResetTimer) {
+    clearTimeout(autoResetTimer)
+    autoResetTimer = null
+  }
+}
 
 // 生成稳定的 canvas ID(只在组件创建时生成一次)
 const canvasId = ref(`chart-${props.stock.code}-${Math.random().toString(36).slice(2, 11)}`)
@@ -221,6 +240,10 @@ const generateMockTrendData = () => {
 // 滑动变化
 const handleMoveChange = (e) => {
   currentX = e.detail.x
+  // 如果滑动到了删除按钮位置,启动计时器
+  if (props.showDelete && currentX <= -deleteWidth / 2) {
+    startAutoResetTimer()
+  }
 }
 
 // 滑动结束
@@ -230,13 +253,19 @@ const handleMoveEnd = () => {
   // 滑动超过三分之一就显示删除按钮
   if (currentX < -deleteWidth / 3) {
     moveX.value = -deleteWidth
+    // 启动自动还原计时器
+    startAutoResetTimer()
   } else {
     moveX.value = 0
+    currentX = 0
+    // 滑回初始位置,清除计时器
+    clearAutoResetTimer()
   }
 }
 
 // 处理删除
 const handleDelete = () => {
+  clearAutoResetTimer() // 点击删除时清除计时器
   moveX.value = 0
   emit('delete')
 }
@@ -271,6 +300,24 @@ watch(() => props.stock.changePercent, () => {
     })
   }
 })
+
+// 监听滑动位置变化,确保自动还原计时器正确工作
+watch(moveX, (newVal) => {
+  if (newVal < 0 && props.showDelete) {
+    // 滑动到删除位置,确保计时器在运行
+    if (!autoResetTimer) {
+      startAutoResetTimer()
+    }
+  } else if (newVal === 0) {
+    // 已还原,清除计时器
+    clearAutoResetTimer()
+  }
+})
+
+// 组件销毁时清理计时器
+onUnmounted(() => {
+  clearAutoResetTimer()
+})
 </script>
 
 <style scoped>

+ 1 - 1
src/pages/strong/strong.vue

@@ -537,7 +537,7 @@ onShow(() => {
 }
 
 .buy-btn {
-  background: #3abf81;
+  background: linear-gradient(135deg, #5d55e8, #7568ff);
 }
 
 .action-icon {