veterans_H5/h5_web/pages/schools/schools.vue

<!-- 学院列表 -->
<template>
	<view class="school">
		<z-paging ref="paging" v-model="schoolList" @query="queryList">
			<!-- 搜索 -->
			<view class="school-search" slot="top">
				<u-search class="school-search-input" placeholder="请输入关键词" v-model="keyword" shape="square"
					input-align="center" :show-action="false" bg-color="#ffffff" height="70" />
			</view>
			<view class="school-list">
				<view class="school-list-item" v-for="(item, index) in schoolList" :key="index" @click="jumpPage('/pages/schoolDetails/schoolDetails')">
					<view class="school-list-item-left">
						<view class="image">
							<image :src="item.logo" mode=""></image>
						</view>
						<view class="title">
							<view class="name">{{ item.schoolName }}</view>
							<view class="grade">
								<view class="icon">
									<u-icon class="icon-img" name="star-fill" color="#EF651F" /> {{item.grade}}
								</view>
								<view>{{ item.content }}</view>
							</view>
						</view>
					</view>
					<view class="school-list-item-right">
						<u-icon name="arrow-right" />
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		name: 'Schools',
		data() {
			return {
				// 搜索关键词
				keyword: '',
				// 学校列表
				schoolList: []
			}
		},
		methods: {
			/**
			 * @param { Number } pageNo
			 * @param { Number } pageSize
			 */
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete([{
						logo: require('../../static/img/avatar.jpg'),
						schoolName: '贵阳护理职业学院',
						grade: 3.5,
						content: '20个专业 · 公办'
					},
					{
						logo: require('../../static/img/avatar.jpg'),
						schoolName: '贵阳护理职业学院',
						grade: 3.5,
						content: '20个专业 · 公办'
					},
					{
						logo: require('../../static/img/avatar.jpg'),
						schoolName: '贵阳护理职业学院',
						grade: 3.5,
						content: '20个专业 · 公办'
					},
					{
						logo: require('../../static/img/avatar.jpg'),
						schoolName: '贵阳护理职业学院',
						grade: 3.5,
						content: '20个专业 · 公办'
					}
				])
			},
			/**
			 * @param { String } url
			 */
			jumpPage(url) {
				this.$u.route(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './schools.scss';
</style>