房券列表

src/styles/index.scss

@@ -111,6 +111,14 @@
   overflow: hidden;
 }
 
+// 超出2行显示省略号
+.ellipsis-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
 // 分隔线
 .septal-line {
   display: inline-block;

src/views/mall/components/details.vue

@@ -99,7 +99,7 @@ import pay from '@/views/mall/components/details/order/pay.vue'
 const router = useRouter()
 const { id } = router.currentRoute.value.params
 
-const describeTab = ref(0)
+const describeTab = ref(2)
 const selectedSkuPicUrl = ref('')
 const selectedSkuPrice = ref('')
 const selectedSkuMarketPrice = ref('')

src/views/mall/components/details/prizeDrawContent.vue

@@ -1,22 +1,78 @@
 <!--  -->
 <template>
-  <div class=" px-15">
-    <div style="font-size: 28px;" class="my-5">房券列表：</div>
-    <div v-for="(item, index) of list" :key="index" class="mb-5">
-      <v-img :src="item" style="border-radius: 8px;"></v-img>
+  <div class="px-5">
+    <div class="d-flex justify-space-between color-666">
+      <div class="pt-2" style="font-size: 25px;">房券列表</div>
+      <div class="d-flex">
+        <!-- <span class="cursor-pointer active" >当前账户积分</span>
+        <span class="septal-line"></span>
+        <span class="cursor-pointer active" >兑换记录</span> -->
+        <div style="width: 200px;" class="mt-2">
+          <v-text-field
+            v-model="content"
+            variant="outlined" 
+            label="关键字查找"
+            hide-details
+            color="primary"
+            density="compact"
+            append-inner-icon="mdi-magnify"
+            @click:append-inner="handleSearch"
+            @keyup.enter="handleSearch"
+          >
+          </v-text-field>
+        </div>
+      </div>
+    </div>
+    <div class="goods-box mt-5">
+      <v-card v-for="val in dataList" :key="val.id" class="goods-box-item" elevation="2" style="background-color: #00ad9b;" @click="null">
+        <div style="width: 100%; height: 200px;">
+          <v-img :src="val.url" :aspect-ratio="1" style="border-radius: 8px;"></v-img>
+        </div>
+        <div class="text-center pa-3 pb-2 mt-5" style=" border-top: 2px dashed #b7b7b7; color: #fff;">
+          <div class="ellipsis-2">{{ val.name }}</div>
+          <div class="font-size-12 mt-2">{{ val.time }}</div>
+        </div>
+      </v-card>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-
 defineOptions({name: 'GoodsItem-prizeDrawContent'})
+import { ref } from 'vue'
+const emit = defineEmits(['login'])
+
+const content = ref('')
+const handleSearch = () => {}
 
-const list = ref([
-  'https://img1.baidu.com/it/u=2343227867,4040084608&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=248',
-  'https://img1.baidu.com/it/u=2343227867,4040084608&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=248',
+// 数据
+const dataList = ref([
+  { name: '凯悦酒店1866/2晚的房券-大床带双早', point: 8000, url: 'https://img1.baidu.com/it/u=2383065711,2021783868&fm=253&fmt=auto&app=138&f=JPEG?w=719&h=500', time: '2025.02.01-2025.02.30' },
+  { name: '房券-高端酒店房券', point: 12000, url: 'https://img1.baidu.com/it/u=1781363061,1773318172&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', time: '2025.01.01-2025.12.30' },
+  { name: '金茂万丽免房券', point: 5000, url: 'https://img1.baidu.com/it/u=1791205046,4251623717&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375', time: '2025.01.01-2025.12.30' },
+  { name: '苏州昆山阳澄喜柯大酒店1晚套餐通兑券（住园景/全湖景尊享房+双人份豪华早餐+可自选蟹宴/价值198元正餐+免费使用泳池健身房）', point: 2000, url: 'https://img2.baidu.com/it/u=4056160349,3161141178&fm=253&fmt=auto&app=138&f=JPEG?w=668&h=500', time: '2025.01.01-2025.12.30' },
+  { name: '上海万怡酒店房券+迪士尼门票', point: 500, url: 'https://picx.zhimg.com/v2-d21746f72d02ee821e35c6db11c0935f_r.jpg?source=1940ef5c', time: '2025.01.01-2025.12.30' }
 ])
+
 </script>
-<style lang="scss" scoped>
+
+<style scoped lang="scss">
+.active:hover {
+  color: var(--v-primary-base) !important;
+}
+.goods-box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  &-item {
+    // height: 330px;
+    padding: 12px;
+    width: calc((100% - 48px) / 4);
+    margin: 0 12px 12px 0;
+    &:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+}
 </style>
+