nvue-vue

pages/im/components/showImage.vue

@@ -0,0 +1,74 @@
+<template>
+    <view class="">
+        <text class="name" v-if="!guest && name">{{ name }}</text>
+        <view class="msg--image" :class="guest ? 'right': 'left'">
+            <image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: 'showImage',
+        props: {
+            msg: {
+                type: Object,
+                default: () => {
+                    return {
+                        local: '',
+                        remote: '',
+                        objectName: '',
+                        thumbnail: '',
+                        isFull: false
+                    }
+                }
+            },
+            guest: {
+                type: Boolean,
+                default: true
+            },
+            name: {
+                type: String,
+                default: ''
+            }
+        },
+        methods: {
+            previewImage() {
+                uni.previewImage({
+                    urls: [
+                        this.msg.remote
+                    ],
+                    current: 1
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .name {
+        font-size: 24rpx;
+        line-height: 34rpx;
+        color: $text-gray-m;
+        padding-bottom: 10rpx;
+    }
+    
+    .msg--image {
+        // padding: 20rpx;
+
+        &.left {
+            border-radius: 0 20rpx 20rpx 20rpx;
+            // background: white;
+        }
+
+        &.right {
+            border-radius: 20rpx 0 20rpx 20rpx;
+            // background: #34CE98;
+        }
+
+        .img {
+            width: 150rpx;
+            border-radius: 10rpx;
+        }
+    }
+</style>