From 0c83611409654cfc53c64345ba60b7e1e5fcc5b7 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期一, 01 九月 2025 14:27:22 +0800
Subject: [PATCH] 调整弹窗样式
---
pages/prize/PrizeDetail/PrizeDetail.vue | 402 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 394 insertions(+), 8 deletions(-)
diff --git a/pages/prize/PrizeDetail/PrizeDetail.vue b/pages/prize/PrizeDetail/PrizeDetail.vue
index a3db2e3..de8af2d 100644
--- a/pages/prize/PrizeDetail/PrizeDetail.vue
+++ b/pages/prize/PrizeDetail/PrizeDetail.vue
@@ -1,5 +1,10 @@
<template>
<view class="layout">
+ <!-- 鑾峰彇鏇村鏈轰細鎸夐挳 - 鍙充笂瑙掓偓娴� -->
+ <view class="floating-more-btn" @tap="showMoreChances">
+ <text class="floating-btn-icon">馃巵</text>
+ </view>
+
<!-- 鍓╀綑鎶藉娆℃暟 -->
<view class="remaining-times">
<text class="times-label">鍓╀綑鎶藉娆℃暟:</text>
@@ -23,8 +28,7 @@
<!-- 鏈�杩戜腑濂栦俊鎭� -->
<view class="winners-section">
<view class="section-title">鏈�杩戜腑濂�</view>
- <scroll-view scroll-y="true" class="winners-list" :scroll-top="scrollTop"
- >
+ <scroll-view scroll-y="true" class="winners-list" :scroll-top="scrollTop">
<view class="winner-item" v-for="(winner, index) in recentWinners" :key="index">
<text class="winner-name">{{ winner.nickname }}</text>
<text class="winner-prize">鑾峰緱 {{ winner.prizeName }}</text>
@@ -62,6 +66,50 @@
</view>
</view>
</view>
+
+ <!-- 鑾峰彇鏇村鎶藉鏈轰細寮圭獥 -->
+ <view class="more-chances-modal" v-if="showMoreChancesModal" @tap="closeMoreChancesModal">
+ <view class="more-chances-modal-content" @tap.stop>
+ <view class="modal-close" @tap="closeMoreChancesModal">脳</view>
+
+ <view class="modal-title">
+ <text class="title-icon">馃幆</text>
+ <text class="title-text">鑾峰彇鏇村鎶藉鏈轰細</text>
+ </view>
+
+ <view class="chances-grid">
+ <button class="chance-item" open-type="share">
+ <view class="chance-icon">馃懃</view>
+ <text class="chance-title">鍒嗕韩濂藉弸</text>
+ <text class="chance-subtitle">+1娆℃満浼�</text>
+ </button>
+<!-- <view class="chance-item" @tap="shareToTimeline">
+ <view class="chance-icon">馃寪</view>
+ <text class="chance-title">鍒嗕韩鏈嬪弸鍦�</text>
+ <text class="chance-subtitle">+1娆℃満浼�</text>
+ </view> -->
+ <view class="chance-item" @tap="watchVideo">
+ <view class="chance-icon">馃幀</view>
+ <text class="chance-title">娴忚瑙嗛</text>
+ <text class="chance-subtitle">+1娆℃満浼�</text>
+ </view>
+ <view class="chance-item" @tap="browseProduct">
+ <view class="chance-icon">馃泹锔�</view>
+ <text class="chance-title">娴忚鍟嗗搧</text>
+ <text class="chance-subtitle">+1娆℃満浼�</text>
+ </view>
+ <view class="chance-item " @tap="goShopping">
+ <view class="chance-icon">馃洅</view>
+ <text class="chance-title">鍘昏喘鐗�</text>
+ <text class="chance-subtitle">浜彈璐墿涔愯叮</text>
+ </view>
+ </view>
+
+ <view class="modal-tip">
+ <text class="tip-text">馃挕 瀹屾垚浠诲姟鍗冲彲鑾峰緱棰濆鎶藉鏈轰細</text>
+ </view>
+ </view>
+ </view>
</view>
</template>
@@ -81,6 +129,7 @@
remainingTimes: 0,
// 寮圭獥鎺у埗
showPrizeModal: false,
+ showMoreChancesModal: false,
currentPrize: {},
// 鑷姩婊氬姩鎺у埗
scrollTimer: null,
@@ -89,7 +138,11 @@
// 鏈�杩戜腑濂栦俊鎭�
originalWinners: [],
// 濂栧搧鍒楄〃锛�
- prizeList: []
+ prizeList: [],
+ // 鍒嗕韩鏈嬪弸鍦堝皾璇曟爣璁�
+ shareTimelineAttempt: false,
+ activityCover:'',
+ activityName:''
};
},
computed: {
@@ -99,8 +152,12 @@
}
},
async onLoad(option) {
+ const pages = getCurrentPages()
+ console.log('================pages ',pages)
this.activityId = option.id
const prize = await prizeInfo(this.activityId);
+ this.activityCover = prize.data.data.activityCover
+ this.activityName = prize.data.data.activityName
console.log(prize.data)
this.prizeList = prize.data.data.prizeInfoVOS.map(item => {
return {
@@ -109,6 +166,7 @@
img: item.prizeImg
}
})
+ this.prizeList = [...this.prizeList]
this.prizeList.push({
id: 'notWIn',
name: "璋㈣阿鍙備笌"
@@ -116,11 +174,37 @@
await this.getUnmber(this.activityId)
await this.getGrantRecord(this.activityId)
},
- onShareTimeline(e){
- console.log('------------------>',e)
- },
+ // onShareTimeline(e) {
+ // console.log('------------------>', e)
+ // // 濡傛灉鐢ㄦ埛灏濊瘯杩囧垎浜湅鍙嬪湀锛岀粰浜堝鍔�
+ // if (this.shareTimelineAttempt) {
+ // this.remainingTimes++;
+ // this.shareTimelineAttempt = false;
+ // uni.showToast({
+ // title: '鑾峰緱1娆℃娊濂栨満浼�',
+ // icon: 'success'
+ // });
+ // }
+ // return {
+ // title: '蹇潵鍙備笌鎶藉娲诲姩鍚э紒',
+ // path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId
+ // }
+ // },
+ //鍙兘浼氫娇鐢ㄥ埌
mounted() {
// this.startAutoScroll()
+ },
+ onShareAppMessage() {
+ return{
+ title: this.activityName,
+ path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId,
+ imageUrl:this.activityCover,
+ success(e) {
+ console.log("鍒嗕韩鎴愬姛",e)
+ },fail(e) {
+ console.log('鍒嗕韩澶辫触',e)
+ }
+ }
},
beforeDestroy() {
this.stopAutoScroll()
@@ -164,6 +248,104 @@
closePrizeModal() {
this.showPrizeModal = false
this.currentPrize = {}
+ },
+ // 鏄剧ず鑾峰彇鏇村鏈轰細寮圭獥
+ showMoreChances() {
+ this.showMoreChancesModal = true
+ },
+ // 鍏抽棴鑾峰彇鏇村鏈轰細寮圭獥
+ closeMoreChancesModal() {
+ this.showMoreChancesModal = false
+ },
+ // 鍒嗕韩鍒板井淇″ソ鍙�
+ shareToFriend() {
+ uni.showShareMenu({
+ menus: ['weixin'],
+ success: (res) => {
+ console.log('鍒嗕韩鑿滃崟鏄剧ず鎴愬姛', res);
+ // 澧炲姞鎶藉娆℃暟
+ this.remainingTimes++;
+ // 鍏抽棴寮圭獥
+ this.closeMoreChancesModal();
+ uni.showToast({
+ title: '鑾峰緱1娆℃娊濂栨満浼�',
+ icon: 'success'
+ });
+ },
+ fail: (err) => {
+ console.log('鍒嗕韩鑿滃崟鏄剧ず澶辫触', err);
+ uni.showToast({
+ title: '鍒嗕韩澶辫触',
+ icon: 'none'
+ });
+ }
+ });
+ },
+ // 鍒嗕韩鍒版湅鍙嬪湀
+ shareToTimeline() {
+ // 鐢变簬uni-app鐨勯檺鍒讹紝鏈嬪弸鍦堝垎浜渶瑕佸湪onShareTimeline涓鐞�
+ // 杩欓噷鎴戜滑鍏堟樉绀烘彁绀猴紝鐒跺悗閫氳繃鍙充笂瑙掑垎浜埌鏈嬪弸鍦�
+ this.closeMoreChancesModal();
+ uni.showModal({
+ title: '鍒嗕韩鍒版湅鍙嬪湀',
+ content: '璇风偣鍑诲彸涓婅鐨勫垎浜寜閽紝閫夋嫨"鍒嗕韩鍒版湅鍙嬪湀"',
+ showCancel: false,
+ success: () => {
+ // 鏍囪鐢ㄦ埛宸插皾璇曞垎浜湅鍙嬪湀
+ this.shareTimelineAttempt = true;
+ }
+ });
+ },
+ // 娴忚瑙嗛
+ watchVideo() {
+ // 杩欓噷鍙互璺宠浆鍒拌棰戦〉闈㈡垨寮瑰嚭瑙嗛鎾斁鍣�
+ this.closeMoreChancesModal();
+ uni.showModal({
+ title: '娴忚瑙嗛',
+ content: '鍗冲皢璺宠浆鍒拌棰戦〉闈�',
+ success: (res) => {
+ if (res.confirm) {
+ // 妯℃嫙瑙傜湅瑙嗛瀹屾垚锛屽鍔犳娊濂栨鏁�
+ // 杩欓噷鍙互娣诲姞璺宠浆鍒板叿浣撹棰戦〉闈㈢殑閫昏緫
+ uni.navigateTo({
+ url: '/pages/tabbar/index/home'
+ });
+ }
+ }
+ });
+ },
+ // 娴忚鍟嗗搧
+ browseProduct() {
+ // 璺宠浆鍒板晢鍝侀〉闈�
+ this.closeMoreChancesModal();
+ uni.showModal({
+ title: '娴忚鍟嗗搧',
+ content: '鍗冲皢璺宠浆鍒板晢鍝佸箍鍦�',
+ success: (res) => {
+ if (res.confirm) {
+ // 杩欓噷鍙互娣诲姞璺宠浆鍒板叿浣撳晢鍝侀〉闈㈢殑閫昏緫
+ uni.navigateTo({
+ url: '/pages/commodity-square/commoditySquare'
+ });
+ }
+ }
+ });
+ },
+ // 鍘昏喘鐗�
+ goShopping() {
+ this.closeMoreChancesModal();
+ uni.showModal({
+ title: '鍘昏喘鐗�',
+ content: '鍗冲皢璺宠浆鍒拌喘鐗╄溅',
+ success: (res) => {
+ if (res.confirm) {
+ // 鎴栬�呰烦杞埌璐墿杞�
+ uni.navigateTo({
+ url: '/pages/cusbar/cart/cartList'
+ });
+ }
+ }
+ });
},
async onClick() {
// 妫�鏌ュ墿浣欐鏁�
@@ -229,6 +411,64 @@
font-weight: bold;
}
+ /* 鍙充笂瑙掓偓娴幏鍙栨洿澶氭満浼氭寜閽� */
+ .floating-more-btn {
+ position: fixed;
+ top: 30rpx;
+ right: 30rpx;
+ width: 100rpx;
+ height: 100rpx;
+ background: linear-gradient(45deg, #ff6b6b, #feca57);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.4);
+ z-index: 999;
+ transition: all 0.3s ease;
+ }
+
+ .floating-more-btn::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: linear-gradient(45deg, #ff6b6b, #feca57);
+ opacity: 0.8;
+ animation: pulse 2s infinite;
+ }
+
+ @keyframes pulse {
+ 0% {
+ transform: scale(1);
+ opacity: 0.8;
+ }
+
+ 50% {
+ transform: scale(1.1);
+ opacity: 0.4;
+ }
+
+ 100% {
+ transform: scale(1);
+ opacity: 0.8;
+ }
+ }
+
+ .floating-more-btn:active {
+ transform: scale(0.95);
+ box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.5);
+ }
+
+ .floating-btn-icon {
+ font-size: 36rpx;
+ color: white;
+ z-index: 1;
+ position: relative;
+ filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
+ }
+
/* 濂栧搧灞曠ず */
.prize-section {
width: 100%;
@@ -250,9 +490,11 @@
.prize-grid {
display: flex;
flex-wrap: wrap;
- justify-content: space-between;
+ justify-content: flex-start;
}
-
+ .prize-item:nth-child(n+1){
+ margin-left: 15rpx;
+ }
.prize-item {
width: 22%;
margin-bottom: 20rpx;
@@ -448,4 +690,148 @@
.confirm-btn::after {
border: none;
}
+
+ /* 鑾峰彇鏇村鏈轰細寮圭獥鏍峰紡 */
+ .more-chances-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.6);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 9999;
+ }
+
+ .more-chances-modal-content {
+ background: white;
+ border-radius: 30rpx;
+ width: 90%;
+ max-width: 600rpx;
+ max-height: 80vh;
+ padding: 40rpx;
+ position: relative;
+ box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
+ overflow-y: auto;
+ }
+
+ .modal-title {
+ text-align: center;
+ margin-bottom: 40rpx;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .title-icon {
+ font-size: 50rpx;
+ margin-bottom: 15rpx;
+ display: block;
+ }
+
+ .title-text {
+ font-size: 36rpx;
+ font-weight: bold;
+ color: #333;
+ }
+
+ .chances-grid {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: 20rpx;
+ margin-bottom: 30rpx;
+ }
+ .chances-grid button{
+ padding: 25rpx 15rpx;
+ margin: 0;
+ line-height: normal;
+ border: none;
+ }
+ .chances-grid button::after{
+ border: none;
+ }
+ .chance-item {
+ width: 45%;
+ background: linear-gradient(45deg, #ff6b6b, #feca57);
+ border-radius: 15rpx;
+ padding: 25rpx 15rpx;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ transition: all 0.3s ease;
+ box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.3);
+ }
+
+ .chance-item::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+ transform: rotate(45deg);
+ transition: all 0.6s ease;
+ opacity: 0;
+ }
+
+ .chance-item:active::before {
+ opacity: 1;
+ transform: translateX(100%) translateY(100%) rotate(45deg);
+ }
+
+ .chance-item:active {
+ transform: scale(0.98);
+ box-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.4);
+ }
+
+ .chance-item-large {
+ width: 100%;
+ background: linear-gradient(45deg, #feca57, #ff9ff3);
+ box-shadow: 0 4rpx 20rpx rgba(254, 202, 87, 0.3);
+ }
+
+ .chance-item-large:active {
+ box-shadow: 0 2rpx 15rpx rgba(254, 202, 87, 0.4);
+ }
+
+ .chance-icon {
+ font-size: 40rpx;
+ margin-bottom: 10rpx;
+ display: block;
+ filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
+ }
+
+ .chance-title {
+ display: block;
+ color: white;
+ font-size: 28rpx;
+ font-weight: bold;
+ margin-bottom: 5rpx;
+ text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
+ }
+
+ .chance-subtitle {
+ display: block;
+ color: rgba(255, 255, 255, 0.95);
+ font-size: 22rpx;
+ text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
+ }
+
+ .modal-tip {
+ text-align: center;
+ padding: 20rpx;
+ background: linear-gradient(45deg, #f8f9ff, #e3f2fd);
+ border-radius: 15rpx;
+ border: 2rpx dashed #667eea;
+ }
+
+ .tip-text {
+ color: #667eea;
+ font-size: 26rpx;
+ font-weight: 500;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.8.0