代码提交

components/goodsComponents/Goods.vue

@@ -0,0 +1,169 @@
+<!--
+    @name: 上哦
+    @author: kahu4
+    @date: 2023-11-02 18:30
+    @description：Goods
+    @update: 2023-11-02 18:30
+-->
+<script setup>
+import { toRefs } from "vue";
+import { GOODS_ITEM_TYPE } from "@/components/goodsComponents/utils/index.type";
+import { useRouter } from "@/hooks/useRouter";
+
+const props = defineProps({
+  goods: {
+    type: Object,
+    default: () => ({})
+  },
+  imgWidth: {
+    type: String,
+    default: '100%'
+  },
+  /** 图片比例 */
+  ratio: {
+    type: String,
+    default: () => "1/1"
+  },
+  infoPadding: {
+    type: String,
+    default: () => "0 0"
+  },
+  /** title是否换行 */
+  titleNowrap: {
+    type: Boolean,
+    default: () => true
+  },
+  /** title 文字大小 rpx */
+  titleSize: {
+    type: Number,
+    default: () => 28
+  },
+  type: {
+    type: String,
+    default: () => GOODS_ITEM_TYPE.NEW
+  },
+  row: {
+    type: Boolean,
+    default: false
+  },
+})
+
+const {
+  goods,
+  imgWidth,
+  ratio,
+  infoPadding,
+  titleNowrap,
+  titleSize,
+  row,
+} = toRefs(props)
+
+const {push} = useRouter()
+
+function toDetail() {
+  push({url: '/pages/goodsDetail/goodsDetail'}, {data: {id: goods.value.id}})
+}
+</script>
+
+<template>
+  <view
+      :class="{'goods':true,'row':row}"
+      @click="toDetail"
+  >
+    <!-- goods image -->
+    <view
+        class="goods-image"
+        :style="{
+          'width':imgWidth,
+          'aspect-ratio':ratio
+        }"
+    >
+      <image
+          :src="goods.image"
+          class="image"
+          mode="aspectFill"
+      />
+    </view>
+    <!-- good info -->
+    <view
+        class="goods-info"
+        :style="{
+          'padding':infoPadding,
+          'width':row?`calc( 100% - ${imgWidth} )`:'100%',
+          'height':row?`${imgWidth}`:'auto'
+         }"
+    >
+      <view
+          :class="{
+              'title-row':true,
+              'nowrap': titleNowrap
+          }"
+          :style="{
+              'font-size':`${titleSize}rpx`
+          }"
+      >
+        {{ goods.storeName }}
+      </view>
+      <slot
+          name="options"
+          :goods="goods"
+      ></slot>
+    </view>
+  </view>
+</template>
+
+<style
+    scoped
+    lang="scss"
+>
+.goods {
+  position: relative;
+  width: 100%;
+
+  &-image {
+    flex-shrink: 0;
+
+    .image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-info {
+    width: 100%;
+    box-sizing: border-box;
+
+    .title-row {
+      user-select: none;
+      width: 100%;
+      //padding: 14rpx 0;
+      font-size: 28rpx;
+    }
+
+    .nowrap {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .goods-image {
+
+  }
+
+  .goods-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+}
+
+</style>