442 lines
9.9 KiB
Vue
442 lines
9.9 KiB
Vue
<template>
|
||
<view>
|
||
<touch-popup ref="popup" background="#FFFDE8" :backShow="true">
|
||
<view class="bck">
|
||
<view style="width: 100%;height: 15px;"></view>
|
||
<view class="star1">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/star1.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="star2">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/star2.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="star3">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/star3.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="star4">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/star4.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="center" style="padding: 15px;">
|
||
排行榜
|
||
</view>
|
||
<!-- 金币、铜币、银币点击切换榜单 -->
|
||
<view class="tabbar">
|
||
<view class="tabbar-item" @click="switchTab(2)">
|
||
<view class="coin-item" :class="{ check: curCoin === 2 }">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/silver.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="coin-text">
|
||
银币榜
|
||
</view>
|
||
</view>
|
||
<view class="tabbar-item" @click="switchTab(1)">
|
||
<view class="coin-item" :class="{ check: curCoin === 1 }">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/gold.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="coin-text">
|
||
金币榜
|
||
</view>
|
||
</view>
|
||
<view class="tabbar-item" @click="switchTab(3)">
|
||
<view class="coin-item" :class="{ check: curCoin === 3 }">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/copper.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="coin-text">
|
||
铜币榜
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 排行榜列表 -->
|
||
<scroll-view scroll-y>
|
||
<view class="pd-25">
|
||
<view class="rank-list">
|
||
<view v-for="(item, index) in curList" key="rank" class="rank-item">
|
||
<view class="leftnum" :class="{'rank-weight': index < 3}">
|
||
{{index+1}}
|
||
</view>
|
||
<view class="centeravatar">
|
||
<image v-if="index <= 2" class="zhuangshi" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/皇冠.png" mode="widthFix">
|
||
</image>
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/avatar.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="centernickname">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="rightbalance">
|
||
<view class="price-item">
|
||
<view class="price-bck">
|
||
<view class="logo-bck">
|
||
<image :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/' + coinType" mode="widthFix">
|
||
</image>
|
||
</view>
|
||
<text>{{item.num}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="mypoint">
|
||
<view class="my-bck">
|
||
<view class="myavatar">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/avatar.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="mynickname center">
|
||
{{app.globalData.userinfo.name}}
|
||
</view>
|
||
<view class="mybanance">
|
||
<view class="">
|
||
<image :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/' + coinType" mode="widthFix"></image>
|
||
<text>{{curMyCoinNum.num ? curMyCoinNum.num : 0}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="myrank">
|
||
我的名次：<text>{{curMyCoinNum.hasOwnProperty('i') ? '上海市NO.'+(curMyCoinNum.i+1) : '暂无排名'}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</touch-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
const app = getApp()
|
||
import {
|
||
ref,
|
||
defineExpose,
|
||
computed
|
||
} from 'vue'
|
||
import touchPopup from '@/components/touch-popup/touch-popup'
|
||
const popup = ref() // ref组件
|
||
|
||
const curCoin = ref(1) // 0银币 1金币 2铜币
|
||
const rankList = ref({}) // 银币排行榜列表
|
||
const mySilverRank = ref({}) // 我的银币排名信息
|
||
const myGoldRank = ref({}) // 我的金币排名信息
|
||
const myCopperRank = ref({}) // 我的铜币排名信息
|
||
|
||
/* 计算属性 */
|
||
// 获取当前列表的金币、铜币还是银币图标
|
||
const coinType = computed(() => {
|
||
if (curCoin.value === 2) {
|
||
return 'silver.png'
|
||
} else if (curCoin.value === 1) {
|
||
return 'gold.png'
|
||
} else if (curCoin.value === 3) {
|
||
return 'copper.png'
|
||
}
|
||
})
|
||
// 当前列表
|
||
const curList = computed(() => {
|
||
return rankList.value[curCoin.value]
|
||
})
|
||
// 我的硬币数量
|
||
const curMyCoinNum = computed(() => {
|
||
if (curCoin.value === 2) {
|
||
if (JSON.stringify(mySilverRank.value) === '{}') return 0
|
||
return mySilverRank.value
|
||
} else if (curCoin.value === 1) {
|
||
if (JSON.stringify(myGoldRank.value) === '{}') return 0
|
||
return myGoldRank.value
|
||
} else if (curCoin.value === 3) {
|
||
if (JSON.stringify(myCopperRank.value) === '{}') return 0
|
||
return myCopperRank.value
|
||
}
|
||
})
|
||
|
||
/* 方法 */
|
||
const switchTab = (e) => {
|
||
if (curCoin.value === e) return
|
||
curCoin.value = e
|
||
}
|
||
const open = () => {
|
||
popup.value.open()
|
||
if (JSON.stringify(rankList.value) !== '{}') return
|
||
uni.showLoading()
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/coin/user/top',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success: (res) => {
|
||
if (res.data.code === 200) {
|
||
rankList.value = res.data.data
|
||
for (let i = 0; i < res.data.data[1].length; i++) {
|
||
if (res.data.data[1][i].user_id == app.globalData.userinfo.id) {
|
||
myGoldRank.value = res.data.data[1][i]
|
||
myGoldRank.value.i = i
|
||
break
|
||
}
|
||
} // 我的金币排名信息
|
||
for (let i = 0; i < res.data.data[2].length; i++) {
|
||
if (res.data.data[2][i].user_id == app.globalData.userinfo.id) {
|
||
mySilverRank.value = res.data.data[2][i]
|
||
mySilverRank.value.i = i
|
||
break
|
||
}
|
||
} // 我的银币排名信息
|
||
for (let i = 0; i < res.data.data[3].length; i++) {
|
||
if (res.data.data[3][i].user_id == app.globalData.userinfo.id) {
|
||
myCopperRank.value = res.data.data[3][i]
|
||
myCopperRank.value.i = i
|
||
break
|
||
}
|
||
} // 我的铜币排名信息
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: '获取排行榜列表失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
complete: () => {
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
}
|
||
defineExpose({
|
||
open
|
||
}) // 暴露方法
|
||
</script>
|
||
|
||
<style scoped>
|
||
.rank-weight {
|
||
color: #FFD600;
|
||
}
|
||
.my-bck {
|
||
background: linear-gradient(137.8deg, #C2FF8F 0%, #0DFFB9 99.99%);
|
||
border-radius: 25px;
|
||
height: 50px;
|
||
display: flex;
|
||
}
|
||
|
||
.myavatar image {
|
||
border: 3px solid #000;
|
||
border-radius: 20px;
|
||
width: 35px;
|
||
height: 35px;
|
||
}
|
||
|
||
.myavatar {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.mynickname {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.mybanance view {
|
||
padding: 0 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-left: 2px solid rgba(0, 0, 0, 0.1);
|
||
border-right: 2px solid rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.mybanance image {
|
||
width: 15px;
|
||
height: auto;
|
||
}
|
||
|
||
.mybanance text {
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.mybanance {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.myrank {
|
||
padding-right: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.mypoint {
|
||
padding: 0 15px 15px 15px;
|
||
}
|
||
|
||
.price-bck text {
|
||
padding: 0 8px 0 5px;
|
||
}
|
||
|
||
.price-bck image {
|
||
width: 23px;
|
||
height: auto;
|
||
}
|
||
|
||
.price-bck .logo-bck {
|
||
display: flex;
|
||
}
|
||
|
||
.price-bck {
|
||
height: 18px;
|
||
background: linear-gradient(137.8deg, #C2FF8F 0%, #0DFFB9 99.99%);
|
||
border-radius: 13px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.price-item {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.leftnum {
|
||
font-family: Baloo;
|
||
font-size: 25px;
|
||
font-weight: 400;
|
||
line-height: 39.35px;
|
||
width: 50px;
|
||
font-weight: bolder;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.zhuangshi {
|
||
width: 11px !important;
|
||
position: absolute;
|
||
top: -3px;
|
||
}
|
||
|
||
.centeravatar image {
|
||
width: 29px;
|
||
height: auto;
|
||
}
|
||
|
||
.centeravatar {
|
||
display: flex;
|
||
width: 50px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
.centernickname {
|
||
flex: 2;
|
||
font-size: 15px;
|
||
display: flex;
|
||
padding: 0 20px;
|
||
align-items: center;
|
||
}
|
||
|
||
.rightbalance {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.rank-item {
|
||
display: flex;
|
||
padding: 5px;
|
||
}
|
||
|
||
.rank-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-radius: 15px;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.pd-25 {
|
||
padding: 5px 25px;
|
||
}
|
||
|
||
scroll-view {
|
||
height: calc(100% - 300px);
|
||
}
|
||
|
||
.coin-text {
|
||
font-size: 14px;
|
||
padding: 3px 10px;
|
||
border-radius: 10px;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.tabbar-item image {
|
||
width: 60px;
|
||
height: auto;
|
||
}
|
||
|
||
.check image {
|
||
width: 75px !important;
|
||
}
|
||
|
||
.tabbar-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
height: 105px;
|
||
}
|
||
|
||
.tabbar {
|
||
padding: 15px 50px 15px 50px;
|
||
display: flex;
|
||
}
|
||
|
||
.star1 image {
|
||
width: 80px;
|
||
height: auto;
|
||
}
|
||
|
||
.star1 {
|
||
position: absolute;
|
||
top: 40px;
|
||
left: 0;
|
||
}
|
||
|
||
.star2 image {
|
||
width: 40px;
|
||
height: auto;
|
||
}
|
||
|
||
.star2 {
|
||
position: absolute;
|
||
top: 45px;
|
||
right: 60px;
|
||
}
|
||
|
||
.star3 image {
|
||
width: 25px;
|
||
height: auto;
|
||
}
|
||
|
||
.star3 {
|
||
position: absolute;
|
||
top: 70px;
|
||
left: 145px;
|
||
}
|
||
|
||
.star4 image {
|
||
width: 75px;
|
||
height: auto;
|
||
}
|
||
|
||
.star4 {
|
||
position: absolute;
|
||
top: 90px;
|
||
right: 0px;
|
||
}
|
||
|
||
.bck {
|
||
height: 100%;
|
||
background: linear-gradient(180deg, #FEF0A7 0%, #FFFFFF 68.42%);
|
||
}
|
||
</style> |