添加茶室列表组件

src/components/reserve/room-list.vue

@@ -0,0 +1,60 @@
+<template>
+    <view v-for="(item, index) in 10" :key="index">
+        <view class="flex items-center">
+            <view class="w-200rpx h-200rpx">
+                <wd-img width="100%" height="100%" :src="`${OSS}images/reserve_room_image2.png`"
+                    radius="10rpx"/>
+            </view>
+            <view class="flex-1 ml-32rpx">
+                <view class="text-28rpx text-[#303133] leading-38rpx">双人包间这个是标题名称</view>
+                <view class="mt-22rpx flex items-center">
+                    <view class="mr-20rpx">
+                        <wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
+                    </view>
+                    <view class="">
+                        <wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
+                    </view>
+                </view>
+                <view class="flex justify-between items-end">
+                   <price-format color="#FF5951" class="m-r-10" :first-size="34" :second-size="26"
+                        :subscript-size="26" :price="23.02" weight="500"></price-format>
+                    <view class="">
+                        <view class="text-[#6A6363] text-22rpx leading-30rpx">已售 10+</view>
+                        <view class="w-104rpx h-52rpx mt-16rpx text-26rpx font-400 text-[#4C9F44] leading-52rpx text-center border-[2rpx] border-[#4C9F44] rounded-10rpx">预定</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="flex justify-around items-center ml-12rpx mt-18rpx" v-if="reserve">
+            <view class="w-20rpx text-center " v-for="(item, index) in 24" :key="index">
+                <view class="font-400 text-20rpx text-[#606266] leading-28rpx">{{ item }}</view>
+                <view class="h-12rpx rounded-6rpx bg-[#4C9F44] mt-4rpx" :class="`${index === 1 || index === 11 ? 'bg-[#C9C9C9]' : ''}`"></view>
+            </view>
+        </view>
+        <view class="my-24rpx gap" v-if="index !== props.list.length - 1">
+            <wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup name="roomList">
+import { ref, watch, inject } from 'vue'
+import priceFormat from '@/components/price-format.vue';
+
+const props = defineProps({
+    list: {
+        type: Array,
+        default: () => []
+    },
+    reserve: {
+        type: Boolean,
+        default: true
+    }
+})
+let OSS = inject('OSS')
+
+</script>
+
+<script lang="ts">
+    export default {}
+</script>