gaobaoUniApp/pages/predict/predict.vue

<template>
	<view class="headselection">
		<ChooseLits :list="list" :arr="arr" @chooseLike="chooseLike"></ChooseLits>
		<view class="search">
			<input type="number" placeholder="输入预估分数" />
			<button type="primary">立即获取</button>
		</view>
		<view class="uni-product-list">
			<view class="uni-product"></view>
			<view class="uni-product" v-for="(product,index) in data" :key="index">
				<view class="image-view">
					<image class="uni-product-image" src="/static/school.png"></image>
					<view class="uni-product-title">{{product.name}}</view>
				</view>
				<view class="uni-product-price">
					<view class="uni-product-content">
						<view class="uni-product-content-line">
							<view class="uni-product-content-items">
								<view class="uni-product-price-original">{{product.address}}</view>
								<view class="uni-product-price-favour">{{product.type}}</view>
								<view class="uni-product-tip">{{product.project}}</view>
							</view>
							<view class="uni-product-content-score">
								<text>平均分：{{product.maxSco}}</text>
								<text>最低分：{{product.minSco}}</text>
							</view>
							<view class=""><text>录取概率：</text></view>
						</view>
						<image src="/static/collect.png"></image>
					</view>
					<view class="uni-product-content-bottom">
						<text @tap="writeModal" :data-name="index">分数匹配专业</text>
						<image src="/static/arrow.png"></image>
					</view>
				</view>
			</view>
		</view>
		<neil-modal :show="show" :title="modaltitle" :show-cancel="false" @close="changeshow">
			<view class="">
				<view class="table-head">
					<text>专业</text>
					<text>平均分</text>
					<text>最低分</text>
					<text>省控线</text>
					<text>录取人数</text>
					<text>录取批次</text>
				</view>
				<view class="table-body">
					<text>XXX</text>
					<text>{{modalscore}}</text>
					<text>{{modalmin}}</text>
					<text>XXX</text>
					<text>XXX</text>
					<text>{{modallevel}}</text>
				</view>
			</view>
		</neil-modal>
	</view>
</template>

<script>
	import ChooseLits from '../../components/choose-Cade/choose-Cade.vue';
	import neilModal from '@/components/neil-modal/neil-modal.vue';

	export default {
		data() {
			return {
				modaltitle: '',
				modalscore: '',
				modalmin: '',
				modallevel: '',
				show: false,
				// showdetail:false,
				list: ['录取概率', '所在地', '高校层次', '批次', '2017'],
				arr: [
					['录取概率', '冲刺', '稳妥', '保底'],
					['所在地', '北京', '湖北', '陕西', '四川'],
					['高校层次', '985', '211'],
					['批次', '本科一批', '本科二批'],
					['2017', '2016', '2018']
				],
				i2: [0, 0, 0, 0, 0],
				dataorigin: getApp().globalData.global_colle,
				data: getApp().globalData.global_colle,
				// flag: true,
			}
		},
		// onLoad() {
		// 	console.log("onLoad");
		// },
		onShow() {
			this.list = ['录取概率', '所在地', '高校层次', '批次', '2017']
		},
		onHide() {
			this.list  = [];
			console.log("我走了");
			this.flag = false;
		},
		components: {
			ChooseLits,
			neilModal,
		},
		methods: {
			onTabItemTap() {
				this.i2 = [0, 0, 0, 0, 0]
				this.$forceUpdate();
				// this.arr = [['录取概率'], ['所在地'], ['高校层次'], ['批次'], ['2017']],
				this.data = this.dataorigin;
				this.i2.forEach(this.filterData)

			},
			writeModal(e) { //往模态框写内容
				var thistitle = this.data[e.currentTarget.dataset.name].name;
				this.modalscore = this.data[e.currentTarget.dataset.name].maxSco;
				this.modalmin = this.data[e.currentTarget.dataset.name].minSco;
				this.modallevel = this.data[e.currentTarget.dataset.name].level;
				this.show = true;
				this.modaltitle = thistitle + '-专业列表2017';

			},
			changeshow(data) {
				this.show = data;
			},
			filterData(item, index) { //当index不是0才能筛选
				if (item !== 0) {
					this.filteredData(this.arr[index][item]);
				}
			},
			filteredData(nowvalue) {
				var nowdata = [];
				for (var indiv in this.data) {
					if (this.data[indiv].address == nowvalue || this.data[indiv].type == nowvalue || this.data[indiv].project ==
						nowvalue) {
						nowdata.push(this.data[indiv]);
					}
				};
				this.data = nowdata;
				return nowdata;
			},
			chooseLike(i1) { //arr的index 触发filter
				if (this.i2[i1[0]] != i1[1]) {
					this.i2[i1[0]] = i1[1];
					this.data = this.dataorigin;
					this.i2.forEach(this.filterData);
				};
			},

		}
	}
</script>

<style>
	choose-lits {
		font-size: 27rpx;
	}

	.uni-product {
		background-color: white;
	}

	.search {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		/* height: 40rpx; */
		margin-top: 40rpx;
		/* line-height: 40rpx; */
	}

	.search input {
		width: 50%;
		height: 60rpx;
		border-radius: 30rpx;
		font-size: 30rpx;
		padding-left: 30rpx;
		margin-left: 5%;
		background-color: #F8F8F8;


	}

	.search button {
		/* line-height: 28px; */
		/* height: 28px; */
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 28px;
		width: 25%;
		font-size: 30rpx;
		background-color: #EF3A3A;
	}

	text {
		color: #808080;
	}

	.table-head,
	.table-body {
		margin: auto;
		display: flex;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.table-head text,
	.table-body text {
		width: 15%;
	}

	.uni-product-list {
		background-color: #F8F8F8;
		font-size: 35rpx;
	}

	.uni-product {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.uni-product-price {
		font-size: 25rpx;
		width: 70%;
	}

	.uni-product-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 150rpx;
		margin-bottom: 18rpx;
	}

	.uni-product-price-favour,
	.uni-product-price-original,
	.uni-product-tip {
		background-color: #F2F4F5;
		display: block;
		height: 30rpx;
		position: relative;
		display: flex;
		justify-content: center;
	}

	.uni-product-price-favour:before {
		content: '';
		display: block;
		position: relative;
		background-color: #F2F4F5;
		border-bottom: 15px solid #F2F4F5;
		border-left: 15px solid white;
	}

	.uni-product-price-favour:after {
		content: '';
		display: block;
		position: relative;
		background-color: #F2F4F5;
		border-left: 15px solid #F2F4F5;
		border-bottom: 15px solid white;
	}

	.uni-product-price-original:before {
		content: '';
		display: block;
		position: relative;
		background-color: #F2F4F5;
		border-bottom: 15px solid #F2F4F5;
		border-left: 15px solid white;
	}

	.uni-product-price-original:after {
		content: '';
		display: block;
		position: relative;
		background-color: #F2F4F5;
		border-left: 15px solid #F2F4F5;
		border-bottom: 15px solid white;
	}

	.uni-product-tip:before {
		content: '';
		display: block;
		position: relative;
		background-color: #F2F4F5;
		border-bottom: 15px solid #F2F4F5;
		border-left: 15px solid white;
	}

	.uni-product-tip:after {
		content: '';
		display: block;
		position: relative;
		background-color: #F2F4F5;
		border-left: 15px solid #F2F4F5;
		border-bottom: 15px solid white;
	}

	.uni-product-content-items,
	.uni-product-content-score {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.uni-product-content-bottom {
		float: right;
	}

	.uni-product-content-bottom image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
	}

	.uni-product-content-line {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 70%;
	}

	.uni-product-content image {
		width: 80rpx;
		height: 80rpx;
	}

	.uni-product-image {
		width: 150rpx;
		height: 150rpx;
	}
</style>