✨ feat(我的捐赠): 完善页面显示和捐赠证书显示逻辑

 import { createApp } from 'vue';
 import { createApp } from 'vue';
-import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag } from 'vant';
+import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem } from 'vant';
 import router from './router';
 import router from './router';
 import App from './App.vue';
 import App from './App.vue';
 import axios from './utils/axios';
 import axios from './utils/axios';
@@ -33,6 +33,8 @@ app.use(Picker);
 app.use(Sticky);
 app.use(Sticky);
 app.use(Stepper);
 app.use(Stepper);
 app.use(Tag);
 app.use(Tag);
+app.use(Swipe);
+app.use(SwipeItem);
 
 
 app.use(ConfigProvider);
 app.use(ConfigProvider);
 
 

 <template>
 <template>
-  <div class=""></div>
+  <div class="donate-list-page">
+    <div style="background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%); padding: 1rem; text-align: center; color: #713610;">
+      <van-row>
+        <van-col span="11" style="line-height: 1.5;">
+          <p>捐赠总金额</p>
+          <p style="font-weight: bold; font-size: 1.25rem;">3562.5元</p>
+        </van-col>
+        <van-col span="1"><div style="border-right: 1px solid #733912; height: 100%; opacity: 0.15;"></div></van-col>
+        <van-col span="11" style="line-height: 1.5;">
+          <p>点亮书籍</p> 
+          <p style="font-weight: bold; font-size: 1.25rem;">4个</p>
+        </van-col>
+      </van-row>
+    </div>
+
+    <div class="donate-book-wrapper">
+      <template v-for="(item, key) in dataList" :key="key">
+        <div class="book-row">
+          <van-row>
+            <van-col span="8" class="book-col" v-for="(v, key) in item">
+              <div @click="showCert(v)" v-if="v.status === 'ENABLE'" class="ENABLE">
+                <van-image width="90%" height="95%" :src="v.src" />
+              </div>
+              <div v-else class="DISABLE">
+                <van-image width="90%" height="95%" :src="v.src" />
+                <div class="mask">
+                  <img :src="icon_lock">
+                </div>
+              </div>
+              <p class="van-ellipsis text">{{ v.name }}</p>
+            </van-col>
+          </van-row>
+        </div>
+      </template>
+    </div>
+  </div>
+
+  <van-overlay :show="show" @click="show = false">
+    <div style="width: auto; height: 100%; margin: 2rem 2rem 0 2rem; overflow: hidden;">
+      
+      <van-swipe class="my-swipe">
+        <van-swipe-item>
+          <donate-cert></donate-cert>
+          <div style="height: 2rem;"></div>
+        </van-swipe-item>
+        <van-swipe-item>
+          <donate-cert></donate-cert>
+        </van-swipe-item>
+        <van-swipe-item>
+          <donate-cert></donate-cert>
+        </van-swipe-item>
+        <template #indicator="{ active, total }">
+          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
+        </template>
+      </van-swipe>
+    </div>
+  </van-overlay>
+
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import DonateCert from '@/components/DonateCert/index.vue'
+
+import icon_lock from '@images/suo@2x.png'
+
 import { ref, reactive, onMounted } from 'vue'
 import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import axios from '@/utils/axios';
 import $ from 'jquery'
 import $ from 'jquery'
+import _ from 'lodash'
 import { Toast } from 'vant';
 import { Toast } from 'vant';
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 
 
+const show = ref(false);
+
+const rawList = ref([
+  {
+    name: '逃家小兔',
+    src: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed',
+    status: 'ENABLE'
+  },
+  {
+    name: '小猫的情绪',
+    src: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed',
+    status: 'DISABLE'
+  },
+  {
+    name: '逃家小兔',
+    src: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed',
+    status: 'ENABLE'
+  },
+  {
+    name: '小猫的情绪',
+    src: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed',
+    status: 'DISABLE'
+  },
+  {
+    name: '逃家小兔',
+    src: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed',
+    status: 'DISABLE'
+  },
+  {
+    name: '小猫的情绪',
+    src: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc434046fdf1f9499d251b280af2568ddbe64839799d00a9aee226edbeb710aed',
+    status: 'DISABLE'
+  },
+])
+let dataList = ref([]);
+
+// 显示捐赠证书
+const showCert = (v) => {
+  console.warn(v);
+  show.value = true
+}
+
   onMounted(() => {
   onMounted(() => {
-    
+    dataList.value = _.chunk(rawList.value, 3);
   })
   })
 </script>
 </script>
 
 
@@ -23,11 +127,9 @@ export default {
   mixins: [mixin.init],
   mixins: [mixin.init],
   data () {
   data () {
     return {
     return {
-
     }
     }
   },
   },
   mounted () {
   mounted () {
-
   },
   },
   methods: {
   methods: {
 
 
@@ -36,5 +138,53 @@ export default {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
+.donate-list-page {
+  .donate-book-wrapper {
+    padding: 0 1rem;
+    .book-row {
+      margin: 1rem 0; 
+      text-align: center;
+      .book-col {
+        padding: 0 0.5rem;
+        .ENABLE {
+          background: #FFFFFF; 
+          box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.15); 
+          border-radius: 5px; 
+          border: 1px solid #FFE000;
+        }
+        .DISABLE {
+          border-radius: 6px; 
+          position: relative;
+          .mask {
+            position: absolute; 
+            width: 100%; 
+            height: 100%; 
+            background: rgba(0, 0, 0, 0.4); 
+            border-radius: 6px; 
+            top: 0;
+            img {
+              margin-top: 20%; 
+              width: 50%;
+            }
+          }
+        }
+        .text {
+          font-size: 1rem; 
+          margin-top: 0.5rem; 
+          color: #222222;
+        }
+      }
+    }
+  }
+}
 
 
+.custom-indicator {
+  position: absolute;
+  bottom: 5px;
+  padding: 2px 5px;
+  font-size: 12px;
+  color: #FFFFFF;
+  text-align: center;
+  width: 100%;
+}
 </style>
 </style>
\ No newline at end of file