yitisheng-mini-app/pages/zyb/testCultural/index.vue

308 lines
8.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
测文化 页面
-->
<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',
vipInfo: {},
selectForm: {
schoolName: '',
province: '',
institutionType: '',
schoolNature: '',
},
statusTypes: StaticConstant.loadStatusTypes,
contentText: StaticConstant.loadContentText,
tk: {
status: 'more',
schoolList: [],
current: 0,
size: 8
}
}
},
onShow() {
},
onLoad() {
this.vipInfo = uni.getStorageSync('vipInfo')
if (!this.vipInfo.vipFlag) {
this.tk.size = 5
}
this.getSchoolList()
},
onReachBottom() {
console.log("已经滚动到底部了")
if (this.vipInfo && this.vipInfo.vipFlag) {
this.loadMore()
}
},
methods: {
handle(type) {
this.show = !this.show
this.modeClass = type
},
/*切换分数类型*/
switchTab(e) {
this.tab = e
},
searchSchoolClick() {
this.tk.current = 1
this.tk.schoolList = []
this.getSchoolList()
},
clearSchoolInput() {
this.selectForm.schoolName = ''
this.tk.current = 1
this.tk.schoolList = []
this.getSchoolList()
},
/*院校列表*/
getSchoolList() {
request.get(ApiConstant.School.searchSchoolList, {
schoolName: this.selectForm.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 class="flexWrap">
<view class="flex-item-10 search-view">
<view style="display: flex;height: 100rpx;border-bottom: 1px solid #f5f5f5;">
<view style="width: 90%">
<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入院校名称" v-model="selectForm.schoolName"
@clear="clearSchoolInput" cancelButton="none" @confirm="searchSchoolClick"/>
</view>
<view style="width: 10%;line-height: 100rpx">
<text @click="searchSchoolClick">搜索</text>
</view>
</view>
</view>
<!-- <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="item.schoolName.length<8?'flex-item-6':'flex-item-75'" class=" t_item" style="display: flex;height: 80rpx">
<text>[{{item.schoolCode}}]</text>
<text>{{ item.schoolName }}</text>
</view>
<view :class="item.schoolName.length<10?'flex-item-4':'flex-item-25'" class="t_item" style="display: flex;height: 60rpx">
<view class="address adrs" v-if="item.city && 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.length>=4?item.city.substring(0,4):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">
<view class="tags flexWrap">
<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" v-if="vipInfo && vipInfo.vipFlag">
<uni-load-more :status="tk.status" :content-text="contentText"/>
</view>
</view>
</view>
<!--判断vip-->
<view v-if="tk && tk.schoolList && tk.schoolList.length>0">
<my-checkvip :vip-flag="(vipInfo && vipInfo.vipFlag)"/>
</view>
<view class="top" style="transition: 0.3s;" :style="{'display':(topFlag===true? 'block':'none')}">
<uni-icons class="topc" type="arrowthinup" size="40" @click="top"></uni-icons>
</view>
</template>
<style scoped lang="scss">
.head {
padding: 20rpx 10rpx;
text-align: center;
background-color: white;
}
.body {
//padding-top: 100rpx;
}
/*院校列表*/
.school-list {
padding: 30rpx 10rpx;
.school-item {
margin-bottom: 20rpx;
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;
margin-bottom: 5rpx;
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;
}
/* 回到顶部 start*/
.top {
position: relative;
display: none; /* 先将元素隐藏 */
transition: 0.5s;
}
.topc {
position: fixed;
right: 10rpx;
//background: #F0F0F0;
background: #e1e1e1;
border-radius: 50%;
top: 80%;
height: 40px;
line-height: 40px;
}
/* 回到顶部 end*/
</style>