'首页和商品详情页初稿'
This commit is contained in:
@@ -1,303 +1,113 @@
|
||||
<template>
|
||||
<!-- 产品详情页 -->
|
||||
<view class="detail-page">
|
||||
<!-- 产品图片区 -->
|
||||
<view class="detail-images">
|
||||
<swiper class="detail-swiper" :indicator-dots="true" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#FF6800" :circular="true">
|
||||
<swiper-item v-for="(item, index) in productImages" :key="index">
|
||||
<view class="swiper-img" :style="'background: ' + item.bg + ';'">
|
||||
<text class="swiper-emoji">{{ item.emoji }}</text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="detail-badges">
|
||||
<view class="detail-badge" :style="'background: ' + item.bg + '; color: ' + item.color + ';'" v-for="(item, index) in productTags" :key="index">
|
||||
{{ item.text }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 产品详情页 - 严格按 Figma 1544:530 实现 -->
|
||||
<view class="detail-page">
|
||||
<!-- 产品图片轮播 + 指示点 -->
|
||||
<DetailSwiper :images="productImages" />
|
||||
|
||||
<!-- 产品信息 -->
|
||||
<view class="detail-info-section">
|
||||
<view class="detail-header">
|
||||
<text class="detail-name">{{ product.name }}</text>
|
||||
<text class="detail-code">SKU: {{ product.code }}</text>
|
||||
</view>
|
||||
<view class="detail-price-row">
|
||||
<text class="detail-price">¥{{ product.price }}</text>
|
||||
<text class="detail-price-unit">起</text>
|
||||
<text class="detail-price-original" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
|
||||
</view>
|
||||
<view class="detail-meta">
|
||||
<view class="meta-item">
|
||||
<text class="meta-label">起订量</text>
|
||||
<text class="meta-value">{{ product.moq }}件</text>
|
||||
</view>
|
||||
<view class="meta-item">
|
||||
<text class="meta-label">生产周期</text>
|
||||
<text class="meta-value">{{ product.leadTime }}</text>
|
||||
</view>
|
||||
<view class="meta-item">
|
||||
<text class="meta-label">工艺</text>
|
||||
<text class="meta-value">{{ product.craft }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 产品信息：名称/SKU/国家/价格/4列快捷信息 -->
|
||||
<ProductInfo :info="product" />
|
||||
|
||||
<!-- 颜色选择 -->
|
||||
<view class="detail-section">
|
||||
<text class="section-label">颜色选择</text>
|
||||
<view class="color-options">
|
||||
<view :class="'color-option ' + (selectedColor === index ? 'selected' : '')" @tap="selectColor" :data-index="index" v-for="(item, index) in colors" :key="index">
|
||||
<view class="color-dot" :style="'background: ' + item.value + ';'"></view>
|
||||
<!-- 灰色分隔条 -->
|
||||
<view class="section-divider"></view>
|
||||
|
||||
<text class="color-name">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 颜色选择 -->
|
||||
<ColorSelector
|
||||
:list="colors"
|
||||
:selected-id="selectedColorId"
|
||||
@select="selectColor"
|
||||
/>
|
||||
|
||||
<!-- 尺码选择 -->
|
||||
<view class="detail-section">
|
||||
<text class="section-label">尺码选择</text>
|
||||
<view class="size-options">
|
||||
<view :class="'size-option ' + (selectedSize === item ? 'selected' : '')" @tap="selectSize" :data-size="item" v-for="(item, index) in sizes" :key="index">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 灰色分隔条 -->
|
||||
<view class="section-divider"></view>
|
||||
|
||||
<!-- 产品详情 -->
|
||||
<view class="detail-section">
|
||||
<text class="section-label">产品参数</text>
|
||||
<view class="params-table">
|
||||
<view class="param-row" v-for="(item, index) in productParams" :key="index">
|
||||
<text class="param-label">{{ item.label }}</text>
|
||||
<!-- 尺码选择 -->
|
||||
<SizeSelector
|
||||
:list="sizes"
|
||||
:selected="selectedSize"
|
||||
@select="selectSize"
|
||||
/>
|
||||
|
||||
<text class="param-value">{{ item.value }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 灰色分隔条 -->
|
||||
<view class="section-divider"></view>
|
||||
|
||||
<!-- 工艺说明 -->
|
||||
<view class="detail-section">
|
||||
<text class="section-label">工艺说明</text>
|
||||
<view class="craft-info">
|
||||
<view class="craft-card" v-for="(item, index) in crafts" :key="index">
|
||||
<view class="craft-icon" :style="'background: ' + item.bg + ';'">
|
||||
<text class="craft-emoji">{{ item.emoji }}</text>
|
||||
</view>
|
||||
<!-- 产品参数（含可展开的补充说明） -->
|
||||
<ParamsTable :list="productParams" />
|
||||
|
||||
<text class="craft-name">{{ item.name }}</text>
|
||||
<!-- 灰色分隔条 -->
|
||||
<view class="section-divider"></view>
|
||||
|
||||
<text class="craft-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 产品尺码表 -->
|
||||
<SizeChart :data="sizeChart" />
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="detail-bottom-bar safe-bottom">
|
||||
<view class="bottom-btn-icon" @tap="toggleFav">
|
||||
<text class="bottom-icon">{{ isFav ? '❤️' : '🤍' }}</text>
|
||||
<text class="bottom-icon-text">收藏</text>
|
||||
</view>
|
||||
<view class="bottom-btn-icon" @tap="contactService">
|
||||
<text class="bottom-icon">💬</text>
|
||||
<text class="bottom-icon-text">客服</text>
|
||||
</view>
|
||||
<view class="bottom-btn-cart" @tap="addToCart">
|
||||
<text>加入清单</text>
|
||||
</view>
|
||||
<view class="bottom-btn-design" @tap="startDesign">
|
||||
<text>立即定制</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 灰色分隔条 -->
|
||||
<view class="section-divider"></view>
|
||||
|
||||
<!-- 包装规格表 -->
|
||||
<PackagingSpec :data="packaging" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DetailSwiper from './components/DetailSwiper.vue'
|
||||
import ProductInfo from './components/ProductInfo.vue'
|
||||
import ColorSelector from './components/ColorSelector.vue'
|
||||
import SizeSelector from './components/SizeSelector.vue'
|
||||
import ParamsTable from './components/ParamsTable.vue'
|
||||
import SizeChart from './components/SizeChart.vue'
|
||||
import PackagingSpec from './components/PackagingSpec.vue'
|
||||
|
||||
import {
|
||||
mockProduct,
|
||||
mockImages,
|
||||
mockColors,
|
||||
mockSizes,
|
||||
mockParams,
|
||||
mockSizeChart,
|
||||
mockPackaging
|
||||
} from './mock.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
productId: null,
|
||||
product: {
|
||||
name: '180G牛奶丝T恤 DG120',
|
||||
code: 'DG120',
|
||||
price: '28.00',
|
||||
originalPrice: '35.00',
|
||||
moq: 1,
|
||||
leadTime: '48小时',
|
||||
craft: '烫画/数码直喷'
|
||||
},
|
||||
productImages: [
|
||||
{
|
||||
bg: '#F5F5F5',
|
||||
emoji: '👕'
|
||||
},
|
||||
{
|
||||
bg: '#E8E8E8',
|
||||
emoji: '👕'
|
||||
},
|
||||
{
|
||||
bg: '#F0F0F0',
|
||||
emoji: '👕'
|
||||
}
|
||||
],
|
||||
productTags: [
|
||||
{
|
||||
text: '可定制',
|
||||
bg: '#FFF0E5',
|
||||
color: '#FF6800'
|
||||
},
|
||||
{
|
||||
text: '现货',
|
||||
bg: '#E5F5FF',
|
||||
color: '#1890FF'
|
||||
},
|
||||
{
|
||||
text: '快返',
|
||||
bg: '#F0FFE5',
|
||||
color: '#52C41A'
|
||||
}
|
||||
],
|
||||
colors: [
|
||||
{
|
||||
name: '白色',
|
||||
value: '#FFFFFF'
|
||||
},
|
||||
{
|
||||
name: '黑色',
|
||||
value: '#1a1a1a'
|
||||
},
|
||||
{
|
||||
name: '灰色',
|
||||
value: '#999999'
|
||||
},
|
||||
{
|
||||
name: '橙色',
|
||||
value: '#FF6800'
|
||||
},
|
||||
{
|
||||
name: '藏青',
|
||||
value: '#1B365D'
|
||||
},
|
||||
{
|
||||
name: '军绿',
|
||||
value: '#4A5D23'
|
||||
}
|
||||
],
|
||||
selectedColor: 0,
|
||||
sizes: ['XS', 'S', 'M', 'L', 'XL', '2XL', '3XL'],
|
||||
selectedSize: 'M',
|
||||
productParams: [
|
||||
{
|
||||
label: '克重',
|
||||
value: '180g'
|
||||
},
|
||||
{
|
||||
label: '材质',
|
||||
value: '牛奶丝（改性聚酯纤维）'
|
||||
},
|
||||
{
|
||||
label: '版型',
|
||||
value: '常规版'
|
||||
},
|
||||
{
|
||||
label: '领型',
|
||||
value: '圆领'
|
||||
},
|
||||
{
|
||||
label: '袖型',
|
||||
value: '短袖'
|
||||
},
|
||||
{
|
||||
label: '适用工艺',
|
||||
value: '烫画、数码直喷、刺绣'
|
||||
},
|
||||
{
|
||||
label: '可售区域',
|
||||
value: '全球'
|
||||
},
|
||||
{
|
||||
label: '洗涤说明',
|
||||
value: '冷水机洗，不可漂白'
|
||||
}
|
||||
],
|
||||
crafts: [
|
||||
{
|
||||
name: '烫画',
|
||||
desc: '色彩鲜艳，适合复杂图案，成本低',
|
||||
emoji: '🎨',
|
||||
bg: '#FFF0E5'
|
||||
},
|
||||
{
|
||||
name: '数码直喷',
|
||||
desc: '触感柔软，透气性好，适合大面积印花',
|
||||
emoji: '🖨️',
|
||||
bg: '#E5F5FF'
|
||||
},
|
||||
{
|
||||
name: '刺绣',
|
||||
desc: '质感高级，经久耐用，适合logo',
|
||||
emoji: '🪡',
|
||||
bg: '#F0FFE5'
|
||||
}
|
||||
],
|
||||
isFav: false
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.id) {
|
||||
this.setData({
|
||||
productId: options.id
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectColor(e) {
|
||||
this.setData({
|
||||
selectedColor: e.currentTarget.dataset.index
|
||||
});
|
||||
},
|
||||
|
||||
selectSize(e) {
|
||||
this.setData({
|
||||
selectedSize: e.currentTarget.dataset.size
|
||||
});
|
||||
},
|
||||
|
||||
toggleFav() {
|
||||
this.setData({
|
||||
isFav: !this.isFav
|
||||
});
|
||||
uni.showToast({
|
||||
title: this.isFav ? '已收藏' : '已取消',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
contactService() {
|
||||
uni.showToast({
|
||||
title: '客服功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
|
||||
addToCart() {
|
||||
uni.showToast({
|
||||
title: '已加入清单',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
startDesign() {
|
||||
uni.showToast({
|
||||
title: '定制功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
components: {
|
||||
DetailSwiper,
|
||||
ProductInfo,
|
||||
ColorSelector,
|
||||
SizeSelector,
|
||||
ParamsTable,
|
||||
SizeChart,
|
||||
PackagingSpec
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
productId: null,
|
||||
product: mockProduct,
|
||||
productImages: mockImages,
|
||||
colors: mockColors,
|
||||
// 默认选中"灰色"（id=3），与 Figma 设计稿一致
|
||||
selectedColorId: 3,
|
||||
sizes: mockSizes,
|
||||
// 默认选中 L，与 Figma 设计稿一致
|
||||
selectedSize: 'L',
|
||||
productParams: mockParams,
|
||||
sizeChart: mockSizeChart,
|
||||
packaging: mockPackaging
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && options.id) {
|
||||
this.productId = options.id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectColor(id) {
|
||||
this.selectedColorId = id
|
||||
},
|
||||
selectSize(size) {
|
||||
this.selectedSize = size
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import './product-detail.css';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user