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>分数匹配专业</text>
						<image src="/static/arrow.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>



</template>

<script>
	import ChooseLits from '../../components/choose-Cade/choose-Cade.vue';


	export default {
		data() {
			return {
				list: ['录取概率', '所在地', '高校层次', '批次', '2017'],
				arr: [
					['录取概率', '冲刺', '稳妥', '保底'],
					['所在地', '北京', '湖北', '陕西', '四川'],
					['高校层次', '985', '211'],
					['批次', '本科一批', '本科二批'],
					['2017', '2016', '2018']
				],
				i2: [0, 0, 0, 0, 0],
				dataorigin:getApp().globalData.global_colle,
				data: getApp().globalData.global_colle,
			}
		},
		components: {
			ChooseLits,
		},
		methods: {
			filterData(item, index) {
				if (item !== 0) {
					console.log(this.arr[index][item]);
					this.filteredData(this.arr[index][item]);
				}
			},
			filteredData(nowvalue) {
				var nowdata = [];
				for (var indiv in this.data) {
					console.log(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
				if (this.i2[i1[0]] != i1[1]) {
					this.i2[i1[0]] = i1[1];
					this.data = this.dataorigin;
					this.i2.forEach(this.filterData);
				};
				console.log(this.i2);
				// 我写的果然是垃圾
				// this.keys = this.arr.map((item)=>{return item=item[0]});
				// this.datakey = this.arr[i1[0]];//每列属性值
				// this.datakeyvalue = this.arr[i1[0]][i1[1]];
				// this.trueorfalse=this.keys.forEach((item)=>{return item==this.datakey});

			},

		}
	}
</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;
	}

	.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>