代码提交

components/reply/reply.vue

@@ -1,72 +1,116 @@
 <template>
-  <view :class="{
+  <view
+      :class="{
     reply: true,
     noPic: !data?.pics
-  }">
+  }"
+  >
     <view class="reply-content">
-      <view class="reply-user">
-        <view class="reply-user-pic">
-          <image
-            class="img"
-            src="http://yshop.l1.ttut.cc/admin-api/infra/file/4/get/7599202df273d25f1ce3aeba21165a544849248fda23aad090098d7be0c063c9.jpeg"
-          />
-          <!-- <image :src="data.avatar" /> -->
-        </view>
-        <view class="reply-user-name">
-          <view class="name">
-            <!-- {{ data.nickname }} -->
-            我的名字
+      <view class="reply-warp">
+        <view class="reply-user">
+          <view class="reply-user-pic">
+            <image
+                class="img"
+                :src="data.avatar"
+                @click="doPreviewImage(0,[data.avatar])"
+            />
           </view>
-          <view class="productScore">
-            <uv-rate
-              count="5"
-              :value="data.productScore"
-              readonly
-              size="12"
-              gutter="1"
-              active-color="#ee6d46"
-              inactive-color="#999999"
-            ></uv-rate>
+          <view class="reply-user-name">
+            <view class="name">
+              {{ data.nickname }}
+            </view>
+            <view class="productScore">
+              <uv-rate
+                  count="5"
+                  :value="data.productScore"
+                  readonly
+                  size="26rpx"
+                  gutter="1"
+                  active-color="#ee6d46"
+                  inactive-color="#999999"
+              ></uv-rate>
+            </view>
           </view>
         </view>
+        <view class="reply-time">{{ data.createTime }}</view>
       </view>
       <view class="reply-text">
         {{ data.comment }}
       </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"
+            :key="index"
+        >
+          <image
+              class="image"
+              :src="pic"
+              @click="doPreviewImage(index, data.pics)"
+          />
+        </template>
+      </view>
+      <view class="reply-sku">规格：{{data.sku}}</view>
     </view>
-    <view
-      class="reply-pic"
-      v-if="data?.pics"
-    >
-      <uv-album
-        :urls="data?.pics"
-        space="8rpx"
-      ></uv-album>
-    </view>
+
   </view>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { toRefs } from 'vue';
+import { useImage } from "@/hooks/useImage";
+
 const props = defineProps(['data'])
 
-const data = ref(props.data)
+const {data} = toRefs(props);
+
+const {preview} = useImage()
+
+function doPreviewImage(current, urls) {
+  preview({
+    current,
+    urls,
+  })
+}
 </script>
 
-<style lang="less">
+<style lang="scss">
 .reply {
-  margin-top: 20rpx;
+  border-top: 1rpx solid #E6E6E6;
+  padding-bottom: 10rpx;
+  &-content {
+    padding: 32rpx 34rpx;
+    border-right: 0;
+    flex: 1;
+    font-size: 30rpx;
+    color: #333333;
+
+    .reply-warp {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .reply-time {
+        font-size: 24rpx;
+        line-height: 1em;
+        color: #999999;
+      }
+    }
+  }
 
   &.noPic {
-
-    .reply-content {}
+    .reply-content {
+    }
   }
 
   &-pic {
-    width: 180rpx;
-    height: 180rpx;
-    background: #FFFFFF;
-    border-radius: 15rpx;
+    //width: 180rpx;
+    //height: 180rpx;
+    //background: #FFFFFF;
+    //border-radius: 15rpx;
+    padding: 0 24rpx;
   }
 
   &-user {
@@ -75,14 +119,12 @@ const data = ref(props.data)
     margin-bottom: 16rpx;
 
     &-pic {
-      width: 60rpx;
-      height: 60rpx;
       border-radius: 50%;
-      margin-right: 10rpx;
+      margin-right: 20rpx;
 
       .img {
-        width: 60rpx;
-        height: 60rpx;
+        width: 70rpx;
+        height: 70rpx;
         display: block;
         border-radius: 50%;
 
@@ -90,18 +132,33 @@ const data = ref(props.data)
     }
 
     &-name {
-      margin-left: 6rpx;
-      line-height: 33rpx;
-      font-size: 24rpx;
+      line-height: 40rpx;
+      font-size: 28rpx;
       color: #333333;
     }
   }
 
-  &-content {
-    border-right: 0;
-    flex: 1;
-    font-size: 30rpx;
+  &-text {
+    margin-top: 30rpx;
+    font-size: 28rpx;
+    line-height: 40rpx;
     color: #333333;
   }
+  &-sku{
+    font-size: 24rpx;
+    line-height: 33rpx;
+    color: #999999;
+    margin-top: 20rpx;
+  }
+}
+
+.reply-pic {
+  gap: 20rpx;
+  margin-bottom: 20rpx;
+
+  .image {
+    width: 180rpx;
+    height: 180rpx;
+  }
 }
 </style>