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

修改商品详情的视频格式

Xfy
Trae AI 7 days ago
parent
b45975414e
commit
d70cc56dbb
6 changed files with 332 additions and 76 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. BIN
      images/OIP-C.png
  2. 8
      pages/evaluate2/one.js
  3. 98
      pages/evaluate2/one.wxml
  4. 281
      pages/evaluate2/one.wxss
  5. 12
      pages/goods-detail/goods-detail.wxml
  6. 9
      pages/goods-detail/goods-detail.wxss

BIN
images/OIP-C.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

8
pages/evaluate2/one.js
View File

@ -6,7 +6,13 @@ Page({
error: '',
categories: [],
selectedCategory: '',
showOneKeyLoginModal: false // 是否显示登录弹窗
showOneKeyLoginModal: false, // 是否显示登录弹窗
categoryDescriptions: {
'粉壳': '粉壳蛋由白壳与褐壳蛋鸡杂交而成，蛋壳呈粉红色，表面清洁带白霜。其蛋清浓稠、蛋黄大而饱满，营养丰富且口感细腻',
'绿壳': '绿壳蛋是我国特有珍稀鸡种所产的蛋，具有"五黑一绿"特点（黑毛、黑皮、黑骨、黑内脏，产绿壳蛋）。其蛋黄大、蛋清稠，氨基酸含量比普通鸡蛋高5-10倍，被誉为"保健蛋"',
'褐壳': '褐壳蛋是我国市场上最常见的鸡蛋类型，由洛岛红、新汉夏等褐壳蛋鸡品种产出。蛋壳呈褐色至深褐色，质地厚实耐运输，蛋黄比例大，适合家庭日常烹饪。常见品种有海兰褐、罗曼褐等。',
'土鸡蛋': '土鸡蛋指农家散养鸡在自然环境中觅食所产的蛋，个头较小、蛋壳较薄，蛋清粘稠、蛋黄饱满。口感风味浓郁。'
}
},
onLoad(options) {
let productName = '';

98
pages/evaluate2/one.wxml
View File

@ -51,21 +51,99 @@
<view
wx:for="{{categories}}"
wx:key="item"
class="category-card"
class="category-card {{item === '粉壳' ? 'pink-shell-card' : item === '绿壳' ? 'green-shell-card' : item === '褐壳' ? 'brown-shell-card' : 'free-range-card'}}"
data-category="{{item}}"
bindtap="selectCategory"
>
<!-- 标签系统 -->
<view class="card-labels">
<view class="feature-label">
<text class="feature-label-text">{{item === '绿壳' ? '珍稀品种' : item === '粉壳' ? '杂交品种' : item === '褐壳' ? '常见品种' : '农家散养'}}</text>
</view>
<view class="category-label">
<text class="category-label-text">{{item}}系列</text>
</view>
</view>
<!-- 产品图片区域 -->
<view class="product-image-container">
<image
src="../../images/OIP-C.png"
mode="aspectFill"
class="product-image"
/>
</view>
<!-- 文字信息区域 -->
<view class="card-content">
<text class="card-desc">点击选择此类型查看相关商品</text>
<view class="card-body">
<text class="category-name">{{item}}</text>
<view class="category-image">
<image
src="https://via.placeholder.com/120x120?text={{item}}"
mode="aspectFill"
class="category-img"
/>
<text class="product-title">{{item}}鸡蛋</text>
<text class="product-description">{{categoryDescriptions[item] || '点击选择此类型查看相关商品'}}</text>
<!-- 卖点标签 -->
<view class="selling-points">
<!-- 粉壳鸡蛋卖点 -->
<view wx:if="{{item === '粉壳'}}" class="selling-point">
<text class="selling-point-icon">🧬</text>
<text class="selling-point-text">杂交品种</text>
</view>
<view wx:if="{{item === '粉壳'}}" class="selling-point">
<text class="selling-point-icon">🌸</text>
<text class="selling-point-text">粉红蛋壳</text>
</view>
<view wx:if="{{item === '粉壳'}}" class="selling-point">
<text class="selling-point-icon">👅</text>
<text class="selling-point-text">口感细腻</text>
</view>
<!-- 绿壳鸡蛋卖点 -->
<view wx:if="{{item === '绿壳'}}" class="selling-point">
<text class="selling-point-icon">🍃</text>
<text class="selling-point-text">五黑一绿</text>
</view>
<view wx:if="{{item === '绿壳'}}" class="selling-point">
<text class="selling-point-icon">💪</text>
<text class="selling-point-text">高氨基酸</text>
</view>
<view wx:if="{{item === '绿壳'}}" class="selling-point">
<text class="selling-point-icon">🏥</text>
<text class="selling-point-text">保健功效</text>
</view>
<!-- 褐壳鸡蛋卖点 -->
<view wx:if="{{item === '褐壳'}}" class="selling-point">
<text class="selling-point-icon">🔥</text>
<text class="selling-point-text">常见品种</text>
</view>
<view wx:if="{{item === '褐壳'}}" class="selling-point">
<text class="selling-point-icon">📦</text>
<text class="selling-point-text">耐运输</text>
</view>
<view wx:if="{{item === '褐壳'}}" class="selling-point">
<text class="selling-point-icon">🍳</text>
<text class="selling-point-text">日常烹饪</text>
</view>
<!-- 土鸡蛋卖点 -->
<view wx:if="{{item === '土鸡蛋'}}" class="selling-point">
<text class="selling-point-icon">🌾</text>
<text class="selling-point-text">自然觅食</text>
</view>
<view wx:if="{{item === '土鸡蛋'}}" class="selling-point">
<text class="selling-point-icon">🥚</text>
<text class="selling-point-text">蛋黄饱满</text>
</view>
<view wx:if="{{item === '土鸡蛋'}}" class="selling-point">
<text class="selling-point-icon">🥘</text>
<text class="selling-point-text">风味浓郁</text>
</view>
</view>
<!-- 按钮区域 -->
<view class="card-footer">
<button class="select-button" bindtap="selectCategory" data-category="{{item}}">
<text class="select-button-icon">→</text>
<text class="select-button-text">选择</text>
</button>
</view>
</view>
</view>

281
pages/evaluate2/one.wxss
View File

@ -404,109 +404,284 @@
box-sizing: border-box;
}
/* 卡片基础框架 */
.category-card {
background: #ffffff;
border-radius: 12rpx;
padding: 24rpx;
border-radius: 20rpx;
padding: 0 32rpx 32rpx;
cursor: pointer;
min-height: 160rpx;
margin-bottom: 20rpx;
border: 1rpx solid #f0f0f0;
min-height: 600rpx;
margin-bottom: 32rpx;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
box-shadow: 0 8rpx 16rpx rgba(0,0,0,0.08);
position: relative;
overflow: hidden;
}
.category-card:hover {
transform: translateY(-2rpx);
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
border-color: #e0e0e0;
transform: translateY(-8rpx);
box-shadow: 0 12rpx 24rpx rgba(0,0,0,0.12);
}
.card-content {
width: 100%;
/* 品类专属背景 */
.pink-shell-card {
background: linear-gradient(135deg, #FECDD3 0%, #FDE2E2 100%);
}
.card-desc {
.green-shell-card {
background: linear-gradient(135deg, #D1FAE5 0%, #E6F7EE 100%);
}
.brown-shell-card {
background: linear-gradient(135deg, #FEF3C7 0%, #FFF9E6 100%);
}
.free-range-card {
background: linear-gradient(135deg, #FEF3C7 0%, #FFF9E6 100%);
}
/* 标签系统 */
.card-labels {
position: absolute;
top: 20rpx;
left: 20rpx;
right: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 2;
}
.feature-label {
background: rgba(255, 255, 255, 0.9);
padding: 8rpx 16rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}
.feature-label-text {
font-size: 20rpx;
color: #999999;
text-align: right;
margin-bottom: 16rpx;
line-height: 1.4;
font-weight: 500;
color: #1E293B;
}
.card-body {
.category-label {
background: rgba(0, 0, 0, 0.7);
padding: 8rpx 16rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}
.category-name {
font-size: 30rpx;
.category-label-text {
font-size: 20rpx;
font-weight: 500;
color: #333333;
line-height: 1.4;
word-break: break-word;
flex: 1;
color: #FFFFFF;
}
.category-image {
width: 100rpx;
height: 100rpx;
border-radius: 4rpx;
/* 产品图片区域 */
.product-image-container {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 300rpx;
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 1;
overflow: hidden;
background: #f5f5f5;
border: 1rpx solid #e0e0e0;
}
.category-img {
.product-image {
width: 100%;
height: 100%;
border-radius: 0;
object-fit: cover;
border: none;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.12);
transform: none;
}
/* 文字信息区域 */
.card-content {
width: 100%;
display: flex;
flex-direction: column;
gap: 16rpx;
position: relative;
z-index: 2;
padding-top: 320rpx;
padding-bottom: 20rpx;
}
.product-title {
font-size: 36rpx;
font-weight: 700;
color: #1E293B;
line-height: 48rpx;
text-align: center;
margin-bottom: 8rpx;
}
/* 响应式设计 - 分类区域 */
.product-description {
font-size: 24rpx;
font-weight: 400;
color: #64748B;
line-height: 36rpx;
text-align: center;
margin-bottom: 16rpx;
padding: 0 16rpx;
}
/* 卖点标签 */
.selling-points {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12rpx;
margin: 16rpx 0 24rpx;
}
.selling-point {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.8);
padding: 8rpx 16rpx;
border-radius: 20rpx;
box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.05);
}
.selling-point-icon {
font-size: 20rpx;
margin-right: 8rpx;
}
.selling-point-text {
font-size: 20rpx;
font-weight: 400;
color: #475569;
}
/* 按钮区域 */
.card-footer {
display: flex;
justify-content: center;
margin-top: 16rpx;
}
.select-button {
background: #4A90E2;
color: #FFFFFF;
border: none;
border-radius: 24rpx;
padding: 12rpx 32rpx;
font-size: 24rpx;
font-weight: 600;
display: flex;
align-items: center;
gap: 8rpx;
box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);
transition: all 0.3s ease;
}
.select-button:hover {
background: #3B82F6;
transform: translateY(-2rpx);
box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.4);
}
.select-button-icon {
font-size: 20rpx;
font-weight: 600;
}
.select-button-text {
font-size: 24rpx;
font-weight: 600;
}
/* 响应式设计 */
@media (max-width: 750rpx) {
.category-card {
padding: 20rpx;
min-height: 140rpx;
margin-bottom: 16rpx;
padding: 0 24rpx 24rpx;
min-height: 550rpx;
margin-bottom: 24rpx;
}
.card-desc {
font-size: 18rpx;
margin-bottom: 12rpx;
.product-image-container {
height: 280rpx;
}
.category-name {
font-size: 28rpx;
.card-content {
padding-top: 300rpx;
}
.product-title {
font-size: 32rpx;
line-height: 40rpx;
}
.product-description {
font-size: 22rpx;
line-height: 32rpx;
}
.selling-point {
padding: 6rpx 12rpx;
}
.selling-point-text {
font-size: 18rpx;
}
.category-image {
width: 90rpx;
height: 90rpx;
.select-button {
padding: 10rpx 28rpx;
font-size: 22rpx;
}
}
@media (max-width: 414rpx) {
.category-card {
padding: 16rpx;
min-height: 120rpx;
margin-bottom: 12rpx;
padding: 0 20rpx 20rpx;
min-height: 500rpx;
margin-bottom: 20rpx;
}
.card-desc {
font-size: 16rpx;
margin-bottom: 10rpx;
.product-image-container {
height: 240rpx;
}
.category-name {
font-size: 24rpx;
.card-content {
padding-top: 260rpx;
}
.product-title {
font-size: 28rpx;
line-height: 36rpx;
}
.product-description {
font-size: 20rpx;
line-height: 28rpx;
}
.selling-point {
padding: 4rpx 10rpx;
}
.selling-point-text {
font-size: 16rpx;
}
.category-image {
width: 80rpx;
height: 80rpx;
.select-button {
padding: 8rpx 24rpx;
font-size: 20rpx;
}
}

12
pages/goods-detail/goods-detail.wxml
View File

@ -40,7 +40,7 @@
wx:if="{{item.type === 'video'}}"
src="{{item.url}}"
class="slider-media"
mode="aspectFill"
mode="aspectFit"
show-center-play-btn="{{true}}"
show-play-btn="{{false}}"
controls="{{true}}"
@ -51,7 +51,7 @@
show-mute-btn="{{true}}"
enable-progress-gesture="{{true}}"
enable-play-gesture="{{true}}"
object-fit="fill"
object-fit="contain"
poster="" >
</video>
<!-- 图片处理 -->
@ -340,14 +340,14 @@
wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}"
class="product-media"
src="{{item.mediaItems[0].url}}"
mode="aspectFill"
mode="aspectFit"
show-center-play-btn="{{true}}"
show-play-btn="{{false}}"
controls="{{true}}"
autoplay="{{true}}"
loop="{{true}}"
muted="{{true}}"
object-fit="fill"
object-fit="contain"
poster=""
></video>
<!-- 图片处理 -->
@ -394,14 +394,14 @@
wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}"
class="product-media"
src="{{item.mediaItems[0].url}}"
mode="aspectFill"
mode="aspectFit"
show-center-play-btn="{{true}}"
show-play-btn="{{false}}"
controls="{{true}}"
autoplay="{{true}}"
loop="{{true}}"
muted="{{true}}"
object-fit="fill"
object-fit="contain"
poster=""
></video>
<!-- 图片处理 -->

9
pages/goods-detail/goods-detail.wxss
View File

@ -130,12 +130,9 @@
/* 视频样式增强 */
video.slider-media {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: fill;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 1;
}

Write Preview
Loading…
Cancel
Save