代码提交

pages/index/components/public/ThreeGoodRow.vue

@@ -0,0 +1,87 @@
+<!--
+    @name: 一行三个
+    @author: kahu4
+    @date: 2023-10-27 14:47
+    @description：TreeGoodRow
+    @update: 2023-10-27 14:47
+-->
+<script setup>
+import Goods from "@/components/goodsComponents/Goods.vue";
+import Options from "@/components/goodsComponents/components/Options.vue";
+import { useRouter } from "@/hooks/useRouter";
+
+const props = defineProps({
+  products: {
+    type: Array
+  }
+})
+
+const {push} = useRouter()
+
+
+const toDetail = (id) => {
+  push({url: '/pages/goodsDetail/goodsDetail'}, {
+    data: {
+      id
+    }
+  })
+}
+</script>
+
+<template>
+  <view class="three-row">
+    <template v-for="item in props.products">
+      <view class="good-item">
+        <Goods
+            :goods="item"
+            @click="toDetail(item.id)"
+        >
+          <template #options>
+            <Options :goods="item"></Options>
+          </template>
+        </Goods>
+      </view>
+
+    </template>
+  </view>
+</template>
+
+<style
+    scoped
+    lang="scss"
+>
+.three-row {
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10rpx;
+
+  .good-item {
+    position: relative;
+    width: 31%;
+  }
+
+  .good-bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 20rpx;
+
+    .price {
+      color: #EE6D46;
+      font-size: 30rpx;
+
+      .tip {
+        color: #999999;
+        font-size: 24rpx;
+      }
+    }
+
+    .sale {
+      color: #999999;
+    }
+  }
+}
+</style>