Преглед на файлове

Merge branch 'master' of http://git.izouma.com/xiongzhu/raex_front into dev

panhui преди 3 години
родител
ревизия
9daadd97e1
променени са 3 файла, в които са добавени 78 реда и са изтрити 21 реда
  1. 40 14
      src/components/ChatInfo.vue
  2. 29 5
      src/views/chat/Detail.vue
  3. 9 2
      src/views/chat/TeamSetting.vue

+ 40 - 14
src/components/ChatInfo.vue

@@ -6,17 +6,17 @@
             <div class="chat-box">
                 <div class="chat-name" v-if="flow == 'in'">{{ info.fromNick || info.fromNickName }}</div>
                 <van-image
-                    :src="body.msg + '?x-oss-process=image/resize,l_120'"
-                    @click="preview(0, [body.msg])"
-                    :width="width"
-                    :height="height"
+                    :src="body.msg"
+                    @click="preview(body.msg)"
                     fit="scale-down"
                     v-if="isImage"
+                    :width="imgWidth"
+                    :height="imgHeight"
                 ></van-image>
                 <div class="chat-message" v-else-if="type === 'text'">{{ body.msg }}</div>
                 <van-image
                     :src="attach.url"
-                    @click="preview(0, [attach.url])"
+                    @click="preview(attach.url)"
                     :width="width"
                     :height="height"
                     fit="scale-down"
@@ -29,9 +29,8 @@
     </div>
 </template>
 <script setup>
-import { defineProps, computed } from 'vue';
+import { defineProps, defineEmits, computed, onMounted, nextTick, ref } from 'vue';
 import dayjs from 'dayjs';
-import { ImagePreview } from 'vant';
 import { useStore } from 'vuex';
 
 const props = defineProps({
@@ -46,6 +45,7 @@ const props = defineProps({
         default: 0
     }
 });
+const emit = defineEmits(['setImage', 'preview']);
 
 const store = useStore();
 
@@ -180,14 +180,40 @@ const timeStr = computed(() => {
     });
 });
 
-const preview = (index = 0, list = []) => {
-    ImagePreview({
-        images: [...list].map(item => {
-            return item;
-        }),
-        startPosition: index
-    });
+const preview = url => {
+    emit('preview', url);
 };
+
+const imgWidth = ref(120);
+const imgHeight = ref(120);
+
+onMounted(() => {
+    nextTick(() => {
+        if (isImage.value) {
+            let i = new Image();
+            i.src = body.value.msg;
+            i.onload = () => {
+                if (i.width <= i.height) {
+                    let width = accMul(accMul(120, i.width), 1 / i.height);
+                    if (Number(width) > 200) {
+                        width = 200;
+                    }
+                    imgWidth.value = width;
+                    imgHeight.value = '';
+                } else {
+                    let height = accMul(accMul(120, i.height), 1 / i.width);
+                    if (Number(height) > 200) {
+                        height = 200;
+                    }
+                    imgHeight.value = height;
+                    imgWidth.value = '';
+                }
+            };
+
+            emit('setImage', body.value.msg);
+        }
+    });
+});
 </script>
 
 <style lang="less" scoped>

+ 29 - 5
src/views/chat/Detail.vue

@@ -29,7 +29,7 @@
             ref="listRef"
         >
             <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="finishedPage">
-                <div class="tips" v-if="finishedPage">没有更多了</div>
+                <!-- <div class="tips" v-if="finishedPage">没有更多了</div> -->
                 <div class="chat-list" ref="chatRef">
                     <chat-info
                         v-for="(item, index) in list"
@@ -48,11 +48,13 @@
                     <van-field
                         name="chat"
                         type="text"
+                        ref="fieldRef"
                         v-model="message"
                         :border="false"
                         clearable
                         placeholder="请输入..."
                         enterkeyhint
+                        @focus="onFocus"
                     />
                 </van-form>
 
@@ -119,6 +121,7 @@ import { useStore } from 'vuex';
 import useList from '../../plugins/list';
 import http from '../../plugins/http';
 import dayjs from 'dayjs';
+import { ImagePreview } from 'vant';
 const emojisPeople = Object.keys(emojis)
     .filter(key => {
         return emojis[key].category == 'people';
@@ -224,10 +227,11 @@ const send = () => {
     sendMsg(message.value, teamId.value, msg => {
         console.log(msg);
         list.value = getPushMsg(msg, list.value);
-
-        nextTick(() => {
-            goBottom();
-        });
+        if (listRef.value.scrollTop + 100 > listRef.value.scrollHeight) {
+            nextTick(() => {
+                goBottom();
+            });
+        }
     });
     message.value = '';
 };
@@ -363,6 +367,26 @@ onUnmounted(() => {
         tid: teamId.value
     });
 });
+
+const fieldRef = ref(null);
+function onFocus(e) {
+    // fieldRef.value.scrollIntoViewIfNeeded(false);
+}
+
+const imgList = ref([]);
+function setImage(img) {
+    imgList.value.push(img);
+}
+
+function onPreview(url) {
+    let index = imgList.value.findIndex(item => {
+        return item === url;
+    });
+    ImagePreview({
+        images: imgList.value,
+        startPosition: index
+    });
+}
 </script>
 <style lang="less" scoped>
 .van-list {

+ 9 - 2
src/views/chat/TeamSetting.vue

@@ -9,7 +9,11 @@
         <van-cell-group :border="false">
             <van-cell title="群聊名称" :value="teamInfo.name"></van-cell>
             <van-cell title="群介绍" :label="teamInfo.intro || '未设置'"></van-cell>
-            <van-cell title="群公告" :label="teamInfo.announcement || '未设置'"></van-cell>
+            <van-cell title="群公告">
+                <template #label>
+                    <div v-html="teamInfo.announcement || '未设置'"></div>
+                </template>
+            </van-cell>
         </van-cell-group>
     </div>
 </template>
@@ -37,7 +41,10 @@ onMounted(() => {
     }
 
     global.$http.get('/team/get/' + teamId.value).then(res => {
-        teamInfo.value = res;
+        teamInfo.value = {
+            ...res,
+            announcement: res.announcement.replace(/\n/g, '<br/>')
+        };
     });
     // setTimeout(
     //     () => {