Przeglądaj źródła

修改点击输入框页面顶上去的问题

xuqiaoying 3 lat temu
rodzic
commit
92a0cfe8aa
2 zmienionych plików z 157 dodań i 16 usunięć
  1. 77 9
      pages3/live/detail.vue
  2. 80 7
      pages3/polyv/detail.vue

+ 77 - 9
pages3/live/detail.vue

@@ -174,7 +174,7 @@
           <view v-if="noteList.length == 0" style="text-align: center"
             >暂无笔记</view
           >
-          <view class="inputBottom" v-if="!(isPlayRebuild > 0) && playChannelId ==0">
+          <!-- <view class="inputBottom" v-if="!(isPlayRebuild > 0) && playChannelId ==0">
             <view style="width: 10%"
               ><image
                 src="/static/icon/note3.png"
@@ -203,7 +203,7 @@
               @click="postNote"
               >提交</view
             >
-          </view>
+          </view> -->
           <view v-for="(item, index) in noteList" :key="index">
             <view class="dateBox">{{
               $method.timestampToTime(item.dateNote)
@@ -248,7 +248,7 @@
         </view>
         <!--答疑 -->
         <view v-show="current == 2" class="Answering">
-          <view class="inputBottom">
+          <!-- <view class="inputBottom">
             <view class="flex_auto">
               <u-input
                 height="60"
@@ -262,7 +262,7 @@
               />
             </view>
             <view class="btn" @click="postContent">提交</view>
-          </view>
+          </view> -->
           <view
             v-for="(item, index) in answerList"
             :key="index"
@@ -362,6 +362,63 @@
 				  >
 				</view>
       </scroll-view>
+
+      <!-- 底部固定按钮 -->
+        <!-- 笔记的输入框 -->
+        <template v-if="current == 1">
+          <view class="inputBottom" v-if="!(isPlayRebuild > 0) && playChannelId ==0" :style="{ bottom: bottomHeight + 'px' }">
+            <view style="width: 10%"
+              ><image
+                src="/static/icon/note3.png"
+                style="width: 39rpx; height: 39rpx; margin: 0 29rpx"
+              ></image
+            ></view>
+            <view style="width: 73%; height: 100%; padding: 10rpx 0">
+              <input
+                v-model="noteValue"
+                class="input"
+                height="60"
+                fixed="true"
+                placeholder="您可以在这里输入笔记内容"
+                type="text"
+                :custom-style="inputStyle"
+                :adjust-position="false"
+                @focus="focusNote"
+                @blur="blurNote"
+              />
+            </view>
+            <view
+              style="
+                color: #007aff;
+                font-size: 30rpx;
+                font-weight: bold;
+                width: 15%;
+                text-align: center;
+              "
+              @click="postNote"
+              >提交</view
+            >
+          </view>
+        </template>
+        <!-- 答疑 -->
+        <view v-if="current == 2" class="inputBottom" :style="{ bottom: bottomHeight + 'px' }">
+          <view class="flex_auto">
+            <input
+              v-model="ctxValue"
+              height="60"
+              fixed="true"
+              :focus="isFocus"
+              :placeholder="placeholder"
+              type="text"
+              :custom-style="inputStyle"
+              :adjust-position="false"
+              class="input"
+              @focus="focusNote"
+              @blur="blur"
+            />
+          </view>
+          <view class="btn" @click="postContent">提交</view>
+        </view>
     </view>
     <!-- 播放前拍照end -->
     <u-popup
@@ -606,7 +663,8 @@ export default {
 			isFocus:false,
 			clearTimer:null,
 			historyChatMsgList:[],
-			livingItem:''
+			livingItem:'',
+      bottomHeight: 0,
     };
   },
   computed: {
@@ -1393,8 +1451,16 @@ export default {
       this.placeholder = "您可以在这里输入答疑内容";
       this.ctxValue = "";
       this.assignUserId = 0;
+    },
+    focusNote(event) {
+      console.log('event', event.detail.height)
+      this.bottomHeight = event.detail.height
+    },
+    blurNote() {
+      this.bottomHeight = 0
     },
 		blur() {
+      this.bottomHeight = 0
 			this.clearTimer = setTimeout(() => {
 				this.ctxValue = ""
 				this.isFocus = false;
@@ -2244,10 +2310,6 @@ page {
   .flex_auto {
     flex: 1;
     margin-left: 10%;
-
-    .input {
-      height: 60rpx;
-    }
   }
 
   .btn {
@@ -2257,6 +2319,12 @@ page {
     width: 15%;
     text-align: center;
   }
+  .input {
+    background: rgba(244, 244, 244, 0.98);
+    height: 60rpx;
+    border-radius: 24rpx;
+    margin-top: 12rpx;
+  }
 }
 .noteBox {
   width: 100%;

+ 80 - 7
pages3/polyv/detail.vue

@@ -188,7 +188,7 @@
           <view v-if="noteList.length == 0" style="text-align: center"
             >暂无笔记</view
           >
-          <view class="inputBottom" v-if="!(isPlayRebuild > 0) && playChannelId ==0">
+          <!-- <view class="inputBottom" v-if="!(isPlayRebuild > 0) && playChannelId ==0">
             <view style="width: 10%"
               ><image
                 src="/static/icon/note3.png"
@@ -217,7 +217,7 @@
               @click="postNote"
               >提交</view
             >
-          </view>
+          </view> -->
           <view v-for="(item, index) in noteList" :key="index">
             <view class="dateBox">{{
               $method.timestampToTime(item.dateNote)
@@ -262,7 +262,7 @@
         </view>
         <!--答疑 -->
         <view v-show="current == 3" class="Answering">
-          <view class="inputBottom">
+          <!-- <view class="inputBottom">
             <view class="flex_auto">
               <u-input
                 height="60"
@@ -276,7 +276,7 @@
               />
             </view>
             <view class="btn" @click="postContent">提交</view>
-          </view>
+          </view> -->
           <view
             v-for="(item, index) in answerList"
             :key="index"
@@ -386,6 +386,64 @@
           </view>
         </view>
       </scroll-view>
+
+      <!-- 底部固定按钮 -->
+      <!-- 笔记的输入框 -->
+      <template v-if="current == 2">
+        <view class="inputBottom" v-if="!(isPlayRebuild > 0) && playChannelId ==0" :style="{ bottom: bottomHeight + 'px' }">
+            <view style="width: 10%"
+              ><image
+                src="/static/icon/note3.png"
+                style="width: 39rpx; height: 39rpx; margin: 0 29rpx"
+              ></image
+            ></view>
+            <view style="width: 73%; height: 100%; padding: 10rpx 0">
+              <input
+                v-model="noteValue"
+                height="60"
+                fixed="true"
+                placeholder="您可以在这里输入笔记内容"
+                type="text"
+                :custom-style="inputStyle"
+                :adjust-position="false"
+                class="input"
+                @focus="focusNote"
+                @blur="blurNote"
+              />
+            </view>
+            <view
+              style="
+                color: #007aff;
+                font-size: 30rpx;
+                font-weight: bold;
+                width: 15%;
+                text-align: center;
+              "
+              @click="postNote"
+              >提交</view
+            >
+          </view>
+      </template>
+      <!-- 答疑的输入框 -->
+      <view v-if="current == 3" class="inputBottom" :style="{ bottom: bottomHeight + 'px' }">
+        <view class="flex_auto">
+          <input
+            v-model="ctxValue"
+            height="60"
+            fixed="true"
+            :focus="isFocus"
+            :placeholder="placeholder"
+            type="text"
+            :custom-style="inputStyle"
+            :adjust-position="false"
+            class="input"
+            @focus="focusNote"
+            @blur="blur"
+          />
+        </view>
+        <view class="btn" @click="postContent">提交</view>
+      </view>
+
     </view>
     <!-- 播放前拍照end -->
     <u-popup
@@ -634,6 +692,7 @@ export default {
       downLoading: false, //下载讲义加载
       showMulu: false, //显示和隐藏目录
       muluStyle: false, //显示和隐藏目录样式
+      bottomHeight: 0,
     };
   },
   computed: {
@@ -1794,8 +1853,16 @@ export default {
       this.placeholder = "您可以在这里输入答疑内容";
       this.ctxValue = "";
       this.assignUserId = 0;
+    },
+    focusNote(event) {
+      console.log('event', event.detail.height)
+      this.bottomHeight = event.detail.height
+    },
+    blurNote() {
+      this.bottomHeight = 0
     },
 		blur() {
+      this.bottomHeight = 0
 			this.clearTimer = setTimeout(() => {
 				this.ctxValue = ""
 				this.isFocus = false;
@@ -2741,9 +2808,9 @@ export default {
     flex: 1;
     margin-left: 10%;
 
-    .input {
-      height: 60rpx;
-    }
+    // .input {
+    //   height: 60rpx;
+    // }
   }
 
   .btn {
@@ -2753,6 +2820,12 @@ export default {
     width: 15%;
     text-align: center;
   }
+  .input {
+    background: rgba(244, 244, 244, 0.98);
+    height: 60rpx;
+    border-radius: 24rpx;
+    margin-top: 12rpx;
+  }
 }
 .noteBox {
   width: 100%;