304 lines
9.9 KiB
Vue
304 lines
9.9 KiB
Vue
<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>
|
|
|
|
<!-- 产品信息 -->
|
|
<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>
|
|
|
|
<!-- 颜色选择 -->
|
|
<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>
|
|
|
|
<text class="color-name">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 尺码选择 -->
|
|
<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="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>
|
|
|
|
<text class="param-value">{{ item.value }}</text>
|
|
</view>
|
|
</view>
|
|
</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>
|
|
|
|
<text class="craft-name">{{ item.name }}</text>
|
|
|
|
<text class="craft-desc">{{ item.desc }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部操作栏 -->
|
|
<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>
|
|
</template>
|
|
|
|
<script>
|
|
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'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
@import './product-detail.css';
|
|
</style>
|