128 lines
2.5 KiB
Vue
128 lines
2.5 KiB
Vue
<template>
|
||
<view class="example-page">
|
||
<view class="header">
|
||
<text class="title">排行榜弹窗组件示例</text>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<view class="button-group">
|
||
<u-button
|
||
type="primary"
|
||
size="large"
|
||
@click="showRanking"
|
||
:loading="loading"
|
||
>
|
||
显示排行榜
|
||
</u-button>
|
||
</view>
|
||
|
||
<view class="info-section">
|
||
<text class="info-title">使用说明：</text>
|
||
<text class="info-text"
|
||
>1. 点击按钮将依次显示直推人数和直推金额排行榜</text
|
||
>
|
||
<text class="info-text">2. 前三名会特殊展示在顶部</text>
|
||
<text class="info-text">3. 4-30名可在下方滚动查看</text>
|
||
<text class="info-text">4. 关闭人数排行后自动显示金额排行</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 排行榜弹窗组件 -->
|
||
<RankingPopup ref="rankingPopup" @onRankingComplete="onRankingComplete" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import RankingPopup from './RankingPopup.vue'
|
||
|
||
export default {
|
||
name: 'RankingPopupExample',
|
||
components: {
|
||
RankingPopup,
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
}
|
||
},
|
||
methods: {
|
||
// 显示排行榜
|
||
async showRanking() {
|
||
this.loading = true
|
||
try {
|
||
await this.$refs.rankingPopup.showRankingPopups()
|
||
} catch (error) {
|
||
console.error('显示排行榜失败:', error)
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
|
||
// 排行榜展示完成回调
|
||
onRankingComplete() {
|
||
console.log('排行榜展示完成')
|
||
uni.showToast({
|
||
title: '排行榜展示完成',
|
||
icon: 'success',
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.example-page {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||
padding: 40rpx;
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 60rpx;
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
max-width: 600rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.button-group {
|
||
text-align: center;
|
||
margin-bottom: 60rpx;
|
||
}
|
||
|
||
.info-section {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
padding: 40rpx;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.info-title {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.info-text {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
margin-bottom: 12rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|