feat: 新增快速预定页面

src/pages-quick/components/Card/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <view
+    class="card bg-white border-box p-8 rounded-12 flex flex-items-start m-12"
+    @click="handleClick(item)"
+  >
+    <image
+      class="left rounded-10"
+      :src="item.commodityIcon"
+      mode="aspectFill"
+    />
+    <view class="right border-box flex-full pl-12">
+      <view class="font-size-16 line-height-24 color-171717 mb-4">
+        {{ item.commodityName }}
+      </view>
+      <view class="font-size-12 line-height-16 color-99A0AE mb-4">
+        1 张 1.8 米大床
+      </view>
+      <view class="font-size-12 line-height-18 color-43669A">
+        {{ item.commodityTradeRuleList.join(" / ") }}
+      </view>
+
+      <view class="flex flex-items-center flex-justify-end">
+        <text
+          class="amt font-size-18 font-500 font-family-misans-vf line-height-24 color-FF3D60 mr-4"
+        >
+          {{ item.commodityPrice }}
+        </text>
+        <text class="font-size-12 line-height-16 color-99A0AE">
+          /{{ item.stockUnitLabel }}
+        </text>
+        <text class="btn border-box rounded-10 color-white ml-16">订</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+// Props
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+    default: () => ({
+      commodityIcon: "",
+      commodityId: "",
+      commodityName: "",
+      commodityPrice: "",
+      commodityServices: [],
+      commodityTags: [], // 商品标签
+      commodityTradeRuleList: [], // 交易规则列表
+      specificationId: "", // 规格ID
+      stockUnitLabel: "", // 库存单位
+    }),
+  },
+});
+
+const handleClick = ({ commodityId }) => {
+  uni.navigateTo({ url: `/pages/goods/index?commodityId=${commodityId}` });
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>