From f621aacc5ed02fab11c9c1f35c69a36babb5411f Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期一, 25 八月 2025 15:02:31 +0800
Subject: [PATCH] 购物车点击事件，分享视频封面问题
---
pages/ActivityPopup/ActivityPopup.vue | 354 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 354 insertions(+), 0 deletions(-)
diff --git a/pages/ActivityPopup/ActivityPopup.vue b/pages/ActivityPopup/ActivityPopup.vue
new file mode 100644
index 0000000..cdfdea5
--- /dev/null
+++ b/pages/ActivityPopup/ActivityPopup.vue
@@ -0,0 +1,354 @@
+<template>
+ <view class="activity-popup" v-if="show" @click="onMaskClick">
+ <!-- 閬僵灞� -->
+ <view class="popup-mask" :class="{ 'mask-enter': show, 'mask-leave': !show }"></view>
+
+ <!-- 寮圭獥鍐呭 -->
+ <view class="popup-content"
+ :class="{ 'content-enter': show, 'content-leave': !show }"
+ @click.stop>
+
+ <!-- 鍏抽棴鎸夐挳 -->
+ <view class="close-btn" @click="onClose">
+ <uni-icons type="close" size="24" color="#666"></uni-icons>
+ </view>
+
+ <!-- 娲诲姩鍥剧墖 -->
+ <view class="activity-img">
+ <image :src="activityImage" mode="widthFix" class="popup-img"></image>
+ </view>
+
+ <!-- 娲诲姩淇℃伅 -->
+ <view class="activity-info">
+ <h3 class="activity-title">{{ activityTitle }}</h3>
+ <p class="activity-desc">{{ activityDesc }}</p>
+
+ <!-- 鍊掕鏃讹紙濡傛灉闇�瑕侊級 -->
+ <view class="countdown" v-if="showCountdown">
+ <text class="countdown-text">娲诲姩鍓╀綑鏃堕棿锛�</text>
+ <view class="countdown-time">
+ <text class="time-box">{{ days }}</text>
+ <text class="time-sep">:</text>
+ <text class="time-box">{{ hours }}</text>
+ <text class="time-sep">:</text>
+ <text class="time-box">{{ minutes }}</text>
+ <text class="time-sep">:</text>
+ <text class="time-box">{{ seconds }}</text>
+ </view>
+ </view>
+
+ <!-- 鍙備笌鎸夐挳 -->
+ <button class="join-btn" @click="onJoinActivity">
+ {{ joinButtonText }}
+ </button>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+import {getPopupAcitivty} from '@/api/popup.js'
+export default {
+ name: 'ActivityPopup',
+ props: {
+ // 鎺у埗寮圭獥鏄剧ず/闅愯棌
+ show: {
+ type: Boolean,
+ default: false
+ },
+ // 娲诲姩鍥剧墖URL
+ activityImage: {
+ type: String,
+ default: ''
+ },
+ // 娲诲姩鏍囬
+ activityTitle: {
+ type: String,
+ default: '闄愭椂浼樻儬娲诲姩'
+ },
+ // 娲诲姩鎻忚堪
+ activityDesc: {
+ type: String,
+ default: '鍙備笌鏈娲诲姩锛屽嵆鍙幏寰楄秴鍊煎ぇ濂栵紝鏈轰細闅惧緱锛屼笉瑕侀敊杩囷紒'
+ },
+ // 鍙備笌鎸夐挳鏂囨湰
+ joinButtonText: {
+ type: String,
+ default: '绔嬪嵆鍙備笌'
+ },
+ // 鏄惁鏄剧ず鍊掕鏃�
+ showCountdown: {
+ type: Boolean,
+ default: true
+ },
+ // 鍊掕鏃剁粨鏉熸椂闂达紙鏃堕棿鎴筹級
+ endTime: {
+ type: Number,
+ default: () => {
+ // 榛樿7澶╁悗缁撴潫
+ return Date.now() + 7 * 24 * 60 * 60 * 1000;
+ }
+ }
+ },
+ data() {
+ return {
+ days: '00',
+ hours: '00',
+ minutes: '00',
+ seconds: '00',
+ countdownTimer: null
+ };
+ },
+ watch: {
+ show(newVal) {
+ console.log("寮圭獥鐩戝惉鍙樺寲",newVal)
+ if (newVal && this.showCountdown) {
+ this.startCountdown();
+ } else if (!newVal && this.countdownTimer) {
+ clearInterval(this.countdownTimer);
+ this.countdownTimer = null;
+ }
+ }
+ },
+ mounted() {
+ console.log('缁勪欢宸叉寕杞斤紝姝ゆ椂鍙互璁块棶 props 鍜� DOM');
+ console.log('褰撳墠 show 鐘舵�侊細', this.show); // 鍙互鎵撳嵃 props 涓殑 show
+
+ },
+ methods: {
+ onpan(){
+
+ },
+ // 寮�濮嬪�掕鏃�
+ startCountdown() {
+ this.updateCountdown();
+ if (this.countdownTimer) {
+ clearInterval(this.countdownTimer);
+ }
+ this.countdownTimer = setInterval(() => {
+ this.updateCountdown();
+ }, 1000);
+ },
+
+ // 鏇存柊鍊掕鏃�
+ updateCountdown() {
+ const now = Date.now();
+ const diff = this.endTime - now;
+
+ if (diff <= 0) {
+ this.days = '00';
+ this.hours = '00';
+ this.minutes = '00';
+ this.seconds = '00';
+ clearInterval(this.countdownTimer);
+ this.countdownTimer = null;
+ return;
+ }
+
+ // 璁＄畻澶┿�佹椂銆佸垎銆佺
+ const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+ const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+ // 鏍煎紡鍖栨暟瀛椾负涓や綅鏁�
+ this.days = days.toString().padStart(2, '0');
+ this.hours = hours.toString().padStart(2, '0');
+ this.minutes = minutes.toString().padStart(2, '0');
+ this.seconds = seconds.toString().padStart(2, '0');
+ },
+
+ // 鍏抽棴寮圭獥
+ onClose() {
+ this.$emit('close');
+ },
+
+ // 鐐瑰嚮閬僵灞傚叧闂�
+ onMaskClick() {
+ this.$emit('close');
+ },
+
+ // 鐐瑰嚮鍙備笌娲诲姩
+ onJoinActivity() {
+ this.$emit('join');
+ // 鍙互鍦ㄨ繖閲屾坊鍔犲弬涓庢椿鍔ㄥ悗鐨勯�昏緫锛屾瘮濡傚叧闂脊绐�
+ // this.onClose();
+ }
+ },
+ beforeDestroy() {
+ if (this.countdownTimer) {
+ clearInterval(this.countdownTimer);
+ }
+ }
+};
+</script>
+
+<style scoped>
+.activity-popup {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 9999;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 20rpx;
+}
+
+
+/* 閬僵灞傛牱寮� */
+.popup-mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+
+}
+
+.mask-enter {
+ opacity: 1;
+}
+
+.mask-leave {
+ opacity: 0;
+}
+
+/* 寮圭獥鍐呭鏍峰紡 */
+.popup-content {
+ width: 100%;
+ max-width: 600rpx;
+ background-color: #ffffff;
+ border-radius: 24rpx;
+ box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
+ overflow: hidden;
+ transform: translateY(50rpx) scale(0.9);
+ opacity: 0;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.content-enter {
+ transform: translateY(0) scale(1);
+ opacity: 1;
+}
+
+.content-leave {
+ transform: translateY(50rpx) scale(0.9);
+ opacity: 0;
+}
+
+/* 鍏抽棴鎸夐挳 */
+.close-btn {
+ position: absolute;
+ top: 20rpx;
+ right: 20rpx;
+ width: 50rpx;
+ height: 50rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba(255, 255, 255, 0.8);
+ border-radius: 50%;
+ z-index: 10;
+}
+
+/* 娲诲姩鍥剧墖 */
+.activity-img {
+ position: relative;
+ width: 100%; /* 瀹瑰櫒瀹藉害閾烘弧寮圭獥鍐呭鍖� */
+ /* 鍙�夛細娣诲姞鑳屾櫙鑹诧紝閬垮厤鍥剧墖鍔犺浇鍓嶆樉绀虹┖鐧� */
+ background-color: #f5f5f5;
+ border-top-left-radius: 24rpx; /* 涓庡浘鐗囧渾瑙掍竴鑷达紝閬垮厤瀹瑰櫒闇茬櫧 */
+ border-top-right-radius: 24rpx;
+}
+
+.popup-img {
+ width: 100%;
+ /* 鏍稿績锛氱敤 max-height 闄愬埗鏈�澶ч珮搴︼紝涓嶉檺鍒� min-height锛堜繚鐣欐瘮渚嬶級 */
+ max-height: 300rpx; /* 鍥剧墖鏈�澶ч珮搴︼紙瓒呰繃鍒欐寜姣斾緥缂╁皬锛屼繚璇佸畬鏁存樉绀猴級 */
+}
+
+/* 娲诲姩淇℃伅 */
+.activity-info {
+ padding: 30rpx;
+ text-align: center;
+}
+
+.activity-title {
+ font-size: 32rpx;
+ font-weight: bold;
+ color: #333333;
+ margin-bottom: 20rpx;
+ line-height: 1.3;
+}
+
+.activity-desc {
+ font-size: 26rpx;
+ color: #666666;
+ margin-bottom: 30rpx;
+ line-height: 1.5;
+}
+
+/* 鍊掕鏃舵牱寮� */
+.countdown {
+ margin-bottom: 30rpx;
+ text-align: center;
+}
+
+.countdown-text {
+ font-size: 24rpx;
+ color: #ff6b3b;
+ margin-right: 10rpx;
+}
+
+.countdown-time {
+ display: inline-flex;
+ align-items: center;
+}
+
+.time-box {
+ display: inline-block;
+ width: 50rpx;
+ height: 50rpx;
+ line-height: 50rpx;
+ background-color: #ff6b3b;
+ color: #ffffff;
+ font-size: 26rpx;
+ font-weight: bold;
+ border-radius: 8rpx;
+ text-align: center;
+}
+
+.time-sep {
+ margin: 0 10rpx;
+ color: #ff6b3b;
+ font-size: 28rpx;
+ font-weight: bold;
+}
+
+/* 鍙備笌鎸夐挳 */
+.join-btn {
+ width: 100%;
+ height: 80rpx;
+ line-height: 80rpx;
+ background-color: #ff6b3b;
+ color: #ffffff;
+ font-size: 30rpx;
+ border-radius: 40rpx;
+ border: none;
+ box-shadow: 0 5rpx 15rpx rgba(255, 107, 59, 0.4);
+ transition: all 0.2s ease;
+}
+
+.join-btn::after {
+ border: none;
+}
+
+.join-btn:active {
+ background-color: #e55a2a;
+ transform: scale(0.98);
+}
+</style>
--
Gitblit v1.8.0