"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; 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) => { console.log("[趋势图] 开始绘制:", props.stock.code, canvasId.value); let trendData = props.stock.trendData; if (!trendData || !Array.isArray(trendData) || trendData.length === 0) { console.log("[趋势图] 使用模拟数据"); trendData = generateMockTrendData(); } else { console.log("[趋势图] 使用真实数据,数据点数:", trendData.length); } 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 range = maxValue - minValue || 1; console.log("[趋势图] 数据范围:", { min: minValue, max: maxValue, range }); 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.1)" : "rgba(52, 199, 89, 0.1)"; console.log("[趋势图] 颜色:", { isUp, lineColor, changePercent }); 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); ctx.stroke(); ctx.lineTo(width - padding, height - padding); ctx.lineTo(padding, height - padding); ctx.closePath(); ctx.setFillStyle(fillColor); ctx.fill(); ctx.draw(); console.log("[趋势图] 绘制完成"); }; const generateMockTrendData = () => { const changePercent = parseFloat(String(props.stock.changePercent || "0").replace("%", "").replace("+", "")); const points = 30; const data = []; let baseValue = 100; const trend = changePercent / 100; for (let i = 0; i < points; i++) { const randomChange = (Math.random() - 0.5) * 2; 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; } else { moveX.value = 0; } }; const handleDelete = () => { moveX.value = 0; emit("delete"); }; common_vendor.onMounted(() => { console.log("[趋势图] 组件挂载:", props.stock.code); componentInstance = common_vendor.getCurrentInstance(); common_vendor.nextTick$1(() => { setTimeout(() => { drawTrendChart(componentInstance); }, 300); }); }); common_vendor.watch(() => props.stock.trendData, (newData) => { if (newData && componentInstance) { console.log("[趋势图] 数据更新,重新绘制:", props.stock.code); common_vendor.nextTick$1(() => { drawTrendChart(componentInstance); }); } }, { deep: true }); common_vendor.watch(() => props.stock.changePercent, () => { if (componentInstance) { common_vendor.nextTick$1(() => { drawTrendChart(componentInstance); }); } }); 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);