315 lines
8.0 KiB
Vue
315 lines
8.0 KiB
Vue
<!--
|
||
查排名 页面
|
||
-->
|
||
<script>
|
||
import StaticConstant from "@/common/StaticConstant";
|
||
import ApiConstant from "@/common/ApiConstant";
|
||
import Request from '@/common/request'
|
||
let request = new Request()
|
||
export default {
|
||
name: "checkRanking",
|
||
components: {},
|
||
computed: {
|
||
StaticConstant() {
|
||
return StaticConstant
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
province:'河南',
|
||
score: '',
|
||
list:[],
|
||
tab: 'professional',
|
||
show: true,
|
||
modeClass: 'fade',
|
||
styles: {},
|
||
array: ['河南'],
|
||
index: 0,
|
||
professionalCategoryArray:StaticConstant.professionalCategoryList,
|
||
professionalCategoryIndex:0,
|
||
fdbList:[
|
||
{
|
||
score:285,
|
||
personNum:36
|
||
},
|
||
{
|
||
score:280,
|
||
personNum:59
|
||
},
|
||
{
|
||
score:275,
|
||
personNum:161
|
||
},
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
handle(type) {
|
||
this.show = !this.show
|
||
this.modeClass = type
|
||
},
|
||
/*切换分数类型*/
|
||
switchTab(e) {
|
||
this.tab = e
|
||
},
|
||
/*点击查询按钮*/
|
||
clickSearch() {
|
||
if (this.status === 'show') {
|
||
this.handle('fade')
|
||
return;
|
||
}
|
||
if (!this.score) {
|
||
uni.showToast({
|
||
title: '请先输入分数',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
this.handle('fade')
|
||
if (!this.show) {
|
||
this.getList()
|
||
}
|
||
},
|
||
getList(){
|
||
request.get(ApiConstant.Score.scoreSegmentSearchByScore, {
|
||
province:this.array[this.index],
|
||
score:this.score,
|
||
professionalCategory:this.professionalCategoryArray[this.professionalCategoryIndex].label
|
||
}).then(r => {
|
||
console.log(r)
|
||
if (r.success) {
|
||
console.log(r)
|
||
this.list = r.result
|
||
}
|
||
}).catch(err => {
|
||
}).finally(() => {
|
||
});
|
||
},
|
||
bindPickerChange(e){
|
||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||
this.index = e.detail.value
|
||
},
|
||
bindProfessionalCategoryArrayPickerChange(e){
|
||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||
this.professionalCategoryIndex = e.detail.value
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="body">
|
||
<view class="example">
|
||
<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
|
||
:show="show">
|
||
</uni-transition>
|
||
<view style="transition:opacity 0.3s" :class="show?'t-show':'t-close'">
|
||
<view class="b1">
|
||
<view class="title">
|
||
<text>艺考排名查询</text>
|
||
</view>
|
||
</view>
|
||
<view class="b2">
|
||
<!--输入分数-->
|
||
<view style="display: flex;padding: 0 60rpx">
|
||
<view style="width: 100%">
|
||
<input style="font-size: 50rpx;height: 60rpx;text-align:center" v-model="score" placeholder="请输入分数"/>
|
||
</view>
|
||
</view>
|
||
<!--切换成绩-->
|
||
<view style="padding: 2rpx 30rpx;text-align: center;">
|
||
<view style="display: flex;border-top:1px #dddddd dashed;">
|
||
<view class="scoreTitle" :class="tab==='professional'?'scoreTitle-active':''" @click="switchTab('professional')">
|
||
<text>统考成绩</text>
|
||
</view>
|
||
<!-- <view class="scoreTitle" :class="tab==='cultural'?'scoreTitle-active':''" @click="switchTab('cultural')">
|
||
<text>文化成绩</text>
|
||
</view>-->
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;padding: 30rpx 60rpx">
|
||
<view style="width: 50%;margin: 0 auto;text-align: center;">
|
||
<picker @change="bindPickerChange" :value="index" :range="array">
|
||
<view class="uni-input">{{array[index]}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;padding: 30rpx 60rpx">
|
||
<view style="width: 50%;margin: 0 auto;text-align: center;">
|
||
<picker @change="bindProfessionalCategoryArrayPickerChange" :value="professionalCategoryIndex" :range="professionalCategoryArray" range-key="label">
|
||
<view class="uni-input">{{professionalCategoryArray[professionalCategoryIndex].label}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="fdb" v-if="false">
|
||
<view class="table">
|
||
<view class="tr tr-line-while">
|
||
<view class="th">分数段</view>
|
||
<view class="th">人数</view>
|
||
</view>
|
||
<view class="tr" v-for="(item,index) in fdbList" :key="index" :class="index%2===0?'backstar':'backwhile'">
|
||
<view class="td">{{item.score}}</view>
|
||
<view class="td">{{item.personNum}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="b1" style="transition:opacity 0.5s" :class="!show?'t-show':'t-close'">
|
||
<view class="title2">
|
||
<text style="display: flex">{{province}}{{tab==='professional'?'统考成绩':'文化成绩'}}{{score}}分</text>
|
||
<text style="display: flex">历年位次情况如下:</text>
|
||
</view>
|
||
<view class="list">
|
||
<view v-for="(item,index) in list" :key="index" class="item">
|
||
<view class="" v-if="item.type === 1">
|
||
<view style="display: flex">{{item.year}}年</view>
|
||
<view style="display: flex">{{item.beginScore}}分<text v-if="item.endScore">~{{item.endScore-1}}分</text> 超越全省</view>
|
||
<view style="display: flex"><view class="orange">{{item.rate}}%</view>的考生</view>
|
||
<view class="item flexWrap">
|
||
<text>排名介于</text>
|
||
<text class="orange">{{item.endRank}}</text>
|
||
<text>~</text>
|
||
<text class="orange">{{item.startRank}}</text>
|
||
<text>之间</text>
|
||
</view>
|
||
</view>
|
||
<view class="" v-else-if="item.type === 2">
|
||
<view style="display: flex">您的分数已低于{{item.year}}公布的最低分{{item.beginScore}}分<!--，排名为{{item.rank}}名--></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="b3">
|
||
<view class="max-btn " @click="clickSearch" :class="show?'marginTopBot10':'margin-top-300'">
|
||
<view class="btn">
|
||
{{ show ? '查询' : '重置' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.body {
|
||
height: 100%;
|
||
background: linear-gradient(#ffffff,#fffcf0,#fef4d2);
|
||
}
|
||
|
||
/*标题*/
|
||
.b1 {
|
||
padding-top: 100rpx;
|
||
text-align: center;
|
||
font-size: 50rpx;
|
||
margin-bottom: 100rpx;
|
||
}
|
||
|
||
.b2 {
|
||
}
|
||
|
||
.title2{
|
||
margin-left: 25%;
|
||
margin-right: 25%;
|
||
font-size: 40rpx;
|
||
color:#f9ca1b;
|
||
}
|
||
.list{
|
||
margin-top: 30rpx;
|
||
font-size: 35rpx;
|
||
text-align: left;
|
||
margin-left: 25%;
|
||
margin-right: 20%;
|
||
.item{
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
.scoreTitle {
|
||
width: 100%;
|
||
font-size: 30rpx;
|
||
transition: 0.3s;
|
||
}
|
||
/*选择的tab*/
|
||
.scoreTitle-active {
|
||
font-size: 35rpx;
|
||
border-top: 6rpx solid #f9ca1b;
|
||
}
|
||
|
||
/*查询按钮*/
|
||
.max-btn {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
text-align: center;
|
||
background-color: #f9ca1b;
|
||
border-radius: 50%;
|
||
display: grid;
|
||
place-items: center;
|
||
position: relative;
|
||
right: 38%;
|
||
left: 37%;
|
||
|
||
//bottom: 450rpx;
|
||
}
|
||
/*二层按钮*/
|
||
.btn {
|
||
color: #f9ca1b;
|
||
font-size: 40rpx;
|
||
line-height: 180rpx;
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
background-color: #3e3a39;
|
||
border-radius: 50%;
|
||
|
||
}
|
||
.t-show{
|
||
}
|
||
.t-close{
|
||
display: none;
|
||
}
|
||
.uni-input{
|
||
font-size: 35rpx;
|
||
background: none !important;
|
||
}
|
||
|
||
/*分段表 start*/
|
||
.fdb{
|
||
position: relative;
|
||
top: 300rpx;
|
||
padding: 20rpx 50rpx;
|
||
}
|
||
.fdb .table{
|
||
}
|
||
.fdb .table .tr{
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
}
|
||
.tr-line-while{
|
||
background-color: #ffffff;
|
||
border-radius: 15rpx;
|
||
}
|
||
.fdb .table .tr .th{
|
||
text-align: center;
|
||
width: 49.5%;
|
||
color: #9fa0a0;
|
||
}
|
||
.fdb .table .tr .td{
|
||
text-align: center;
|
||
width: 49.5%;
|
||
color: #000000;
|
||
}
|
||
.backwhile{
|
||
background-color: white;
|
||
}
|
||
.backstar{
|
||
background-color: #f7f8f8;
|
||
}
|
||
/*分段表 end*/
|
||
</style>
|
||
|