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

优化规格信息显示：调整布局、减小字体、移除元字、增加件数空间

pull/11/head
Default User 2 months ago
parent
c21423050e
commit
6c167417b8
3 changed files with 119 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      pages/goods-update/goods-update.wxml
  2. 67
      pages/goods-update/goods-update.wxss
  3. 107
      pages/goods/index.js

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

@ -79,23 +79,23 @@
<!-- 规格信息 --> <!-- 规格信息 -->
<view class="weight-quantity-info" wx:if="{{(goodsDetail.weightQuantityData && goodsDetail.weightQuantityData.length > 0) || goodsDetail.specInfo || goodsDetail.spec}}"> <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-title">规格信息</view>
<view class="wq-grid-list"> <view class="wq-block-list">
<block wx:if="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData.length > 0}}"> <block wx:if="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData.length > 0}}">
<view class="wq-grid-row" wx:for="{{goodsDetail.weightQuantityData}}" wx:key="index"> <view class="wq-block-row" wx:for="{{goodsDetail.weightQuantityData}}" wx:key="index">
<text class="grid-item weight-spec-item">{{item.weightSpec}}</text> <view class="wq-block spec-block"><text class="block-text weight-spec-text">{{item.weightSpec}}</text></view>
<text class="grid-item quantity-item">【{{item.quantity}}】</text> <view class="wq-block quantity-block"><text class="block-text quantity-text">【{{item.quantity}}】</text></view>
<text class="grid-item costprice-item" wx:if="{{item.costprice && item.costprice !== '暂无'}}">¥{{item.costprice}}元</text> <view class="wq-block costprice-block"><text class="block-text costprice-text" wx:if="{{item.costprice && item.costprice !== '暂无'}}">¥{{item.costprice}}</text></view>
<text class="grid-item price-item" wx:if="{{item.price && item.price !== '暂无'}}">¥{{item.price}}元</text> <view class="wq-block price-block"><text class="block-text price-text" wx:if="{{item.price && item.price !== '暂无'}}">¥{{item.price}}</text></view>
</view> </view>
</block> </block>
<block wx:elif="{{goodsDetail.specInfo && goodsDetail.specInfo.length > 0}}"> <block wx:elif="{{goodsDetail.specInfo && goodsDetail.specInfo.length > 0}}">
<view class="wq-grid-row" wx:for="{{goodsDetail.specInfo}}" wx:key="index"> <view class="wq-block-row" wx:for="{{goodsDetail.specInfo}}" wx:key="index">
<text class="grid-item weight-spec-item" colspan="4">{{item}}</text> <view class="wq-block spec-block" style="flex: 0 0 100%;"><text class="block-text weight-spec-text">{{item}}</text></view>
</view> </view>
</block> </block>
<block wx:else> <block wx:else>
<view class="wq-grid-row"> <view class="wq-block-row">
<text class="grid-item weight-spec-item" colspan="4">{{goodsDetail.spec || '暂无规格信息'}}</text> <view class="wq-block spec-block" style="flex: 0 0 100%;"><text class="block-text weight-spec-text">{{goodsDetail.spec || '暂无规格信息'}}</text></view>
</view> </view>
</block> </block>
</view> </view>

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

@ -1495,50 +1495,83 @@ video.slider-media .wx-video-volume-icon {
gap: 12rpx; gap: 12rpx;
} }
.wq-grid-row { .wq-block-list {
display: flex;
flex-direction: column;
gap: 12rpx;
overflow: hidden;
}
.wq-block-row {
background-color: #f8f9fa; background-color: #f8f9fa;
padding: 16rpx 20rpx; padding: 16rpx 20rpx;
border-radius: 8rpx; border-radius: 8rpx;
border-left: 4rpx solid #1890ff; border-left: 4rpx solid #1890ff;
transition: all 0.3s ease; transition: all 0.3s ease;
display: grid; display: flex;
grid-template-columns: 1fr auto auto auto;
gap: 12rpx;
align-items: center; align-items: center;
gap: 30rpx;
flex-wrap: nowrap; flex-wrap: nowrap;
white-space: nowrap; white-space: nowrap;
width: 100%;
box-sizing: border-box;
} }
.wq-grid-row:active { .wq-block-row:active {
background-color: #e6f7ff; background-color: #e6f7ff;
transform: translateX(4rpx); transform: translateX(4rpx);
} }
.grid-item { .wq-block {
font-size: 36rpx; display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
overflow: hidden;
}
/* 固定宽度块 */
.spec-block {
flex: 0 0 150rpx;
}
.quantity-block {
flex: 0 0 180rpx;
}
.costprice-block {
flex: 0 0 140rpx;
}
.price-block {
flex: 0 0 140rpx;
}
.block-text {
font-size: 32rpx;
line-height: 1.5; line-height: 1.5;
font-weight: 500; font-weight: 500;
vertical-align: middle;
display: inline-block; display: inline-block;
align-self: center; padding: 0;
justify-self: start; margin: 0;
box-sizing: border-box;
overflow: visible;
white-space: nowrap;
} }
.weight-spec-item { .weight-spec-text {
color: #595959; color: #595959;
justify-self: start;
} }
.quantity-item { .quantity-text {
color: #595959; color: #595959;
justify-self: start;
} }
.costprice-item { .costprice-text {
color: #595959; color: #595959;
justify-self: start;
} }
.price-item { .price-text {
color: #ff4d4f; color: #ff4d4f;
justify-self: start;
} }

107
pages/goods/index.js
View File

@ -317,55 +317,66 @@ Page({
let newGoodsList = res.products || [] let newGoodsList = res.products || []
// 格式化创建时间并处理创建者信息 // 格式化创建时间并处理创建者信息
newGoodsList = newGoodsList.map((item, index) => { newGoodsList = newGoodsList.map((item, index) => {
// 详细日志，查看每个产品的seller信息 // 详细日志，查看每个产品的seller信息
console.log(`产品${index}的seller信息:`) console.log(`产品${index}的seller信息:`)
console.log(`- seller对象:`, item.seller) console.log(`- seller对象:`, item.seller)
console.log(`- seller.nickName:`, item.seller?.nickName) console.log(`- seller.nickName:`, item.seller?.nickName)
console.log(`- seller.name:`, item.seller?.name) console.log(`- seller.name:`, item.seller?.name)
console.log(`- seller完整结构:`, JSON.stringify(item.seller)) console.log(`- seller完整结构:`, JSON.stringify(item.seller))
// 确定creatorName - 只使用nickName和sellerNickName字段，不使用name字段 // 确定creatorName - 只使用nickName和sellerNickName字段，不使用name字段
// 详细日志，查看seller对象的完整结构和各个字段值 // 详细日志，查看seller对象的完整结构和各个字段值
console.log('seller对象完整结构:', JSON.stringify(item.seller)) console.log('seller对象完整结构:', JSON.stringify(item.seller))
console.log('seller.nickName:', item.seller?.nickName) console.log('seller.nickName:', item.seller?.nickName)
console.log('seller.sellerNickName:', item.seller?.sellerNickName) console.log('seller.sellerNickName:', item.seller?.sellerNickName)
const creatorName = item.seller?.nickName || item.seller?.sellerNickName || '未知' const creatorName = item.seller?.nickName || item.seller?.sellerNickName || '未知'
console.log('creatorName获取结果:', creatorName) console.log('creatorName获取结果:', creatorName)
// 处理媒体URL，添加类型信息 // 处理媒体URL，添加类型信息
const imageUrls = item.imageUrls || item.images || [] const imageUrls = item.imageUrls || item.images || []
const formattedImageUrls = Array.isArray(imageUrls) ? imageUrls : [imageUrls] const formattedImageUrls = Array.isArray(imageUrls) ? imageUrls : [imageUrls]
const mediaItems = formattedImageUrls.map(url => ({ const mediaItems = formattedImageUrls.map(url => ({
url: url, url: url,
type: isVideoUrl(url) ? 'video' : 'image' type: isVideoUrl(url) ? 'video' : 'image'
})) }))
// 处理商品状态，将已下架的商品标记为售空 // 处理商品状态，将已下架的商品标记为售空
let status = item.status let status = item.status
// 检查是否为售空状态 // 检查是否为售空状态
const isSoldOut = status === 'sold_out' || const isSoldOut = status === 'sold_out' ||
status === 'sold' || status === 'sold' ||
status === 'out_of_stock' || status === 'out_of_stock' ||
(item.supplyStatus && item.supplyStatus.includes('售空')); (item.supplyStatus && item.supplyStatus.includes('售空'));
// 如果商品是售空状态，则标记为sold_out // 如果商品是售空状态，则标记为sold_out
if (isSoldOut) { if (isSoldOut) {
status = 'sold_out' status = 'sold_out'
} else if (status !== 'published') { } else if (status !== 'published') {
// 如果不是已上架状态且不是售空状态，仍然标记为已上架，确保预售和现货商品能正常显示 // 如果不是已上架状态且不是售空状态，仍然标记为已上架，确保预售和现货商品能正常显示
status = 'published' status = 'published'
} }
return { // 处理价格，只显示第一个规格的价格
...item, let processedPrice = item.price;
status: status, // 更新商品状态 if (processedPrice && typeof processedPrice === 'string') {
formattedCreatedAt: this.formatDateTime(item.created_at || item.createTime), // 支持多种逗号分隔符：英文逗号、中文逗号、全角逗号
creatorName: creatorName, const priceArray = processedPrice.split(/[,，、]/).map(p => p.trim()).filter(p => p);
imageUrls: formattedImageUrls, if (priceArray.length > 0) {
mediaItems: mediaItems processedPrice = priceArray[0];
} }
}) }
return {
...item,
status: status, // 更新商品状态
price: processedPrice, // 更新为第一个规格的价格
formattedCreatedAt: this.formatDateTime(item.created_at || item.createTime),
creatorName: creatorName,
imageUrls: formattedImageUrls,
mediaItems: mediaItems
}
})
// 应用筛选条件和搜索过滤 // 应用筛选条件和搜索过滤
const originalList = [...newGoodsList] const originalList = [...newGoodsList]

Write Preview
Loading…
Cancel
Save