From 7dbe13ff4c1b5784aa285faf6b5248d2de25e9ce Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期五, 10 十月 2025 16:22:45 +0800
Subject: [PATCH] 获取定制模板信息
---
pages/ActivityPopup/ActivityPopup.vue | 191 ++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 169 insertions(+), 22 deletions(-)
diff --git a/pages/ActivityPopup/ActivityPopup.vue b/pages/ActivityPopup/ActivityPopup.vue
index b411c9c..96211e0 100644
--- a/pages/ActivityPopup/ActivityPopup.vue
+++ b/pages/ActivityPopup/ActivityPopup.vue
@@ -14,15 +14,43 @@
</view>
<!-- 娲诲姩鍥剧墖 -->
- <view class="activity-img">
- <image :src="activityImage" mode="widthFix" class="popup-img"></image>
+ <scroll-view
+ scroll-y="true"
+ class="activity-img-scroll"
+ :show-scrollbar="false"
+ :enhanced="true">
+ <view class="activity-img">
+ <image
+ :src="activityImage"
+ mode="widthFix"
+ class="popup-img"
+ :style="{ width: '100%' }"
+ @load="onImageLoad"
+ @error="onImageError">
+ </image>
+ </view>
+ </scroll-view>
+
+ <!-- 娲诲姩鏍囬锛堝浐瀹氭樉绀猴級 -->
+ <view class="activity-title-fixed">
+ <h3 class="activity-title">{{ activityTitle }}</h3>
</view>
- <!-- 娲诲姩淇℃伅 -->
- <view class="activity-info">
- <h3 class="activity-title">{{ activityTitle }}</h3>
- <p class="activity-desc">{{ activityDesc }}</p>
+ <!-- 鍙粴鍔ㄧ殑娲诲姩鎻忚堪 -->
+ <scroll-view
+ scroll-y="true"
+ class="activity-content-scroll"
+ :show-scrollbar="false"
+ :enhanced="true">
+ <view class="activity-content">
+ <p class="activity-desc">{{ activityDesc }}</p>
+ </view>
+
+ </scroll-view>
+
+ <!-- 鍥哄畾搴曢儴锛氬�掕鏃跺拰鍙備笌鎸夐挳 -->
+ <view class="activity-bottom">
<!-- 鍊掕鏃讹紙濡傛灉闇�瑕侊級 -->
<view class="countdown" v-if="showCountdown">
<text class="countdown-text">娲诲姩鍓╀綑鏃堕棿锛�</text>
@@ -100,14 +128,28 @@
hours: '00',
minutes: '00',
seconds: '00',
- countdownTimer: null
+ countdownTimer: null,
+ // 鍥剧墖鐩稿叧鏁版嵁
+ imageWidth: 600, // 鍔ㄦ�佽绠楃殑瀹藉害锛坮px锛�
+ imageHeight: 300, // 鍔ㄦ�佽绠楃殑楂樺害锛坮px锛�
+ originalImageWidth: 0, // 鍘熷浘瀹藉害锛坧x锛�
+ originalImageHeight: 0, // 鍘熷浘楂樺害锛坧x锛�
+ containerWidth: 600, // 寮圭獥瀹瑰櫒瀹藉害锛坮px锛�
+ maxImageHeight: 500 // 鍥剧墖鏈�澶ч珮搴﹂檺鍒讹紙rpx锛�
};
},
watch: {
show(newVal) {
console.log("寮圭獥鐩戝惉鍙樺寲",newVal)
- if (newVal && this.showCountdown) {
- this.startCountdown();
+ if (newVal) {
+ // 寮圭獥鏄剧ず鏃堕噸鏂拌幏鍙栧鍣ㄥ搴﹀苟璁＄畻鍥剧墖灏哄
+ this.$nextTick(() => {
+ this.getContainerWidth();
+ });
+
+ if (this.showCountdown) {
+ this.startCountdown();
+ }
} else if (!newVal && this.countdownTimer) {
clearInterval(this.countdownTimer);
this.countdownTimer = null;
@@ -117,9 +159,77 @@
mounted() {
console.log('缁勪欢宸叉寕杞斤紝姝ゆ椂鍙互璁块棶 props 鍜� DOM');
console.log('褰撳墠 show 鐘舵�侊細', this.show); // 鍙互鎵撳嵃 props 涓殑 show
-
+
+ // 鑾峰彇瀹瑰櫒瀹藉害
+ this.getContainerWidth();
},
methods: {
+ // 鑾峰彇瀹瑰櫒瀹藉害
+ getContainerWidth() {
+ this.$nextTick(() => {
+ // 鍒涘缓鏌ヨ瀵硅薄
+ const query = uni.createSelectorQuery().in(this);
+ query.select('.popup-content').boundingClientRect((data) => {
+ if (data && data.width) {
+ // 灏唒x杞崲涓簉px锛堣�冭檻璁惧鍍忕礌姣旓級
+ const systemInfo = uni.getSystemInfoSync();
+ const screenWidth = systemInfo.screenWidth;
+ const rpxRatio = 750 / screenWidth; // rpx涓巔x鐨勮浆鎹㈡瘮渚�
+ this.containerWidth = Math.round(data.width * rpxRatio);
+
+ console.log(`瀹瑰櫒瀹藉害鑾峰彇鎴愬姛: ${data.width}px -> ${this.containerWidth}rpx`);
+
+ // 濡傛灉鍥剧墖宸茬粡鍔犺浇锛岄噸鏂拌绠楀昂瀵�
+ if (this.originalImageWidth > 0 && this.originalImageHeight > 0) {
+ this.calculateImageSize();
+ }
+ } else {
+ console.warn('鏃犳硶鑾峰彇瀹瑰櫒瀹藉害锛屼娇鐢ㄩ粯璁ゅ��');
+ this.containerWidth = 600; // 榛樿瀹藉害
+ }
+ }).exec();
+ });
+ },
+
+ // 鍥剧墖鍔犺浇瀹屾垚浜嬩欢
+ onImageLoad(e) {
+ console.log('鍥剧墖鍔犺浇瀹屾垚', e.detail);
+
+ // 鑾峰彇鍥剧墖鍘熷灏哄
+ this.originalImageWidth = e.detail.width;
+ this.originalImageHeight = e.detail.height;
+
+ // 璁＄畻绛夋瘮渚嬬缉鏀惧悗鐨勫昂瀵�
+ this.calculateImageSize();
+ },
+
+ // 鍥剧墖鍔犺浇澶辫触浜嬩欢
+ onImageError(e) {
+ console.error('鍥剧墖鍔犺浇澶辫触', e.detail);
+ // 璁剧疆榛樿灏哄
+ this.imageWidth = this.containerWidth;
+ this.imageHeight = 300;
+ },
+
+ // 璁＄畻鍥剧墖绛夋瘮渚嬬缉鏀惧昂瀵�
+ calculateImageSize() {
+ if (this.originalImageWidth > 0 && this.originalImageHeight > 0) {
+ // 璁＄畻鍥剧墖鐨勫楂樻瘮
+ const imageRatio = this.originalImageHeight / this.originalImageWidth;
+
+ // 鍥剧墖浣跨敤100%瀹藉害濉厖瀹瑰櫒锛寃idthFix妯″紡浼氳嚜鍔ㄨ绠楅珮搴�
+ this.imageWidth = this.containerWidth;
+ this.imageHeight = Math.round(this.imageWidth * imageRatio);
+
+ console.log(`鍥剧墖灏哄璁＄畻瀹屾垚:`);
+ console.log(`- 鍘熷灏哄: ${this.originalImageWidth}px 脳 ${this.originalImageHeight}px`);
+ console.log(`- 璁＄畻灏哄: ${this.imageWidth}rpx 脳 ${this.imageHeight}rpx`);
+ console.log(`- 瀹瑰櫒瀹藉害: ${this.containerWidth}rpx`);
+ console.log(`- 瀹介珮姣�: ${imageRatio.toFixed(3)}`);
+ console.log(`- 瀹為檯鏄剧ず: 瀹藉害100%锛岄珮搴﹁嚜閫傚簲锛屾棤楂樺害闄愬埗`);
+ }
+ },
+
onpan(){
},
@@ -178,7 +288,7 @@
// this.$emit('join');
console.log(this.prizeActivityId)
uni.navigateTo({
- url:'pages/prize/PrizeDetail/PrizeDetail?id='+this.prizeActivityId
+ url:'/pages/prize/PrizeDetail/PrizeDetail?id='+this.prizeActivityId
})
// 鍙互鍦ㄨ繖閲屾坊鍔犲弬涓庢椿鍔ㄥ悗鐨勯�昏緫锛屾瘮濡傚叧闂脊绐�
this.$emit('close');
@@ -230,6 +340,7 @@
.popup-content {
width: 100%;
max-width: 600rpx;
+ max-height: 85vh; /* 鎻愰珮鏈�澶ч珮搴﹂檺鍒讹紝缁欏浘鐗囨洿澶氱┖闂� */
background-color: #ffffff;
border-radius: 24rpx;
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
@@ -237,6 +348,8 @@
transform: translateY(50rpx) scale(0.9);
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ display: flex;
+ flex-direction: column; /* 绔栧悜甯冨眬 */
}
.content-enter {
@@ -247,6 +360,32 @@
.content-leave {
transform: translateY(50rpx) scale(0.9);
opacity: 0;
+}
+
+/* 娲诲姩鏍囬鍥哄畾鍖哄煙 */
+.activity-title-fixed {
+ padding: 30rpx 30rpx 20rpx 30rpx;
+ background-color: #ffffff;
+ border-bottom: 1rpx solid #f5f5f5;
+}
+
+/* 娲诲姩鍐呭婊氬姩鍖哄煙 */
+.activity-content-scroll {
+ flex: 1; /* 鍗犳嵁鍓╀綑绌洪棿 */
+ min-height: 0; /* 閲嶈锛氱‘淇� flex 瀛愬厓绱犲彲浠ユ敹缂� */
+ max-height: 150rpx; /* 閫傚綋鍑忓皯娲诲姩鍐呭鍖哄煙鐨勬渶澶ч珮搴︼紝缁欏浘鐗囨洿澶氱┖闂� */
+}
+
+/* 娲诲姩鍐呭 */
+.activity-content {
+ padding: 30rpx 30rpx 20rpx 30rpx;
+}
+
+/* 鍥哄畾搴曢儴鍖哄煙 */
+.activity-bottom {
+ padding: 20rpx 30rpx 30rpx 30rpx;
+ background-color: #ffffff;
+ border-top: 1rpx solid #f5f5f5; /* 娣诲姞鍒嗗壊绾� */
}
/* 鍏抽棴鎸夐挳 */
@@ -264,41 +403,49 @@
z-index: 10;
}
+/* 娲诲姩鍥剧墖婊氬姩鍖哄煙 */
+.activity-img-scroll {
+ max-height: 50vh; /* 闄愬埗鍥剧墖鍖哄煙鏈�澶ч珮搴︿负灞忓箷鐨�50% */
+ width: 100%;
+ border-top-left-radius: 24rpx;
+ border-top-right-radius: 24rpx;
+ overflow: hidden;
+}
+
/* 娲诲姩鍥剧墖 */
.activity-img {
position: relative;
width: 100%; /* 瀹瑰櫒瀹藉害閾烘弧寮圭獥鍐呭鍖� */
+ display: block; /* 鏀逛负block纭繚瀹屽叏濉厖瀹藉害 */
/* 鍙�夛細娣诲姞鑳屾櫙鑹诧紝閬垮厤鍥剧墖鍔犺浇鍓嶆樉绀虹┖鐧� */
background-color: #f5f5f5;
- border-top-left-radius: 24rpx; /* 涓庡浘鐗囧渾瑙掍竴鑷达紝閬垮厤瀹瑰櫒闇茬櫧 */
- border-top-right-radius: 24rpx;
}
.popup-img {
- width: 100%;
- /* 鏍稿績锛氱敤 max-height 闄愬埗鏈�澶ч珮搴︼紝涓嶉檺鍒� min-height锛堜繚鐣欐瘮渚嬶級 */
- max-height: 300rpx; /* 鍥剧墖鏈�澶ч珮搴︼紙瓒呰繃鍒欐寜姣斾緥缂╁皬锛屼繚璇佸畬鏁存樉绀猴級 */
+ display: block;
+ width: 100%; /* 纭繚鍥剧墖瀹藉害瀹屽叏濉厖瀹瑰櫒 */
+ border-top-left-radius: 24rpx;
+ border-top-right-radius: 24rpx;
+ /* 浣跨敤 widthFix 妯″紡锛岃鍥剧墖鏍规嵁璁惧畾鐨勫搴﹁嚜鍔ㄨ绠楅珮搴� */
+ /* 鍥剧墖灏哄閫氳繃鍔ㄦ�佽绠楃殑style鎺у埗 */
}
/* 娲诲姩淇℃伅 */
-.activity-info {
- padding: 30rpx;
- text-align: center;
-}
-
.activity-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 20rpx;
line-height: 1.3;
+ text-align: center;
}
.activity-desc {
font-size: 26rpx;
color: #666666;
- margin-bottom: 30rpx;
line-height: 1.5;
+ text-align: left; /* 宸﹀榻� */
+ text-indent: 2em; /* 棣栬缂╄繘涓や釜瀛楃 */
}
/* 鍊掕鏃舵牱寮� */
--
Gitblit v1.8.0