SwtTt29
/
Mini-Program
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加商品更新页面及相关优化 

1. 添加pages/goods-update/商品更新页面
2. 修复商品详情页规格信息显示
3. 优化创建人信息和地区信息获取
4. 修复API返回数据处理逻辑
5. 同步货源描述展示样式
pull/6/head
Default User 2 months ago
parent
e9112d359a
commit
206a16c9b8
8 changed files with 2514 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      app.json
  2. 1145
      pages/goods-update/goods-update.js
  3. 6
      pages/goods-update/goods-update.json
  4. 394
      pages/goods-update/goods-update.wxml
  5. 953
      pages/goods-update/goods-update.wxss
  6. 13
      pages/goods/index.js
  7. 1
      pages/goods/index.wxml
  8. 2
      server-example/server-mysql.js

1
app.json
View File

@ -11,6 +11,7 @@
"pages/notopen/index",
"pages/create-supply/index",
"pages/goods-detail/goods-detail",
"pages/goods-update/goods-update",
"pages/chat/index",
"pages/chat-detail/index",
"pages/message-list/index",

1145
pages/goods-update/goods-update.js
View File

File diff suppressed because it is too large

6
pages/goods-update/goods-update.json
View File

@ -0,0 +1,6 @@
{
"navigationBarTitleText": "货源详情",
"usingComponents": {},
"enablePullDownRefresh": false,
"disableScroll": false
}

394
pages/goods-update/goods-update.wxml
View File

@ -0,0 +1,394 @@
<!-- pages/goods-update/goods-update.wxml -->
<view class="goods-update-page">
<!-- 商品详情内容 -->
<view class="goods-detail-content">
<!-- 商品媒体轮播（支持图片和视频） -->
<view class="goods-image-slider">
<swiper
indicator-dots="{{true}}"
autoplay="{{true}}"
interval="3000"
duration="500"
indicator-color="rgba(255, 255, 255, 0.5)"
indicator-active-color="#ffffff"
circular="{{true}}"
>
<block wx:for="{{goodsDetail.mediaItems}}" wx:key="index">
<swiper-item>
<!-- 视频处理：根据类型字段判断 -->
<video
wx:if="{{item.type === 'video'}}"
src="{{item.url}}"
class="slider-media"
mode="aspectFill"
show-center-play-btn="{{true}}"
show-play-btn="{{false}}"
controls="{{true}}"
autoplay="{{true}}"
loop="{{true}}"
muted="{{true}}"
initial-time="0"
show-mute-btn="{{true}}"
enable-progress-gesture="{{true}}"
enable-play-gesture="{{true}}"
object-fit="fill"
poster="" >
</video>
<!-- 图片处理 -->
<image
wx:else
src="{{item.url}}"
mode="aspectFill"
class="slider-media"
bindtap="previewImage"
data-urls="{{goodsDetail.imageUrls}}"
data-index="{{index}}"
loading="lazy"
/>
</swiper-item>
</block>
</swiper>
</view>
<!-- 商品基本信息 -->
<view class="goods-info">
<view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx;">
<view style="display: flex; align-items: center; flex: 1;">
<view style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: rgba(218, 165, 32, 0.8); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -20rpx;">{{goodsDetail.supplyStatus || '暂无状态'}}</view>
<text class="goods-name">{{goodsDetail.name}}</text>
<span style="vertical-align: middle; font-size: 20rpx; color: white; background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); padding: 4rpx 8rpx; clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%); margin-left: 8rpx; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5); font-weight: bold; margin-top: -20rpx;">V</span>
</view>
<view style="display: flex; align-items: flex-start;">
<view class="source-type-badge" style="display: flex; align-items: center; justify-content: center; margin-right: 10rpx;">
<text style="color: {{goodsDetail.sourceTypeColor}}; font-weight: bold;">{{goodsDetail.sourceType || '暂无'}}</text>
</view>
</view>
</view>
<view class="goods-price" style="position: relative; display: flex; align-items: center; justify-content: space-between;">
<view style="display: flex; align-items: center;">
<text class="price-symbol">价格:</text>
<text class="price-value">{{goodsDetail.price}}</text>
</view>
</view>
</view>
<!-- 商品详细信息网格 -->
<view class="info-grid">
<view class="info-row">
<view class="info-item">
<view class="info-label-container">
<text class="info-label">地区</text>
</view>
<view class="info-value-container">
<text class="info-value">{{goodsDetail.region || '暂无'}}</text>
</view>
</view>
<view class="info-item">
<view class="info-label-container">
<text class="info-label">关注人数</text>
</view>
<view class="info-value-container">
<text class="info-value">{{goodsDetail.reservedCount || '0'}}</text>
</view>
</view>
</view>
<view class="info-row">
<view class="info-item">
<view class="info-label-container">
<text class="info-label">蛋黄</text>
</view>
<view class="info-value-container">
<text class="info-value">{{goodsDetail.yolk || '暂无'}}</text>
</view>
</view>
<view class="info-item">
<view class="info-label-container">
<text class="info-label">产品包装</text>
</view>
<view class="info-value-container">
<text class="info-value">{{goodsDetail.producting || '暂无'}}</text>
</view>
</view>
</view>
</view>
<!-- 规格信息 -->
<view class="weight-quantity-info" wx:if="{{(goodsDetail.weightQuantityData && goodsDetail.weightQuantityData.length > 0) || goodsDetail.specInfo || goodsDetail.spec}}">
<view class="wq-title">规格信息</view>
<view class="wq-list">
<block wx:if="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData.length > 0}}">
<view class="wq-item" wx:for="{{goodsDetail.weightQuantityData}}" wx:key="index">
<text class="wq-text">{{item.display}}</text>
</view>
</block>
<block wx:elif="{{goodsDetail.specInfo && goodsDetail.specInfo.length > 0}}">
<view class="wq-item" wx:for="{{goodsDetail.specInfo}}" wx:key="index">
<text class="wq-text">{{item}}</text>
</view>
</block>
<block wx:else>
<view class="wq-item">
<text class="wq-text">{{goodsDetail.spec || '暂无规格信息'}}</text>
</view>
</block>
</view>
</view>
<!-- 货源描述 -->
<view class="goods-description product-description" wx:if="{{goodsDetail.description || goodsDetail.remark || true}}">
<view class="gd-label-container">
<text class="gd-label">货源描述</text>
</view>
<view class="gd-content">
<text class="gd-value">{{goodsDetail.description || goodsDetail.remark || '暂无描述'}}</text>
</view>
</view>
<!-- 创建人信息 -->
<view class="creator-info">
<view class="creator-item">
<text class="creator-label">创建人:</text>
<text class="creator-name">{{goodsDetail.creatorName || '暂无'}}</text>
</view>
<view class="creator-item">
<text class="creator-label">创建时间:</text>
<text class="create-time">{{goodsDetail.formattedCreatedAt || '暂无'}}</text>
</view>
</view>
</view>
<!-- 操作按钮区域 -->
<view class="action-buttons">
<button
class="edit-button bottom-button"
bindtap="showEditModal"
>
编辑货源
</button>
<button
class="publish-button bottom-button"
bindtap="preparePublishSupply"
>
上架
</button>
</view>
<!-- 编辑货源弹窗（全屏） -->
<view class="modal" wx:if="{{showEditModal}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: white; z-index: 999;">
<!-- 顶部导航栏 -->
<view style="display: flex; justify-content: space-between; align-items: center; padding: 30rpx; border-bottom: 1rpx solid #eee; background-color: #fafafa; position: sticky; top: 0; z-index: 10;">
<view bindtap="hideEditModal" style="font-size: 32rpx; color: #666;">取消</view>
<view style="font-size: 32rpx; font-weight: bold; color: #333;">编辑货源</view>
<view bindtap="saveEdit" style="font-size: 32rpx; color: #07c160;">提交</view>
</view>
<scroll-view scroll-y="true" style="height: calc(100vh - 90rpx); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 40rpx 60rpx; box-sizing: border-box;">
<view>
<!-- 照片上传区域 -->
<view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-top: 10rpx;">商品图片</view>
<view class="upload-area" style="width: 100%; margin: 0 auto; margin-bottom: 30rpx; border: 1rpx dashed #ddd; border-radius: 12rpx; padding: 24rpx;">
<view style="display: flex; flex-wrap: wrap;">
<!-- 已上传的图片 -->
<view wx:for="{{editSupply.imageUrls}}" wx:key="index" style="position: relative; width: 160rpx; height: 160rpx; margin: 10rpx; border-radius: 12rpx; overflow: hidden; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);">
<image src="{{item}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-urls="{{editSupply.imageUrls}}" data-index="{{index}}"></image>
<view class="delete-icon" style="position: absolute; top: 8rpx; right: 8rpx; background-color: rgba(0,0,0,0.6); color: white; width: 44rpx; height: 44rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28rpx;" bindtap="deleteImage" data-index="{{index}}" data-type="edit">×</view>
</view>
<!-- 上传按钮 -->
<view wx:if="{{editSupply.imageUrls.length < 5}}" style="width: 160rpx; height: 160rpx; margin: 10rpx; border: 2rpx dashed #1677ff; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; background-color: #f0f8ff;" bindtap="chooseImage" data-type="edit">
<text style="font-size: 60rpx; color: #1677ff;">+</text>
</view>
</view>
<view style="font-size: 22rpx; color: #999; margin-top: 16rpx; text-align: center;">最多上传5张图片</view>
</view>
<view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">商品名称</view>
<view
bindtap="openNameSelectModal"
style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block; background: white; position: relative;">
<view style="display: flex; justify-content: space-between; align-items: center;">
<text style="text-align: left;">{{editSupply.productName || editSupply.name || '请选择商品名称'}}</text>
<text style="color: #999;">▼</text>
</view>
</view>
<view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">蛋黄</view>
<view bindtap="openYolkSelectModal" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block; background: white; position: relative;">
<view style="display: flex; justify-content: space-between; align-items: center;">
<text style="text-align: left;">{{editSupply.yolk || '请选择蛋黄类型'}}</text>
<text style="color: #999;">▼</text>
</view>
</view>
<view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">规格</view>
<!-- 修改为可点击的视图，点击后打开自定义弹窗 -->
<view bindtap="onEditSpecChange" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block; background: white; position: relative; z-index: 1;">
<view style="display: flex; justify-content: space-between; align-items: center;">
<text style="text-align: left;">{{editSupply.spec || '请选择规格'}}</text>
<text style="color: #999;">▼</text>
</view>
</view>
<view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">地区</view>
<view
class="region-picker input"
bindtap="openEditRegionModal"
style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block;"
>
<text style="text-align: left;">{{editSupply.region || '请选择省市区'}}</text>
</view>
<view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">价格</view>
<input class="input" type="text" placeholder="请输入价格" bindinput="onEditInput" data-field="price" value="{{editSupply.price}}" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block;" placeholder-style="font-size: 24rpx; color: #999; text-align: left;"></input>
<view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">件数</view>
<input class="input" type="number" placeholder="请输入件数" bindinput="onEditInput" data-field="minOrder" value="{{editSupply.minOrder}}" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block;" placeholder-style="font-size: 24rpx; color: #999; text-align: left;"></input>
<view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">斤重</view>
<input class="input" type="text" placeholder="请输入斤重" bindinput="onEditInput" data-field="grossWeight" value="{{editSupply.grossWeight || ''}}" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block;" placeholder-style="font-size: 24rpx; color: #999; text-align: left;"></input>
<!-- 添加底部空白区域 -->
<view style="height: 20vh; background: transparent;"></view>
</view>
</scroll-view>
</view>
<!-- 图片预览弹窗 -->
<view class="image-preview-mask" wx:if="{{showImagePreview}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 9999;" catchtouchmove="true" bindtap="closeImagePreview">
<view style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
<swiper
style="width: 100%; height: 100%;"
current="{{previewImageIndex}}"
bindchange="onPreviewImageChange"
indicator-dots="true"
indicator-color="rgba(255,255,255,0.5)"
indicator-active-color="#fff">
<block wx:for="{{previewImageUrls}}" wx:key="*this">
<swiper-item>
<image
src="{{item}}"
mode="aspectFit"
style="width: 100%; height: 100%; transform: scale({{scale}}) translate({{offsetX}}px, {{offsetY}}px); transform-origin: center; transition: transform 0.1s;"
bindtap="handleImageTap"
bindtouchstart="handleTouchStart"
bindtouchmove="handleTouchMove"
bindtouchend="handleTouchEnd"
bindload="onPreviewImageLoad"
></image>
</swiper-item>
</block>
</swiper>
<view style="position: absolute; top: 40rpx; right: 40rpx; color: white; font-size: 40rpx;">
<text bindtap="closeImagePreview" style="background: rgba(0,0,0,0.5); padding: 10rpx 20rpx; border-radius: 50%;">×</text>
</view>
</view>
</view>
<!-- 自定义规格选择弹窗 - 适配原生风格 -->
<view class="spec-select-modal" wx:if="{{showSpecSelectModal}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; z-index: 9999;" catchtouchmove="true">
<view style="position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: 20rpx 20rpx 0 0; max-height: 80vh;">
<!-- 顶部操作栏：取消和确定按钮 -->
<view style="padding: 20rpx; display: flex; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #eee;">
<view bindtap="closeSpecSelectModal" style="font-size: 32rpx; color: #333; padding: 10rpx 20rpx;">取消</view>
<view bindtap="confirmSpecSelection" style="font-size: 32rpx; color: #07c160; padding: 10rpx 20rpx;">确定</view>
</view>
<!-- 搜索框区域 -->
<view style="padding: 20rpx;">
<view style="position: relative; background: #f5f5f5; border-radius: 40rpx; padding: 0 30rpx;">
<input
type="text"
placeholder="搜索规格"
value="{{modalSpecSearchKeyword}}"
bindinput="onModalSpecSearchInput"
confirm-type="search"
style="width: 100%; height: 70rpx; line-height: 70rpx; font-size: 28rpx; background: transparent;"
/>
<view
wx:if="{{modalSpecSearchKeyword}}"
bindtap="clearModalSpecSearch"
style="position: absolute; right: 30rpx; top: 50%; transform: translateY(-50%); color: #999;"
>
✕
</view>
</view>
</view>
<!-- 规格列表 -->
<scroll-view
scroll-y="true"
style="max-height: 60vh; padding: 0; -webkit-overflow-scrolling: touch;"
enable-back-to-top="false"
>
<view
wx:for="{{filteredModalSpecOptions}}"
wx:key="index"
class="spec-item {{selectedModalSpecIndex === index ? 'selected' : ''}}"
bindtap="onModalSpecSelect"
data-index="{{index}}"
style="padding: 30rpx 40rpx; border-bottom: 1rpx solid #f0f0f0; font-size: 28rpx; color: {{selectedModalSpecIndex === index ? '#07c160' : '#333'}}; text-align: left;"
>
{{item}}
</view>
</scroll-view>
</view>
</view>
<!-- 商品名称选择弹窗 - 白色样式 -->
<view class="custom-select-modal" wx:if="{{showNameSelectModal}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; z-index: 9999;" catchtouchmove="true">
<view style="position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: 20rpx 20rpx 0 0; max-height: 80vh;">
<!-- 顶部操作栏：取消和确定按钮 -->
<view style="padding: 20rpx; display: flex; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #eee;">
<view bindtap="closeNameSelectModal" style="font-size: 32rpx; color: #333; padding: 10rpx 20rpx;">取消</view>
<view bindtap="confirmNameSelection" style="font-size: 32rpx; color: #07c160; padding: 10rpx 20rpx;">确定</view>
</view>
<!-- 商品名称列表 -->
<scroll-view
scroll-y="true"
style="max-height: 60vh; padding: 0; -webkit-overflow-scrolling: touch;"
enable-back-to-top="false"
>
<view
wx:for="{{productNameOptions}}"
wx:key="index"
class="select-item {{selectedNameIndex === index ? 'selected' : ''}}"
bindtap="onNameSelect"
data-index="{{index}}"
style="padding: 32rpx 40rpx; border-bottom: 1rpx solid #f0f0f0; font-size: 32rpx; color: {{selectedNameIndex === index ? '#07c160' : '#131413'}}; text-align: center;"
>
{{item}}
</view>
</scroll-view>
</view>
</view>
<!-- 蛋黄选择弹窗 - 白色样式 -->
<view class="custom-select-modal" wx:if="{{showYolkSelectModal}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; z-index: 9999;" catchtouchmove="true">
<view style="position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: 20rpx 20rpx 0 0; max-height: 80vh;">
<!-- 顶部操作栏：取消和确定按钮 -->
<view style="padding: 20rpx; display: flex; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #eee;">
<view bindtap="closeYolkSelectModal" style="font-size: 32rpx; color: #333; padding: 10rpx 20rpx;">取消</view>
<view bindtap="confirmYolkSelection" style="font-size: 32rpx; color: #07c160; padding: 10rpx 20rpx;">确定</view>
</view>
<!-- 蛋黄列表 -->
<scroll-view
scroll-y="true"
style="max-height: 60vh; padding: 0; -webkit-overflow-scrolling: touch; -webkit-scrollbar: none; scrollbar-width: none;"
enable-back-to-top="false"
>
<view
wx:for="{{yolkOptions}}"
wx:key="index"
class="select-item {{selectedYolkIndex === index ? 'selected' : ''}}"
bindtap="onYolkSelect"
data-index="{{index}}"
style="padding: 32rpx 40rpx; border-bottom: 1rpx solid #f0f0f0; font-size: 32rpx; color: {{selectedYolkIndex === index ? '#07c160' : '#131413'}}; text-align: center;"
>
{{item}}
</view>
</scroll-view>
</view>
</view>
</view>

953
pages/goods-update/goods-update.wxss
View File

@ -0,0 +1,953 @@
/* pages/goods-update/goods-update.wxss */
/* 页面容器 */
.goods-update-page {
min-height: 100vh;
background-color: #f5f7fa;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
/* 页面头部 */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 44px;
background: #ffffff;
padding: 0 16px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.header-left {
width: 40px;
}
.header-center {
flex: 1;
text-align: center;
}
.header-title {
font-size: 17px;
font-weight: 600;
color: #000000;
letter-spacing: 0.5px;
}
.header-right {
width: 40px;
text-align: right;
}
.close-icon {
font-size: 28px;
color: #000000;
font-weight: 300;
line-height: 1;
}
/* 商品详情内容区域 */
.goods-detail-content {
padding-top: 0; /* 移除顶部内边距，消除空白 */
padding-bottom: 90px; /* 减小底部内边距 */
}
/* 商品图片轮播 */
.goods-image-slider {
width: 100%;
height: 240px; /* 适当增大图片高度 */
background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%);
overflow: hidden;
position: relative;
}
.goods-image-slider::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
}
.goods-image-slider swiper {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.goods-image-slider swiper-item {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 10px; /* 减小内边距 */
box-sizing: border-box;
}
.slider-media {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.slider-media:active {
transform: scale(0.98);
}
/* 视频样式增强 */
video.slider-media {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: fill;
z-index: 1;
}
/* 视频控制器样式 - 调整进度条位置 */
video.slider-media .wx-video-controlbar {
bottom: 50px !important;
padding-bottom: 15px !important;
height: 60px !important;
z-index: 10 !important;
}
/* 视频播放按钮样式 */
video.slider-media .wx-video-play-btn {
width: 80rpx;
height: 80rpx;
}
video.slider-media .wx-video-play-btn::after {
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.6);
}
/* 视频静音图标样式 */
video.slider-media .wx-video-volume-icon {
background-image: url('https://img.icons8.com/windows/32/mute.png') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
}
/* 商品基本信息 */
.goods-info {
background-color: #ffffff;
padding: 14px 16px 10px; /* 适当增大内边距 */
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
margin-top: 0; /* 移除负外边距，让图片和信息自然衔接 */
}
.goods-info::after {
content: '';
position: absolute;
bottom: 0;
left: 16px;
right: 16px;
height: 1px;
background: linear-gradient(90deg, transparent, #f0f0f0, transparent);
}
.goods-name {
display: block;
font-size: 20px; /* 适当增大字体大小 */
font-weight: 700;
color: #262626;
margin-bottom: 10px; /* 适当增大底部间距 */
line-height: 1.35; /* 适当增大行高 */
letter-spacing: -0.2px;
}
.goods-price {
display: flex;
align-items: center;
margin-bottom: 6px;
}
.price-symbol {
font-size: 18px; /* 适当增大字体大小 */
color: #666;
margin-right: 4px;
font-weight: 500;
display: inline-flex;
align-items: center;
justify-content: center;
}
.price-value {
font-size: 26px; /* 适当增大字体大小 */
color: #ff4d4f;
font-weight: 700;
letter-spacing: -0.5px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.price-value::before {
content: '¥';
font-size: 24px;
margin-right: 2px;
}
.source-type-badge {
font-size: 24rpx;
color: #ffffff;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12rpx);
-webkit-backdrop-filter: blur(12rpx);
border: 1rpx solid rgba(255, 255, 255, 0.25);
padding: 4rpx 12rpx;
border-radius: 8rpx;
font-weight: bold;
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12), inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: -22rpx;
}
.source-type-badge:active {
transform: scale(0.98);
box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
}
/* 商品详细信息网格 */
.info-grid {
background-color: #ffffff;
margin: 8px 0;
padding: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.info-row {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
background: #f0f5ff;
border-radius: 10px;
overflow: hidden;
border: 1px solid #d6e4ff;
}
/* 新增：全宽行样式 */
.info-row.full-width {
flex-direction: column;
background: #ffffff;
border: 1px solid #e8f4ff;
}
.info-row:last-child {
margin-bottom: 0;
}
.info-item {
flex: 0 0 50%;
display: flex;
flex-direction: column;
padding: 12px 14px;
box-sizing: border-box;
position: relative;
}
/* 新增：全宽项样式 */
.info-item.full-item {
width: 100%;
flex: none;
background: #f6fbff;
border-radius: 8px;
margin: 6px 0;
border: 1px solid #e6f7ff;
}
.info-item:nth-child(odd)::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background: linear-gradient(180deg, transparent, #e8e8e8, transparent);
}
.info-label-container {
margin-bottom: 4px; /* 减小间距 */
}
.info-label {
font-size: 13px;
color: #8c8c8c;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2px;
}
.info-value-container {
min-height: 20px; /* 减小最小高度 */
}
.info-value {
font-size: 16px;
color: #000000d9;
font-weight: 600;
line-height: 1.3;
}
/* 新增：规格信息列表样式 */
.spec-info-list {
margin-top: 8px;
padding: 0;
}
.spec-info-item {
margin-bottom: 8px;
padding: 10px 14px;
background-color: #f0f4ff;
border-radius: 6px;
border-left: 3px solid #1890ff;
transition: all 0.2s ease;
}
.spec-info-item:active {
background-color: #e6f7ff;
transform: translateX(3px);
}
.spec-info-text {
font-size: 15px;
color: #262626;
line-height: 1.4;
font-weight: 500;
}
/* 新增：货源描述样式 */
.goods-description {
background-color: #ffffff;
margin: 8px 0;
padding: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border-radius: 8px;
border: 1px solid #f0f0f0;
}
.description-content {
margin-top: 8px;
padding: 8px 0;
}
.description-content .info-value {
font-size: 15px;
line-height: 1.5;
color: #595959;
font-weight: 400;
white-space: pre-wrap;
}
/* 联系信息 */
.contact-info {
margin: 8px 16px; /* 减小外边距 */
padding: 12px; /* 减小内边距 */
border-radius: 10px; /* 减小圆角 */
background: #ffffff;
border: 1px solid #d6e4ff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.contact-label {
display: none; /* 隐藏联系信息标题，节省空间 */
}
.contact-content {
display: flex;
flex-direction: column;
gap: 6px; /* 减小间距 */
}
.contact-item {
display: flex;
align-items: center;
padding: 6px 0; /* 减小内边距 */
}
.phone-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0; /* 减小内边距 */
}
.contact-icon {
font-size: 14px; /* 减小图标大小 */
margin-right: 8px; /* 减小间距 */
flex-shrink: 0;
width: 18px; /* 减小宽度 */
text-align: center;
color: #2f54eb;
}
.user-icon {
font-size: 16px; /* 减小图标大小 */
}
.phone-icon {
font-size: 16px; /* 减小图标大小 */
}
.contact-label-text {
font-size: 13px; /* 减小字体大小 */
color: #595959;
margin-right: 6px; /* 减小间距 */
white-space: nowrap;
flex-shrink: 0;
}
.contact-text {
font-size: 13px; /* 减小字体大小 */
color: #262626;
flex-shrink: 0;
margin-right: 12px; /* 减小间距 */
}
.phone-info {
display: flex;
flex-direction: row;
flex: 1;
align-items: center;
}
.phone-info .contact-label-text {
margin-bottom: 0;
}
/* 底部按钮区域样式 */
.action-buttons {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 12px 16px; /* 减小内边距 */
background-color: #ffffff;
border-top: 1px solid #f0f0f0;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
z-index: 99;
display: flex;
gap: 8px; /* 减小按钮间距 */
}
.bottom-button {
flex: 1;
height: 48px; /* 减小按钮高度 */
border-radius: 24px; /* 减小圆角 */
font-size: 16px; /* 减小字体大小 */
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
border: none;
outline: none;
transition: all 0.3s ease;
margin: 0;
}
.bottom-button:active {
transform: scale(0.98);
opacity: 0.9;
}
/* 编辑按钮样式 */
.edit-button.bottom-button {
background-color: #ffffff;
color: #2f54eb;
border: 2px solid #2f54eb;
box-shadow: none;
}
.edit-button.bottom-button:active {
background-color: #f0f4ff;
transform: scale(0.98);
}
/* 上架按钮样式 */
.publish-button.bottom-button {
background-color: #52c41a;
color: #ffffff;
border: 2px solid #52c41a;
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.2);
}
.publish-button.bottom-button:active {
background-color: #73d13d;
transform: scale(0.98);
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
}
/* 返回按钮样式 */
.back-button.bottom-button {
background-color: #ffffff;
color: #333333;
border: 2px solid #d9d9d9;
box-shadow: none;
}
.back-button.bottom-button:active {
background-color: #f5f5f5;
transform: scale(0.98);
}
/* 图片预览弹窗 */
.image-preview-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000000;
z-index: 1000;
display: flex;
flex-direction: column;
}
.preview-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 16px;
color: #ffffff;
z-index: 10;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
}
.preview-close {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 22px;
transition: all 0.2s ease;
}
.preview-close:active {
background: rgba(255, 255, 255, 0.2);
transform: scale(0.95);
}
.close-icon {
font-size: 24px;
color: #ffffff;
font-weight: 300;
}
.preview-indicator {
font-size: 15px;
color: #ffffff;
font-weight: 500;
opacity: 0.8;
}
.preview-swiper {
flex: 1;
width: 100%;
}
.preview-image-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 20px;
box-sizing: border-box;
}
/* 净重件数对应信息样式 */
.weight-quantity-info {
background-color: #ffffff;
margin: 16rpx;
padding: 24rpx;
border-radius: 12rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid #f0f0f0;
}
.wq-title {
font-size: 32rpx;
font-weight: 600;
color: #262626;
margin-bottom: 16rpx;
padding-bottom: 12rpx;
border-bottom: 1rpx solid #f0f0f0;
position: relative;
}
.wq-title::after {
content: '';
position: absolute;
bottom: -1rpx;
left: 0;
width: 60rpx;
height: 4rpx;
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
border-radius: 2rpx;
}
.wq-list {
display: flex;
flex-direction: column;
gap: 12rpx;
}
.wq-item {
background-color: #f8f9fa;
padding: 16rpx 20rpx;
border-radius: 8rpx;
border-left: 4rpx solid #1890ff;
transition: all 0.3s ease;
}
.wq-item:active {
background-color: #e6f7ff;
transform: translateX(4rpx);
}
.wq-text {
font-size: 28rpx;
color: #595959;
line-height: 1.5;
font-weight: 500;
}
/* 货源描述样式 */
.goods-description {
background-color: #ffffff;
margin: 16rpx;
padding: 24rpx;
border-radius: 12rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid #f0f0f0;
}
.gd-label-container {
margin-bottom: 16rpx;
padding-bottom: 12rpx;
border-bottom: 1rpx solid #f0f0f0;
position: relative;
}
.gd-label-container::after {
content: '';
position: absolute;
bottom: -1rpx;
left: 0;
width: 60rpx;
height: 4rpx;
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
border-radius: 2rpx;
}
.gd-label {
font-size: 32rpx;
font-weight: 600;
color: #262626;
text-transform: uppercase;
letter-spacing: 1rpx;
}
.gd-content {
margin-top: 16rpx;
}
.gd-value {
font-size: 28rpx;
color: #595959;
line-height: 1.6;
font-weight: 400;
white-space: pre-wrap;
word-break: break-all;
}
/* 同步 goods 页面的 product-description 样式 */
.product-description {
font-size: 22rpx;
color: #666;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin: 6rpx 0;
background: #fafafa;
padding: 6rpx;
border-radius: 8rpx;
border: 1rpx solid #f0f0f0;
width: 100%;
box-sizing: border-box;
}
/* 创建人信息样式 */
.creator-info {
margin: 16rpx;
padding: 16rpx 24rpx;
background: #ffffff;
border-radius: 12rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid #f0f0f0;
display: flex;
flex-direction: column;
gap: 12rpx;
}
.creator-item {
display: flex;
align-items: center;
gap: 12rpx;
}
.creator-label {
font-size: 28rpx;
font-weight: 500;
color: #8c8c8c;
min-width: 120rpx;
}
.creator-name, .create-time {
font-size: 28rpx;
color: #262626;
font-weight: 400;
}
.create-time {
color: #8c8c8c;
}
.preview-image {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
}
/* 添加一些微动画效果 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.goods-info,
.info-grid,
.contact-info {
animation: fadeIn 0.4s ease-out;
}
.info-grid {
animation-delay: 0.1s;
}
.contact-info {
animation-delay: 0.2s;
}
/* 响应式调整 */
@media (min-height: 800px) {
.goods-image-slider {
height: 320px;
}
.goods-name {
font-size: 22px;
}
.price-value {
font-size: 32px;
}
}
/* 登录弹窗样式 */
.auth-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.auth-modal-container {
background-color: #fff;
border-radius: 32rpx;
width: 90%;
max-width: 720rpx;
padding: 60rpx 40rpx 40rpx;
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
border: 2rpx solid rgba(255, 255, 255, 0.8);
box-sizing: border-box;
}
.auth-modal-title {
font-size: 44rpx;
font-weight: bold;
color: #222;
text-align: center;
margin-bottom: 40rpx;
letter-spacing: 1rpx;
}
.auth-modal-content {
font-size: 32rpx;
line-height: 1.6;
color: #555;
text-align: center;
margin-bottom: 50rpx;
padding: 0 20rpx;
width: 100%;
box-sizing: border-box;
word-break: break-word;
}
.auth-modal-buttons {
display: flex;
flex-direction: column;
gap: 20rpx;
padding: 0 20rpx;
width: 100%;
box-sizing: border-box;
}
.auth-primary-button {
background-color: #07c160;
color: #fff;
font-size: 36rpx;
font-weight: 600;
line-height: 1.6;
border-radius: 12rpx;
padding: 32rpx 0;
width: 100%;
box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
transition: all 0.3s ease;
border: none;
margin: 0;
min-width: auto;
}
.auth-primary-button:active {
transform: translateY(2rpx);
box-shadow: 0 3rpx 12rpx rgba(7, 193, 96, 0.5);
}
.auth-primary-button::after {
border: none;
}
.auth-cancel-button {
background-color: #fff;
color: #666;
font-size: 36rpx;
font-weight: 500;
line-height: 1.6;
border-radius: 12rpx;
padding: 32rpx 0;
width: 100%;
border: 1rpx solid #e0e0e0;
transition: all 0.3s ease;
margin: 0;
min-width: auto;
}
.auth-cancel-button:active {
transform: translateY(2rpx);
border-color: #d0d0d0;
}
.auth-cancel-button::after {
border: none;
}
/* 净重件数对应信息样式 */
.weight-quantity-info {
background-color: #ffffff;
margin: 16rpx;
padding: 24rpx;
border-radius: 12rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid #f0f0f0;
}
.wq-title {
font-size: 32rpx;
font-weight: 600;
color: #262626;
margin-bottom: 16rpx;
padding-bottom: 12rpx;
border-bottom: 1rpx solid #f0f0f0;
position: relative;
}
.wq-title::after {
content: '';
position: absolute;
bottom: -1rpx;
left: 0;
width: 60rpx;
height: 4rpx;
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
border-radius: 2rpx;
}
.wq-list {
display: flex;
flex-direction: column;
gap: 12rpx;
}
.wq-item {
background-color: #f8f9fa;
padding: 16rpx 20rpx;
border-radius: 8rpx;
border-left: 4rpx solid #1890ff;
transition: all 0.3s ease;
}
.wq-item:active {
background-color: #e6f7ff;
transform: translateX(4rpx);
}
.wq-text {
font-size: 28rpx;
color: #595959;
line-height: 1.5;
font-weight: 500;
}

13
pages/goods/index.js
View File

@ -210,6 +210,19 @@ Page({
return dateString
},
/**
* 点击货源项跳转
*/
onGoodsItemClick(e) {
const goodsItem = e.currentTarget.dataset.item;
console.log('点击了货源项:', goodsItem);
// 跳转到货源详情页面（goods-update）
wx.navigateTo({
url: `/pages/goods-update/goods-update?productId=${goodsItem.id || goodsItem.productId}&goodsData=${encodeURIComponent(JSON.stringify(goodsItem))}`
});
},
/**
* 加载货源列表
*/

1
pages/goods/index.wxml
View File

@ -79,6 +79,7 @@
wx:for="{{goodsList}}"
wx:key="id"
data-item="{{item}}"
bindtap="onGoodsItemClick"
>
<view class="product-card">
<view class="product-image-wrapper">

2
server-example/server-mysql.js
View File

@ -3866,7 +3866,7 @@ app.post('/api/products/detail', async (req, res) => {
// 查询商品详情 - 排除hidden状态商品，直接使用Product表中的reservedCount字段
const product = await Product.findOne({
attributes: ['productId', 'productName', 'price', 'quantity', 'grossWeight', 'imageUrls', 'created_at', 'specification', 'yolk', 'sourceType', 'supplyStatus', 'producting'],
attributes: ['productId', 'productName', 'price', 'quantity', 'grossWeight', 'imageUrls', 'created_at', 'specification', 'yolk', 'sourceType', 'supplyStatus', 'producting', 'product_contact', 'contact_phone', 'region'],
where: {
productId,
status: { [Sequelize.Op.not]: 'hidden' }

Write Preview
Loading…
Cancel
Save