From bf88c598975bcb28cf067a6e91bdd468f84d8f0f Mon Sep 17 00:00:00 2001 From: zpc Date: Fri, 18 Apr 2025 11:16:54 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/infinite/bonus_house_details.vue | 117 ++++----- pages/sangdai/sangdai copy.vue | 337 +++++++++---------------- pages/sangdai/sangdai.vue | 9 + pages/shouye/index.vue | 2 + pages/user/index.vue | 41 ++- 5 files changed, 214 insertions(+), 292 deletions(-) diff --git a/pages/infinite/bonus_house_details.vue b/pages/infinite/bonus_house_details.vue index a6eb0a0..dc5205a 100644 --- a/pages/infinite/bonus_house_details.vue +++ b/pages/infinite/bonus_house_details.vue @@ -47,8 +47,8 @@ - + @@ -74,10 +74,8 @@ - + {{ index + 1 }} @@ -96,10 +94,8 @@ - + {{ index + 1 }} @@ -122,8 +118,7 @@ - {{ buttonText }} @@ -147,7 +142,7 @@ 提示:需在指定时间{{ bonusData.start_time }}-{{ bonusData.end_time }}消耗达到{{ bonusData.choujiang_xianzhi - }}钻石,即可加入房间,还需{{ remainingDiamond }}钻石. + }}钻石,即可加入房间,还需{{ $c.removeTrailingZeros(remainingDiamond) }}钻石. @@ -224,7 +219,7 @@ export default { isAgree: true, loading: false, user_count: 0, //用户已经购买的次数 - + // 动画状态控制变量 headerShow: false, contentShow: false, @@ -232,7 +227,7 @@ export default { tabsShow: [false, false, false], participantRowsShow: [], awardRowsShow: [], - + // 按钮脉冲动画 buttonPulse: false } @@ -245,7 +240,7 @@ export default { return ''; }, remainingDiamond() { - let t = this.bonusData.choujiang_xianzhi - this.user_total_consumption; + let t = (this.bonusData.choujiang_xianzhi - this.user_total_consumption).toFixed(2); return t > 0 ? t : 0; } }, @@ -253,7 +248,7 @@ export default { console.log(options) this.goods_id = options.goods_id await this.load(options.goods_id) - + // 添加页面加载动画 setTimeout(() => { this.applyPageTransitions(); @@ -475,11 +470,11 @@ export default { this.remainingTime = this.formatRemainingTime(endDate - serverNow, "距离开奖时间:"); return; } - - + + }, 1000); - + }, onUnload() { @@ -512,7 +507,7 @@ export default { } catch (error) { console.error("加载参与人数列表失败", error); } - + if (this.currentTab === 1) { setTimeout(() => { this.animateListItems('participant-row'); @@ -543,7 +538,7 @@ export default { } catch (error) { console.error("加载赏品记录失败", error); } - + if (this.currentTab === 2) { setTimeout(() => { this.animateListItems('award-row'); @@ -566,7 +561,7 @@ export default { // 根据列表类型初始化动画状态数组 if (className === 'participant-row') { this.participantRowsShow = Array(this.participantList.length).fill(false); - + // 逐个显示列表项 for (let i = 0; i < this.participantList.length; i++) { ((index) => { @@ -577,7 +572,7 @@ export default { } } else if (className === 'award-row') { this.awardRowsShow = Array(this.awardRecordList.length).fill(false); - + // 逐个显示列表项 for (let i = 0; i < this.awardRecordList.length; i++) { ((index) => { @@ -595,7 +590,7 @@ export default { const endDate = new Date(this.bonusData.end_time.replace(/-/g, '/')); const openDate = new Date(this.bonusData.open_time.replace(/-/g, '/')); // console.log(currentDate,startDate); - + if (currentDate < startDate) { this.buttonText = "未开始"; } else if (currentDate >= startDate && currentDate <= endDate) { @@ -617,7 +612,7 @@ export default { setTimeout(() => { this.buttonPulse = false; }, 400); // 动画时长结束后移除类 - + // 调用原始点击处理程序 this.handleButtonClick(); }, @@ -700,19 +695,19 @@ export default { url: '/pages/shouye/index' }); }, - + applyPageTransitions() { // 头部信息 this.headerShow = true; - + // 标签 setTimeout(() => { this.tabsShow[0] = true; }, 100); setTimeout(() => { this.tabsShow[1] = true; }, 200); setTimeout(() => { this.tabsShow[2] = true; }, 300); - + // 内容区 setTimeout(() => { this.contentShow = true; }, 200); - + // 按钮 setTimeout(() => { this.buttonShow = true; }, 300); } @@ -736,7 +731,7 @@ export default { position: relative; margin-right: 25rpx; transition: all 0.3s ease; - + &:active { transform: scale(0.95); } @@ -764,7 +759,7 @@ export default { font-weight: 400; font-size: 28rpx; color: #CCCCCC; - + &::after { content: ''; position: absolute; @@ -784,6 +779,7 @@ export default { from { width: 0; } + to { width: 48rpx; } @@ -807,25 +803,25 @@ export default { padding: 8rpx; border-radius: 12rpx; position: relative; - + &:active { transform: translateY(-6rpx) scale(1.05); background-color: rgba(0, 0, 0, 0.02); } - + image { transition: all 0.25s ease; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1); } - + &:active image { box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.15); } - + text { transition: color 0.25s ease; } - + &:active text { color: #666 !important; } @@ -839,11 +835,11 @@ export default { overflow: visible; border: none !important; outline: none !important; - + &::after { border: none !important; } - + &::before { content: ''; position: absolute; @@ -857,11 +853,11 @@ export default { opacity: 0; transition: all 0.2s ease; } - + &:active { transform: scale(0.9) rotate(15deg); } - + &:active::before { transform: scale(1); opacity: 1; @@ -924,18 +920,18 @@ export default { box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; - + // 页面加载动画 opacity: 0; transform: translateY(20rpx); transition: transform 0.5s ease, opacity 0.5s ease, background-color 0.2s ease, box-shadow 0.2s ease; transition-delay: 0.3s; - + &.show { opacity: 1; transform: translateY(0); } - + &.pulse { animation: buttonPulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @@ -969,7 +965,7 @@ export default { font-size: 35rpx; background-color: #f9f9f9; position: relative; - + &::after { content: ''; position: absolute; @@ -1011,11 +1007,11 @@ export default { transition: all 0.25s ease; position: relative; overflow: hidden; - + &:active { transform: scale(0.95); } - + &::after { content: ''; position: absolute; @@ -1029,12 +1025,12 @@ export default { opacity: 0; transition: all 0.3s ease-out; } - + &:active::after { transform: translate(-50%, -50%) scale(3); opacity: 0; } - + text { position: relative; z-index: 1; @@ -1046,11 +1042,11 @@ export default { .cancel-button { background-color: #FFFFFF; border: 1px solid #eee; - + text { color: #333333; } - + &:active { background-color: #f5f5f5; } @@ -1059,11 +1055,11 @@ export default { .confirm-button { background-color: #CDEF27; box-shadow: 0 4rpx 8rpx rgba(205, 239, 39, 0.3); - + text { color: #333333; } - + &:active { background-color: #b9d721; box-shadow: 0 2rpx 4rpx rgba(205, 239, 39, 0.2); @@ -1075,6 +1071,7 @@ export default { transform: scale(0.9); opacity: 0; } + to { transform: scale(1); opacity: 1; @@ -1086,6 +1083,7 @@ export default { opacity: 0; transform: translateY(20rpx); } + to { opacity: 1; transform: translateY(0); @@ -1096,7 +1094,7 @@ export default { opacity: 0; transform: translateX(-20rpx); transition: all 0.4s ease; - + &.show { opacity: 1; transform: translateX(0); @@ -1107,7 +1105,7 @@ export default { opacity: 0; transform: translateX(-20rpx); transition: all 0.4s ease; - + &.show { opacity: 1; transform: translateX(0); @@ -1118,7 +1116,7 @@ export default { opacity: 0; transform: translateY(-20rpx); transition: all 0.5s ease; - + &.show { opacity: 1; transform: translateY(0); @@ -1129,7 +1127,7 @@ export default { opacity: 0; transform: translateY(10rpx); transition: all 0.4s ease; - + &.show { opacity: 1; transform: translateY(0); @@ -1141,7 +1139,7 @@ export default { transform: translateY(20rpx); transition: all 0.5s ease; transition-delay: 0.2s; - + &.show { opacity: 1; transform: translateY(0); @@ -1153,15 +1151,18 @@ export default { transform: scale(1); box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); } + 40% { transform: scale(0.92); box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05); } + 80% { transform: scale(1.05); box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.15); background-color: #e0ff3a; } + 100% { transform: scale(1); box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); diff --git a/pages/sangdai/sangdai copy.vue b/pages/sangdai/sangdai copy.vue index a18fff5..9b32055 100644 --- a/pages/sangdai/sangdai copy.vue +++ b/pages/sangdai/sangdai copy.vue @@ -1,58 +1,33 @@