diff --git a/pages_promotion/merch/detail.vue b/pages_promotion/merch/detail.vue index 5dd2346..a0e60dd 100644 --- a/pages_promotion/merch/detail.vue +++ b/pages_promotion/merch/detail.vue @@ -23,7 +23,12 @@ - {{ merch.desc }} + + {{ merch.desc }} + + {{ isDescExpanded ? '↑ 收起' : '↓ 展开' }} + + @@ -323,7 +328,8 @@ export default { headerHeight: 320, screenWidth: uni.getSystemInfoSync().windowWidth, changeStyleDebounce: null, - headerHeightInited: false + headerHeightInited: false, + isDescExpanded: false }; }, mixins: [list], @@ -346,15 +352,19 @@ export default { } }); }, - showFullDesc() { + toggleDesc() { if (this.merch.desc) { - uni.showModal({ - title: '商家描述', - content: this.merch.desc, - showCancel: false - }); + this.isDescExpanded = !this.isDescExpanded; } }, + handleDescClick() { + if (!this.merch.desc) return; + this.isDescExpanded = !this.isDescExpanded; + }, + toggleDesc() { + if (!this.merch.desc) return; + this.isDescExpanded = !this.isDescExpanded; + }, initHeaderHeight() { if (!this.merch || !this.merch.merch_name) return; if (this.headerHeightInited) return; @@ -388,6 +398,7 @@ export default { /* #ifndef H5 */ top: 0; /* #endif */ + z-index: 2; } .merch-image-wrap { @@ -398,11 +409,15 @@ export default { .merch-info { margin-left: 20rpx; padding-top: 22rpx; + position: relative; } .merch-info-wrap { display: flex; padding: 20rpx; + position: relative; + z-index: 10; + background: #fff; } .merch-name { @@ -415,12 +430,56 @@ export default { color: rgb(255 202 40); } +.desc-wrap { + display: flex; + flex-wrap: nowrap; + align-items: flex-end; + position: relative; +} + .desc-text { + flex: 1; + min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -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 {