房券列表

components.d.ts

@@ -72,7 +72,4 @@ declare module 'vue' {
     VerifySlide: typeof import('./src/components/Verifition/Verify/VerifySlide.vue')['default']
     WangEditor: typeof import('./src/components/FormUI/wangEditor/index.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

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

@@ -1,12 +1,29 @@
 <!--  -->
 <template>
-  <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 class="d-flex">
+    <div style="width: 200px; border: 1px dashed #b7b7b7;">
+      <v-treeview
+        :items="treeData"
+        activatable
+        color="primary"
+        item-value="id"
+        open-all
+        open-strategy="single"
+        density="compact"
+        @update:activated="handleClick"
+        @update:opened="handleClick"
+      >
+        <template v-slot:title="{ item }">
+          <div class="treeTitle font-size-15">
+            {{ item.title }}
+            <!-- <v-tooltip activator="parent" location="end">{{ dealEnterpriseName(item.anotherName || item.name) }}</v-tooltip> -->
+          </div>
+        </template>
+      </v-treeview>
+    </div>
+    <div class="ml-5" style="width: calc(100% - 200px - 20px);">
+      <div class="d-flex justify-space-between color-666">
+        <div class="pt-2" style="font-size: 25px;">房券列表</div>
         <div style="width: 200px;" class="mt-2">
           <v-text-field
             v-model="content"
@@ -22,17 +39,17 @@
           </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 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>
   </div>
 </template>
@@ -40,20 +57,122 @@
 <script setup>
 defineOptions({name: 'GoodsItem-prizeDrawContent'})
 import { ref } from 'vue'
-const emit = defineEmits(['login'])
+// import { getHotPositionList } from '@/api/common/index'
 
+const loading = ref(false)
 const content = ref('')
 const handleSearch = () => {}
 
 // 数据
 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' }
+  { name: '凯悦酒店1866/2晚的房券-大床带双早', id: '1', 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: '房券-高端酒店房券', id: '2', 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: '金茂万丽免房券', id: '3', 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元正餐+免费使用泳池健身房）', id: '4', 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: '上海万怡酒店房券+迪士尼门票', id: '5', url: 'https://picx.zhimg.com/v2-d21746f72d02ee821e35c6db11c0935f_r.jpg?source=1940ef5c', time: '2025.01.01-2025.12.30' }
 ])
 
+// 获取房券列表
+const getDataList = async () => {
+  loading.value = true
+  // try {
+  //   const { list, total: number } = await getEnterpriseUserList(query.value)
+  //   tableData.value = list
+  //   total.value = number
+  // } finally {
+  //   loading.value = false
+  // }
+}
+
+// 树形click
+const handleClick = (e) => {
+  if (!e.length) return
+  // query.value.enterpriseId = e[0]
+  // getDataList()
+}
+
+const treeData = ref([])
+// 获取树形列表
+const getTreeData = async () => {
+  // const data = await getHotPositionList()
+  // if (!data) return
+  treeData.value = [
+    {
+      id: 1,
+      title: 'Applications :',
+      children: [
+        { id: 2, title: 'Calendar : app' },
+        { id: 3, title: 'Chrome : app' },
+        { id: 4, title: 'Webstorm : app' },
+      ],
+    },
+    {
+      id: 5,
+      title: 'Documents :',
+      children: [
+        {
+          id: 6,
+          title: 'vuetify :',
+          children: [
+            {
+              id: 7,
+              title: 'src :',
+              children: [
+                { id: 8, title: 'index : ts' },
+                { id: 9, title: 'bootstrap : ts' },
+              ],
+            },
+          ],
+        },
+        {
+          id: 10,
+          title: 'material2 :',
+          children: [
+            {
+              id: 11,
+              title: 'src :',
+              children: [
+                { id: 12, title: 'v-btn : ts' },
+                { id: 13, title: 'v-card : ts' },
+                { id: 14, title: 'v-window : ts' },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: 15,
+      title: 'Downloads :',
+      children: [
+        { id: 16, title: 'October : pdf' },
+        { id: 17, title: 'November : pdf' },
+        { id: 18, title: 'Tutorial : html' },
+      ],
+    },
+    {
+      id: 19,
+      title: 'Videos :',
+      children: [
+        {
+          id: 20,
+          title: 'Tutorials :',
+          children: [
+            { id: 21, title: 'Basic layouts : mp4' },
+            { id: 22, title: 'Advanced techniques : mp4' },
+            { id: 23, title: 'All about app : dir' },
+          ],
+        },
+        { id: 24, title: 'Intro : mov' },
+        { id: 25, title: 'Conference introduction : avi' },
+      ],
+    },
+  ],
+  // query.value.enterpriseId = data.id
+  getDataList()
+}
+getTreeData()
+
 </script>
 
 <style scoped lang="scss">