From 72a73a1cde9ebbfc0097609595fe2226ae84b9f0 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期四, 30 十月 2025 14:27:16 +0800
Subject: [PATCH] 页面优化
---
pages/prize/PrizeDetail/PrizeDetail.vue | 246 +++++++++++++++++++++++++++++++++++++++----------
1 files changed, 196 insertions(+), 50 deletions(-)
diff --git a/pages/prize/PrizeDetail/PrizeDetail.vue b/pages/prize/PrizeDetail/PrizeDetail.vue
index 6e2bba5..885f60a 100644
--- a/pages/prize/PrizeDetail/PrizeDetail.vue
+++ b/pages/prize/PrizeDetail/PrizeDetail.vue
@@ -14,7 +14,10 @@
<!-- 鑾峰彇鏇村鏈轰細鎸夐挳 - 鍙充笂瑙掓偓娴� -->
<view class="floating-more-btn" @tap="showMoreChances">
- <text class="floating-btn-icon">馃巵</text>
+ <view class="floating-btn-content">
+ <text class="floating-btn-icon">馃巵</text>
+ <text class="floating-btn-text">鏇村鏈轰細</text>
+ </view>
</view>
<!-- 鍓╀綑鎶藉娆℃暟 -->
@@ -54,14 +57,14 @@
<view class="prize-modal-content" @tap.stop>
<view class="modal-close" @tap="closePrizeModal">脳</view>
- <view class="congratulations-text" v-if="currentPrize.id !== 'thanks'">
+ <view class="congratulations-text" v-if="currentPrize.id !== 'notWIn'">
馃帀 鎭枩鎮� 馃帀
</view>
<view class="sorry-text" v-else>
馃様 寰堥仐鎲� 馃様
</view>
- <view class="prize-display">
+ <view class="prize-display" v-if="currentPrize.id !== 'notWIn'">
<image :src="currentPrize.img" class="modal-prize-img" />
<text class="modal-prize-name">{{ currentPrize.name }}</text>
</view>
@@ -74,7 +77,7 @@
</view>
<view class="modal-buttons" v-if="currentPrize.id !== 'notWIn'">
- <button class="confirm-btn" @tap="useItNow">鍘昏喘鐗�</button>
+ <button class="confirm-btn" @tap="useItNow">鍘诲厬鎹�</button>
</view>
<view class="modal-buttons" v-else>
<button class="confirm-btn" @tap="closePrizeModal">纭畾</button>
@@ -96,7 +99,6 @@
<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>
@@ -106,17 +108,26 @@
<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="prize-rules-section" v-if="prizeAddRule.length > 0">
+ <view class="section-title">鑾峰彇鏈轰細瑙勫垯</view>
+ <view class="rules-list">
+ <view class="rule-item" v-for="(rule, index) in prizeAddRule" :key="rule.id">
+ <text class="rule-name">{{ rule.ruleName }}</text>
+ <text class="rule-value" v-if="rule.ruleValue">({{ rule.ruleValue }})</text>
+ <text class="rule-add-num">+{{ rule.addNum }}娆℃満浼�</text>
+ </view>
</view>
</view>
@@ -148,11 +159,15 @@
</template>
<script>
import bgConfig from '@/pages/prize/PrizeDetail/prize-bgConfig.js'
+ import { getSessionId, userAction ,userShare } from "@/api/userAction.js";
+
import {
prizeInfo,
prizeNum,
prize,
- grantRecord
+ grantRecord,
+ addPrizeNum,
+ getPrizeRule
} from '@/api/prize.js'
export default {
data() {
@@ -166,38 +181,7 @@
showRulesModal: false,
currentPrize: {},
// 娲诲姩瑙勫垯鏁版嵁
- activityRules: [{
- id: 1,
- title: '涓�銆� 鍙備笌鏂瑰紡涓庤鍒欙細',
- text: `1. 鍏嶈垂鎶藉鏈轰細鑾峰彇锛�
- 姣忔棩鐧诲綍锛� 鐢ㄦ埛姣忔棩鐧诲綍灏忕▼搴忥紝 鍗冲彲鑷姩鑾峰緱2娆″厤璐规娊濂栨満浼氾紱
- 浠诲姟璧氬彇锛� 瀹屾垚鎸囧畾浠诲姟锛� 鍙幏鍙栭澶栨棤涓婇檺鐨勬娊濂栨満浼氾紱
- 娴忚浠诲姟锛� 鍗曟璁块棶娲诲姩瑙嗛椤靛苟鍋滅暀鈮� 10 鍒嗛挓锛� 鍙澶栬幏寰�1娆℃満浼氾紱 鍗曟璁块棶鍟嗗搧璇︽儏椤靛仠鐣欌墺 1 鍒嗛挓锛� 鍙澶栬幏寰�1娆℃満浼氾紱
- 鍒嗕韩浠诲姟锛� 棣栨鍒嗕韩娲诲姩鑷虫湅鍙嬪湀鍙澶栬幏寰�1娆℃満浼氾紱 姣忔垚鍔熼個璇�1浣嶆柊鐢ㄦ埛鐐瑰嚮鎮ㄧ殑鍒嗕韩閾炬帴锛� 鍙啀寰�1娆℃満浼氾紱 濂藉弸閫氳繃鎮ㄧ殑閾炬帴瀹屾垚棣栨鎶藉锛� 鎮ㄥ彲鍐嶈幏寰�2娆℃満浼氥�俙
- },
- {
- id: 2,
- title: '浜屻�� 鎶藉瑙勫垯',
- text: `1.鐢ㄦ埛娑堣��1娆℃娊濂栨満浼氬嵆鍙弬涓庝竴娆℃娊濂栵紱
- 2.鏈娲诲姩濂栧搧姣忔棩闄愰噺锛屽厛鍒板厛寰楋紝鎶藉畬鍗虫銆�
- 鐢ㄦ埛娑堣��1娆℃娊濂栨満浼氬嵆鍙弬涓庝竴娆℃娊濂栥�傛湰娆℃椿鍔ㄥ鍝佹瘡鏃ラ檺閲忥紝鍏堝埌鍏堝緱锛屾娊瀹屽嵆姝€��
- 3.娉ㄦ剰浜嬮」锛氭瘡鏃ュ熀纭�鍏嶈垂鏈轰細浠呴檺褰撴棩浣跨敤锛屼笉绱鑷虫鏃ャ�傞�氳繃浠诲姟鑾峰緱鐨勯澶栨満浼氭棤涓婇檺銆傝纭繚鍒嗕韩鏃剁敓鎴愮殑鏄偍鏈汉鐨勪笓灞炲甫鍙傞摼鎺�/浜岀淮鐮侊紝鍚﹀垯鏃犳硶缁熻鎮ㄧ殑閭�璇峰叧绯汇�俙
- },
- {
- id: 4,
- title: '涓夈�佸鍝佹槑缁�',
- text: '銆�銆�鏈鎶藉娲诲姩濂栧搧姹犲叿浣撴瘡鏃ュ簱瀛樹互灏忕▼搴忛〉闈㈠疄鏃舵樉绀轰负鍑嗐��'
- },
- {
- id: 5,
- title: '鍥涖�佸鍝佸彂鏀句笌棰嗗彇',
- text: '銆�銆�1.涓閫氱煡锛氫腑濂栧悗锛岀郴缁熷皢鑷姩寮瑰嚭涓鎻愮ず锛屽苟鐢熸垚涓娴锋姤銆傛偍涔熷彲浠ュ疄鏃堕鍙栦篃鍙啀娲诲姩涓煡鐪嬩腑濂栬褰曘�俓n銆�銆�2.濂栧搧棰嗗彇锛氳鍦ㄦ敹鍒颁腑濂栭�氱煡鍚庣殑24灏忔椂鍐咃紝鍙婃椂濉啓骞剁‘璁ゆ敹璐у湴鍧�锛岄�炬湡瑙嗕负鑷姩鏀惧純濂栧搧銆俓n銆�銆�3.濂栧搧閫�鎹細鎵�鏈夊鍝佸潎涓烘椿鍔ㄧ壒瀹氱ぜ鍝侊紝涓嶄簣鎶樼幇銆佷笉閫�涓嶆崲銆傚閬囦骇鍝佽川閲忛棶棰橈紝璇蜂簬鏀惰揣鍚�24灏忔椂鍐呰仈绯诲鏈嶅鐞嗐��'
- },
- {
- id: 6,
- title: '浜斻�佸叾浠栨儏鍐佃鏄�',
- text: '銆�銆�1.鐢ㄦ埛琛屼负瑙勮寖锛氫弗绂佺敤鎴烽�氳繃浠讳綍涓嶆褰撴墜娈碉紙濡備娇鐢ㄥ鎸傘�佹満鍣ㄤ汉銆佹伓鎰忔敞鍐屽涓处鍙枫�佽櫄鍋囧垎浜瓑锛夊弬涓庢椿鍔ㄣ�備竴缁忓彂鐜帮紝銆愭偍鐨勫搧鐗屽悕绉般�戞湁鏉冨彇娑堝叾鍙備笌鍙婅幏濂栬祫鏍硷紝骞朵繚鐣欒拷绌舵硶寰嬭矗浠荤殑鏉冨埄銆俓n銆�銆�2.鍙嶄綔寮婃潯娆撅細娲诲姩閲囩敤鎶�鏈墜娈佃繘琛岄鎺х洃娴嬶紝鍖呮嫭浣嗕笉闄愪簬锛氳澶嘔D鍘婚噸銆佸垎浜涓洪獙璇併�佸湴鐞嗕綅缃牳楠岀瓑锛屼互纭繚娲诲姩鐨勫叕骞虫�с�俓n銆�銆�3.娲诲姩鍙樻洿锛氬閬囦笉鍙姉鍔涘洜绱犳垨鎶�鏈棶棰樺鑷存椿鍔ㄦ棤娉曟甯歌繘琛岋紝銆愭偍鐨勫搧鐗屽悕绉般�戞湁鏉冩殏鍋溿�佸欢闀挎垨缁堟娲诲姩锛屽苟瑙嗘儏鍐靛娲诲姩瑙勫垯杩涜鍙樻洿鎴栬皟鏁达紝鐩稿叧鍙樺姩灏嗘彁鍓嶄簣浠ュ叕鍛娿�俓n銆�銆�4.涓汉淇℃伅淇濇姢锛氭偍鐨勪釜浜轰俊鎭粎鐢ㄤ簬鏈娲诲姩濂栧搧鍙戞斁鍙婂悗缁湇鍔★紝鎴戜滑灏嗕弗鏍间繚瀵嗭紝涓嶄細娉勯湶缁欎换浣曠涓夋柟銆俓n銆�銆�5.鍏嶈矗澹版槑锛氬浜庡洜缃戠粶銆侀�氫俊绛夊師鍥犲鑷寸敤鎴锋湭鑳藉弬涓庢椿鍔ㄦ垨棰嗗彇濂栧搧鐨勬儏鍐碉紝銆愭偍鐨勫搧鐗屽悕绉般�戜笉鎵挎媴浠讳綍璐ｄ换銆俓n銆�銆�6.娲诲姩瑙ｉ噴鏉冿細鏈椿鍔ㄦ渶缁堣В閲婃潈褰掋�愭偍鐨勫搧鐗屽悕绉般�戞墍鏈夈��'
- }
+ activityRules: [
],
// 鑷姩婊氬姩鎺у埗
scrollTimer: null,
@@ -212,7 +196,24 @@
shareTimelineAttempt: false,
activityCover: '',
activityName: '',
- couponId: ''
+ couponId: '',
+ pageSessionNo:"",
+ actionParam:{
+ sessionId:'',
+ actionType:"PAGE",
+ joinType:"SELF",
+ pageCode:"PRIZE_DETAIL",
+ pageParams:"{}",
+ pageStatus:"JOIN",
+ pageType:"DETAIL"
+ },
+ shareParam:{
+ pageCode:"PRIZE_DETAIL",
+ shareOption:"{}",
+ pageType:"DETAIL"
+ },
+ shareId:'',
+ prizeAddRule:[]
};
},
computed: {
@@ -221,7 +222,54 @@
return [...this.originalWinners]
}
},
+ onUnload() {
+ let param = Object.assign({}, this.actionParam);
+ if (this.sendOnShow)return
+ param.pageStatus = "LEAVE"
+ userAction(param)
+ },
+ onHide() {
+ this.startHidenTime = Date.now()
+ let param = Object.assign({}, this.actionParam);
+ this.sendOnShow = true;
+ param.pageStatus = "LEAVE"
+ userAction(param)
+ },
+ onShow() {
+ getSessionId().then(res=>{
+ this.pageSessionNo = res.data.data
+ this.actionParam.sessionId = res.data.data
+ if(this.pageSessionNo){
+ let param = Object.assign({}, this.actionParam);
+ param.sessionId = this.pageSessionNo
+ userAction(param)
+ }
+ })
+ const shareId = uni.getStorageSync("shareId");
+ if(shareId){
+ let param = {
+ addType:"SHARE_USER_REGISTRY",
+ extend:"",
+ }
+ let extend = {shareId:shareId}
+ param.extend = JSON.stringify(extend)
+ addPrizeNum(param);
+ }
+
+ let param2 = {
+ addType:"USER_STAY_TIME",
+ extend:"",
+ }
+ addPrizeNum(param2);
+ },
async onLoad(option) {
+ if(option.shareId){
+ this.actionParam.shareId = option.shareId;
+ this.actionParam.joinType = 'SHARE'
+ console.log('瑙﹀彂onLoad')
+ }
+ this.actionParam.pageParams = JSON.stringify(option)
+
const pages = getCurrentPages()
console.log('================pages ', pages)
this.activityId = option.id
@@ -244,6 +292,7 @@
})
await this.getUnmber(this.activityId)
await this.getGrantRecord(this.activityId)
+ await this.prizeRule()
},
// onShareTimeline(e) {
// console.log('------------------>', e)
@@ -266,22 +315,49 @@
// this.startAutoScroll()
},
onShareAppMessage() {
- return {
+ // 杩斿洖涓�涓狿romise
+ return new Promise((resolve) => {
+ this.shareId = '';
+ this.shareParam.shareOption = JSON.stringify({
+ id:this.activityId
+ })
+ userShare(this.shareParam).then(res => {
+ this.shareId = res.data.data;
+ console.log('------------------1銆�', this.shareId);
+
+ // 褰撹幏鍙栧埌shareId鍚庯紝鍐峳esolve鍒嗕韩閰嶇疆
+ resolve({
title: this.activityName,
- path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId,
+ path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId + '&shareId=' + this.shareId,
imageUrl: this.activityCover,
success(e) {
- console.log("鍒嗕韩鎴愬姛", e)
+ console.log("鍒嗕韩鎴愬姛", e);
},
fail(e) {
- console.log('鍒嗕韩澶辫触', e)
+ console.log('鍒嗕韩澶辫触', e);
}
- }
+ });
+ }).catch(err => {
+ // 澶勭悊閿欒鎯呭喌锛屼緥濡備娇鐢ㄩ粯璁ゅ弬鏁�
+ console.error('鑾峰彇鍒嗕韩ID澶辫触', err);
+ resolve({
+ title: this.activityName,
+ path: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.activityId,
+ imageUrl: this.activityCover
+ });
+ });
+ });
},
beforeDestroy() {
this.stopAutoScroll()
},
methods: {
+ async prizeRule(){
+ this.prizeAddRule = [];
+ const res = await getPrizeRule()
+ this.prizeAddRule = res.data.data||[]
+ console.log('鑾峰彇鍒版坊鍔犳鏁拌鍒�',JSON.stringify(res.data.data))
+ },
async getUnmber(id) {
const prizeNums = await prizeNum(id);
if(prizeNums.statusCode === 400){
@@ -1257,8 +1333,8 @@
position: fixed;
top: 30rpx;
right: 30rpx;
- width: 100rpx;
- height: 100rpx;
+ width: 120rpx;
+ height: 120rpx;
background: linear-gradient(45deg, #ff6b6b, #feca57);
border-radius: 50%;
display: flex;
@@ -1267,6 +1343,8 @@
box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.4);
z-index: 9999;
transition: all 0.3s ease;
+ flex-direction: column;
+ padding: 10rpx 0;
}
.floating-more-btn::before {
@@ -1302,12 +1380,29 @@
box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.5);
}
+ .floating-btn-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ position: relative;
+ }
+
.floating-btn-icon {
font-size: 36rpx;
color: white;
+ filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
+ margin-bottom: 5rpx;
+ }
+
+ .floating-btn-text {
+ font-size: 20rpx;
+ color: white;
z-index: 1;
position: relative;
- filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
+ text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
+ white-space: nowrap;
}
/* 濂栧搧灞曠ず */
@@ -1765,4 +1860,55 @@
white-space: pre-line;
word-break: break-word;
}
+
+ /* 鎶藉瑙勫垯鏍峰紡 */
+ .prize-rules-section {
+ margin-top: 30rpx;
+ padding: 20rpx;
+ background: #f8f9ff;
+ border-radius: 15rpx;
+ }
+
+ .prize-rules-section .section-title {
+ text-align: left;
+ font-size: 30rpx;
+ margin-bottom: 15rpx;
+ color: #ff6b6b;
+ }
+
+ .rules-list {
+ max-height: 300rpx;
+ overflow-y: auto;
+ }
+
+ .rules-list .rule-item {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ padding: 15rpx 0;
+ margin-bottom: 0;
+ border-bottom: 1px solid #eee;
+ }
+
+ .rules-list .rule-item:last-child {
+ border-bottom: none;
+ }
+
+ .rule-name {
+ font-size: 26rpx;
+ color: #333;
+ flex: 1;
+ }
+
+ .rule-value {
+ font-size: 24rpx;
+ color: #666;
+ margin: 0 10rpx;
+ }
+
+ .rule-add-num {
+ font-size: 26rpx;
+ color: #ff6b6b;
+ font-weight: bold;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.8.0