veterans_H5/h5_web/pages/schools/schools.vue

<template>
	<view>
		<!-- <u-empty text="此功能正在建设中" margin-top="400" src="/static/img/empty.png"></u-empty> -->
		<u-search height="80" class="top-search" placeholder="快速搜索学院" v-model="keyword" @search="search" @custom="search" @clear="search"></u-search>
		<!-- <u-cell-group title="教育基地">
			<u-cell-item 
			@click="schoolClick(item)"
			v-for="(item,index) in schoolList" 
			:key='item.id' 
			:label='item.number+"个专业 | "+item.schoolNature|verifySchoolNatureFilter'
			:title="item.schoolName">
				<image class="cell-icon" :src="item.schoolLogoUrl" slot="icon" mode=""></image>
			</u-cell-item>
		</u-cell-group> -->
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" top="150" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<view class="school-item u-flex u-row-between" @click="schoolClick(item)" v-for="(item,index) in schoolList" :key='item.id' >
				<view class=" u-flex">
					<image class="school-item-img" :src="item.schoolLogoUrl" mode="scaleToFill"></image>
					<view class="school-item-info" style="display: inline-block;">
						<view class="up">
							{{item.schoolName}}
						</view>
						<view class="down">
							<!-- {{item.count}}个专业 | -->
							{{item.schoolNature|verifySchoolNatureFilter}}
						</view>
					</view>
				</view>
				<view class="arrow">
					<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	// import mock from "../../static/js/mock.js";
	export default{
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data(){
			return{
				keyword:'',
				schoolList:[],
				upOption:{
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					// auto:false,
					// use:false,
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 暂无数据 ~', // 提示
						// btnText: '去看看'
					}
				},
			}
		},
		onLoad(){
			
		},
		onShow(){
			
		},
		filters:{
			verifySchoolNatureFilter(value){
			  if (value == 1) {
				return '公办';
			  }else if(value == 2){
				return '民办';
			  }
			 }
		},
		methods:{
			search(value){
				console.log('value',value);
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// console.log('page',page)
				//联网加载数据
				let params ={
					schoolName:this.keyword,
					pageNum:page.num,
					pageSize:page.size
				} 
				this.$u.api.getSchoolList(params).then(curPageData=>{
					// console.log('curPageData',curPageData)
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.mescroll.endSuccess(curPageData.rows.length);
					//设置列表数据
					if(page.num == 1) this.schoolList = []; //如果是第一页需手动制空列表
					this.schoolList=this.schoolList.concat(curPageData.rows); //追加新数据
				}).catch((err)=>{
					uni.showToast({
						title:'链接失败'
					});
					console.log('err',err)
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			schoolClick(item){
				console.log('schoolClick item',item);
				let analysisParams ={
					platform:'1',//平台:1-H5 2-APP 3-小程序 4-PC端
					pages:location.href,//页面路径
					btnName:'',//按钮名称
					btnEvent:'1',//按钮事件: 1-点击 2-长按 3-滑动
					ipAddress:'',//IP地址
					typeName:'学校关注度',//类型名称 例：学校关注度 、适应性考试等
					typeCode:'',//类型编码 例：类型名称首字母缩写(XXGZD)
					categoryName:item.schoolName,//类别名称 例：XX学校，SS考试
				};
				uni.request({
				    url:'/apis/cityjson?ie=utf-8',
					method:'GET',
					success: (res) => {
						// console.log('this',this);
				        const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
						let ip = reg.exec(res.data);
						analysisParams.ipAddress = ip[0];
						console.log('analysisParams',analysisParams);
					}
				});
				this.$u.api.postAnalysis(analysisParams).then(res=>{
					console.log('res',res);
					if(res.code == 200){
						
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					location.href = item.schoolUrl
				});
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.top-search{padding: 24rpx;}
	.cell-icon{width: 100rpx;height: 100rpx;margin-right: 24rpx;}
	
	.school-item{padding: 24rpx 24rpx;border-bottom: 1px solid #ddd;}
	.school-item .up{font-size: 30rpx;margin-bottom: 10rpx;}
	.school-item .down{color: #ababab;}
	.school-item-img{width: 100rpx;height: 100rpx;margin-right: 24rpx;}
	// @import  './schools.scss'
</style>