//

pages/predict/predict.vue

@@ -1,8 +1,277 @@
 <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>