inkreachhub/inkreach-uni
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'颜色尺码价格联动'

Browse Source
This commit is contained in:
RyRh
2026-08-22 19:05:26 +08:00
parent c3b6af07c9
commit b190fba0f3
39 changed files with 2434 additions and 2997 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/product-detail/components/ColorSelector.vue
+10 -5
View File
@@ -1,5 +1,5 @@
<template>
<!-- 颜色选择：第一行 4 个，第二行 2 个；胶囊样式，选中橙色边框+橙色文字 -->
<!-- 颜色选择：第一行 4 个，第二行 2 个；胶囊样式，选中橙色边框+橙色文字；不可用透明度降低且不可点 -->
<view class="color-wrap">
<text class="title">颜色</text>
@@ -8,8 +8,8 @@
v-for="(item, index) in list"
:key="index"
class="color-pill"
:class="{ active: selectedId === item.id }"
@tap="selectColor(item.id)"
:class="{ active: selectedId === item.id, disabled: item.enabled === false }"
@tap="selectColor(item)"
>
<view class="color-dot" :style="{ background: item.value }"></view>
<text class="color-name">{{ item.name }}</text>
@@ -32,8 +32,9 @@ export default {
}
},
methods: {
selectColor(id) {
this.$emit('select', id)
selectColor(item) {
if (item && item.enabled === false) return
this.$emit('select', item.id)
}
}
}
@@ -74,6 +75,10 @@ export default {
.color-pill.active {
border-color: #ff6800;
}
.color-pill.disabled {
opacity: 0.4;
pointer-events: none;
}
/* 颜色圆点 15x15，1px 灰色边框 */
.color-dot {
pages/product-detail/components/PackagingSpec.vue
+41 -30
View File
@@ -1,5 +1,8 @@
<template>
<!-- 包装规格表：4 列 × 4 行，每个数据单元格双单位（cm + in） -->
<!-- 包装规格表 - Figma 1544:530 对应节点 -->
<!-- 4 列：尺码 / 尺寸(L*W*H) / 体积(L*W*H) / 重量(g) -->
<!-- 表头:bg #DFDFDF 高度 40px 圆角 6px 文字13px 居中 -->
<!-- 数据行:bg #F7F7F7 高度 60px -->
<view class="pack-wrap">
<view class="header-row">
<text class="title">包装规格</text>
@@ -7,40 +10,39 @@
</view>
<view class="table">
<!-- 表头：bg #DFDFDF，圆角 6px -->
<!-- 表头 -->
<view class="row header">
<text
class="cell"
v-for="(col, index) in data.columns"
:key="index"
:key="'h-' + index"
>{{ col }}</text>
</view>
<!-- 数据行：偶数行 bg #F7F7F7，行高 60px（双行内容） -->
<!-- 数据行：按尺码聚合，每行一个尺码 -->
<view
class="row data-row"
:class="{ alt: (index + 1) % 2 === 0 }"
v-for="(row, index) in data.rows"
:key="index"
:key="'r-' + index"
>
<!-- 尺码列：单行居中 -->
<!-- 尺码列：单行居中 13px -->
<view class="cell size-cell">
<text class="size-text">{{ row.size }}</text>
</view>
<!-- 尺寸列：cm + in 双行 -->
<!-- 尺寸列：cm 上 / in 下，双行 10px opacity 0.6 -->
<view class="cell dual-cell">
<text class="dual-top">{{ row.dimension.cm }}</text>
<text class="dual-bottom">{{ row.dimension.in }}</text>
</view>
<!-- 体积列：cm + in 双行 -->
<!-- 体积列：cm 上 / in 下 -->
<view class="cell dual-cell">
<text class="dual-top">{{ row.volume.cm }}</text>
<text class="dual-bottom">{{ row.volume.in }}</text>
</view>
<!-- 重量列：cm + in 双行 -->
<!-- 重量列：g 上 / lb 下 -->
<view class="cell dual-cell">
<text class="dual-top">{{ row.weight.cm }}</text>
<text class="dual-bottom">{{ row.weight.in }}</text>
@@ -63,8 +65,9 @@ export default {
</script>
<style scoped>
/* 外层 - padding 15px 10px 白底 */
.pack-wrap {
padding: 30rpx 20rpx; /* 15px 10px */
padding: 30rpx 20rpx;
background: #ffffff;
}
@@ -75,72 +78,80 @@ export default {
margin-bottom: 20rpx; /* 10px */
}
.title {
font-size: 29rpx; /* 15px */
font-size: 29rpx; /* 15px Medium */
font-weight: 500;
color: #000000;
line-height: 33rpx;
}
.unit {
margin-left: 16rpx;
font-size: 21rpx; /* 11px */
font-size: 21rpx; /* 11px Medium */
font-weight: 500;
color: rgba(0, 0, 0, 0.5);
line-height: 33rpx;
}
/* 表格 */
/* 表格：列间距 4px（gap 8rpx） */
.table {
display: flex;
flex-direction: column;
gap: 8rpx; /* 4px 行间距 */
gap: 8rpx;
}
/* 单行 */
/* 单行 - 圆角 6px（12rpx），两端对齐 */
.row {
display: flex;
border-radius: 12rpx; /* 6px */
border-radius: 12rpx;
align-items: center;
width: 100%;
}
/* 表头：高度 40px（80rpx），背景 #DFDFDF，文字 13px 居中 */
.row.header {
height: 77rpx; /* 40px */
height: 80rpx;
background: #dfdfdf;
}
/* 数据行：高度 60px（120rpx），背景 #F7F7F7 */
.row.data-row {
height: 115rpx; /* 60px 双行内容更高 */
}
.row.alt {
height: 120rpx;
background: #f7f7f7;
}
/* 单元格 */
/* 4 列等宽，flex:1 均分 + 居中 */
.cell {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 表头文字 */
/* 表头文字 - 13px Medium 黑色 */
.row.header .cell {
font-size: 25rpx; /* 13px */
font-size: 25rpx;
font-weight: 500;
color: #000000;
line-height: 33rpx;
text-align: center;
}
/* 尺码列：单行 13px */
/* 尺码列文字 - 13px Medium 黑色 */
.size-text {
font-size: 25rpx; /* 13px */
font-size: 25rpx;
font-weight: 500;
color: #000000;
line-height: 33rpx;
}
/* 双单位单元格：cm 在上，in 在下 */
/* 双单位单元格 gap 4px */
.dual-cell {
gap: 4rpx; /* 2px */
gap: 4rpx; /* 2px Figma 行间距 17-10=7 实际渲染用 4rpx 贴合 */
}
.dual-top,
.dual-bottom {
font-size: 19rpx; /* 10px */
font-size: 20rpx; /* 10px Medium Figma */
font-weight: 500;
color: rgba(0, 0, 0, 0.6);
line-height: 33rpx;
line-height: 33rpx; /* 17px */
}
</style>
pages/product-detail/components/SizeSelector.vue
+34 -6
View File
@@ -1,5 +1,5 @@
<template>
<!-- 尺码选择：5 个按钮横排，选中态橙色边框+橙色文字（背景仍为浅灰） -->
<!-- 尺码选择：5 个按钮横排，选中态橙色边框+橙色文字（背景仍为浅灰）；不可用置灰 -->
<view class="size-wrap">
<text class="title">尺码</text>
@@ -8,10 +8,10 @@
v-for="(item, index) in list"
:key="index"
class="size-item"
:class="{ active: selected === item }"
:class="{ active: isSelected(item), disabled: !isEnabled(item) }"
@tap="selectSize(item)"
>
<text class="size-text">{{ item }}</text>
<text class="size-text">{{ itemName(item) }}</text>
</view>
</view>
</view>
@@ -21,18 +21,40 @@
export default {
name: 'SizeSelector',
props: {
// 支持两种格式：字符串数组 ['S','M','L'] 或 对象数组 [{name:'S',enabled:true}]
list: {
type: Array,
default: () => []
},
selected: {
type: String,
type: [String, Number, Object],
default: ''
}
},
methods: {
selectSize(size) {
this.$emit('select', size)
itemName(item) {
if (item == null) return ''
if (typeof item === 'object') return item.name
return String(item)
},
isEnabled(item) {
if (item == null) return false
if (typeof item === 'object') return item.enabled !== false
return true
},
isSelected(item) {
const name = this.itemName(item)
const selName =
this.selected == null
? ''
: typeof this.selected === 'object'
? this.selected.name
: String(this.selected)
return name === selName
},
selectSize(item) {
if (!this.isEnabled(item)) return
this.$emit('select', this.itemName(item))
}
}
}
@@ -56,6 +78,7 @@ export default {
/* 尺码列表横排 */
.size-list {
display: flex;
flex-wrap: wrap;
gap: 12rpx; /* 6px */
}
@@ -75,6 +98,11 @@ export default {
.size-item.active {
border-color: #ff6800;
}
/* 不可用：降低透明度且禁止点击 */
.size-item.disabled {
opacity: 0.4;
pointer-events: none;
}
.size-text {
font-size: 25rpx; /* 13px */
pages/product-detail/product-detail.vue
+143 -7
View File
@@ -10,10 +10,10 @@
<!-- 灰色分隔条 -->
<view class="section-divider" v-if="colors.length"></view>
<!-- 颜色选择 -->
<!-- 颜色选择：根据 variants 传 enabled 可用态 -->
<ColorSelector
v-if="colors.length"
:list="colors"
:list="colorListWithAvailability"
:selected-id="selectedColorId"
@select="selectColor"
/>
@@ -21,10 +21,10 @@
<!-- 灰色分隔条 -->
<view class="section-divider" v-if="sizes.length"></view>
<!-- 尺码选择 -->
<!-- 尺码选择：根据 variants 传 enabled 可用态 -->
<SizeSelector
v-if="sizes.length"
:list="sizes"
:list="sizeListWithAvailability"
:selected="selectedSize"
@select="selectSize"
/>
@@ -88,6 +88,8 @@ export default {
selectedSize: '',
productParams: [],
sizeChart: {},
// 变体列表（来自接口 variants），用于校验尺码+颜色组合、获取价格、包装规格
variants: [],
packaging: null
}
},
@@ -169,11 +171,17 @@ export default {
// 5. 产品参数（含可展开的"补充说明"）
this.productParams = this.buildParams(detail)
// 6. 尺码表
// 6. 变体：用于尺码+颜色校验、价格联动、包装规格来源
this.variants = Array.isArray(detail.variants) ? detail.variants.slice() : []
// 7. 尺码表
this.sizeChart = this.buildSizeChart(detail.sizeChart)
// 7. 包装规格：接口暂未提供，预留为空
this.packaging = null
// 8. 包装规格（从 variants 按尺码去重生成）
this.packaging = this.buildPackaging(this.variants)
// 9. 初始价格（按默认选中的 尺码+颜色 匹配变体价格）
this.syncPriceByVariant()
},
/**
@@ -249,11 +257,139 @@ export default {
return { unit: 'cm', columns, rows }
},
/**
* 构建包装规格表（按尺码聚合 → 每行一个尺码）
* 数据来源：variants[].{ sizeId, sizeName, boxLengthCm, boxWidthCm, boxHeightCm, weightG }
*/
buildPackaging(variants) {
if (!Array.isArray(variants) || !variants.length) return null
const CM_TO_IN = 0.393701
const G_TO_LB = 0.00220462
const map = new Map()
variants.forEach((v) => {
if (!v || !v.sizeId) return
if (map.has(v.sizeId)) return // 按尺码取第一条（所有颜色的包装尺寸/重量一般相同）
const l = parseFloat(v.boxLengthCm) || 0
const w = parseFloat(v.boxWidthCm) || 0
const h = parseFloat(v.boxHeightCm) || 0
const g = parseFloat(v.weightG) || 0
const cm3 = l * w * h
const in3 = cm3 * Math.pow(CM_TO_IN, 3)
map.set(v.sizeId, {
size: v.sizeName || '',
sizeId: v.sizeId,
dimension: {
cm: `${l.toFixed(1)}*${w.toFixed(1)}*${h.toFixed(1)}cm`,
in: `${(l * CM_TO_IN).toFixed(2)}*${(w * CM_TO_IN).toFixed(2)}*${(h * CM_TO_IN).toFixed(2)}in`
},
volume: {
cm: `${cm3.toFixed(2)}cm³`,
in: `${in3.toFixed(2)}in³`
},
weight: {
cm: `${g.toFixed(2)}g`,
in: `${(g * G_TO_LB).toFixed(2)}lb`
}
})
})
if (!map.size) return null
// 按 sizes 顺序排序（保持 S→M→L→XL 顺序）
const orderMap = {}
this.sizes.forEach((s, i) => (orderMap[s] = i))
const rows = Array.from(map.values()).sort((a, b) => {
const ai = orderMap[a.size] == null ? 999 : orderMap[a.size]
const bi = orderMap[b.size] == null ? 999 : orderMap[b.size]
return ai - bi
})
return {
unit: 'cm',
columns: ['尺码', '尺寸', '体积', '重量'],
rows
}
},
/**
* 根据当前 selectedColorId + selectedSize 找到匹配的 variant
* 命中后更新 ProductInfo 的价格；找不到则保持原商品价格
*/
findVariant() {
const sizeName = this.selectedSize
const colorId = this.selectedColorId
if (!sizeName || !colorId || !this.variants.length) return null
return (
this.variants.find(
(v) =>
v &&
String(v.colorId) === String(colorId) &&
String(v.sizeName) === String(sizeName)
) || null
)
},
syncPriceByVariant() {
const v = this.findVariant()
if (v && v.price != null) {
this.$set(this.product, 'price', this.parsePrice(v.price))
}
},
/**
* 颜色列表 + 根据已选尺码标记该颜色是否可用（有对应启用的 variant）
* 数据项: { id, name, value, enabled }
*/
selectColor(id) {
this.selectedColorId = id
this.syncPriceByVariant()
},
/**
* 尺码列表 + 根据已选颜色标记该尺码是否可用
* 数据项: 直接返回字符串（SizeSelector 兼容），不可用的对应按钮会 disabled 掉，因此用对象包一层
*/
selectSize(size) {
this.selectedSize = size
this.syncPriceByVariant()
}
},
computed: {
/**
* 颜色列表 + 可用态标记（给 ColorSelector 用，用于 disabled 样式）
* - 如果没选尺码：所有已 enabled 的颜色都可选
* - 如果已选尺码：仅保留存在 (colorId + sizeName) 组合且 variant.enabled 的颜色
*/
colorListWithAvailability() {
const sizeName = this.selectedSize
return this.colors.map((c) => {
let enabled = c.enabled !== false
if (sizeName && this.variants.length) {
enabled = this.variants.some(
(v) =>
v &&
v.enabled !== false &&
String(v.colorId) === String(c.id) &&
String(v.sizeName) === String(sizeName)
)
}
return Object.assign({}, c, { enabled })
})
},
/**
* 尺码列表 + 可用态标记
* SizeSelector 原始 list 是字符串数组，这里扩展为 [{ name, enabled }]
*/
sizeListWithAvailability() {
const colorId = this.selectedColorId
return this.sizes.map((s) => {
let enabled = true
if (colorId && this.variants.length) {
enabled = this.variants.some(
(v) =>
v &&
v.enabled !== false &&
String(v.colorId) === String(colorId) &&
String(v.sizeName) === String(s)
)
}
return { name: s, enabled }
})
}
}
}
pages/products/components/CategorySidebar.vue
+13 -56
View File
@@ -1,25 +1,17 @@
<template>
<!-- 左侧分类侧边栏 - Figma 1512:230 (90x794) -->
<view class="sidebar-wrap">
<scroll-view scroll-y class="sidebar">
<view
class="sidebar-item"
:class="{ active: activeId === item.id }"
v-for="(item, index) in list"
:key="index"
@tap="selectItem(item.id)"
>
<view class="sidebar-indicator" v-if="activeId === item.id"></view>
<text class="sidebar-text">{{ item.name }}</text>
</view>
</scroll-view>
<!-- 底部 0元拿样本 卡片 -->
<view class="sample-banner" @tap="onSample">
<text class="sample-title">0元拿样本</text>
<text class="sample-sub">免费寄送</text>
<scroll-view scroll-y class="sidebar">
<view
class="sidebar-item"
:class="{ active: activeId === item.id }"
v-for="(item, index) in list"
:key="index"
@tap="selectItem(item.id)"
>
<view class="sidebar-indicator" v-if="activeId === item.id"></view>
<text class="sidebar-text">{{ item.name }}</text>
</view>
</view>
</scroll-view>
</template>
<script>
@@ -38,31 +30,20 @@ export default {
methods: {
selectItem(id) {
this.$emit('select', id)
},
onSample() {
this.$emit('sample')
}
}
}
</script>
<style scoped>
/* 侧边栏容器 - 包含上方滚动分类 + 底部 0元拿样本 卡片 */
.sidebar-wrap {
/* 侧边栏 - 固定宽度 180rpx(=90px),白底 + 右侧 1px #EEEEEE 边框 */
.sidebar {
width: 180rpx;
height: 100%;
background: #ffffff;
border-right: 1rpx solid #eeeeee;
box-sizing: border-box;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
/* 侧边栏 - 上方滚动区域 */
.sidebar {
flex: 1;
min-height: 0;
background: #ffffff;
}
/* 单项 - 90x46 (180rpx x 92rpx),居中文字 */
.sidebar-item {
@@ -101,28 +82,4 @@ export default {
.sidebar-item.active .sidebar-text {
color: #ff6800;
}
/* 底部 0元拿样本 卡片 - 橙色渐变背景 圆角 内边距 12px 8px */
.sample-banner {
flex-shrink: 0;
margin: 16rpx 12rpx 24rpx;
padding: 24rpx 16rpx;
background: linear-gradient(180deg, #ff8a3d 0%, #ff6800 100%);
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
gap: 8rpx;
box-shadow: 0 4rpx 12rpx rgba(255, 104, 0, 0.25);
}
.sample-title {
font-size: 24rpx;
font-weight: 700;
color: #ffffff;
line-height: 1.2;
}
.sample-sub {
font-size: 18rpx;
color: rgba(255, 255, 255, 0.85);
line-height: 1.2;
}
</style>
pages/products/components/CountryBar.vue
+24 -13
View File
@@ -9,7 +9,8 @@
:key="index"
@tap="selectItem(item)"
>
<text class="country-flag">{{ item.flag }}</text>
<!-- 国家图标(18x18 圆形,来自后端 countryIcon 拼接 BASE_URL) -->
<image class="country-icon" :src="item.icon" mode="aspectFill"></image>
<text class="country-name">{{ item.name }}</text>
</view>
</view>
@@ -38,7 +39,8 @@ export default {
</script>
<style scoped>
/* 国家筛选条 - 白底 + 底部 1px #EEEEEE 边框 */
/* 国家筛选条 - 白底 + 底部 1px #EEEEEE 边框
Figma: Country Filter Bar 1511:195, y=6 起始, 行高约 31px(padding 6+6) */
.country-bar {
width: 100%;
background: #ffffff;
@@ -46,36 +48,45 @@ export default {
padding: 12rpx 20rpx;
box-sizing: border-box;
}
/* 换行布局(不用横向滚动) */
/* 换行布局 - 行间距 8px(未选中态 y=37-6=31px; 第二行 y=37) */
.country-inner {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
row-gap: 16rpx;
column-gap: 20rpx;
}
/* 单个标签 - padding 4px 10px 圆角 60px */
/* 单个标签 - padding 4px 10px 圆角 60px gap 10px Figma */
.country-item {
display: flex;
align-items: center;
gap: 8rpx;
padding: 8rpx 20rpx;
gap: 20rpx; /* 10px gap */
padding: 8rpx 20rpx; /* 4px 10px */
background: #f7f7f7;
border-radius: 60rpx;
font-size: 24rpx;
color: #000000;
line-height: 1.2;
border: 1rpx solid transparent;
box-sizing: border-box;
}
/* 选中态 - #FFF3EB 背景 + 0.5px 橙色边框 + 橙色文字 */
/* 选中态 - #FFF3EB 背景 + 0.5px 橙色边框 + 边框宽度 0.5px Figma */
.country-item.active {
background: #fff3eb;
border: 1rpx solid #ff6800;
border-color: #ff6800;
}
.country-item.active .country-name {
color: #ff6800;
}
.country-flag {
font-size: 24rpx;
/* 国家图标 - Figma 18x13 / 18x14 矩形, 圆角 2px,不是圆形 */
.country-icon {
width: 36rpx;
height: 26rpx;
border-radius: 4rpx; /* 2px */
flex-shrink: 0;
display: block;
}
/* 文字 12px Medium */
.country-name {
font-size: 24rpx;
font-weight: 500;
color: #000000;
}
</style>
pages/products/products.vue
+2 -1
View File
@@ -75,6 +75,7 @@ import ProductGrid from './components/ProductGrid.vue'
import FilterDrawer from './components/FilterDrawer.vue'
import { getCountries, getCategories, getTagGroups, getGoods } from '@/api/public.js'
import { buildUrl } from '@/api/request.js'
export default {
components: {
@@ -129,7 +130,7 @@ export default {
const countries = countriesData.map((c) => ({
id: c.id,
name: c.countryName,
flag: this.codeToEmoji(c.countryIcon)
icon: buildUrl(c.countryIcon || '')
}))
this.countries = countries