代码提交

components/goodsComponents/Goods.vue

@@ -9,6 +9,7 @@
 import { toRefs } from "vue";
 import { GOODS_ITEM_TYPE } from "@/components/goodsComponents/utils/index.type";
 import { useRouter } from "@/hooks/useRouter";
+import { getRandom } from "@/utils/utils";
 
 const props = defineProps({
   goods: {
@@ -21,17 +22,17 @@ const props = defineProps({
   },
   /** 图片比例 */
   ratio: {
-    type: String,
-    default: () => "1/1"
+    type: [String,Boolean],
+    default: () => '1/1'
   },
   infoPadding: {
     type: String,
     default: () => "0 0"
   },
   /** title是否换行 */
-  titleNowrap: {
+  titleWrap: {
     type: Boolean,
-    default: () => true
+    default: () => false
   },
   /** title 文字大小 rpx */
   titleSize: {
@@ -53,7 +54,7 @@ const {
   imgWidth,
   ratio,
   infoPadding,
-  titleNowrap,
+  titleWrap,
   titleSize,
   row,
 } = toRefs(props)
@@ -63,6 +64,7 @@ const {push} = useRouter()
 function toDetail() {
   push({url: '/pages/goodsDetail/goodsDetail'}, {data: {id: goods.value.id}})
 }
+
 </script>
 
 <template>
@@ -75,13 +77,13 @@ function toDetail() {
         class="goods-image"
         :style="{
           'width':imgWidth,
-          'aspect-ratio':ratio
+          'aspect-ratio': ratio===true?`${1/getRandom(1,1.3)}`:ratio
         }"
     >
       <image
           :src="goods.image"
           class="image"
-          mode="aspectFill"
+          :mode="ratio===true?'aspectFit':'aspectFill'"
       />
     </view>
     <!-- good info -->
@@ -96,7 +98,7 @@ function toDetail() {
       <view
           :class="{
               'title-row':true,
-              'nowrap': titleNowrap
+              'nowrap': !titleWrap
           }"
           :style="{
               'font-size':`${titleSize}rpx`
@@ -136,7 +138,7 @@ function toDetail() {
     .title-row {
       user-select: none;
       width: 100%;
-      //padding: 14rpx 0;
+      padding-bottom: 15rpx;
       font-size: 28rpx;
     }