feat(merch/detail): 优化商品描述展示逻辑
1. 替换原有长按弹窗展示为内嵌展开收起功能 2. 长描述支持自动滚动动画 3. 新增展开收起提示按钮 4. 调整相关布局样式与层级
This commit is contained in:
@@ -23,7 +23,12 @@
|
|||||||
<text class="icox icox-xing"></text>
|
<text class="icox icox-xing"></text>
|
||||||
<text class="icox icox-xing"></text>
|
<text class="icox icox-xing"></text>
|
||||||
</view>
|
</view>
|
||||||
<view class="desc-text" @longpress="showFullDesc">{{ merch.desc }}</view>
|
<view class="desc-wrap">
|
||||||
|
<view class="desc-text" :class="{ 'desc-expanded': isDescExpanded }" :style="{ animation: isDescExpanded && merch.desc && merch.desc.length > 200 ? 'autoScroll 2s ease-in-out' : '' }" @click="toggleDesc">{{ merch.desc }}</view>
|
||||||
|
<view class="expand-tip" v-if="merch.desc && merch.desc.length > 50" @click.stop="toggleDesc">
|
||||||
|
<text class="hint-arrow">{{ isDescExpanded ? '↑ 收起' : '↓ 展开' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -323,7 +328,8 @@ export default {
|
|||||||
headerHeight: 320,
|
headerHeight: 320,
|
||||||
screenWidth: uni.getSystemInfoSync().windowWidth,
|
screenWidth: uni.getSystemInfoSync().windowWidth,
|
||||||
changeStyleDebounce: null,
|
changeStyleDebounce: null,
|
||||||
headerHeightInited: false
|
headerHeightInited: false,
|
||||||
|
isDescExpanded: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mixins: [list],
|
mixins: [list],
|
||||||
@@ -346,15 +352,19 @@ export default {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
showFullDesc() {
|
toggleDesc() {
|
||||||
if (this.merch.desc) {
|
if (this.merch.desc) {
|
||||||
uni.showModal({
|
this.isDescExpanded = !this.isDescExpanded;
|
||||||
title: '商家描述',
|
|
||||||
content: this.merch.desc,
|
|
||||||
showCancel: false
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
handleDescClick() {
|
||||||
|
if (!this.merch.desc) return;
|
||||||
|
this.isDescExpanded = !this.isDescExpanded;
|
||||||
|
},
|
||||||
|
toggleDesc() {
|
||||||
|
if (!this.merch.desc) return;
|
||||||
|
this.isDescExpanded = !this.isDescExpanded;
|
||||||
|
},
|
||||||
initHeaderHeight() {
|
initHeaderHeight() {
|
||||||
if (!this.merch || !this.merch.merch_name) return;
|
if (!this.merch || !this.merch.merch_name) return;
|
||||||
if (this.headerHeightInited) return;
|
if (this.headerHeightInited) return;
|
||||||
@@ -388,6 +398,7 @@ export default {
|
|||||||
/* #ifndef H5 */
|
/* #ifndef H5 */
|
||||||
top: 0;
|
top: 0;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.merch-image-wrap {
|
.merch-image-wrap {
|
||||||
@@ -398,11 +409,15 @@ export default {
|
|||||||
.merch-info {
|
.merch-info {
|
||||||
margin-left: 20rpx;
|
margin-left: 20rpx;
|
||||||
padding-top: 22rpx;
|
padding-top: 22rpx;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.merch-info-wrap {
|
.merch-info-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.merch-name {
|
.merch-name {
|
||||||
@@ -415,12 +430,56 @@ export default {
|
|||||||
color: rgb(255 202 40);
|
color: rgb(255 202 40);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.desc-wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.desc-text {
|
.desc-text {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-expanded {
|
||||||
|
position: relative;
|
||||||
|
overflow-y: auto;
|
||||||
|
text-overflow: inherit;
|
||||||
|
display: block;
|
||||||
|
-webkit-line-clamp: unset;
|
||||||
|
-webkit-box-orient: unset;
|
||||||
|
max-height: 300rpx;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes autoScroll {
|
||||||
|
0% { transform: translateY(0); }
|
||||||
|
30% { transform: translateY(-100rpx); }
|
||||||
|
60% { transform: translateY(-200rpx); }
|
||||||
|
100% { transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-tip {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint-arrow {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .uni-tag--primary.uni-tag--inverted {
|
::v-deep .uni-tag--primary.uni-tag--inverted {
|
||||||
|
|||||||
Reference in New Issue
Block a user