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>
|