代码提交

components/goodsComponents/Goods.vue

@@ -6,7 +6,8 @@
     @update: 2023-11-02 18:30
 -->
 <script setup>
-import { toRefs } from "vue";
+import LazyImage from '@/components/LazyImage/index.vue'
+import { computed, onBeforeUnmount, toRefs } from "vue";
 import { GOODS_ITEM_TYPE } from "@/components/goodsComponents/utils/index.type";
 import { useRouter } from "@/hooks/useRouter";
 import { getRandom } from "@/utils/utils";
@@ -61,6 +62,8 @@ const {
 
 const {push} = useRouter()
 
+const randomRatio = computed(()=>(`${1/getRandom(1,1.3)}`))
+
 function toDetail() {
   push({url: '/pages/goodsDetail/goodsDetail'}, {data: {id: goods.value.id}})
 }
@@ -77,14 +80,20 @@ function toDetail() {
         class="goods-image"
         :style="{
           'width':imgWidth,
-          'aspect-ratio': ratio===true?`${1/getRandom(1,1.3)}`:ratio
+          'aspect-ratio': ratio===true?randomRatio:ratio
         }"
     >
-      <image
+      <LazyImage
+          :unique="goods.id"
           :src="goods.image"
           class="image"
           :mode="ratio===true?'aspectFit':'aspectFill'"
       />
+<!--      <image
+          :src="goods.image"
+          class="image"
+          :mode="ratio===true?'aspectFit':'aspectFill'"
+      />-->
     </view>
     <!-- good info -->
     <view
@@ -156,7 +165,6 @@ function toDetail() {
   justify-content: space-between;
 
   .goods-image {
-
   }
 
   .goods-info {

components/goodsComponents/components/Options.vue

@@ -130,7 +130,7 @@ const {row, showBtn, oldPrice, btnText} = toRefs(props)
     flex-shrink: 0;
     background: $primary-color;
     color: $white-color;
-    font-size: 24rpx;
+    font-size: 18rpx;
   }
 
   .no-btn {