Browse Source

fix 样式bug

Karsa 2 years ago
parent
commit
4ed9962177
3 changed files with 32 additions and 12 deletions
  1. 4 3
      components/questionComment/questionComment.vue
  2. 14 9
      pages/question/question.vue
  3. 14 0
      utils/common.js

+ 4 - 3
components/questionComment/questionComment.vue

@@ -17,11 +17,11 @@
 				<img :src="data.op_type===2?tease_act_img:tease_img" alt="" class="icon">
 				<text v-if="data.tease_total">{{data.tease_total}}</text>
 			</view>
-			<view class="commetn-item-wrap" @click="openCommentHandle">
+			<view class="commetn-item-wrap" @click="openCommentHandle" style="justify-content:center;">
 				<img :src="comment_img" alt="" class="icon"> 
 				<text v-if="data.comment_total">{{data.comment_total}}</text>
 			</view>
-			<view class="commetn-item-wrap" @click="setLikeHandle(1)">
+			<view class="commetn-item-wrap" @click="setLikeHandle(1)" style="justify-content:flex-end;">
 				<img :src="data.op_type===1?like_act_img:like_img" alt="" class="icon">
 				<text v-if="data.like_total">{{data.like_total}}</text>
 			</view>
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-   import * as $api from '@/api/question.js' 
+   import * as $api from '@/api/question.js'
 	export default {
 		props: {
 			item: {
@@ -98,6 +98,7 @@
 	.commetn-item-wrap {
 		display: flex;
 		align-items: center;
+      flex: 1;
 		.icon {
 			width: 48rpx;
 			height: 48rpx;

+ 14 - 9
pages/question/question.vue

@@ -1,6 +1,5 @@
 <template>
-	<view class="question-wrap" :style="isShowComment ? 'height: 100vh;overflow:hidden' : ''">
-      <!-- :style="isShowComment ? 'height: 100vh;overflow:hidden' : ''" -->
+	<view class="question-wrap">
 		<template v-if="hasAuth">
 			<view class="question-top" :class="{'noAuth':!(isUserResearcher||userInfo.status&&userAuth)}">
 				<view @click="showPopup" v-if="isUserResearcher||userInfo.status&&userAuth"
@@ -117,7 +116,7 @@
 			@close="closeCommentHandle"
 			@clickOverlay="isShowComment=false"
 		>
-			<view class="comment-cont">
+			<view class="comment-cont" catchtouchmove="return">
 			   <view class="commment-top">
 				   <text class="title">{{comment_obj.title}} {{comment_obj.total}}</text>
 				   <view class="comment-top-right">
@@ -125,7 +124,7 @@
 					   <text :class="select_comment_type === 2 && 'act'" @click="changeCommentTypeHandle(2)">我的</text>
 				   </view>
 			   </view>
-				<view class="comment-list-cont" v-if="comment_obj.total">
+				<scroll-view class="comment-list-cont" v-if="comment_obj.total" scroll-y>
                <view class="comment-list-item" v-for="(item,index) in commentList" :key="item.community_question_comment_id">
                   <view class="comment">
                      <text style="color: #333;">{{item.user_name}}:</text>
@@ -133,7 +132,7 @@
                   </view>
                   <view class="del" v-if="select_comment_type === 2"  @click="delCommentHandle(item,index)">删除该评论</view>
                </view>
-				</view>
+				</scroll-view>
             <view class="nodata" v-else>
                <image src="@/static/nodata.png"></image>
                <view>暂无评论</view>
@@ -176,6 +175,7 @@ import {
 } from '@/api/question'
 import questionComment from '@/components/questionComment/questionComment.vue'
 import Dialog from '@/wxcomponents/vant/dialog/dialog.js';
+import { debounce } from '@/utils/common.js';
 export default {
 	mixins: [mixin],
 	data() {
@@ -313,6 +313,7 @@ export default {
       /* 切换评论类型*/
       changeCommentTypeHandle(type) {
          if(type === this.select_comment_type) return
+         this.commentList = [];
          this.select_comment_type = type;
          this.getComment();
       },
@@ -379,7 +380,9 @@ export default {
       },
       
       /* 发布留言*/
-      async publishMessageHandle() {
+      publishMessageHandle: debounce( async function() {
+         if(!this.comment_cont) return wx.showToast({title: '请输入留言内容',icon: 'none'});
+         
          const { code } = await apiPublishComment({
             content: this.comment_cont,
             community_question_id: this.select_question_item.community_question_id
@@ -389,7 +392,7 @@ export default {
          wx.showToast({title: '发布成功'});
          this.comment_cont = '';
          this.select_comment_type === 2 && this.getComment();
-      }
+      })
 	}
 }
 </script>
@@ -591,9 +594,9 @@ page {
       height: calc(100vh - 550rpx);
       overflow-y: auto;
       position: relative;
-      padding: 0 24rpx;
+      padding: 30rpx 24rpx 0;
       .comment-list-item {
-         margin: 30rpx 0;
+         margin-bottom: 30rpx;
          .comment { color: #666; }
          .del { color: #D80000;margin-top: 10rpx;width: 200rpx; }
       }
@@ -609,6 +612,8 @@ page {
       align-items: center;
       z-index: 99;
       background-color: #fff;
+      padding-bottom: calc(5px + constant(safe-area-inset-bottom));
+      padding-bottom: calc(5px + env(safe-area-inset-bottom));
       ::-webkit-scrollbar {
          display: none;
       }

+ 14 - 0
utils/common.js

@@ -65,3 +65,17 @@ export const hasUpdate = () => {
     });
   });
 };
+
+/**
+ * 
+ * 防抖
+ */
+export const debounce = (fn,t=300) => {
+   let timer = null;
+   return function() {
+      clearTimeout(timer);
+      timer = setTimeout(_ => {
+         fn.call(this, arguments);
+      }, t);
+   };
+}