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

优化界面比价页面

Xfy
User 5 days ago
parent
4419f12566
commit
4b75c66425
3 changed files with 55 additions and 15 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. 33
      pages/compare_price/index.js
  2. 24
      pages/compare_price/index.wxml
  3. 13
      pages/compare_price/index.wxss

33
pages/compare_price/index.js
View File

@ -32,6 +32,17 @@ function processMediaUrls(urls) {
}); });
} }
// 处理规格信息，将多个净重信息分割成数组
function processSpecifications(spec) {
if (!spec || typeof spec !== 'string') {
return [];
}
// 分割规格字符串，支持多种分隔符
const specs = spec.split(/[,，、]/).map(s => s.trim()).filter(s => s);
return specs;
}
Page({ Page({
data: { data: {
// 页面数据 // 页面数据
@ -296,6 +307,18 @@ Page({
} }
} }
// 处理规格信息，将多个净重信息分割成数组
item.processedSpecs = [];
if (item.specification) {
item.processedSpecs = processSpecifications(item.specification);
} else if (item.weightSpec) {
item.processedSpecs = processSpecifications(item.weightSpec);
} else if (item.grossWeight) {
item.processedSpecs = processSpecifications(item.grossWeight);
} else if (selectedSpec) {
item.processedSpecs = processSpecifications(selectedSpec);
}
// 处理库存显示逻辑 // 处理库存显示逻辑
const quantity = item.quantity || item.minOrder || item.stock || item.inventory || item.availableStock || item.totalAvailable; const quantity = item.quantity || item.minOrder || item.stock || item.inventory || item.availableStock || item.totalAvailable;
const totalStock = quantity; const totalStock = quantity;
@ -491,6 +514,16 @@ Page({
}); });
} }
// 处理规格信息，将多个净重信息分割成数组
item.processedSpecs = [];
if (item.specification) {
item.processedSpecs = processSpecifications(item.specification);
} else if (item.weightSpec) {
item.processedSpecs = processSpecifications(item.weightSpec);
} else if (item.grossWeight) {
item.processedSpecs = processSpecifications(item.grossWeight);
}
// 处理库存显示逻辑（参考首页的处理方式） // 处理库存显示逻辑（参考首页的处理方式）
const quantity = item.quantity || item.minOrder || item.stock || item.inventory || item.availableStock || item.totalAvailable; const quantity = item.quantity || item.minOrder || item.stock || item.inventory || item.availableStock || item.totalAvailable;
const totalStock = quantity; const totalStock = quantity;

24
pages/compare_price/index.wxml
View File

@ -23,7 +23,7 @@
</view> </view>
<view wx:else> <view wx:else>
<view wx:if="{{(selectedOption || selectedCategory)}}" style="margin-top: 10rpx; width: 100%; box-sizing: border-box;"> <view wx:if="{{(selectedOption || selectedCategory)}}" style="margin-top: 10rpx; width: 100%; box-sizing: border-box; padding: 0 20rpx;">
<!-- 当前商品信息 --> <!-- 当前商品信息 -->
<view wx:if="{{currentGoods}}" style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx; width: 100%; box-sizing: border-box;"> <view wx:if="{{currentGoods}}" style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx; width: 100%; box-sizing: border-box;">
<text style="font-size: 30rpx; font-weight: bold; color: #333; text-align: center; display: block; margin-bottom: 10rpx;">当前商品</text> <text style="font-size: 30rpx; font-weight: bold; color: #333; text-align: center; display: block; margin-bottom: 10rpx;">当前商品</text>
@ -40,13 +40,13 @@
</view> </view>
<!-- 商品信息 --> <!-- 商品信息 -->
<view style="display: flex; flex-direction: column; gap: 12rpx;"> <view style="display: flex; flex-direction: column; gap: 12rpx;">
<view style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;"> <view style="display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap;">
<view style="display: flex; align-items: center; gap: 15rpx; flex: 1;"> <view style="display: flex; align-items: center; gap: 15rpx; flex: 1; overflow: hidden;">
<text style="font-size: 36rpx; font-weight: bold; color: #333; word-break: break-word;">{{currentGoods.name}}</text> <text style="font-size: 36rpx; font-weight: bold; color: #333; word-break: break-word; flex-shrink: 0;">{{currentGoods.name}}</text>
<view style="display: flex; gap: 15rpx; flex-wrap: wrap;"> <view style="display: flex; gap: 15rpx; overflow-x: auto; padding-bottom: 4rpx;">
<view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666;">{{selectedSpec}}</view> <view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666; flex-shrink: 0;">{{selectedSpec}}</view>
<view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666;">{{currentGoods.yolk || '无'}}</view> <view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666; flex-shrink: 0;">{{currentGoods.yolk || '无'}}</view>
<view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666;">库存:{{currentGoods.totalStock || '充足'}}</view> <view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666; flex-shrink: 0;">库存:{{currentGoods.totalStock || '充足'}}</view>
</view> </view>
</view> </view>
<view style="display: flex; flex-direction: column; align-items: flex-end; margin-left: 12rpx; flex-shrink: 0;"> <view style="display: flex; flex-direction: column; align-items: flex-end; margin-left: 12rpx; flex-shrink: 0;">
@ -131,9 +131,9 @@
{{item.sourceType || ''}} {{item.sourceType || ''}}
</view> </view>
<text class="product-title">{{item.name}}</text> <text class="product-title">{{item.name}}</text>
<view style="display: flex; flex-wrap: nowrap; gap: 8rpx; margin-top: 8rpx; overflow-x: auto; padding-bottom: 8rpx;"> <view style="display: flex; flex-wrap: wrap; gap: 8rpx; margin-top: 8rpx; padding-bottom: 8rpx;">
<view wx:if="{{item.category || selectedCategory}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.category || selectedCategory || '无'}}</view> <view wx:if="{{item.category || selectedCategory}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.category || selectedCategory || '无'}}</view>
<view wx:if="{{item.specification || item.weightSpec || item.grossWeight || selectedSpec}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.specification || item.weightSpec || item.grossWeight || selectedSpec || '无'}}</view> <view wx:for="{{item.processedSpecs}}" wx:key="index" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item}}</view>
<view wx:if="{{item.yolk}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.yolk}}</view> <view wx:if="{{item.yolk}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.yolk}}</view>
</view> </view>
</view> </view>
@ -213,9 +213,9 @@
{{item.sourceType || ''}} {{item.sourceType || ''}}
</view> </view>
<text class="product-title">{{item.name}}</text> <text class="product-title">{{item.name}}</text>
<view style="display: flex; flex-wrap: nowrap; gap: 8rpx; margin-top: 8rpx; overflow-x: auto; padding-bottom: 8rpx;"> <view style="display: flex; flex-wrap: wrap; gap: 8rpx; margin-top: 8rpx; padding-bottom: 8rpx;">
<view wx:if="{{item.category || selectedCategory}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.category || selectedCategory || '无'}}</view> <view wx:if="{{item.category || selectedCategory}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.category || selectedCategory || '无'}}</view>
<view wx:if="{{item.specification || item.weightSpec || item.grossWeight || selectedSpec}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.specification || item.weightSpec || item.grossWeight || selectedSpec || '无'}}</view> <view wx:for="{{item.processedSpecs}}" wx:key="index" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item}}</view>
<view wx:if="{{item.yolk}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.yolk}}</view> <view wx:if="{{item.yolk}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.yolk}}</view>
</view> </view>
</view> </view>

13
pages/compare_price/index.wxss
View File

@ -4,9 +4,9 @@
/* 瀑布流容器 */ /* 瀑布流容器 */
.waterfall-container { .waterfall-container {
display: flex; display: flex;
gap: 8rpx; gap: 16rpx;
width: 100%; width: 100%;
padding: 0; padding: 0 10rpx;
box-sizing: border-box; box-sizing: border-box;
} }
@ -16,6 +16,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16rpx; gap: 16rpx;
min-width: 0;
} }
/* 瀑布流商品项 */ /* 瀑布流商品项 */
@ -43,6 +44,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
box-sizing: border-box;
} }
.product-card:active { .product-card:active {
@ -122,6 +124,7 @@
justify-content: space-between; justify-content: space-between;
gap: 10rpx; gap: 10rpx;
box-sizing: border-box; box-sizing: border-box;
width: 100%;
} }
/* 第一行布局：货源类型 | 产品名称 | 货源描述 */ /* 第一行布局：货源类型 | 产品名称 | 货源描述 */
@ -136,8 +139,12 @@
font-size: 26rpx; font-size: 26rpx;
color: #000000; color: #000000;
font-weight: 700; font-weight: 700;
display: inline; display: inline-block;
margin-right: 8rpx; margin-right: 8rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
} }
/* 商品描述 */ /* 商品描述 */

Write Preview
Loading…
Cancel
Save