初始提交
This commit is contained in:
204
pages/portal/components/HRankList/index.vue
Normal file
204
pages/portal/components/HRankList/index.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<view class="rankList-v">
|
||||
<platform v-if="option.styleType==3 || option.styleType==4" :styleType="option.styleType" :option="option"
|
||||
:key="key" :props="props" />
|
||||
<view class="rankList-list">
|
||||
<view class="rankList-list-box">
|
||||
<view class="table-tr u-flex table-title">
|
||||
<view class="table-th u-flex" v-for="(item,index) in option.columnOptions" :key="index"
|
||||
:style="{'width':option.columnOptions.length>1&&option.columnOptions.length<=3?100 / option.columnOptions.length + '%':'208rpx'}">
|
||||
<view class="commin-padding u-line-1">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table-tr u-flex" v-for="(tr,i) in option.defaultValue" :key="i" @tap="jump(tr)">
|
||||
<view class="table-td" v-for="(item,index) in option.columnOptions" :key="index"
|
||||
:style="{'width':option.columnOptions.length>1&&option.columnOptions.length<=3?100 / option.columnOptions.length + '%':'208rpx'}">
|
||||
<view class="commin-padding"
|
||||
v-if="item.value === 'pm'&& i+1 > 0 && i+1<4 && option.styleType!==3 && option.styleType!==4">
|
||||
<view class="image-box">
|
||||
<u-image :src='tr.imgUrl' width='60rpx' height='60rpx'>
|
||||
</u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="commin-padding" v-else>
|
||||
<view class="order" v-if="item.value === 'pm'" :style="option.styleType == 1?orderSty:''">
|
||||
<text>{{tr.index}}</text>
|
||||
</view>
|
||||
<view v-else class="u-line-1"
|
||||
:style="{'color':tr.index == 1?'rgb(206, 124, 31)':tr.index == 2?'rgb(111, 137, 172)':tr.index == 3?'rgb(141, 65, 18)':'#606266'}">
|
||||
{{tr[item.value]}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getDataInterfaceRes
|
||||
} from '@/api/common'
|
||||
import platform from './platform.vue'
|
||||
import ordinary0 from '@/pages/portal/static/image/ordinary0.png'
|
||||
import ordinary1 from '@/pages/portal/static/image/ordinary1.png'
|
||||
import ordinary2 from '@/pages/portal/static/image/ordinary2.png'
|
||||
import medal0 from '@/pages/portal/static/image/medal0.png'
|
||||
import medal1 from '@/pages/portal/static/image/medal1.png'
|
||||
import medal2 from '@/pages/portal/static/image/medal2.png'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
platform
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderSty: {
|
||||
'background': 'rgba(24, 144, 255, 0.39)',
|
||||
'border-radius': '50%',
|
||||
'opacity': 0.3,
|
||||
'color': '#fff'
|
||||
},
|
||||
option: {},
|
||||
props: {},
|
||||
ordinary0,
|
||||
ordinary1,
|
||||
ordinary2,
|
||||
medal0,
|
||||
medal1,
|
||||
medal2,
|
||||
key: +new Date()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
uni.$off('proRefresh')
|
||||
uni.$on('proRefresh', () => {
|
||||
this.initData()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
jump(item) {
|
||||
this.jnpf.solveAddressParam(item, this.config)
|
||||
this.jnpf.jumpLink(item.urlAddress)
|
||||
},
|
||||
init() {
|
||||
this.initData()
|
||||
if (!this.config.allRefresh.autoRefresh && this.config.refresh.autoRefresh) {
|
||||
setInterval(this.initData, this.config.refresh.autoRefreshTime * 60000)
|
||||
}
|
||||
},
|
||||
initData() {
|
||||
this.props = {
|
||||
label: this.config.option.columnOptions[0].value,
|
||||
value: this.config.option.columnOptions[1].value
|
||||
}
|
||||
this.option = JSON.parse(JSON.stringify(this.config.option))
|
||||
this.option.columnOptions.unshift({
|
||||
label: '排名',
|
||||
value: 'pm'
|
||||
})
|
||||
if (this.config.dataType === "dynamic") {
|
||||
if (!this.config.propsApi) return
|
||||
const query = {
|
||||
paramList: this.config.templateJson
|
||||
};
|
||||
getDataInterfaceRes(this.config.propsApi, query).then(res => {
|
||||
this.option.defaultValue = res.data || []
|
||||
this.handleAttrs()
|
||||
})
|
||||
} else {
|
||||
this.handleAttrs()
|
||||
}
|
||||
},
|
||||
handleAttrs() {
|
||||
if (!Array.isArray(this.option.defaultValue)) return
|
||||
this.option.defaultValue.forEach((o, i) => {
|
||||
o.index = i + 1
|
||||
if (i <= 2) {
|
||||
o.imgUrl = this.option.styleType == 1 || this.option.styleType == 3 ?
|
||||
this[`ordinary${i}`] : this[`medal${i}`]
|
||||
}
|
||||
})
|
||||
if (this.option.styleType == 3 || this.option.styleType == 4) {
|
||||
this.option.frontValue = this.option.defaultValue.slice(0, 3)
|
||||
if (this.option.defaultValue.length <= 3) this.option.columnOptions = []
|
||||
let newVal = this.option.defaultValue.slice(3, this.option.defaultValue.length)
|
||||
this.option.defaultValue = newVal
|
||||
}
|
||||
this.key = +new Date()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.rankList-v {
|
||||
.rankList-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.rankList-list-box {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
|
||||
.table-tr {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.table-th,
|
||||
.table-td {
|
||||
height: 80rpx;
|
||||
border-bottom: 1px solid #EEF0F4;
|
||||
box-sizing: border-box;
|
||||
|
||||
.commin-padding {
|
||||
height: 100%;
|
||||
width: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx;
|
||||
justify-content: center;
|
||||
|
||||
.image-box {
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.order {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
line-height: 46rpx;
|
||||
text-align: center;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
||||
.table-th,
|
||||
.table-td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
233
pages/portal/components/HRankList/platform.vue
Normal file
233
pages/portal/components/HRankList/platform.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<view class="stage" v-if="show" :key='key'>
|
||||
<view class="cup-top-box" v-if="platformData.styleType == 3">
|
||||
<view class="cup1-box cup-box" v-for="(item,index) in frontValue" :key="index">
|
||||
<view class="img">
|
||||
<image :src="imgList[index].url"></image>
|
||||
</view>
|
||||
<view class="top-bg"></view>
|
||||
<view class="cup-box-content" :class="'cup-box-content'+index">
|
||||
<text class="txt">{{item[props.label]}}</text>
|
||||
<text class="txt">{{item[props.value]}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="medal-v" v-if="platformData.styleType == 4">
|
||||
<view class="medal-box u-flex">
|
||||
<view class="medal-box-inner" :class="'medal-box-inner'+index" v-for="(item,index) in frontValue"
|
||||
:key="index">
|
||||
<view class="img">
|
||||
<image :src="imgList2[index].url"></image>
|
||||
</view>
|
||||
<view class="u-flex-col txt-box">
|
||||
<text class='txt'>{{item[props.label]}}</text>
|
||||
<text class='txt'>{{item[props.value]}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import runnerUp from '@/pages/portal/static/image/runnerUp.png'
|
||||
import champion from '@/pages/portal/static/image/champion.png'
|
||||
import thirdPlace from '@/pages/portal/static/image/thirdPlace.png'
|
||||
import runnerUp2 from '@/pages/portal/static/image/runnerUp2.png'
|
||||
import champion2 from '@/pages/portal/static/image/champion2.png'
|
||||
import thirdPlace2 from '@/pages/portal/static/image/thirdPlace3.png'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
props: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
label: 'label',
|
||||
value: 'value',
|
||||
})
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
platformData: {},
|
||||
show: false,
|
||||
key: +new Date(),
|
||||
imgList: [{
|
||||
url: runnerUp
|
||||
}, {
|
||||
url: champion
|
||||
}, {
|
||||
url: thirdPlace
|
||||
}],
|
||||
imgList2: [{
|
||||
url: runnerUp2
|
||||
}, {
|
||||
url: champion2
|
||||
}, {
|
||||
url: thirdPlace2
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
frontValue() {
|
||||
return this.platformData.frontValue || []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.platformData = JSON.parse(JSON.stringify(this.option)) || {}
|
||||
this.show = true
|
||||
this.key = +new Date()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.stage {
|
||||
.cup-top-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
overflow: hidden;
|
||||
padding: 20rpx 0 30rpx;
|
||||
|
||||
.cup-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
width: 100rpx;
|
||||
height: 96rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bg {
|
||||
width: 230rpx;
|
||||
height: 0;
|
||||
border-bottom: 10rpx solid rgba(239, 233, 225, .39);
|
||||
border-left: 20rpx solid transparent;
|
||||
border-right: 10rpx solid transparent;
|
||||
}
|
||||
|
||||
.cup-box-content {
|
||||
width: 230rpx;
|
||||
height: 90rpx;
|
||||
background: rgba(245, 241, 234, .59);
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #6f89ac;
|
||||
|
||||
.txt {
|
||||
font-size: 20rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #6F89AC;
|
||||
}
|
||||
}
|
||||
|
||||
.cup-box-content1 {
|
||||
height: 110rpx;
|
||||
|
||||
.txt {
|
||||
color: #CE7C1F;
|
||||
}
|
||||
}
|
||||
|
||||
.cup-box-content0 {
|
||||
.txt {
|
||||
color: #6F89AC;
|
||||
}
|
||||
}
|
||||
|
||||
.cup-box-content2 {
|
||||
.txt {
|
||||
color: #8D4112;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.medal-v {
|
||||
padding: 80rpx 0 0;
|
||||
|
||||
.medal-box {
|
||||
align-items: flex-end;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.medal-box-inner {
|
||||
width: 232rpx;
|
||||
height: 132rpx;
|
||||
border: 2rpx solid rgba(111, 137, 172, .59);
|
||||
position: relative;
|
||||
|
||||
.txt-box {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100rpx;
|
||||
height: 96rpx;
|
||||
position: absolute;
|
||||
top: -60rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-size: 20rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: rgba(111, 137, 172, .59);
|
||||
}
|
||||
}
|
||||
|
||||
.medal-box-inner1 {
|
||||
width: 252rpx;
|
||||
height: 176rpx;
|
||||
border: 2rpx solid rgba(206, 124, 31, .59);
|
||||
margin: 0 6rpx;
|
||||
position: relative;
|
||||
|
||||
.txt {
|
||||
|
||||
color: rgba(206, 124, 31, .59);
|
||||
}
|
||||
}
|
||||
|
||||
.medal-box-inner2 {
|
||||
border: 2rpx solid rgba(141, 65, 18, .59);
|
||||
|
||||
.txt-box {
|
||||
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.txt {
|
||||
color: rgba(141, 65, 18, .59);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user