5-6-1

src/components/leftNav/LeftNav.vue

@@ -2,7 +2,8 @@
 	<div class="wrapper">
 		<div class="left-nav" :style="{height: navHeight}">
 			<div class="nav-title"></div>
-			<div class="nav-item" v-for="item in navList" :key="item.id" :class="{'action': currentUrl.indexOf(item.path) !== -1}" @click="navTo(item.path)">
+			<div class="nav-item" v-for="item in navList" :key="item.id"
+				:class="{'action': currentUrl.indexOf(item.path) !== -1}" @click="navTo(item.path)">
 				<div class="item-name">
 					{{item.name}}
 				</div>
@@ -16,17 +17,16 @@
 				{{rightTitle}}
 			</div>
 			<div class="title moren" v-else>
-					<span class="hand" @click="back">{{detailTitle[0]}} > </span>{{detailTitle[1]}}
+				<span class="hand" @click="back">{{detailTitle[0]}} > </span>{{detailTitle[1]}}
 			</div>
 			<div class="jg"></div>
 			<div style="padding: 35px 50px 35px 50px;" class="line">
 				<slot></slot>
 			</div>
-			
 		</div>
-	</div>
-</template>
-
+	</div>
+</template>
+
 <script>
 	export default {
 		props: {
@@ -40,26 +40,26 @@
 				return this.$route.path.indexOf('detail') === -1
 			},
 			navHeight() {
-				return this.navList.length*51 + 4 + 'px'
+				return this.navList.length * 51 + 4 + 'px'
 			},
 			currentUrl() {
 				return this.$route.path
 			},
 			rightTitle() {
 				let title = ''
-				switch(this.currentUrl) {
-				     case '/join/contribution':
-				        title = '我要捐款'
-				        break;
-				     case '/join/organDonation':
-				         title = '我要捐献器官'
-				        break;
+				switch (this.currentUrl) {
+					case '/join/contribution':
+						title = '我要捐款'
+						break;
+					case '/join/organDonation':
+						title = '我要捐献器官'
+						break;
 					case '/join/Hpc':
-					    title = '我要造血干细胞捐献'
-					   break;
+						title = '我要造血干细胞捐献'
+						break;
 					case '/join/rescue':
-					    title = '我要成为救护员'
-					   break;
+						title = '我要成为救护员'
+						break;
 					case '/join/member':
 						title = '我要成为会员'
 						break
@@ -207,14 +207,14 @@
 					case '/help/juvenile':
 						title = '红十字少年'
 						break
-				     default:
-				        title = ''
+					default:
+						title = ''
 				}
 				return title
 			},
 			detailTitle() {
 				let arr = this.rightTitle.split(',')
-				console.log(arr,'++++++++++++++++++++++++++++++')
+				console.log(arr, '++++++++++++++++++++++++++++++')
 				return arr
 			}
 		},
@@ -227,14 +227,14 @@
 			navTo(path) {
 				console.log(path)
 				let currentUrl = this.$route.path
-				if(currentUrl === path){
+				if (currentUrl === path) {
 					return
-				}else {
+				} else {
 					this.$router.push(path)
 				}
 			},
 			back() {
-				let url = this.$route.path.replace('/detail','')
+				let url = this.$route.path.replace('/detail', '')
 				this.$router.push(url)
 			}
 			// changeClik(index) {
@@ -243,27 +243,30 @@
 			// 	console.log(index)
 			// }
 		}
-	}
-</script>
-
+	}
+</script>
+
 <style lang="scss" scoped>
 	.wrapper {
 		width: 1202px;
 		display: flex;
 		justify-content: space-between;
-		
+
 	}
+
 	.left-nav {
 		width: 265px;
 		// height: 154px;
 		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+
 		.nav-title {
 			width: 265px;
 			height: 4px;
 			background: #BF3333;
 		}
+
 		.nav-item {
-			cursor:pointer;
+			cursor: pointer;
 			border-top: 1px #fcfbfb solid;
 			display: flex;
 			height: 50px;
@@ -271,13 +274,15 @@
 			justify-content: space-between;
 			line-height: 50px;
 			padding: 0 20px 0 26px;
+
 			.item-name {
 				font-size: 16px;
 				font-family: PingFang SC;
 				font-weight: bold;
 				color: #333333;
-				letter-spacing:1px
+				letter-spacing: 1px
 			}
+
 			.item-icon {
 				font-size: 16px;
 				font-family: PingFang SC;
@@ -285,24 +290,27 @@
 				color: #999999;
 			}
 		}
+
 		.action {
 			background-color: #fae9e9;
-			
+
 			.item-name {
 				color: #C81B15;
 			}
+
 			.item-icon {
 				color: #C81B15;
 			}
 		}
 	}
+
 	.right-content {
 		width: 915px;
 		min-height: 706px;
 		border-top: 4px solid var(--m-color);
 		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
 		background-color: #fff;
-		
+
 		.title {
 			text-align: left;
 			height: 50px;
@@ -315,20 +323,24 @@
 			top: -2px;
 			color: #BF3333;
 			padding-left: 23px;
+
 			span {
 				color: #999;
 			}
 		}
+
 		.action {
 			background: #FFFFFF;
 			color: #D82020;
 		}
 	}
+
 	.line {
 		line-height: 1.5;
 	}
+
 	.jg {
 		height: 1px;
 		background-color: #f3f3f3;
-	}
-</style>
+	}
+</style>

src/request/request.js

@@ -12,7 +12,7 @@ import store from '../store.js'
 const service = axios.create({
 	baseURL: store.state.www, // url = base url + request url
 	// withCredentials: true, // send cookies when cross-domain requests
-	timeout: 5000 // request timeout
+	timeout: 60000 // request timeout
 })
 
 // request interceptor

src/views/Donate.vue

@@ -1,6 +1,5 @@
 <template>
 	<div class="news-center">
-		<!-- 444444 -->
 		<left-nav :navList="navList">
 			<router-view></router-view>
 		</left-nav>

src/views/donate/expenditure/List.vue

@@ -1,5 +1,11 @@
 <template>
 	<div class="new-list">
+		<div class="serch-wrapper">
+			<div class="search">
+				<input type="text" v-model="keyword" :placeholder="tit" class="" @keyup.enter="getList('re')" />
+				<img src="../../../assets/img/search.png" class="hand" @click="getList('re')">
+			</div>
+		</div>
 		<div class="new-item  hand" v-for="item in newList" :key="item.id" @click="navTo('/donate/expenditure/detail?id='+ item.id)">
 			<div class="title clamp">
 				<span class="title-icon"></span>
@@ -19,7 +25,9 @@ export default {
 			newList: [],
 			total: 0,
 			page: 1,
-			limit: 15
+			limit: 15,
+			keyword: '',
+			tit: '捐赠款物查询',
 		};
 	},
 	created() {
@@ -47,11 +55,15 @@ export default {
 			this.page = e
 			this.getList()
 		},
-		getList() {
+		getList(type) {
 			let obj = this
+			if(type == 're') {
+				obj.page = 1
+			}
 			getArtList({
 				page: obj.page,
-				limit: obj.limit
+				limit: obj.limit,
+				titile: obj.keyword
 			},37).then(res => {
 				obj.newList = res.data.list.map(item => {
 					let arr = item.add_time.split(' ')
@@ -69,6 +81,7 @@ export default {
 <style lang="scss" scoped>
 .new-list {
 	// padding: 0px 72px 0 40px;
+	position: relative;
 	.new-item {
 		display: flex;
 		justify-content: space-between;
@@ -109,5 +122,43 @@ export default {
 		margin-top: 50px;
 		text-align: center;
 	}
+	.serch-wrapper {
+		display: flex;
+		height: 33px;
+		justify-content: flex-end;
+		position: absolute;
+		top: -75px;
+		right: -25px;
+		width: 100%;
+		.search {
+	
+			padding-left: 13px;
+			padding-right: 13px;
+			width: 295px;
+			height: 33px;
+			line-height: 33px;
+			background: #FFFFFF;
+			border: 1px solid #CCCCCC;
+			border-radius: 10px;
+			// margin-bottom: 10px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+	
+			input {
+				width: 235px;
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				outline: none;
+				border: none;
+			}
+	
+			img {
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
 </style>
 

src/views/donate/receive/List.vue

@@ -1,113 +1,176 @@
 <template>
 	<div class="new-list">
-		<div class="new-item  hand" v-for="item in newList" :key="item.id" @click="navTo('/donate/receive/detail?id='+ item.id)">
+		<div class="serch-wrapper">
+			<div class="search">
+				<input type="text" v-model="keyword" :placeholder="tit" class="" @keyup.enter="getList('re')" />
+				<img src="../../../assets/img/search.png" class="hand" @click="getList('re')">
+			</div>
+		</div>
+		<div class="new-item  hand" v-for="item in newList" :key="item.id"
+			@click="navTo('/donate/receive/detail?id='+ item.id)">
 			<div class="title clamp">
 				<span class="title-icon"></span>
 				{{ item.title }}
 			</div>
 			<div class="time">{{ item.release_time || item.add_time}}</div>
 		</div>
-		<el-pagination layout="prev, pager, next" :total="total" hide-on-single-page background prev-text="上一页" next-text="下一页" @current-change="currentChange" :page-size="limit"></el-pagination>
+		<el-pagination layout="prev, pager, next" :total="total" hide-on-single-page background prev-text="上一页"
+			next-text="下一页" @current-change="currentChange" :page-size="limit"></el-pagination>
 	</div>
 </template>
 
 <script>
-import { newsList,getArtList } from '../../../request/api.js';
-export default {
-	data() {
-		return {
-			newList: [],
-			total: 0,
-			page: 1,
-			limit: 15
-		};
-	},
-	created() {
-		this.getList()
-	},
-	methods:{
-		compare(attribute) {
-			return function(obj1, obj2) {
-				let val1 = obj1[attribute].split('-').join('')*1
-				var val2 = obj2[attribute].split('-').join('')*1;
-				if (val1 < val2) {
-					return 1;
-				} else if (val1 > val2) {
-					return -1;
-				} else {
-					return 0;
-				}
-			}
+	import {
+		newsList,
+		getArtList
+	} from '../../../request/api.js';
+	export default {
+		data() {
+			return {
+				newList: [],
+				total: 0,
+				page: 1,
+				limit: 15,
+				keyword: '',
+				tit: '捐赠款物查询',
+			};
 		},
-		navTo(url) {
-			this.$router.push(url);
-		},
-		currentChange(e) {
-			console.log(e);
-			this.page = e
+		created() {
 			this.getList()
 		},
-		getList() {
-			let obj = this
-			getArtList({
-				page: obj.page,
-				limit: obj.limit
-			},36).then(res => {
-				obj.newList = res.data.list.map(item => {
-					let arr = item.add_time.split(' ')
-					item.add_time = arr[0]+''
-					return item
+		methods: {
+			compare(attribute) {
+				return function(obj1, obj2) {
+					let val1 = obj1[attribute].split('-').join('') * 1
+					var val2 = obj2[attribute].split('-').join('') * 1;
+					if (val1 < val2) {
+						return 1;
+					} else if (val1 > val2) {
+						return -1;
+					} else {
+						return 0;
+					}
+				}
+			},
+			navTo(url) {
+				this.$router.push(url);
+			},
+			currentChange(e) {
+				console.log(e);
+				this.page = e
+				this.getList()
+			},
+			getList(type) {
+				let obj = this
+				if(type == 're') {
+					obj.page = 1
+				}
+				getArtList({
+					page: obj.page,
+					limit: obj.limit,
+					title: obj.keyword
+				}, 36).then(res => {
+					obj.newList = res.data.list.map(item => {
+						let arr = item.add_time.split(' ')
+						item.add_time = arr[0] + ''
+						return item
+					})
+					obj.newList.sort(this.compare('release_time'))
+					obj.total = res.data.count
 				})
-				obj.newList.sort(this.compare('release_time'))
-				obj.total = res.data.count
-			})
+			}
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss" scoped>
-.new-list {
-	// padding: 0px 72px 0 40px;
-	.new-item {
-		display: flex;
-		justify-content: space-between;
-		font-size: 18px;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #666666;
-		height: 40px;
-		border-bottom: 1px solid #E5E5E5;
-		line-height: 40px;
-		&:hover {
-			color: red;
+	.new-list {
+		// padding: 0px 72px 0 40px;
+		position: relative;
+
+		.new-item {
+			display: flex;
+			justify-content: space-between;
+			font-size: 18px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #666666;
+			height: 40px;
+			border-bottom: 1px solid #E5E5E5;
+			line-height: 40px;
+
+			&:hover {
+				color: red;
+
+				.title {
+					.title-icon {
+						border-left-color: red;
+					}
+				}
+			}
+
+			&:last-of-type {
+				border-bottom: none;
+			}
+
 			.title {
+				width: 500px;
+
 				.title-icon {
-					border-left-color: red;
+					display: inline-block;
+					width: 0;
+					height: 0;
+					width: 0;
+					height: 0;
+					border-top: 6px solid transparent;
+					border-left: 8px solid #d2d2d2;
+					border-bottom: 6px solid transparent;
 				}
 			}
 		}
-		&:last-of-type {
-			border-bottom: none;
-		}
-		.title {
-			width: 500px;
-			.title-icon {
-				display: inline-block;
-				width: 0;
-				height: 0;
-				width: 0;
-				height: 0;
-				border-top: 6px solid transparent;
-				border-left: 8px solid #d2d2d2;
-				border-bottom: 6px solid transparent;
-			}
-		}
 	}
-}
+
 	/deep/ .el-pagination {
 		margin-top: 50px;
 		text-align: center;
 	}
-</style>
 
+	.serch-wrapper {
+		display: flex;
+		height: 33px;
+		justify-content: flex-end;
+		position: absolute;
+		top: -75px;
+		right: -25px;
+		width: 100%;
+		.search {
+
+			padding-left: 13px;
+			padding-right: 13px;
+			width: 295px;
+			height: 33px;
+			line-height: 33px;
+			background: #FFFFFF;
+			border: 1px solid #CCCCCC;
+			border-radius: 10px;
+			// margin-bottom: 10px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			input {
+				width: 235px;
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: bold;
+				outline: none;
+				border: none;
+			}
+
+			img {
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
+</style>