商学院评论

public/appnew/src/components/businessCollege/articleCommentLi.vue

@@ -80,6 +80,7 @@
 	li>div>div:nth-of-type(1)>img{
 		width: .75rem;
 		height: .75rem;
+		border-radius: .375rem;
 	}
 	li>div>div:nth-of-type(2){}
 	li>div>div:nth-of-type(2)>p:nth-of-type(1){

public/appnew/src/components/businessCollege/articleDetail.vue

@@ -23,13 +23,15 @@
 		
 		<div class="comment-area-seat"></div>
 		<div class="txt-comment-area" v-show="isCommentingFlag">
-			<div>
+			<div class="mask-comment-area" @click="isCommentingFlag = false"></div>
+			<div class="real-comment-area">
 				<div class="flex-center">
 					<textarea v-model="commentContent"></textarea>
 				</div>
 				<div class="oh">
 					<a class="fl flex-center" href="javascript:;" @click="isCommentingFlag = false">取消</a>
-					<a class="fr flex-center" href="javascript:;" @click="commentSend">发送</a>
+					<a class="fr flex-center" href="javascript:;" @click="commentSend" v-show="!isSending">发送</a>
+					<a class="fr flex-center" href="javascript:;" v-show="isSending">发送ing</a>
 				</div>
 			</div>
 		</div>
@@ -76,8 +78,9 @@
 				articleTime: '',
 				articleContent: '',
 				commentIcon,
-				isCommentingFlag: false,
-				commentContent: '',
+				isCommentingFlag: false,//是否正在写评论
+				commentContent: '',//评论的内容
+				isSending: false,//是否正在提交评论
 				isStop: false,
 				isLoading: false,
 				noDataFlag: false,
@@ -96,6 +99,14 @@
 				endAction() {
 					_this.isLoading = false;
 				}
+			},{
+				'urlStr': '/broker/commentNews',
+				startAction() {
+					_this.isSending = true;
+				},
+				endAction() {
+					_this.isSending = false;
+				}
 			});
 			
 			_this.axios({
@@ -131,7 +142,28 @@
 				if(_len<100 || _len>500){
 					layer.tipsX('评论字数需在100~500之间，当前字数为'+_len);
 				}else{
+					_this.axios({
+						method: 'POST',
+						url: '/broker/commentNews',
+						responseType: 'json',
+						data: {
+							'content': _this.commentContent,
+							'news_id': _this.articleId,
+							'AuthToken': _this.token
+						}
+					})
+					.then(function(response) {
+						if(response.data.code == 200) {
+							_this.resetCommentList();
+							_this.getCommentList();
 							_this.isCommentingFlag = false;
+						} else {
+							layer.tipsX(response.data.msg);
+						}
+					})
+					.catch(function(error) {
+						layer.tipsX(error);
+					});
 				}
 			},
 			getCommentList() {
@@ -167,6 +199,13 @@
 				.catch(function(error) {
 					layer.tipsX(error);
 				});
+			},
+			resetCommentList() {
+				//重置评论列表的内容
+				let _this = this;
+				_this.commentDataList = [];
+				_this.page = 1;
+				_this.noDataFlag = false;
 			}
 		},
 		computed: {
@@ -235,7 +274,11 @@
 		width: 100%;
 		height: 100%;
 	}
-	.txt-comment-area>div{
+	.mask-comment-area{
+		width: 100%;
+		height: 100%;
+	}
+	.real-comment-area{
 		position: fixed;
 		left: 0;
 		bottom: 0;
@@ -243,20 +286,20 @@
 		height: 2.6rem;
 		background-color: #f4f4f4;
 	}
-	.txt-comment-area>div>div:nth-of-type(1){
+	.real-comment-area>div:nth-of-type(1){
 		height: 1.8rem;
 	}
-	.txt-comment-area>div>div:nth-of-type(1)>textarea{
+	.real-comment-area>div:nth-of-type(1)>textarea{
 		width: 6.86rem;
 		height: 1.4rem;
 		border: #1px solid #e0e0e0;
 		border-radius: .1rem;
 		background-color: white;
 	}
-	.txt-comment-area>div>div:nth-of-type(2){
+	.real-comment-area>div:nth-of-type(2){
 		padding: 0 .3rem;
 	}
-	.txt-comment-area>div>div:nth-of-type(2)>a{
+	.real-comment-area>div:nth-of-type(2)>a{
 		box-sizing: border-box;
 		width: 1.2rem;
 		height: .6rem;
@@ -265,8 +308,12 @@
 		color: #999;
 		border: 1px solid #e0e0e0;
 	}
-	.txt-comment-area>div>div:nth-of-type(2)>a:nth-of-type(2){
+	.real-comment-area>div:nth-of-type(2)>a:nth-of-type(2){
 		background-color: #FA903F;
 		color: white;
 	}
+	.real-comment-area>div:nth-of-type(2)>a:nth-of-type(3){
+		background-color: #999;
+		color: white;
+	}
 </style>
\ No newline at end of file