积分兑换

src/views/personal/pointsMall/exchange.vue

@@ -1,10 +1,43 @@
 <!-- 积分兑换 -->
 <template>
-  <div>vue3PageInit</div>
+  <div class="listBox">
+    <div v-for="(item, index) in dataList" :key="'exchange' + index">
+      <div class="cursor-pointer mx-5 mb-4" style="width: 180px;">
+        <v-img width="180" height="180" :src="item.图片 || 'https://minio.citupro.com/dev/menduner/7.png'"></v-img>
+        <div class="ellipsis mt-2" style="font-size: 14px;">{{ item.物品名称 }}</div>
+        <div class="ellipsis mt-1" style="font-size: 13px;">消耗积分<span class="ml-1" style="color: var(--v-primary-base)">{{ item.消耗积分 }}</span></div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 defineOptions({name: 'pointsMall-exchange'})
+
+// 数据
+const dataList = ref([])
+const getData = () => {
+  dataList.value = [
+    { 物品名称: '掼蛋文娱套装·茶牌款', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/17/64/c2/bd52d2072e4304a43d383069fe63d15cb12fddf6.jpg' },
+    { 物品名称: '户外两键无绳跳绳大球+羽毛球拍+抽象几何飞盘运动套装', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/72/9b/de/42d8056bdd889217793f84cb68936d5682ea72dc.png' },
+    { 物品名称: '懒人挂脖风扇', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/34/fb/dd/dfc8757b4204fc79352490478e6be8ae71fd748a.jpg' },
+    { 物品名称: '艾优 全自动防水成人声波电动牙刷T11-A', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/68/0a/f4/53d5f128b19d22c04ed4538360ae0db0a388f5f8.jpg' },
+    { 物品名称: 'ApiYoo艾优成人声波电动牙刷T1-A-F', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/07/4c/e3/0917d02b646e9a5eeec427f70197d4915007ddbe.jpg' },
+    { 物品名称: '幻响小宜多功能照明灯 led台灯', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/2e/75/36/6c6fae90c1e7cf134a704dbcb917d2bdc9ac2805.jpg' },
+    { 物品名称: '眼罩颈枕', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/2f/e1/99/1a861d35c0e7358633f548d6f142b92d5ec2f6cb.jpg' },
+    { 物品名称: 'PGG 腰果按摩枕W8', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/f0/66/e2/6f9b0b756352324af411e4e4b36fed9f71c078d9.jpg' },
+    // { 物品名称: '星巴克美式一杯', 消耗积分: '500', 图片: 'https://file-ve.veimg.cn/files/2024/05/2024052714240147ow0eijdnjxg.jpg' },
+  ]
+}
+getData()
 </script>
 <style lang="scss" scoped>
+.listBox {
+  display: flex;
+  flex-wrap: wrap;
+}
+.ellipsis {
+  width: 100%;
+}
 </style>

src/views/personal/pointsMall/index.vue

@@ -14,7 +14,7 @@
       <v-tab :value="1">{{ $t('points.exchange') }}</v-tab>
       <v-tab :value="2">{{ $t('points.exchangeRecords') }}</v-tab>
     </v-tabs>
-    <div class="mt-3">
+    <div class="mt-5">
       <!-- 积分兑换 -->
       <div v-if="tab === 1">
         <exchange></exchange>
@@ -40,7 +40,7 @@ const toPointsDetails = () => {
   router.push({ path: '/myPublicRecruitment', query: { tab: 2 } })
 }
 
-const tab = ref(+route.query?.tab || 2)
+const tab = ref(+route.query?.tab || 1)
 </script>
 <style lang="scss" scoped>
 .statisticsBox {