|
@@ -6,17 +6,17 @@
|
|
|
<div class="chat-box">
|
|
<div class="chat-box">
|
|
|
<div class="chat-name" v-if="flow == 'in'">{{ info.fromNick || info.fromNickName }}</div>
|
|
<div class="chat-name" v-if="flow == 'in'">{{ info.fromNick || info.fromNickName }}</div>
|
|
|
<van-image
|
|
<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"
|
|
fit="scale-down"
|
|
|
v-if="isImage"
|
|
v-if="isImage"
|
|
|
|
|
+ :width="imgWidth"
|
|
|
|
|
+ :height="imgHeight"
|
|
|
></van-image>
|
|
></van-image>
|
|
|
<div class="chat-message" v-else-if="type === 'text'">{{ body.msg }}</div>
|
|
<div class="chat-message" v-else-if="type === 'text'">{{ body.msg }}</div>
|
|
|
<van-image
|
|
<van-image
|
|
|
:src="attach.url"
|
|
:src="attach.url"
|
|
|
- @click="preview(0, [attach.url])"
|
|
|
|
|
|
|
+ @click="preview(attach.url)"
|
|
|
:width="width"
|
|
:width="width"
|
|
|
:height="height"
|
|
:height="height"
|
|
|
fit="scale-down"
|
|
fit="scale-down"
|
|
@@ -29,9 +29,8 @@
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { defineProps, computed } from 'vue';
|
|
|
|
|
|
|
+import { defineProps, defineEmits, computed, onMounted, nextTick, ref } from 'vue';
|
|
|
import dayjs from 'dayjs';
|
|
import dayjs from 'dayjs';
|
|
|
-import { ImagePreview } from 'vant';
|
|
|
|
|
import { useStore } from 'vuex';
|
|
import { useStore } from 'vuex';
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
@@ -46,6 +45,7 @@ const props = defineProps({
|
|
|
default: 0
|
|
default: 0
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
+const emit = defineEmits(['setImage', 'preview']);
|
|
|
|
|
|
|
|
const store = useStore();
|
|
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>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|