修复尺码表
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<!-- 产品尺码表:5 列 × 4 行,交替行背景 -->
|
||||
<!-- 产品尺码表:列数由后端 columns 动态决定(首列固定"尺码"),交替行背景 -->
|
||||
<view class="chart-wrap">
|
||||
<view class="header-row">
|
||||
<text class="title">产品尺码</text>
|
||||
@@ -8,13 +8,10 @@
|
||||
</view>
|
||||
|
||||
<view class="table">
|
||||
<!-- 表头:bg #DFDFDF,圆角 6px -->
|
||||
<!-- 表头:首列固定"尺码",其余列名来自后端 columns -->
|
||||
<view class="row header">
|
||||
<text
|
||||
class="cell"
|
||||
v-for="(col, index) in data.columns"
|
||||
:key="index"
|
||||
>{{ col }}</text>
|
||||
<text class="cell">尺码</text>
|
||||
<text class="cell" v-for="col in data.columns" :key="col.key">{{ col.name }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 数据行:偶数行(第 2、4 行)bg #F7F7F7,圆角 6px -->
|
||||
@@ -25,10 +22,7 @@
|
||||
:key="index"
|
||||
>
|
||||
<text class="cell">{{ row.size }}</text>
|
||||
<text class="cell">{{ row.shoulder }}</text>
|
||||
<text class="cell">{{ row.chest }}</text>
|
||||
<text class="cell">{{ row.length }}</text>
|
||||
<text class="cell">{{ row.sleeve }}</text>
|
||||
<text class="cell" v-for="col in data.columns" :key="col.key">{{ (row.cells && row.cells[col.key]) || '' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -342,26 +342,33 @@ export default {
|
||||
},
|
||||
|
||||
/**
|
||||
* 构造尺码表:接口 measurements.key (chest/bodyLength/shoulder/sleeveLength) → 表格列
|
||||
* 构造尺码表:完全由后端 rows/columns 驱动
|
||||
* columns 为除"尺码"外每列的表头;rows.measurements 按 key 取值
|
||||
* 格式异常时返回空对象,页面不渲染该模块(兜底不报错)
|
||||
*/
|
||||
buildSizeChart(sizeChart) {
|
||||
if (!sizeChart || !sizeChart.rows || !sizeChart.rows.length) return {}
|
||||
const columns = ['尺码', '肩宽', '胸围', '衣长', '袖长']
|
||||
const rows = sizeChart.rows.map((row) => {
|
||||
const measurements = row.measurements || []
|
||||
const get = (key) => {
|
||||
const m = measurements.find((x) => x.key === key)
|
||||
return m ? m.cm : ''
|
||||
}
|
||||
return {
|
||||
size: row.sizeName || '',
|
||||
shoulder: get('shoulder'),
|
||||
chest: get('chest'),
|
||||
length: get('bodyLength'),
|
||||
sleeve: get('sleeveLength')
|
||||
}
|
||||
})
|
||||
return { unit: 'cm', columns, rows }
|
||||
if (!sizeChart || !Array.isArray(sizeChart.rows) || !sizeChart.rows.length) return {}
|
||||
if (!Array.isArray(sizeChart.columns)) return {}
|
||||
// 列定义兜底:必须有 key(取值用),name 缺失时用 key 代替
|
||||
const columns = sizeChart.columns
|
||||
.filter((c) => c && typeof c.key === 'string' && c.key)
|
||||
.map((c) => ({ key: c.key, name: typeof c.name === 'string' && c.name ? c.name : c.key }))
|
||||
if (!columns.length) return {}
|
||||
|
||||
const rows = sizeChart.rows
|
||||
.filter((r) => r && typeof r.sizeName === 'string' && r.sizeName)
|
||||
.map((row) => {
|
||||
const measurements = Array.isArray(row.measurements) ? row.measurements : []
|
||||
const cells = {}
|
||||
columns.forEach((col) => {
|
||||
const m = measurements.find((x) => x && x.key === col.key)
|
||||
const val = m ? (m.cm != null ? m.cm : m.in) : ''
|
||||
cells[col.key] = val == null ? '' : String(val)
|
||||
})
|
||||
return { size: row.sizeName, cells }
|
||||
})
|
||||
if (!rows.length) return {}
|
||||
return { columns, rows }
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user