8-27

src/views/Home.vue

@@ -6,50 +6,47 @@
 			</el-carousel>
 		</div>
 		<div class="news-wrapper">
-			<div class="new-pic" @click="navTo('/news/detail?id='+ showNew.id)">
-				<img :src="showNew.img">
-				<div class="title clamp hand">
-					{{showNew.title}}
-				</div>
+			<div class="new-pic" @click="navTo('/news/detail?id=' + showNew.id)">
+				<img :src="showNew.img" />
+				<div class="title clamp hand">{{ showNew.title }}</div>
 			</div>
 			<div class="news">
 				<item-title title="红会新闻" :topath="'/news'"></item-title>
 				<div class="item-wrapper">
-					<div class="new-item hand" v-for="item in redNews" :key="item.id" @click="navTo('/news/detail?id='+ item.id)">
+					<div class="new-item hand" v-for="item in redNews" :key="item.id" @click="navTo('/news/detail?id=' + item.id)">
 						<div class="title clamp ">
 							<span></span>
 							{{ item.title }}
 						</div>
-						<div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</div>
+						<div class="time">{{ item.release_time ? item.release_time : item.add_time | time }}</div>
 					</div>
 				</div>
 			</div>
 		</div>
-		
+
 		<div class="home-body">
-			
 			<div class="body-left moren">
 				<div class="red-new">
 					<item-title title="信息公示" :topath="'/publicity'"></item-title>
 					<div class="item-wrapper">
-						<div class="new-item hand" v-for="item in openNews" :key="item.id" @click="navTo('/publicity/detail?id='+ item.id)">
+						<div class="new-item hand" v-for="item in openNews" :key="item.id" @click="navTo('/publicity/detail?id=' + item.id)">
 							<div class="title clamp ">
 								<span></span>
 								{{ item.title }}
 							</div>
-							<div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</div>
+							<div class="time">{{ item.release_time ? item.release_time : item.add_time | time }}</div>
 						</div>
 					</div>
 				</div>
 				<div class="new-open">
 					<item-title title="政策法规" :topath="'/publicity'"></item-title>
 					<div class="item-wrapper">
-						<div class="new-item hand" v-for="item in regulationList" :key="item.id" @click="navTo('/regulations/detail?id='+item.id)">
+						<div class="new-item hand" v-for="item in regulationList" :key="item.id" @click="navTo('/regulations/detail?id=' + item.id)">
 							<div class="title clamp">
 								<span></span>
 								{{ item.title }}
 							</div>
-							<div class="time">{{ item.release_time?item.release_time:item.add_time | time}}</div>
+							<div class="time">{{ item.release_time ? item.release_time : item.add_time | time }}</div>
 						</div>
 					</div>
 				</div>
@@ -72,12 +69,17 @@
 						<div>捐献金额</div>
 						<div>捐献意向</div>
 					</div>
-					<div class="list-item flex" v-for="(item, index) in jxList" :key="index">
-						<div class="clamp">{{item.time}}</div>
-						<div class="clamp">{{item.donate_er}}</div>
-						<div class="clamp">{{item.money}}</div>
-						<div class="clamp">{{item.intention}}</div>
-					</div>
+					
+					<div class="table-empty" v-if="jxList.length == 0">暂无更多捐赠数据</div>
+					<template  v-else>
+						<div class="list-item flex" v-for="(item, index) in jxList" :key="index">
+							<div class="clamp">{{ item.time }}</div>
+							<div class="clamp">{{ item.donate_er }}</div>
+							<div class="clamp">{{ item.money }}</div>
+							<div class="clamp">{{ item.intention }}</div>
+						</div>
+					</template>
+					
 				</div>
 			</div>
 		</div>
@@ -102,7 +104,7 @@
 <script>
 import ItemTitle from './homeChild/ItemTitle.vue';
 
-import { loadIndexs, splist, loveList, friendList , newsList, openList, banner, regulationList } from '../request/api.js';
+import { loadIndexs, splist, loveList, friendList, newsList, openList, banner, regulationList } from '../request/api.js';
 export default {
 	components: {
 		ItemTitle
@@ -167,45 +169,47 @@ export default {
 		getTime(val) {
 			let date = new Date(val * 1000);
 			let Y = date.getFullYear();
-			let M = date.getMonth() +1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
+			let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
 			let D = date.getDate() < 10 ? '0' + date.getDay() : date.getDate();
 			return Y + '.' + M + '.' + D;
 		},
 		time(val) {
-			let arr = val.split(' ')
-			let str = arr[0]
-			str = str.replace(/-/g, '.')
-			return str
+				
+			if(val) {
+				let arr = val.split(' ');
+				let str = arr[0];
+				str = str.replace(/-/g, '.');
+				return str;
+			}
+			return 
+			
 		}
 	},
-	computed:{
+	computed: {
 		jxList() {
-			return this.moreJxList.slice(0,3)
+			return this.moreJxList.slice(0, 3);
 		},
 		showNew() {
-			
-			let obj =this
-			if(obj.redNews[0]){
+			let obj = this;
+			if (obj.redNews[0]) {
 				let data = {
 					id: obj.redNews[0].id,
 					img: obj.redNews[0].image_input[0],
 					title: obj.redNews[0].title
-					
-				}
-				return data
+				};
+				return data;
 			}
-			
-			return {}
+
+			return {};
 		}
 	},
 	created() {
-		this.getSwiperList()
+		this.getSwiperList();
 		this.getIndex();
 		this.getFirstAidList();
 		this.getJxList();
-		this.getNewsList()
-		this.getOpenList(),
-		this.getRegulationList()
+		this.getNewsList();
+		this.getOpenList(), this.getRegulationList();
 	},
 	methods: {
 		navTo(url) {
@@ -238,58 +242,58 @@ export default {
 					}
 					let date = new Date(item.add_time * 1000);
 					let Y = date.getFullYear();
-					let M = date.getMonth()+1 < 10 ? '0' + (date.getMonth()+1) : date.getMonth() + 1;
+					let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
 					let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
 					item.time = Y + '/' + M + '/' + D;
 					return item;
 				});
-				obj.gundong()
+				obj.gundong();
 			});
 		},
 		gundong() {
-			let obj = this
-			obj.timer = setTimeout(()=> {
-				obj.moreJxList.push(obj.moreJxList.shift())
+			let obj = this;
+			obj.timer = setTimeout(() => {
+				obj.moreJxList.push(obj.moreJxList.shift());
 				// console.log(obj.moreJxList)
-				obj.gundong()
-			},2000)
+				obj.gundong();
+			}, 2000);
 		},
 		getNewsList() {
-			let obj = this
+			let obj = this;
 			newsList({
 				page: 1,
 				limit: 9
 			}).then(res => {
-				obj.redNews = res.data.list
-			})
+				obj.redNews = res.data.list;
+			});
 		},
 		getOpenList() {
-			let obj = this
+			let obj = this;
 			openList({
 				page: 1,
 				limit: 9
 			}).then(res => {
-				obj.openNews = res.data.list
+				obj.openNews = res.data.list;
 				// console.log(obj.openNews)
-			})
+			});
 		},
 		getSwiperList() {
-			let obj = this
+			let obj = this;
 			banner().then(res => {
-				let list = res.data.list.map( item => {
-					return item.image_input[0]
-				})
-				obj.swiperList= list
-			})
+				let list = res.data.list.map(item => {
+					return item.image_input[0];
+				});
+				obj.swiperList = list;
+			});
 		},
 		getRegulationList() {
-			let obj = this
+			let obj = this;
 			regulationList({
 				page: 1,
 				limit: 6
 			}).then(res => {
-				obj.regulationList = res.data.list
-			})
+				obj.regulationList = res.data.list;
+			});
 		}
 	}
 };
@@ -338,7 +342,7 @@ export default {
 			font-size: 24px;
 			font-family: inpinheiti;
 			font-weight: 400;
-			color: #FFFFFF;
+			color: #ffffff;
 			position: absolute;
 			bottom: 0;
 		}
@@ -346,7 +350,7 @@ export default {
 	.news {
 		width: 659px;
 		height: 344px;
-		background: #FFFFFF;
+		background: #ffffff;
 		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
 	}
 }
@@ -373,7 +377,7 @@ export default {
 		}
 		.item-wrapper {
 			padding: 20px 15px 0 13px;
-			
+
 			.new-item {
 				display: flex;
 				justify-content: space-between;
@@ -397,7 +401,6 @@ export default {
 					// border-radius: 50%;
 					transform: rotate(45deg);
 					margin-right: 8px;
-					
 				}
 				.title {
 					width: 400px;
@@ -469,9 +472,9 @@ export default {
 			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
 			.list-item {
 				display: flex;
-				border-bottom: 1px solid #F2F2F2;
+				border-bottom: 1px solid #f2f2f2;
 				&:last-of-type {
-					border-bottom:none;
+					border-bottom: none;
 				}
 				div {
 					width: 25%;
@@ -488,15 +491,15 @@ export default {
 				display: flex;
 				padding-top: 6px;
 				div {
-					width: 25%;;
+					width: 25%;
 					font-size: 17px;
 					font-family: PingFang SC;
 					font-weight: bold;
-					color: #BF3333;
+					color: #bf3333;
 					text-align: center;
 					line-height: 57px;
 					height: 57px;
-					border-bottom: 1px solid #F2F2F2;
+					border-bottom: 1px solid #f2f2f2;
 				}
 			}
 			.is-leaf {
@@ -589,50 +592,60 @@ export default {
 	}
 }
 .item-wrapper {
-			padding: 20px 15px 0 13px;
-			
-			.new-item {
-				display: flex;
-				justify-content: space-between;
-				margin-bottom: 17px;
-				&:hover {
-					span {
-						background: red;
-					}
-					.title {
-						color: red;
-					}
-					.time {
-						color: red;
-					}
-				}
-				span {
-					display: inline-block;
-					width: 8px;
-					height: 8px;
-					background: #d8d8d8;
-					// border-radius: 50%;
-					transform: rotate(45deg);
-					margin-right: 8px;
-					
-				}
-				.title {
-					width: 400px;
-					height: 14px;
-					font-size: 14px;
-					font-family: PingFang SC;
-					font-weight: bold;
-					color: #101010;
-					// &:hover {
-					// 	color: red;
-					// }
-				}
-				.time {
-					font-size: 14px;
-					font-family: PingFang SC;
-					font-weight: 500;
-					color: #999999;
-				}
+	padding: 20px 15px 0 13px;
+
+	.new-item {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 17px;
+		&:hover {
+			span {
+				background: red;
+			}
+			.title {
+				color: red;
+			}
+			.time {
+				color: red;
 			}
 		}
+		span {
+			display: inline-block;
+			width: 8px;
+			height: 8px;
+			background: #d8d8d8;
+			// border-radius: 50%;
+			transform: rotate(45deg);
+			margin-right: 8px;
+		}
+		.title {
+			width: 400px;
+			height: 14px;
+			font-size: 14px;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #101010;
+			// &:hover {
+			// 	color: red;
+			// }
+		}
+		.time {
+			font-size: 14px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #999999;
+		}
+	}
+}
+.table-empty {
+	// width: 100%;
+	text-align: center;
+	// border: 2px solid #f2f2f2;
+	font-size: 16px;
+	line-height: 36px;
+	font-family: PingFang SC;
+	// font-weight: bold;
+	border-top: none;
+	color: #999;
+}
 </style>