代码提交

pages/index/components/public/HomeGoodItem.vue

@@ -0,0 +1,130 @@
+<!--
+    @name: HomeGoodItem
+    @author: kahu4
+    @date: 2023-10-27 14:47
+    @description：HomeGoodItem
+    @update: 2023-10-27 14:47
+-->
+<script setup>
+import { useRouter } from "@/hooks/useRouter";
+
+const {push} = useRouter()
+const props = defineProps({
+  good: {
+    type: Object
+  },
+  size: {
+    type: String,
+    default: 'small'
+  },
+  mode: {
+    type: String,
+    default: 'col'
+  }
+})
+const toDetail = () => {
+  push({url: '/pages/goodsDetail/goodsDetail'}, {
+    data: {
+      id: props.good.id
+    }
+  })
+}
+</script>
+
+<template>
+  <view
+      :class="{'good-item':true,row:props.mode==='row'}"
+      @tap="toDetail"
+  >
+    <view class="image">
+      <image
+          :src="props.good.image"
+          mode="aspectFill"
+      />
+    </view>
+    <view
+        class="info-box"
+        :class="{'padding-box':props.size==='big'}"
+    >
+      <view class="title-row">
+        {{ props.good.storeName }}
+      </view>
+      <view class="price-row">
+        <slot
+            name="bottom"
+            :good="good"
+        >底部
+        </slot>
+      </view>
+    </view>
+
+  </view>
+</template>
+
+<style
+    scoped
+    lang="scss"
+>
+.good-item {
+  position: relative;
+  width: 100%;
+
+  .image {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+
+    image {
+      width: 100%;
+      height: 100%;
+      border-radius: 10rpx;
+    }
+  }
+
+  .info-box {
+    width: 100%;
+
+    .title-row {
+      margin: 14rpx 0;
+
+      max-width: 25vw;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      font-weight: 500;
+      font-size: 26rpx;
+    }
+  }
+
+  .padding-box {
+    box-sizing: border-box;
+    padding: 14rpx 20rpx;
+  }
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  padding: 16rpx;
+  box-sizing: border-box;
+  background: #fff;
+  margin-bottom: 20rpx;
+  border-radius: 15rpx;
+
+  .image {
+    width: 220rpx;
+  }
+
+  .info-box {
+    padding: 20rpx 40rpx;
+    box-sizing: border-box;
+    height: 220rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .title-row {
+      margin-bottom: 30rpx;
+    }
+  }
+}
+</style>