99 lines
4.0 KiB
Vue
99 lines
4.0 KiB
Vue
<template>
|
|
<view>
|
|
<view class="page">
|
|
<view class="w100 h-180 relative">
|
|
<uni-nav-bar left-icon="back" title="销售额排行" :border="false" backgroundColor="transparent" class="fw-b" color="#fff" @clickLeft="$tools.goBack()"></uni-nav-bar>
|
|
</view>
|
|
<view class="w100 h-350 rows rowsm rowsa" v-if="lists.length>0">
|
|
<view class="w-210 h-306 rows rowsl rowsm br-20 mt-100" style="background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%)">
|
|
<view class="w-114 h-114 br-100" style="border: 2rpx solid #fff;margin-top: -30rpx;">
|
|
<image class="w100 h100 br-100" :src="$tools.oss(lists[1].avatar)" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="fs-30 fw-b mt-20 mb-20 pl-10 pr-10 two_overflow">{{lists[1].nickname}}</view>
|
|
<view class="w-170 h-72 br-20 rows rowsm rowsc fs-26" style="background-color: rgba(255,255,255,.1);">
|
|
{{lists[1].accumulative||0}}
|
|
</view>
|
|
</view>
|
|
<view class="w-210 h-306 rows rowsl rowsm br-20" style="background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%)">
|
|
<view class="w-114 h-114 br-100" style="border: 2rpx solid #fff;margin-top: -30rpx;">
|
|
<image class="w100 h100 br-100" :src="$tools.oss(lists[0].avatar)" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="fs-30 fw-b mt-20 mb-20 pl-10 pr-10 two_overflow">{{lists[0].nickname}}</view>
|
|
<view class="w-170 h-72 br-20 rows rowsm rowsc fs-26" style="background-color: rgba(255,255,255,.1);">
|
|
{{lists[0].accumulative||0}}
|
|
</view>
|
|
</view>
|
|
<view class="w-210 h-306 rows rowsl rowsm br-20 mt-150" style="background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%)">
|
|
<view class="w-114 h-114 br-100" style="border: 2rpx solid #fff;margin-top: -30rpx;">
|
|
<image class="w100 h100 br-100" :src="$tools.oss(lists[2].avatar)" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="fs-30 fw-b mt-20 mb-20 pl-10 pr-10 two_overflow">{{lists[2].nickname}}</view>
|
|
<view class="w-170 h-72 br-20 rows rowsm rowsc fs-26" style="background-color: rgba(255,255,255,.1);">
|
|
{{lists[2].accumulative||0}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="w100 h-350 rows rowsm rowsc" v-else>
|
|
<text class="fs-36 fw-b colfff">暂无排行</text>
|
|
</view>
|
|
<view class="w100 rows rowsc mt-30">
|
|
<view class="w-710 p-all-20 rows rowsl rowsm br-24 pl-10 pr-10 bgff">
|
|
<scroll-view scroll-y="true" style="height: calc(100vh - 600rpx);">
|
|
<view v-if="list.length>0">
|
|
<view class="w-646 h-154 rows rowsm rowsb" style="border-bottom: 1rpx solid #ccc;" v-for="(item,index) in list" :key="index">
|
|
<view class="rows rowsm">
|
|
<view class="w-38 h-38 rows rowsm rowsc colfff br-100 fs-22 bg">
|
|
{{index+4}}
|
|
</view>
|
|
<image class="w-80 h-80 br-100 mr-20 ml-20" :src="$tools.oss(item.avatar)" mode="aspectFill"></image>
|
|
<view class="fs-28 fw-b w-300 one_overflow">{{item.nickname}}</view>
|
|
</view>
|
|
<text class="fs-28">{{item.accumulative||0}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="w100 rows rowsc h-600 rowsm" v-else>
|
|
<image class="w-436 h-366" src="/static/other/5.png" mode=""></image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
list:[],
|
|
lists:[]
|
|
}
|
|
},
|
|
onShow() {
|
|
this.promoterMoney()
|
|
},
|
|
methods: {
|
|
promoterMoney(){
|
|
this.$tools.axiosFromToken("POST","user/promoterMoney").then(res => {
|
|
console.log(res)
|
|
this.list = res.data
|
|
this.lists = this.list.splice(0, 3)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
background-color: #F7F6FA;
|
|
}
|
|
.page{
|
|
width: 750rpx;
|
|
height: 678rpx;
|
|
background: linear-gradient( 180deg, #E73232 0%, rgba(231,50,50,0.94) 30.45%, rgba(231,50,50,0.91) 53.88%, rgba(231,50,50,0.8) 69.29%, rgba(231,50,50,0.54) 81.67%, rgba(231,50,50,0.26) 90.37%, rgba(231,50,50,0) 100%);
|
|
}
|
|
.box{
|
|
border: 2rpx solid #E73232;
|
|
}
|
|
</style> |