代码提交

components/detail-reply/detail-reply.vue

@@ -0,0 +1,106 @@
+<template>
+  <!--  <uv-scroll-list>-->
+  <view class="reply">
+    <view class="reply-cont">
+      <view class="reply-user">
+        <view class="reply-user-pic">
+          <uv-image
+              :src="data.avatar"
+              width="50rpx"
+              height="50rpx"
+          ></uv-image>
+        </view>
+        <view class="reply-user-name">
+          {{ data.nickname }}
+        </view>
+      </view>
+      <view class="reply-text">
+        {{ data.comment }}
+      </view>
+    </view>
+
+    <view
+        class="reply-pic flex flex-ai__center"
+        v-if="data.pics && data.pics.length>0"
+    >
+      <template
+          v-for="(pic,index) in data.pics.slice(0,1)"
+          :key="index"
+      >
+        <image
+            class="image"
+            :src="pic"
+            @click="doPreviewImage(index, data.pics)"
+        />
+      </template>
+    </view>
+  </view>
+  <!--  </uv-scroll-list>-->
+</template>
+
+<script setup>
+import { toRefs } from 'vue';
+import { useImage } from "@/hooks/useImage";
+
+const props = defineProps(['data'])
+
+const {data} = toRefs(props);
+
+const {preview} = useImage()
+
+function doPreviewImage(current, urls) {
+  preview({
+    current,
+    urls,
+  })
+}
+</script>
+
+<style lang="scss">
+.reply {
+  display: flex;
+  border: 1rpx solid #E6E6E6;
+  border-radius: 15rpx;
+  overflow: hidden;
+  width: 565rpx;
+  margin-top: 30rpx;
+
+  &-cont {
+    flex: 1;
+    padding: 20rpx;
+
+    .reply-user {
+      display: flex;
+      align-items: center;
+
+      &-pic {
+        margin-right: 10rpx;
+      }
+
+      &-name {
+        font-size: 24rpx;
+        color: #333333;
+      }
+    }
+
+    .reply-text {
+      font-size: 24rpx;
+      line-height: 32rpx;
+      color: #333333;
+      margin-top: 20rpx;
+    }
+  }
+
+  &-pic {
+    width: 187rpx;
+  }
+}
+
+.reply-pic {
+
+  .image {
+    width: 180rpx;
+    height: 180rpx;
+  }
+}
+</style>