✨ feat(我的捐赠): API联调

 <template>
   <div class="donate-list-page">
-    <div style="background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%); padding: 1rem; text-align: center; color: #713610;">
+    <div class="donate-header">
       <van-row>
-        <van-col span="11" style="line-height: 1.5;">
+        <van-col span="11" class="sum">
           <p>捐赠总金额</p>
-          <p style="font-weight: bold; font-size: 1.25rem;">3562.5元</p>
+          <p>{{ donateInfo.total }}&nbsp;元</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;">
+        <van-col span="1"><div class="line"></div></van-col>
+        <van-col class="book" span="11">
           <p>点亮书籍</p> 
-          <p style="font-weight: bold; font-size: 1.25rem;">4个</p>
+          <p>{{ donateInfo.num }}&nbsp;个</p>
         </van-col>
       </van-row>
     </div>
@@ -18,12 +18,12 @@
       <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" />
+            <van-col span="8" class="book-col" v-for="(v, index) in item" :key="index">
+              <div @click="showCert(v)" v-if="v.is_donate" class="ENABLE">
+                <van-image width="90%" height="7rem" :src="v.cover" />
               </div>
               <div v-else class="DISABLE">
-                <van-image width="90%" height="95%" :src="v.src" />
+                <van-image width="90%" height="7rem" :src="v.cover" />
                 <div class="mask">
                   <img :src="icon_lock">
                 </div>
@@ -36,20 +36,13 @@
     </div>
   </div>
 
-  <van-overlay :show="show" @click="show = false">
+  <van-overlay :show="show" @click="onHide">
     <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>
+      <van-swipe class="my-swipe" ref="swipe">
+        <van-swipe-item v-for="(d, k) in certItems" :key="k">
+          <donate-cert :item="d"></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>
@@ -64,7 +57,7 @@ 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, getCurrentInstance, nextTick, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import $ from 'jquery'
@@ -73,54 +66,69 @@ import { Toast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
 
-// TODO: 我的捐赠列表
-// TODO: 我的捐赠证书列表
-
-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 donateInfo = ref('');
+const dataList = ref([]);
+axios.post('/srv/?a=my_donate')
+.then(res => {
+  if (res.data.code === 1) {
+    donateInfo.value = res.data.data;
+    dataList.value = _.chunk(res.data.data.book, 3);
+  } else {
+    console.warn(res);
+    Toast({
+      icon: 'close',
+      message: res.data.msg
+    });
+  }
+})
+.catch(err => {
+  console.error(err); 
+});
 
 // 显示捐赠证书
+const show = ref(false);
+const certItems = ref([])
 const showCert = (v) => {
-  console.warn(v);
-  show.value = true
+  // 捐款成功后，查询生成捐赠证书
+  axios.get('/srv/?a=cert_list', {
+    params: {
+      book_id: v.id
+    }
+  })
+  .then(res => {
+    if (res.data.code === 1) {
+      certItems.value = res.data.data;
+      show.value = true
+    } else {
+      console.warn(res);
+      Toast({
+        icon: 'close',
+        message: res.data.msg
+      });
+    }
+  })
+  .catch(err => {
+    console.error(err); 
+  })
 }
 
-  onMounted(() => {
-    dataList.value = _.chunk(rawList.value, 3);
-  })
+const onHide = () => {
+  show.value = false;
+}
+
+// 关闭弹框后重置index
+const internalInstance = getCurrentInstance();
+watch(show, (v) => {
+  if (!v) {
+    setTimeout(() => {
+      nextTick(() => {
+        internalInstance.ctx.$refs.swipe.swipeTo(0);
+      })
+    }, 1000)
+  }
+})
+
 </script>
 
 <script>
@@ -142,6 +150,31 @@ export default {
 
 <style lang="less" scoped>
 .donate-list-page {
+  .donate-header {
+    background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%); 
+    padding: 1rem; 
+    text-align: center; 
+    color: #713610;
+    .sum {
+      line-height: 1.5;
+      p:last-child {
+        font-weight: bold; 
+        font-size: 1.25rem;
+      }
+    }
+    .line {
+      border-right: 1px solid #733912; 
+      height: 100%; 
+      opacity: 0.15;
+    }
+    .book {
+      line-height: 1.5;
+      p:last-child {
+        font-weight: bold; 
+        font-size: 1.25rem;
+      }
+    }
+  }
   .donate-book-wrapper {
     padding: 0 1rem;
     .book-row {
@@ -190,4 +223,4 @@ export default {
   text-align: center;
   width: 100%;
 }
-</style>
\ No newline at end of file
+</style>