|
|
|
@ -7,7 +7,7 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<scroll-view scroll-y class="tl-scroll" :style="{paddingTop: (navHeight + 10) + 'px'}" |
|
|
|
@scrolltolower="loadMore"> |
|
|
|
@scrolltolower="onScrolltolower"> |
|
|
|
<!-- 汇总卡片 --> |
|
|
|
<view class="tl-sum"> |
|
|
|
<view class="tl-sum-glow"></view> |
|
|
|
@ -19,6 +19,40 @@ |
|
|
|
<view class="tl-sum-tip">星球券永久有效，囤越多瓜分越多</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="tl-tabs"> |
|
|
|
<view class="tl-tab" :class="{active: activeTab === 'raiders'}" @tap="switchTab('raiders')">掠夺者列表</view> |
|
|
|
<view class="tl-tab" :class="{active: activeTab === 'logs'}" @tap="switchTab('logs')">星球券明细</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<block v-if="activeTab === 'raiders'"> |
|
|
|
<view class="raider-card"> |
|
|
|
<view class="raider-head"> |
|
|
|
<view> |
|
|
|
<view class="raider-kicker">ANGRY PIRATES</view> |
|
|
|
<view class="raider-title">偷过我的人</view> |
|
|
|
</view> |
|
|
|
<view class="raider-more" @tap="loadMoreRaiders">{{raiderLoadText}}</view> |
|
|
|
</view> |
|
|
|
<view v-if="raiders.length" class="raider-list"> |
|
|
|
<view class="raider-row" v-for="(item, i) in raiders" :key="i"> |
|
|
|
<view class="raider-face">怒</view> |
|
|
|
<view class="raider-mid"> |
|
|
|
<view class="raider-name">{{item.fromUserName || '神秘掠夺者'}}</view> |
|
|
|
<view class="raider-desc">{{raiderDesc(item)}}</view> |
|
|
|
</view> |
|
|
|
<view class="raider-btn" @tap="revengeRaider(item)">反偷</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-else class="raider-empty">{{raiderLoading ? '正在扫描掠夺者...' : '暂时没人偷过你的券'}}</view> |
|
|
|
<view v-if="raiders.length" class="tl-foot"> |
|
|
|
<text v-if="raiderLoading">加载中…</text> |
|
|
|
<text v-else-if="raiderNoMore">— 没有更多掠夺者了 —</text> |
|
|
|
<text v-else @tap="loadMoreRaiders">点击加载更多</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
|
|
|
|
<block v-else> |
|
|
|
<!-- 骨架屏 --> |
|
|
|
<view v-if="loading && list.length===0" class="tl-sk"> |
|
|
|
<view class="tl-sk-item" v-for="n in 6" :key="n"></view> |
|
|
|
@ -53,14 +87,28 @@ |
|
|
|
<text class="tl-empty-text">还没有星球券记录</text> |
|
|
|
<text class="tl-empty-tip">完成任务、下单、邀请好友都能获得星球券</text> |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
|
|
|
|
<view style="height:60rpx;"></view> |
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
<hunt-modal |
|
|
|
:show="huntModal.show" |
|
|
|
:phase="huntModal.phase" |
|
|
|
:result="huntModal.result" |
|
|
|
:target="huntModal.target" |
|
|
|
@close="closeHunt"> |
|
|
|
</hunt-modal> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import huntModal from '@/package1/components/planet/hunt-modal.vue' |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
huntModal |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
statusBarHeight: 20, |
|
|
|
@ -68,12 +116,33 @@ |
|
|
|
userId: '', |
|
|
|
regionId: '', |
|
|
|
balance: 0, |
|
|
|
activeTab: 'raiders', |
|
|
|
list: [], |
|
|
|
pageNumber: 1, |
|
|
|
pageSize: 15, |
|
|
|
total: 0, |
|
|
|
loading: false, |
|
|
|
noMore: false |
|
|
|
noMore: false, |
|
|
|
raiders: [], |
|
|
|
raiderPageNumber: 1, |
|
|
|
raiderPageSize: 5, |
|
|
|
raiderTotal: 0, |
|
|
|
raiderLoading: false, |
|
|
|
raiderNoMore: false, |
|
|
|
huntModal: { |
|
|
|
show: false, |
|
|
|
phase: 'searching', |
|
|
|
result: null, |
|
|
|
target: {} |
|
|
|
}, |
|
|
|
huntTimers: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
raiderLoadText() { |
|
|
|
if (this.raiderLoading) return '加载中' |
|
|
|
if (this.raiderNoMore) return '已到底' |
|
|
|
return this.raiders.length ? '更多' : '刷新' |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
@ -86,6 +155,10 @@ |
|
|
|
if (area) this.regionId = JSON.parse(area).id || '' |
|
|
|
} catch (e) {} |
|
|
|
this.loadPage(true) |
|
|
|
this.loadRaiders(true) |
|
|
|
}, |
|
|
|
onUnload() { |
|
|
|
this.clearHuntTimers() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initNavHeight() { |
|
|
|
@ -139,6 +212,106 @@ |
|
|
|
this.pageNumber++ |
|
|
|
this.loadPage(false) |
|
|
|
}, |
|
|
|
switchTab(tab) { |
|
|
|
this.activeTab = tab |
|
|
|
if (tab === 'raiders' && !this.raiders.length) this.loadRaiders(true) |
|
|
|
if (tab === 'logs' && !this.list.length) this.loadPage(true) |
|
|
|
}, |
|
|
|
onScrolltolower() { |
|
|
|
if (this.activeTab === 'raiders') { |
|
|
|
this.loadMoreRaiders() |
|
|
|
return |
|
|
|
} |
|
|
|
this.loadMore() |
|
|
|
}, |
|
|
|
loadRaiders(reset) { |
|
|
|
if (this.raiderLoading || !this.userId) return |
|
|
|
if (reset) { |
|
|
|
this.raiderPageNumber = 1 |
|
|
|
this.raiderNoMore = false |
|
|
|
} |
|
|
|
this.raiderLoading = true |
|
|
|
this.tui.request('/app/planet/search/raiders', 'POST', { |
|
|
|
userId: this.userId, |
|
|
|
regionId: this.regionId, |
|
|
|
pageNumber: this.raiderPageNumber, |
|
|
|
pageSize: this.raiderPageSize |
|
|
|
}, false, false, true).then((res) => { |
|
|
|
this.raiderLoading = false |
|
|
|
if (res.code == 200 && res.result) { |
|
|
|
const records = res.result.records || [] |
|
|
|
this.raiderTotal = res.result.total || 0 |
|
|
|
this.raiders = reset ? records : this.raiders.concat(records) |
|
|
|
if (this.raiders.length >= this.raiderTotal || records.length < this.raiderPageSize) { |
|
|
|
this.raiderNoMore = true |
|
|
|
} |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
this.raiderLoading = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
loadMoreRaiders() { |
|
|
|
if (this.raiderLoading) return |
|
|
|
if (!this.raiders.length) { |
|
|
|
this.loadRaiders(true) |
|
|
|
return |
|
|
|
} |
|
|
|
if (this.raiderNoMore) return |
|
|
|
this.raiderPageNumber++ |
|
|
|
this.loadRaiders(false) |
|
|
|
}, |
|
|
|
raiderDesc(item) { |
|
|
|
if (item.countered === 1) return '已被防御塔反击' |
|
|
|
if (item.intercepted === 1) return '被防御塔拦截过' |
|
|
|
return '偷走 ' + (item.gainTickets || 0) + ' 张券 · ' + (item.createTime || '') |
|
|
|
}, |
|
|
|
revengeRaider(item) { |
|
|
|
if (!item || !item.fromUserId) return |
|
|
|
this.clearHuntTimers() |
|
|
|
this.huntModal.show = true |
|
|
|
this.huntModal.phase = 'searching' |
|
|
|
this.huntModal.result = null |
|
|
|
this.huntModal.target = { |
|
|
|
userId: item.fromUserId, |
|
|
|
nickname: item.fromUserName || '神秘掠夺者', |
|
|
|
avatar: item.fromAvatar |
|
|
|
} |
|
|
|
this.huntTimers.push(setTimeout(() => { this.huntModal.phase = 'locking' }, 900)) |
|
|
|
this.huntTimers.push(setTimeout(() => { this.huntModal.phase = 'chasing' }, 1800)) |
|
|
|
this.tui.request('/app/planet/search/target', 'POST', { |
|
|
|
userId: this.userId, |
|
|
|
regionId: this.regionId, |
|
|
|
toUserId: item.fromUserId |
|
|
|
}, false, false, true).then((res) => { |
|
|
|
this.huntTimers.push(setTimeout(() => { |
|
|
|
if (res.code == 200 && res.result) { |
|
|
|
this.huntModal.result = { |
|
|
|
result: res.result.countered ? 'shield' : (res.result.intercepted ? 'fail' : 'success'), |
|
|
|
message: res.result.message, |
|
|
|
gainTickets: res.result.gainTickets, |
|
|
|
totalGain: res.result.gainTickets || 0, |
|
|
|
remainHunt: res.result.remainSearchCount |
|
|
|
} |
|
|
|
this.huntModal.phase = 'result' |
|
|
|
this.loadPage(true) |
|
|
|
this.loadRaiders(true) |
|
|
|
} else { |
|
|
|
this.huntModal.show = false |
|
|
|
this.tui.toast(res.message) |
|
|
|
} |
|
|
|
}, 2200)) |
|
|
|
}).catch(() => { |
|
|
|
this.huntModal.show = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
clearHuntTimers() { |
|
|
|
this.huntTimers.forEach((timer) => clearTimeout(timer)) |
|
|
|
this.huntTimers = [] |
|
|
|
}, |
|
|
|
closeHunt() { |
|
|
|
this.huntModal.show = false |
|
|
|
this.huntModal.result = null |
|
|
|
}, |
|
|
|
typeIcon(type) { |
|
|
|
const map = { |
|
|
|
order: '食', group: '团', invite: '邀', sign: '签', |
|
|
|
@ -149,7 +322,7 @@ |
|
|
|
typeName(type) { |
|
|
|
const map = { |
|
|
|
order: '外卖订单', group: '团购订单', invite: '邀请好友', sign: '每日签到', |
|
|
|
box: '幸运宝箱', hunt: '星际追捕', buff: '购买增益', draw: '开奖瓜分' |
|
|
|
box: '幸运宝箱', hunt: '星际掠夺', buff: '购买增益', draw: '开奖瓜分' |
|
|
|
} |
|
|
|
return map[type] || '星球券变动' |
|
|
|
}, |
|
|
|
@ -281,6 +454,145 @@ |
|
|
|
color: #7E9691; |
|
|
|
} |
|
|
|
|
|
|
|
.tl-tabs { |
|
|
|
position: relative; |
|
|
|
margin-top: 24rpx; |
|
|
|
padding: 8rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: rgba(255,255,255,0.64); |
|
|
|
border: 2rpx solid rgba(255,255,255,0.88); |
|
|
|
display: flex; |
|
|
|
gap: 8rpx; |
|
|
|
box-shadow: 0 14rpx 34rpx rgba(53,214,166,0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.tl-tab { |
|
|
|
flex: 1; |
|
|
|
height: 66rpx; |
|
|
|
line-height: 66rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
text-align: center; |
|
|
|
color: #6B817D; |
|
|
|
font-size: 25rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.tl-tab.active { |
|
|
|
background: linear-gradient(135deg, #35D6A6, #4FB7FF); |
|
|
|
color: #FFFFFF; |
|
|
|
box-shadow: 0 12rpx 28rpx rgba(53,214,166,0.2); |
|
|
|
} |
|
|
|
|
|
|
|
.raider-card { |
|
|
|
position: relative; |
|
|
|
margin-top: 22rpx; |
|
|
|
padding: 28rpx; |
|
|
|
border-radius: 38rpx; |
|
|
|
background: linear-gradient(145deg, rgba(255,255,255,0.88), rgba(255,239,232,0.66)); |
|
|
|
border: 2rpx solid rgba(255,255,255,0.9); |
|
|
|
box-shadow: 0 20rpx 48rpx rgba(255,122,89,0.12); |
|
|
|
} |
|
|
|
|
|
|
|
.raider-head { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.raider-kicker { |
|
|
|
color: #FF7A59; |
|
|
|
font-size: 18rpx; |
|
|
|
font-weight: 900; |
|
|
|
letter-spacing: 2rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.raider-title { |
|
|
|
margin-top: 6rpx; |
|
|
|
color: #12342F; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.raider-more { |
|
|
|
height: 48rpx; |
|
|
|
line-height: 48rpx; |
|
|
|
padding: 0 18rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: rgba(255,255,255,0.74); |
|
|
|
color: #FF7A59; |
|
|
|
font-size: 21rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.raider-list { margin-top: 18rpx; } |
|
|
|
|
|
|
|
.raider-row { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-top: 14rpx; |
|
|
|
padding: 16rpx; |
|
|
|
border-radius: 28rpx; |
|
|
|
background: rgba(255,255,255,0.7); |
|
|
|
} |
|
|
|
|
|
|
|
.raider-face { |
|
|
|
width: 58rpx; |
|
|
|
height: 58rpx; |
|
|
|
line-height: 58rpx; |
|
|
|
text-align: center; |
|
|
|
border-radius: 20rpx; |
|
|
|
background: linear-gradient(145deg, #FFB84D, #FF7A59); |
|
|
|
color: #FFFFFF; |
|
|
|
font-size: 24rpx; |
|
|
|
font-weight: 900; |
|
|
|
box-shadow: 0 12rpx 24rpx rgba(255,122,89,0.2); |
|
|
|
} |
|
|
|
|
|
|
|
.raider-mid { |
|
|
|
flex: 1; |
|
|
|
min-width: 0; |
|
|
|
margin-left: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.raider-name { |
|
|
|
color: #12342F; |
|
|
|
font-size: 26rpx; |
|
|
|
font-weight: 900; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
|
|
|
|
.raider-desc { |
|
|
|
margin-top: 6rpx; |
|
|
|
color: #7E9691; |
|
|
|
font-size: 21rpx; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
|
|
|
|
.raider-btn { |
|
|
|
height: 52rpx; |
|
|
|
line-height: 52rpx; |
|
|
|
padding: 0 20rpx; |
|
|
|
border-radius: 999rpx; |
|
|
|
background: linear-gradient(135deg, #FFB84D, #FF7A59); |
|
|
|
color: #FFFFFF; |
|
|
|
font-size: 22rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.raider-empty { |
|
|
|
margin-top: 18rpx; |
|
|
|
padding: 26rpx; |
|
|
|
border-radius: 26rpx; |
|
|
|
background: rgba(255,255,255,0.58); |
|
|
|
color: #7E9691; |
|
|
|
font-size: 23rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* 骨架 */ |
|
|
|
.tl-sk { margin-top: 28rpx; } |
|
|
|
.tl-sk-item { |
|
|
|
|
wangfukang
2 weeks ago