279 lines
6.9 KiB
Vue
279 lines
6.9 KiB
Vue
<!--
|
||
测文化 页面
|
||
-->
|
||
<script>
|
||
import StaticConstant from "@/common/StaticConstant";
|
||
import ApiConstant from "@/common/ApiConstant";
|
||
import Request from '@/common/request'
|
||
import ImagesConstant from "@/common/ImagesConstant";
|
||
let request = new Request()
|
||
export default {
|
||
name: "test-cultural",
|
||
components: {},
|
||
computed: {
|
||
ImagesConstant() {
|
||
return ImagesConstant
|
||
},
|
||
StaticConstant() {
|
||
return StaticConstant
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
topFlag:false,
|
||
province: '河南',
|
||
tab: 'tk',
|
||
selectForm: {
|
||
schoolName: '',
|
||
province: '',
|
||
institutionType: '',
|
||
schoolNature: '',
|
||
},
|
||
statusTypes: [
|
||
{
|
||
value: 'more',
|
||
text: '加载前',
|
||
checked: true
|
||
}, {
|
||
value: 'loading',
|
||
text: '加载中',
|
||
checked: false
|
||
}, {
|
||
value: 'noMore',
|
||
text: '没有更多',
|
||
checked: false
|
||
}],
|
||
contentText: {
|
||
contentdown: '查看更多',
|
||
contentrefresh: '加载中',
|
||
contentnomore: '没有更多'
|
||
},
|
||
tk: {
|
||
status: 'more',
|
||
schoolList: [],
|
||
current: 0,
|
||
size: 10
|
||
}
|
||
}
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
onLoad(){
|
||
this.getSchoolList()
|
||
},
|
||
methods: {
|
||
handle(type) {
|
||
this.show = !this.show
|
||
this.modeClass = type
|
||
},
|
||
/*切换分数类型*/
|
||
switchTab(e) {
|
||
this.tab = e
|
||
},
|
||
/*院校列表*/
|
||
getSchoolList() {
|
||
request.get(ApiConstant.School.searchSchoolList, {
|
||
schoolName: '',
|
||
pageNum: this.tk.current,
|
||
pageSize: this.tk.size
|
||
}).then(r => {
|
||
console.log(r)
|
||
if (r.success) {
|
||
this.tk.current = r.result.current
|
||
this.tk.size = r.result.size
|
||
this.tk.total = r.result.total
|
||
//追加到列表数据中
|
||
this.tk.schoolList = [...this.tk.schoolList, ...r.result.records]
|
||
if (r.result.current >= r.result.pages) {
|
||
this.tk.status = 'noMore'
|
||
} else {
|
||
this.tk.status = 'more'
|
||
}
|
||
|
||
}
|
||
}).catch(err => {
|
||
}).finally(() => {
|
||
});
|
||
},
|
||
loadMore() {
|
||
if (this.tk.status === 'noMore') {
|
||
return;
|
||
}
|
||
console.log('加载中')
|
||
this.tk.current++;
|
||
this.getSchoolList()
|
||
},
|
||
top() { //回到顶部
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 300
|
||
});
|
||
},
|
||
goto(url){
|
||
uni.navigateTo({
|
||
url: url
|
||
})
|
||
}
|
||
},
|
||
onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
|
||
//当距离大于600时显示回到顶部按钮，//当距离小于600时隐藏回到顶部按钮
|
||
this.topFlag = e.scrollTop > 600;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="head">
|
||
<view style="display: flex;">
|
||
<view class="topTitle" :class="tab==='tk'?'topTitle-active':''" @click="switchTab('tk')">
|
||
<text>统考院校</text>
|
||
<view style="display: flex;" :class="tab==='tk'?'bottom-active':''"></view>
|
||
</view>
|
||
<!-- <view class="topTitle" :class="tab==='xk'?'topTitle-active':''" @click="switchTab('xk')">
|
||
<text>校考院校</text>
|
||
<view style="display: flex" :class="tab==='xk'?'bottom-active':''"></view>
|
||
</view>-->
|
||
</view>
|
||
</view>
|
||
<view class="body">
|
||
<!--院校列表-->
|
||
<view class="school-list">
|
||
<view class="school-item uni-flex flex" v-for="(item,index) in tk.schoolList" :key="index"
|
||
@click="goto('/pages/zyb/testCultural/detail?schoolCode='+item.schoolCode)">
|
||
<view class="flex-item-25 t_item">
|
||
<image :src="item.schoolIcon||ImagesConstant.defaultIcon" style="width: 128rpx;height: 128rpx" mode="aspectFill"/>
|
||
</view>
|
||
<view class="flex-item-75 t_item">
|
||
<view class="uni-flex flex">
|
||
<view class="flex-item-6 t_item" style="display: flex;height: 80rpx">
|
||
<text>{{ item.schoolName }}</text>
|
||
</view>
|
||
<view class="flex-item-4 t_item" style="display: flex;height: 60rpx">
|
||
<view class="address adrs" v-if="item.city.includes(item.province)">
|
||
<!--直辖市-->
|
||
<view class="address-item address-item-before" v-if="item.city">{{ item.city }}</view>
|
||
<view class="address-item" v-if="item.area && item.area.length<4">{{ item.area }}</view>
|
||
</view>
|
||
<view class="address adrs" v-else>
|
||
<view class="address-item address-item-before" v-if="item.province">{{ item.province }}</view>
|
||
<view class="address-item" v-if="item.city">{{ item.city }}</view>
|
||
<!-- <view class="address-item" v-if="item.area && item.area.length<4">{{item.area}}</view>-->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="uni-flex flex">
|
||
<view class="flex-item-10 t_item" style="display: flex;">
|
||
<view class="tags">
|
||
<text class="tag" v-for="(tag,tindex) in item.tagsList" :key="tindex" v-show="tag !=='普通本科'">
|
||
{{ tag }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="container" @click="loadMore">
|
||
<uni-load-more :status="tk.status" :content-text="contentText"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="top" style="transition: 0.3s;" :style="{'display':(topFlag===true? 'block':'none')}">
|
||
<uni-icons class="topc" type="arrowthinup" size="50" @click="top"></uni-icons>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.head {
|
||
padding: 20rpx 30rpx;
|
||
text-align: center;
|
||
background-color: white;
|
||
}
|
||
|
||
.body {
|
||
//padding-top: 100rpx;
|
||
}
|
||
|
||
/*院校列表*/
|
||
.school-list {
|
||
padding: 30rpx;
|
||
.school-item {
|
||
margin-bottom: 30rpx;
|
||
padding: 30rpx;
|
||
background-color: white;
|
||
border-radius: 15rpx;
|
||
//box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
|
||
}
|
||
}
|
||
|
||
/*省市区*/
|
||
.adrs {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
margin: 0 0 0 auto;
|
||
}
|
||
|
||
.address .address-item-before{
|
||
margin-left: 0 !important;
|
||
}
|
||
.address .address-item {
|
||
margin-left: 10rpx;
|
||
color: #8999a3;
|
||
font-size: 23rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
/*标签*/
|
||
.tags .tag {
|
||
color: #8999a3;
|
||
font-size: 23rpx;
|
||
line-height: 40rpx;
|
||
margin-right: 10rpx;
|
||
border: 1rpx solid #52c6c6;
|
||
border-radius: 10rpx;
|
||
padding: 0 8rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
|
||
.topTitle {
|
||
width: 100%;
|
||
font-size: 35rpx;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
/*选择的tab*/
|
||
.topTitle-active {
|
||
font-size: 40rpx;
|
||
//border-bottom: 6rpx solid #42c6c6;
|
||
}
|
||
|
||
.bottom-active {
|
||
margin: 0 auto;
|
||
width: 60rpx;
|
||
border-bottom: 6rpx solid #42c6c6;
|
||
}
|
||
|
||
|
||
/* 回到顶部 */
|
||
.top {
|
||
position: relative;
|
||
display: none; /* 先将元素隐藏 */
|
||
}
|
||
.topc {
|
||
position: fixed;
|
||
right: -5%;
|
||
//background: #F0F0F0;
|
||
background: #52c6c6;
|
||
border-radius: 50%;
|
||
top: 80%;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
}
|
||
</style>
|
||
|
||
|