133 lines
3.5 KiB
Vue
133 lines
3.5 KiB
Vue
<template>
|
|
<page-container title="哈尼券排行榜" :showBack="true">
|
|
<view class="content-container">
|
|
<image :src="$img('/static/image/reward_rule.png')" style="width: 686rpx; height: 120rpx; margin-top: 30rpx;"
|
|
@click="$refs.rulePop.getRule(24, '规则说明')" mode=""></image>
|
|
|
|
<view class="ranking-list">
|
|
<view class="ranking-item" v-for="(item,index) in list" :key="index"
|
|
:style="{backgroundColor: setBgColor(index)}">
|
|
|
|
<view class="" v-if="index == 0 "
|
|
style="width: 43rpx; height: 47rpx;color: #B8B8B8;text-align:center; margin-left: 32rpx;">
|
|
<image :src="$img1('/image/1.png')" style="width: 42rpx; height: 54rpx;"></image>
|
|
</view>
|
|
<view class="" v-if="index == 1 "
|
|
style="width: 43rpx; height: 47rpx;color: #B8B8B8;text-align:center; margin-left: 32rpx;">
|
|
<image :src="$img1('/image/2.png')" style="width: 42rpx; height: 54rpx;"></image>
|
|
</view>
|
|
<view class="" v-if="index == 2 "
|
|
style="width: 43rpx; height: 47rpx;color: #B8B8B8;text-align:center; margin-left: 32rpx;">
|
|
<image :src="$img1('/image/3.png')" style="width: 42rpx; height: 54rpx;"></image>
|
|
</view>
|
|
<view class="" v-if="index > 2 "
|
|
style="width: 42rpx; height: 42rpx;color: #333333;text-align:center; margin-left: 32rpx;">
|
|
{{index+1}}
|
|
</view>
|
|
|
|
<view class="" style="width: 94rpx; height: 94rpx; margin-left: 30rpx;">
|
|
<image :src="item.headimg" style="width: 94rpx; height: 94rpx; border-radius: 50%;"></image>
|
|
</view>
|
|
<view class="" style="display: flex; flex-direction: column; margin-left: 28rpx;flex: 1;">
|
|
<text style="font-size: 20rpx; color: #333333;">{{item.nickname}}</text>
|
|
</view>
|
|
<view class="" style="margin-right: 20rpx;">
|
|
<span style="color: #333333; font-size: 32rpx;">{{item.value}}<text
|
|
style="font-size: 16rpx; color: #8A8A8A;">张</text></span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<rule-pop ref="rulePop"></rule-pop>
|
|
</page-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAdvert } from '@/common/server/config'
|
|
import { getDadajuanRank } from '@/common/server/rank'
|
|
export default {
|
|
data() {
|
|
var list;
|
|
return {
|
|
advert: [], //轮播图
|
|
list: [],
|
|
colors: ['#FDFCD8', '#ECF7FF', '#FFF6EE', '#F8F8F8'],
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.load();
|
|
},
|
|
methods: {
|
|
async load() {
|
|
const advert = await getAdvert(4)
|
|
this.advert = advert
|
|
|
|
const res = await getDadajuanRank()
|
|
console.log(res);
|
|
if (res.status == 1) {
|
|
this.list = res.data
|
|
}
|
|
},
|
|
|
|
setBgColor(index) {
|
|
if (index == 0) {
|
|
return this.colors[index];
|
|
} else if (index == 1) {
|
|
return this.colors[index];
|
|
} else if (index == 2) {
|
|
return this.colors[index];
|
|
} else {
|
|
return this.colors[3];
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ranking-list {
|
|
width: 100%;
|
|
margin-bottom: 50rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.ranking-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-top: 30rpx;
|
|
border-radius: 14rpx;
|
|
padding-top: 15rpx;
|
|
padding-bottom: 15rpx;
|
|
}
|
|
|
|
.navLeft {
|
|
height: 44px;
|
|
z-index: 100;
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center !important;
|
|
|
|
>view {
|
|
width: 100%;
|
|
// font-family: YouSheBiaoTiHei;
|
|
position: absolute;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
font-size: 37rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
</style> |