github/CRMEB
1
0
Fork 0
mirror of https://github.com/crmeb/CRMEB.git synced 2026-10-29 05:50:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(移动端): 订单进度条连线按节点数动态定位，适配非5节点订单

Browse Source
This commit is contained in:
From-wh 2026-10-13 10:51:43 +08:00 committed by 吴昊天
parent acf277828f
commit 340171e744
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/uni-app/src/dynamic-pages/components/order/detail/ProgressBar.vue
View File

@ -27,6 +27,7 @@
v-if="idx < nodes.length - 1"
class="line"
:class="nodes[idx + 1].completed ? 'bg-color' : ''"
:style="lineStyle(idx)"
></view>
</template>
</view>
@ -61,6 +62,19 @@ const p = computed(() => (props.section && props.section.props) || {});
const ctx = computed(() => (props.section && props.section._ctx) || {});
/** 进度节点数组，每项含 {title, key, completed, active, time} */
const nodes = computed(() => p.value.nodes || []);
/**
* 连线定位：N 个节点 flex:1 均分，第 i 个点中心在 (i+0.5)×100/N%，
* 第 idx 段连线连接相邻两点中心，两端各留 2% 间隙（内联样式按节点数动态计算，
* 兼容实物 5 节点、自提/卡密 4 节点、网盘 3 节点及插件自定义节点数）
* @param {number} idx 连线段索引（连接第 idx 与 idx+1 个节点）
* @return {object} left/width 内联样式
*/
function lineStyle(idx) {
const n = nodes.value.length;
if (n < 2) return {};
const seg = 100 / n;
return { left: ((idx + 0.5) * seg + 2) + '%', width: (seg - 4) + '%' };
}
</script>
<style scoped>
@ -72,18 +86,8 @@ const nodes = computed(() => p.value.nodes || []);
.progress > .iconfont { flex: 1; text-align: center; position: relative; z-index: 2; }
.iconfont { font-size: 32rpx; color: #ddd; }
.iconfont.font-num { color: var(--view-theme, #e93323); }
/* 连线为覆盖段：从上一个点中心连到下一个点中心（两端各留约 2% 间隙）。
点与文字同用 flex:1 均分格，5 节点时点中心在 10/30/50/70/90%，与 navCon 文字对齐 */
/* 连线为覆盖段：位置由 lineStyle() 按节点数内联下发（点中心连到相邻点中心，
两端各留 2% 间隙），与节点文字行同轴，任意节点数均对齐 */
.line { position: absolute; top: 50%; margin: -2rpx 0 0 0; height: 4rpx; background: #ddd; }
.line.bg-color { background: var(--view-theme, #e93323); }
.line:nth-child(2) { left: 12%; width: 16%; }
.line:nth-child(4) { left: 32%; width: 16%; }
.line:nth-child(6) { left: 52%; width: 16%; }
.line:nth-child(8) { left: 72%; width: 16%; }
/* #ifdef H5 */
/* 到店自提为 4 节点：点中心在 12.5/37.5/62.5/87.5% */
.progress:not(:has(.line:nth-child(8))) .line:nth-child(2) { left: 14.5%; width: 21%; }
.progress:not(:has(.line:nth-child(8))) .line:nth-child(4) { left: 39.5%; width: 21%; }
.progress:not(:has(.line:nth-child(8))) .line:nth-child(6) { left: 64.5%; width: 21%; }
/* #endif */
</style>