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-20 18:29:49 +08:00
commit 76827aedfe
77 changed files with 24937 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/product-detail/product-detail.css
+327
View File
@@ -0,0 +1,327 @@
/* 产品详情页样式 */
.detail-page {
min-height: 100vh;
background: #f5f5f5;
padding-bottom: 140rpx;
}
/* 图片区 */
.detail-images {
position: relative;
background: #ffffff;
}
.detail-swiper {
width: 100%;
height: 750rpx;
}
.swiper-img {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-emoji {
font-size: 160rpx;
}
.detail-badges {
position: absolute;
top: 24rpx;
left: 24rpx;
display: flex;
flex-direction: column;
gap: 8rpx;
}
.detail-badge {
font-size: 20rpx;
padding: 4rpx 12rpx;
border-radius: 6rpx;
}
/* 产品信息 */
.detail-info-section {
background: #ffffff;
padding: 32rpx 24rpx;
margin-bottom: 16rpx;
}
.detail-header {
display: flex;
flex-direction: column;
gap: 8rpx;
}
.detail-name {
font-size: 36rpx;
font-weight: 600;
color: #1a1a1a;
line-height: 1.4;
}
.detail-code {
font-size: 24rpx;
color: #999;
}
.detail-price-row {
display: flex;
align-items: baseline;
gap: 8rpx;
margin-top: 20rpx;
}
.detail-price {
font-size: 48rpx;
font-weight: 700;
color: #ff6800;
}
.detail-price-unit {
font-size: 24rpx;
color: #ff6800;
}
.detail-price-original {
font-size: 24rpx;
color: #ccc;
text-decoration: line-through;
margin-left: 12rpx;
}
.detail-meta {
display: flex;
justify-content: space-between;
margin-top: 32rpx;
padding-top: 24rpx;
border-top: 1rpx solid #f0f0f0;
}
.meta-item {
text-align: center;
}
.meta-label {
font-size: 22rpx;
color: #999;
display: block;
margin-bottom: 8rpx;
}
.meta-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
}
/* 通用section */
.detail-section {
background: #ffffff;
padding: 32rpx 24rpx;
margin-bottom: 16rpx;
}
.section-label {
font-size: 30rpx;
font-weight: 600;
color: #333;
display: block;
margin-bottom: 24rpx;
}
/* 颜色选择 */
.color-options {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
}
.color-option {
display: flex;
align-items: center;
gap: 8rpx;
padding: 12rpx 20rpx;
border-radius: 32rpx;
border: 2rpx solid #eee;
background: #fafafa;
}
.color-option.selected {
border-color: #ff6800;
background: #fff0e5;
}
.color-dot {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
border: 2rpx solid #fff;
box-shadow: 0 0 0 1rpx rgba(0, 0, 0, 0.1);
}
.color-name {
font-size: 24rpx;
color: #666;
}
.color-option.selected .color-name {
color: #ff6800;
}
/* 尺码选择 */
.size-options {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
}
.size-option {
min-width: 72rpx;
text-align: center;
padding: 16rpx 24rpx;
font-size: 26rpx;
color: #666;
background: #f5f5f5;
border-radius: 8rpx;
border: 2rpx solid transparent;
}
.size-option.selected {
background: #fff0e5;
color: #ff6800;
border-color: #ff6800;
}
/* 参数表 */
.params-table {
display: flex;
flex-direction: column;
}
.param-row {
display: flex;
padding: 16rpx 0;
border-bottom: 1rpx solid #f5f5f5;
}
.param-label {
width: 200rpx;
font-size: 26rpx;
color: #999;
flex-shrink: 0;
}
.param-value {
flex: 1;
font-size: 26rpx;
color: #333;
}
/* 工艺说明 */
.craft-info {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.craft-card {
display: flex;
align-items: center;
gap: 16rpx;
padding: 20rpx;
background: #fafafa;
border-radius: 12rpx;
}
.craft-icon {
width: 64rpx;
height: 64rpx;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.craft-emoji {
font-size: 32rpx;
}
.craft-name {
font-size: 26rpx;
font-weight: 600;
color: #333;
flex-shrink: 0;
width: 120rpx;
}
.craft-desc {
flex: 1;
font-size: 22rpx;
color: #999;
line-height: 1.5;
}
/* 底部操作栏 */
.detail-bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 120rpx;
background: #ffffff;
display: flex;
align-items: center;
padding: 0 24rpx;
gap: 16rpx;
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
z-index: 100;
}
.bottom-btn-icon {
display: flex;
flex-direction: column;
align-items: center;
gap: 4rpx;
width: 80rpx;
flex-shrink: 0;
}
.bottom-icon {
font-size: 36rpx;
}
.bottom-icon-text {
font-size: 18rpx;
color: #999;
}
.bottom-btn-cart {
flex: 1;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
background: #fff0e5;
color: #ff6800;
font-size: 28rpx;
font-weight: 600;
border-radius: 40rpx;
}
.bottom-btn-design {
flex: 1;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
background: #ff6800;
color: #ffffff;
font-size: 28rpx;
font-weight: 600;
border-radius: 40rpx;
}
pages/product-detail/product-detail.vue
+303
View File
@@ -0,0 +1,303 @@
<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>