排行榜新增本月排行及上月排行筛选

This commit is contained in:
2022-08-31 10:33:36 +08:00
parent 347e9a05e0
commit 68df0a014f
8 changed files with 789 additions and 581 deletions

View File

@@ -9,8 +9,8 @@ import router from '../router'
// 基础配置 // 基础配置
const config = { const config = {
// apiUrl : 'https://api.gongli.vip/api/', // 正式环境 apiUrl : 'https://api.gongli.vip/api/', // 正式环境
apiUrl: 'http://api.gl.shangkelian.cn/api/', // 测试 // apiUrl: 'http://api.gl.shangkelian.cn/api/', // 测试
timeout: 60000 timeout: 60000
} }
@@ -46,7 +46,6 @@ const request = (parameter, hideLoding = true) => {
data: parameter.data || {}, data: parameter.data || {},
method: parameter.method || 'GET', method: parameter.method || 'GET',
success: res => { success: res => {
console.log(res)
if (res.header.Authorization) { if (res.header.Authorization) {
updateToken('token', res.header.Authorization) updateToken('token', res.header.Authorization)
} }

View File

@@ -39,9 +39,25 @@ const totaluser = () => {
}) })
} }
// 月度推荐会员排行榜
const monthVip = () => {
return request({
url: 'user/rank/month_vip'
})
}
// 月度推荐用户排行榜
const monthUser = () => {
return request({
url: 'user/rank/month_user'
})
}
export { export {
week_mul, week_mul,
week, week,
total, total,
totaluser totaluser,
monthVip,
monthUser
} }

View File

@@ -1,359 +1,424 @@
<template> <template>
<view class="rank"> <view class="rank">
<view class="rank_top"> <view class="rank_top">
<view class="rank_top_left"> <view class="rank_top_left">
<image class="rank_title" src="../../static/rank/rank_txt.png" mode="widthFix" /> <image class="rank_title" src="../../static/rank/rank_txt.png" mode="widthFix" />
<view class="rank_sub_title" @click="toHelp"> 共力家族 周会员邀请 <image src="/static/rank/help.png" mode="widthFix" /> </view> <view class="rank_sub_title" @click="toHelp"> 共力家族 周会员邀请
</view> <image src="/static/rank/help.png" mode="widthFix" />
<image class="rank_top_right" src="../../static/rank/rank.png" mode="widthFix" /> </view>
</view> </view>
<!-- @click="click" --> <image class="rank_top_right" src="../../static/rank/rank.png" mode="widthFix" />
<u-sticky bgColor="#34CE98"> </view>
<u-tabs <!-- @click="click" -->
:list="tabs" <u-sticky bgColor="#34CE98">
lineColor="white" <u-tabs :list="tabs" lineColor="white" :activeStyle="{color: 'white', fontWeight: 'bold', fontSize: '15px'}"
:activeStyle="{color: 'white', fontWeight: 'bold', fontSize: '15px'}" :inactiveStyle="{color: 'rgba(255,255,255,.6)', fontSize: '15px'}" :itemStyle="{'height': '50px'}"
:inactiveStyle="{color: 'rgba(255,255,255,.6)', fontSize: '15px'}" @click="onTabs" />
:itemStyle="{'height': '50px'}" </u-sticky>
@click="onTabs"
/> <view class="rank_update_time" v-if="type != '3' && type != '4' && end_timestamp">
</u-sticky> <view class="title"> 加成{{type === '1'?'结束':'生效'}}倒计时:</view>
<u-count-down ref="countDown" format="DD:HH:mm:ss" :time="end_timestamp" :autoStart="false"
<view class="rank_update_time" v-if="type != '3' && type != '4' && end_timestamp"> @change="downTime">
<view class="title"> 加成{{type === '1'?'结束':'生效'}}倒计时:</view> <view class="time">
<u-count-down <view class="time__item">
ref="countDown" <text class="time__item_no">{{ timeData.days > 9 ? timeData.days: '0' + timeData.days }}
format="DD:HH:mm:ss" </text>
:time="end_timestamp" </view>
:autoStart="false" <view class="time__item">
@change="downTime" <text
> class="time__item_no">{{ timeData.hours > 9 ? timeData.hours : '0' + timeData.hours}}</text>
<view class="time"> </view>
<view class="time__item"> <view class="time__item">
<text class="time__item_no">{{ timeData.days > 9 ? timeData.days: '0' + timeData.days }} </text> <text
</view> class="time__item_no">{{ timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes}}</text>
<view class="time__item"> </view>
<text class="time__item_no">{{ timeData.hours > 9 ? timeData.hours : '0' + timeData.hours}}</text> <view class="time__item">
</view> <text
<view class="time__item"> class="time__item_no">{{ timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds}}</text>
<text class="time__item_no">{{ timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes}}</text> </view>
</view> </view>
<view class="time__item"> </u-count-down>
<text class="time__item_no">{{ timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds}}</text> </view>
</view>
</view> <block v-if="type =='3' || type == '4'">
</u-count-down> <view class="rank_update_time">
</view> <view :class="['title', 'sub-title',current?'actived':'']" @click="getCurrent('1')">
<view class="list"> <image v-if="current" src="/static/rank/mo.png" mode="widthFix" />
<block v-if="lists.length>0"> <image v-else src="/static/rank/mo-null.png" mode="widthFix" /> 本月排行
<view class="list_item" v-for="(item,index) in lists" :keys='index'> </view>
<view class="no"> <view :class="['title', 'sub-title',!current?'actived':'']" @click="getCurrent('2')">
<image v-if="index < 3" class="image" :src="'/static/rank/rank-'+(index+1)+'.png'" <image v-if="!current" src="/static/rank/mo.png" mode="widthFix" />
mode="widthFix" /> <image v-else src="/static/rank/mo-null.png" mode="widthFix" />上月排行
<view v-else class="txt"> {{index + 1}} </view> </view>
</view> </view>
<view class="user_info"> </block>
<view class="user">
<image class="avatar" :src="item.avatar" mode="aspectFill" /> <view class="list">
<view class="nickname"> {{item.nickname}} </view> <block v-if="lists.length>0">
<view class="wight" v-if="type === '1'">+{{item.rate}}%</view> <view class="list_item" v-for="(item,index) in lists" :keys='index'>
</view> <view class="no">
<view class="tuijian"> <image v-if="index < 3" class="image" :src="'/static/rank/rank-'+(index+1)+'.png'"
<view class="num"> {{item.number}}</view> mode="widthFix" />
<view class="title">{{type === '4'?'邀请用户':'邀请会员'}}</view> <view v-else class="txt"> {{index + 1}} </view>
</view> </view>
</view> <view class="user_info">
</view> <view class="user">
</block> <image class="avatar" :src="item.avatar" mode="aspectFill" />
<block v-else> <view class="nickname"> {{item.nickname}} </view>
<view class="vertical pages-empty"> <view class="wight" v-if="type === '1'">+{{item.rate}}%</view>
<u-empty </view>
icon="http://cdn.uviewui.com/uview/empty/list.png" <view class="tuijian">
textColor="#999" <view class="num"> {{item.number}}</view>
:text="type === '1'?'上周无加成数据':'当前暂无邀请数据'"> <view class="title">{{type === '4'?'邀请用户':'邀请会员'}}</view>
</u-empty> </view>
</view> </view>
</block> </view>
</view> </block>
</view> <block v-else>
</template> <view class="vertical pages-empty">
<script> <u-empty icon="http://cdn.uviewui.com/uview/empty/list.png" textColor="#999"
import { :text="type === '1'?'上周无加成数据':'当前暂无邀请数据'">
week, </u-empty>
week_mul, </view>
total, </block>
totaluser </view>
} from '@/apis/interfaces/rank.js' </view>
export default { </template>
data() { <script>
return { import {
end_timestamp: 0, week,
lists : [], week_mul,
timeData : { total,
days : 0, totaluser,
hours : 0, monthVip,
minutes : 0, monthUser
seconds : 0 } from '@/apis/interfaces/rank.js'
}, export default {
type : '1', // 1加成榜 2邀请榜 3会员邀请 4用户邀请 data() {
page_id : '', return {
tabs : [ end_timestamp: 0,
{name: '上周加成榜', type: '1'}, lists: [],
{name: '本周邀请榜', type: '2'}, timeData: {
{name: '会员邀请榜', type: '3'}, days: 0,
{name: '用户邀请榜', type: '4'}, hours: 0,
], minutes: 0,
} seconds: 0
}, },
onShow() { type: '1', // 1加成榜 2邀请榜 3会员邀请 4用户邀请
this.getList(); page_id: '',
}, tabs: [{
methods: { name: '上周加成榜',
onTabs(e){ type: '1'
if(this.type == e.type){ },
return {
} name: '本周邀请榜',
if(this.$refs.countDown){ type: '2'
this.$refs.countDown.pause() },
} {
uni.showLoading({ name: '会员邀请榜',
title: '加载中...' type: '3'
}) },
this.type = e.type {
this.lists = [] name: '用户邀请榜',
this.getList() type: '4'
}, },
downTime(e) { ],
this.timeData = e current: true,
listsInfo:{},// current last
}
},
onShow() {
this.getList();
},
methods: {
onTabs(e) {
if (this.type == e.type) {
return
}
if (this.$refs.countDown) {
this.$refs.countDown.pause()
}
uni.showLoading({
title: '加载中...'
})
this.type = e.type
this.lists = []
this.getList()
},
downTime(e) {
this.timeData = e
},
toHelp() {
uni.navigateTo({
url: 'pages/vip/agreement?id=' + this.page_id
})
},
getList() {
let urlRequest = ''
if (this.type === '1') {
urlRequest = week_mul
} else if (this.type === '2') {
urlRequest = week
} else if (this.type === '4') {
urlRequest = monthUser
} else {
urlRequest = monthVip
}
urlRequest().then(res => {
if (this.type === '1' || this.type === '2') {
this.lists = res.rand;
this.end_timestamp = res.end_timestamp * 1000;
this.$nextTick(() => {
if (this.$refs.countDown) {
this.$refs.countDown.start()
}
})
} else if (this.type === '3' || this.type === '4') {
this.current = true;
this.listsInfo = res.rank;
this.lists = res.rank.current;
}
this.page_id = res.page_id;
uni.hideLoading()
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none',
mask: true
})
})
}, },
toHelp() { getCurrent(id){
uni.navigateTo({ if(id === '1'){
url: 'pages/vip/agreement?id=' + this.page_id this.current = true;
}) }else{
}, this.current = false;
getList() {
let urlRequest = ''
if (this.type === '1') {
urlRequest = week_mul
} else if (this.type === '2') {
urlRequest = week
} else if (this.type === '4') {
urlRequest = totaluser
} else {
urlRequest = total
} }
urlRequest().then(res => { if(this.current){
this.lists = res.rand; this.lists = this.listsInfo.current
this.page_id = res.page_id; }else{
this.end_timestamp = res.end_timestamp * 1000; this.lists = this.listsInfo.last
this.$nextTick(() => {
if(this.$refs.countDown){
this.$refs.countDown.start()
}
})
uni.hideLoading()
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none',
mask: true
})
})
}
},
onHide() {
try {
if(this.$refs.countDown){
this.$refs.countDown.pause()
}
} catch (err) {
uni.showToast({
title: err,
icon: 'none'
})
}
}
}
</script>
<style lang="scss">
.rank {
.rank_top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
background-color: #34CE98;
padding: 50rpx 30rpx 40rpx 30rpx;
border-bottom: solid 1rpx rgba($color: #fff, $alpha: 0.6);
.rank_top_left {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
.rank_title {
width: 360rpx;
} }
}
.rank_sub_title { },
font-size: 28rpx; onHide() {
font-weight: 500; try {
color: white; if (this.$refs.countDown) {
padding-left: 20rpx; this.$refs.countDown.pause()
display: flex; }
flex-direction: row; } catch (err) {
align-items: center; uni.showToast({
justify-content: center; title: err,
box-sizing: border-box; icon: 'none'
margin-top: 10rpx; })
}
image { }
width: 32rpx; }
margin-left: 6rpx; </script>
} <style lang="scss">
} .rank {
} .rank_top {
display: flex;
.rank_top_right { flex-direction: row;
width: 280rpx; align-items: center;
} justify-content: space-between;
} box-sizing: border-box;
background-color: #34CE98;
.rank_update_time { padding: 50rpx 30rpx 40rpx 30rpx;
display: flex; border-bottom: solid 1rpx rgba($color: #fff, $alpha: 0.6);
flex-direction: row;
align-items: center; .rank_top_left {
justify-content: center; display: flex;
box-sizing: border-box; flex-direction: column;
padding: 50rpx 30rpx; align-items: flex-start;
width: 100%; justify-content: flex-start;
border-bottom: 20rpx solid $window-color; box-sizing: border-box;
.title {
font-size: 28rpx; .rank_title {
font-weight: normal; width: 360rpx;
color: #34CE98; }
padding-right: 10rpx;
} .rank_sub_title {
.time{ font-size: 28rpx;
display: flex; font-weight: 500;
.time__item{ color: white;
font-size: 28rpx; padding-left: 20rpx;
color: #34CE98; display: flex;
} flex-direction: row;
.time__item_no{ align-items: center;
background: #34CE98; justify-content: center;
border-radius: 5rpx; box-sizing: border-box;
color: white; margin-top: 10rpx;
width: 50rpx;
display: inline-block; image {
text-align: center; width: 32rpx;
margin: 0 10rpx; margin-left: 6rpx;
} }
} }
} }
.list { .rank_top_right {
padding: 30rpx; width: 280rpx;
.list_item { }
display: flex; }
flex-direction: row;
align-items: center; .rank_update_time {
justify-content: space-between; display: flex;
box-sizing: border-box; flex-direction: row;
align-items: center;
.no { justify-content: center;
width: 80rpx; box-sizing: border-box;
display: flex; padding: 50rpx 30rpx;
flex-direction: row; width: 100%;
align-items: center; border-bottom: 20rpx solid $window-color;
justify-content: center;
box-sizing: border-box; .sub-title {
flex: 1;
.image { display: flex;
width: 54rpx; flex-direction: row;
} align-items: center;
justify-content: center;
.txt { box-sizing: border-box;
font-weight: 600;
font-size: 34rpx; image {
color: #333; width: 36rpx !important;
} margin-right: 20rpx;
} }
}
.user_info {
flex: 1; .title {
display: flex; font-size: 28rpx;
flex-direction: row; font-weight: normal;
align-items: center; color: #999;
justify-content: space-between; padding-right: 10rpx;
box-sizing: border-box; }
border-bottom: solid 1rpx #f9f9f9;
padding: 30rpx 20rpx 30rpx 0; .actived {
margin-left: 30rpx; color: #34CE98;
}
.user {
display: flex; .time {
flex-direction: row; display: flex;
align-items: center;
justify-content: flex-start; .time__item {
box-sizing: border-box; font-size: 28rpx;
color: #34CE98;
}
.avatar {
width: 90rpx; .time__item_no {
height: 90rpx; background: #34CE98;
border-radius: 50%; border-radius: 5rpx;
margin-right: 30rpx; color: white;
} width: 50rpx;
display: inline-block;
.nickname { text-align: center;
font-size: 30rpx; margin: 0 10rpx;
color: #333; }
max-width: 200rpx; }
font-weight: bold; }
overflow: hidden;
text-overflow: ellipsis; .list {
white-space: nowrap; padding: 30rpx;
display: flex;
flex-direction: row; .list_item {
align-items: center; display: flex;
justify-content: flex-start; flex-direction: row;
box-sizing: border-box; align-items: center;
} justify-content: space-between;
box-sizing: border-box;
.wight {
font-size: 26rpx; .no {
font-weight: normal; width: 80rpx;
margin-left: 20rpx; display: flex;
background-color: #bdc6d7; flex-direction: row;
color: #fff; align-items: center;
border-radius: 30rpx; justify-content: center;
padding: 0 10rpx; box-sizing: border-box;
}
} .image {
} width: 54rpx;
}
.tuijian {
display: flex; .txt {
flex-direction: column; font-weight: 600;
align-items: center; font-size: 34rpx;
justify-content: center; color: #333;
box-sizing: border-box; }
}
.num {
color: #999; .user_info {
font-size: 30rpx; flex: 1;
} display: flex;
flex-direction: row;
.title { align-items: center;
font-size: 22rpx; justify-content: space-between;
color: #999; box-sizing: border-box;
} border-bottom: solid 1rpx #f9f9f9;
} padding: 30rpx 20rpx 30rpx 0;
} margin-left: 30rpx;
}
.user {
} display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.avatar {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
margin-right: 30rpx;
}
.nickname {
font-size: 30rpx;
color: #333;
max-width: 200rpx;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
}
.wight {
font-size: 26rpx;
font-weight: normal;
margin-left: 20rpx;
background-color: #bdc6d7;
color: #fff;
border-radius: 30rpx;
padding: 0 10rpx;
}
}
}
.tuijian {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
.num {
color: #999;
font-size: 30rpx;
}
.title {
font-size: 22rpx;
color: #999;
}
}
}
}
}
</style> </style>

BIN
static/.DS_Store vendored Normal file

Binary file not shown.

BIN
static/rank/mo-null.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
static/rank/mo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long