"use strict"; const common_vendor = require("../common/vendor.js"); const _sfc_main = { __name: "StockListItem", props: { stock: { type: Object, required: true }, showDelete: { type: Boolean, default: false } }, emits: ["delete"], setup(__props, { emit }) { const props = __props; let componentInstance = null; const deleteWidth = 60; const moveX = common_vendor.ref(0); let currentX = 0; let autoResetTimer = null; let checkTimer = null; const AUTO_RESET_DELAY = 2500; let isSlideOpen = false; const forceReset = () => { console.log("[滑动删除] 强制还原"); moveX.value = 0; currentX = 0; isSlideOpen = false; clearAutoResetTimer(); }; const startAutoResetTimer = () => { clearAutoResetTimer(); isSlideOpen = true; console.log("[滑动删除] 启动自动还原计时器"); autoResetTimer = setTimeout(() => { console.log("[滑动删除] 主计时器触发"); forceReset(); }, AUTO_RESET_DELAY); checkTimer = setInterval(() => { if (isSlideOpen && moveX.value < 0) { console.log("[滑动删除] 备用检查中..."); } else if (isSlideOpen && moveX.value === 0) { isSlideOpen = false; clearAutoResetTimer(); } }, 500); setTimeout(() => { if (isSlideOpen) { console.log("[滑动删除] 保险计时器触发"); forceReset(); } }, AUTO_RESET_DELAY + 1e3); }; const clearAutoResetTimer = () => { if (autoResetTimer) { clearTimeout(autoResetTimer); autoResetTimer = null; } if (checkTimer) { clearInterval(checkTimer); checkTimer = null; } }; const canvasId = common_vendor.ref(`chart-${props.stock.code}-${Math.random().toString(36).slice(2, 11)}`); const getMarketTag = (code) => { if (code.startsWith("6")) return "沪"; if (code.startsWith("0")) return "深"; if (code.startsWith("3")) return "创"; return "沪"; }; const getMarketClass = (code) => { if (code.startsWith("6")) return "market-sh"; if (code.startsWith("0")) return "market-sz"; if (code.startsWith("3")) return "market-cy"; return "market-sh"; }; const getChangeClass = (changePercent) => { if (!changePercent) return ""; const str = String(changePercent).replace("%", "").replace("+", ""); const value = parseFloat(str); if (value > 0) return "change-up"; if (value < 0) return "change-down"; return ""; }; const formatChangePercent = (changePercent) => { if (!changePercent) return "--"; return String(changePercent); }; const formatPrice = (price) => { if (!price) return "--"; return parseFloat(price).toFixed(2); }; const hasValidChange = (changePercent) => { if (!changePercent) return false; const str = String(changePercent).replace("%", "").replace("+", ""); const value = parseFloat(str); return value !== 0 && !isNaN(value); }; const drawTrendChart = (instance) => { let trendData = props.stock.trendData; if (!trendData || !Array.isArray(trendData) || trendData.length === 0) { trendData = generateMockTrendData(); } const ctx = common_vendor.index.createCanvasContext(canvasId.value, instance); const width = 100; const height = 30; const padding = 2; const maxValue = Math.max(...trendData); const minValue = Math.min(...trendData); const dataRange = maxValue - minValue; const avgValue = (maxValue + minValue) / 2; const minRange = avgValue * 0.03 || 1; const range = Math.max(dataRange, minRange); const baseValue = trendData[0]; const baseY = height - padding - (baseValue - minValue) / range * (height - padding * 2); const changePercent = parseFloat(String(props.stock.changePercent || "0").replace("%", "").replace("+", "")); const isUp = changePercent >= 0; const lineColor = isUp ? "#FF3B30" : "#34C759"; const fillColor = isUp ? "rgba(255, 59, 48, 0.15)" : "rgba(52, 199, 89, 0.15)"; ctx.beginPath(); ctx.setStrokeStyle("#e0e0e0"); ctx.setLineWidth(0.5); ctx.setLineDash([2, 2], 0); ctx.moveTo(padding, baseY); ctx.lineTo(width - padding, baseY); ctx.stroke(); ctx.setLineDash([], 0); ctx.beginPath(); ctx.moveTo(padding, baseY); trendData.forEach((value, index) => { const x = padding + index / (trendData.length - 1) * (width - padding * 2); const y = height - padding - (value - minValue) / range * (height - padding * 2); ctx.lineTo(x, y); }); ctx.lineTo(width - padding, baseY); ctx.closePath(); ctx.setFillStyle(fillColor); ctx.fill(); ctx.beginPath(); trendData.forEach((value, index) => { const x = padding + index / (trendData.length - 1) * (width - padding * 2); const y = height - padding - (value - minValue) / range * (height - padding * 2); if (index === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } }); ctx.setStrokeStyle(lineColor); ctx.setLineWidth(1.5); ctx.stroke(); ctx.draw(); }; const generateMockTrendData = () => { const changePercent = parseFloat(String(props.stock.changePercent || "0").replace("%", "").replace("+", "")); const points = 15; const data = []; let baseValue = 100; const trend = changePercent / 100; for (let i = 0; i < points; i++) { const randomChange = (Math.random() - 0.5) * 6; const trendChange = i / points * trend * 100; baseValue = baseValue + randomChange + trendChange / points; data.push(baseValue); } return data; }; const handleMoveChange = (e) => { currentX = e.detail.x; }; const handleMoveEnd = () => { if (!props.showDelete) return; if (currentX < -deleteWidth / 3) { moveX.value = -deleteWidth; startAutoResetTimer(); } else { forceReset(); } }; const handleDelete = () => { forceReset(); emit("delete"); }; common_vendor.onMounted(() => { componentInstance = common_vendor.getCurrentInstance(); common_vendor.nextTick$1(() => { setTimeout(() => { drawTrendChart(componentInstance); }, 300); }); }); common_vendor.watch(() => props.stock.trendData, (newData) => { if (newData && componentInstance) { common_vendor.nextTick$1(() => { drawTrendChart(componentInstance); }); } }, { deep: true }); common_vendor.watch(() => props.stock.changePercent, () => { if (componentInstance) { common_vendor.nextTick$1(() => { drawTrendChart(componentInstance); }); } }); common_vendor.watch(moveX, (newVal) => { if (newVal === 0 && isSlideOpen) { isSlideOpen = false; clearAutoResetTimer(); } }); common_vendor.onUnmounted(() => { clearAutoResetTimer(); }); return (_ctx, _cache) => { return common_vendor.e({ a: common_vendor.t(__props.stock.name), b: common_vendor.t(getMarketTag(__props.stock.code)), c: common_vendor.n(getMarketClass(__props.stock.code)), d: common_vendor.t(__props.stock.code), e: canvasId.value, f: canvasId.value, g: hasValidChange(__props.stock.changePercent) }, hasValidChange(__props.stock.changePercent) ? { h: common_vendor.t(formatChangePercent(__props.stock.changePercent)), i: common_vendor.n(getChangeClass(__props.stock.changePercent)) } : {}, { j: common_vendor.t(formatPrice(__props.stock.currentPrice)), k: __props.showDelete }, __props.showDelete ? { l: common_vendor.o(handleDelete) } : {}, { m: moveX.value, n: common_vendor.o(handleMoveChange), o: common_vendor.o(handleMoveEnd) }); }; } }; const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-29af7fd7"], ["__file", "D:/program/gupiao-wx/src/components/StockListItem.vue"]]); wx.createComponent(Component);