TmOct5/dtx_store
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

merge

Browse Source
This commit is contained in:
张冬雪
2022-08-11 16:27:13 +08:00
parent 4b3d83007b e56aa382a9
commit d6e3ebef1a
23 changed files with 3638 additions and 1101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

744
pages/rank/index.vue
View File

@@ -1,391 +1,359 @@
<template>
<view class="rank">
<view class="rank_top">
<view class="rank_top_left">
<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>
<image class="rank_top_right" src="../../static/rank/rank.png" mode="widthFix" />
</view>
<scroll-view class="rank_type" scroll-x="true">
<view :class="['rank_type_item',type === '1'?'rank_type_item_active':'']" @click="changeType('1')">上周加成榜
</view>
<view :class="['rank_type_item',type === '2'?'rank_type_item_active':'']" @click="changeType('2')">本周邀请榜
</view>
<view :class="['rank_type_item',type === '3'?'rank_type_item_active':'']" @click="changeType('3')">会员邀请榜
</view>
<view :class="['rank_type_item',type === '4'?'rank_type_item_active':'']" @click="changeType('4')">用户邀请榜
</view>
</scroll-view>
<view class="rank_update_time" v-if="lists.length > 0 && type !== '3'&& type !== '4' && showCountDown">
<view class="title"> 加成{{type === '1'?'结束':'生效'}}倒计时 : </view>
<u-count-down ref="countDown" :time="end_timestamp" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
<view class="time">
<view class="time__item">
<view class="time__item_no">{{ timeData.days }} </view>天
</view>
<view class="time__item">
<view class="time__item_no">{{ timeData.hours>9?timeData.hours:'0'+timeData.hours}}</view>时
</view>
<view class="time__item">
<view class="time__item_no">{{ timeData.minutes>9?timeData.minutes:'0'+timeData.minutes}}</view>
分
</view>
<view class="time__item">
<view class="time__item_no">{{ timeData.seconds>9?timeData.seconds:'0'+timeData.seconds}}</view>
秒
</view>
</view>
</u-count-down>
</view>
<view class="list">
<block v-if="lists.length>0">
<view class="list_item" v-for="(item,index) in lists" :keys='index'>
<view class="no" v-if="type === '3' || type === '4'">
<image v-if="index < 1" class="image" :src="'/static/rank/rank-'+(index+1)+'.png'"
mode="widthFix" />
<view v-else class="txt"> {{index + 1}} </view>
</view>
<view class="no" v-if="type !== '3' && type !== '4'">
<image v-if="index < 3" class="image" :src="'/static/rank/rank-'+(index+1)+'.png'"
mode="widthFix" />
<view v-else class="txt"> {{index + 1}} </view>
</view>
<view class="user_info">
<view class="user">
<image class="avatar" :src="item.avatar" mode="aspectFill" />
<view class="nickname"> {{item.nickname}} </view>
<view class="wight" v-if="type === '1'">+{{item.rate}}%</view>
</view>
<view class="tuijian">
<view class="num"> {{item.number}}</view>
<view class="title">{{type === '4'?'邀请用户':'邀请会员'}}</view>
</view>
</view>
</view>
</block>
<block v-else>
<view class="vertical pages-empty">
<u-empty icon="http://cdn.uviewui.com/uview/empty/list.png" textColor="#999"
:text="type === '1'?'上周无加成数据':'当前暂无邀请数据'">
</u-empty>
</view>
</block>
</view>
</view>
</template>
<script>
import {
week,
week_mul,
total,
totaluser
} from '@/apis/interfaces/rank.js'
export default {
data() {
return {
end_timestamp: 0,
lists: [],
timeData: {},
type: "1", // 1 加成榜 2邀请榜
page_id: '',
showCountDown:false, // 是否显示倒计时 默认不显示，隐藏页面移出
}
},
onShow() {
<template>
<view class="rank">
<view class="rank_top">
<view class="rank_top_left">
<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>
<image class="rank_top_right" src="../../static/rank/rank.png" mode="widthFix" />
</view>
<!-- @click="click" -->
<u-sticky bgColor="#34CE98">
<u-tabs
:list="tabs"
lineColor="white"
:activeStyle="{color: 'white', fontWeight: 'bold', fontSize: '15px'}"
:inactiveStyle="{color: 'rgba(255,255,255,.6)', fontSize: '15px'}"
:itemStyle="{'height': '50px'}"
@click="onTabs"
/>
</u-sticky>
<view class="rank_update_time" v-if="type != '3' && type != '4' && end_timestamp">
<view class="title"> 加成{{type === '1'?'结束':'生效'}}倒计时:</view>
<u-count-down
ref="countDown"
format="DD:HH:mm:ss"
:time="end_timestamp"
:autoStart="false"
@change="downTime"
>
<view class="time">
<view class="time__item">
<text class="time__item_no">{{ timeData.days > 9 ? timeData.days: '0' + timeData.days }} </text>天
</view>
<view class="time__item">
<text class="time__item_no">{{ timeData.hours > 9 ? timeData.hours : '0' + timeData.hours}}</text>时
</view>
<view class="time__item">
<text class="time__item_no">{{ timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes}}</text>分
</view>
<view class="time__item">
<text class="time__item_no">{{ timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds}}</text>秒
</view>
</view>
</u-count-down>
</view>
<view class="list">
<block v-if="lists.length>0">
<view class="list_item" v-for="(item,index) in lists" :keys='index'>
<view class="no">
<image v-if="index < 3" class="image" :src="'/static/rank/rank-'+(index+1)+'.png'"
mode="widthFix" />
<view v-else class="txt"> {{index + 1}} </view>
</view>
<view class="user_info">
<view class="user">
<image class="avatar" :src="item.avatar" mode="aspectFill" />
<view class="nickname"> {{item.nickname}} </view>
<view class="wight" v-if="type === '1'">+{{item.rate}}%</view>
</view>
<view class="tuijian">
<view class="num"> {{item.number}}</view>
<view class="title">{{type === '4'?'邀请用户':'邀请会员'}}</view>
</view>
</view>
</view>
</block>
<block v-else>
<view class="vertical pages-empty">
<u-empty
icon="http://cdn.uviewui.com/uview/empty/list.png"
textColor="#999"
:text="type === '1'?'上周无加成数据':'当前暂无邀请数据'">
</u-empty>
</view>
</block>
</view>
</view>
</template>
<script>
import {
week,
week_mul,
total,
totaluser
} from '@/apis/interfaces/rank.js'
export default {
data() {
return {
end_timestamp: 0,
lists : [],
timeData : {
days : 0,
hours : 0,
minutes : 0,
seconds : 0
},
type : '1', // 1加成榜 2邀请榜 3会员邀请 4用户邀请
page_id : '',
tabs : [
{name: '上周加成榜', type: '1'},
{name: '本周邀请榜', type: '2'},
{name: '会员邀请榜', type: '3'},
{name: '用户邀请榜', type: '4'},
],
}
},
onShow() {
this.getList();
},
onHide() {
this.showCountDown = false;
},
methods: {
onChange(e) {
this.timeData = e
},
changeType(type) {
if (this.type !== type) {
this.lists = [];
this.type = type;
uni.showLoading({})
this.getList();
}
},
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 = totaluser
} else {
urlRequest = total
}
urlRequest().then(res => {
this.lists = res.rand;
this.page_id = res.page_id;
this.end_timestamp = res.end_timestamp * 1000;
},
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 = totaluser
} else {
urlRequest = total
}
urlRequest().then(res => {
this.lists = res.rand;
this.page_id = res.page_id;
this.end_timestamp = res.end_timestamp * 1000;
this.$nextTick(() => {
if(this.$refs.countDown){
this.$refs.countDown.start()
}
})
uni.hideLoading()
this.showCountDown = true;
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none',
mask: true
})
})
}
}
}
</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;
.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;
font-weight: 500;
color: white;
padding-left: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin-top: 10rpx;
image {
width: 32rpx;
margin-left: 6rpx;
}
}
}
.rank_top_right {
width: 280rpx;
}
}
.rank_type {
background-color: #26b398;
white-space: nowrap;
width: 100%;
.rank_type_item {
display: inline-block;
width: 18%;
text-align: center;
font-size: 36rpx;
text-align: center;
padding: 40rpx;
font-size: 32rpx;
font-weight: 400;
color: rgba($color: #fff, $alpha: 0.6);
}
.rank_type_item_active {
position: relative;
color: white;
&::after {
content: '';
border-bottom: 20rpx solid white;
border-right: 16rpx solid transparent;
border-left: 16rpx solid transparent;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -20rpx;
}
}
}
.rank_update_time {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 50rpx 30rpx;
width: 100%;
.title {
font-size: 28rpx;
font-weight: normal;
color: #34CE98;
}
.time {
padding-left: 20rpx;
flex: 1;
font-size: 28rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
color: #333;
.time__item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
.time__item_no {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
background-color: #34CE98;
color: white;
min-width: 50rpx;
min-height: 50rpx;
border-radius: 4rpx;
margin: 0 16rpx;
font-size: 36rpx;
font-weight: bold;
padding: 2rpx 10rpx;
}
}
}
}
.list {
border-top: 30rpx solid #f9f9f9;
padding: 30rpx;
.list_item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.no {
width: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
.image {
width: 54rpx;
}
.txt {
font-weight: 600;
font-size: 34rpx;
color: #333;
}
}
.user_info {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
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;
}
}
}
}
}
}).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;
font-weight: 500;
color: white;
padding-left: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin-top: 10rpx;
image {
width: 32rpx;
margin-left: 6rpx;
}
}
}
.rank_top_right {
width: 280rpx;
}
}
.rank_update_time {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 50rpx 30rpx;
width: 100%;
border-bottom: 20rpx solid $window-color;
.title {
font-size: 28rpx;
font-weight: normal;
color: #34CE98;
padding-right: 10rpx;
}
.time{
display: flex;
.time__item{
font-size: 28rpx;
color: #34CE98;
}
.time__item_no{
background: #34CE98;
border-radius: 5rpx;
color: white;
width: 50rpx;
display: inline-block;
text-align: center;
margin: 0 10rpx;
}
}
}
.list {
padding: 30rpx;
.list_item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.no {
width: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
.image {
width: 54rpx;
}
.txt {
font-weight: 600;
font-size: 34rpx;
color: #333;
}
}
.user_info {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
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>