✨ feat(书籍详情页): 幼儿园捐钱API联调

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-26 23:52:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-05-31 10:09:23
+ * @LastEditTime: 2022-06-01 17:39:48
  * @FilePath: /tswj/src/App.vue
  * @Description: 
 -->
@@ -19,6 +19,7 @@
 import { mainStore, useTitle } from '@/utils/generatePackage'
 import { computed, watchEffect } from 'vue';
 import { useRoute } from 'vue-router'
+import { Toast } from 'vant';
 // 会根据配置判断是否显示调试控件
 // eslint-disable-next-line no-unused-vars
 import vConsole from '@/utils/vconsole'
@@ -35,6 +36,11 @@ watchEffect(
   }
 )
 
+Toast.setDefaultOptions({
+  duration: 2000,
+  className: 'xxx'
+});
+
 </script>
 
 <style lang="less">
@@ -71,4 +77,8 @@ body {
   top: 50%; 
   transform: translateY(-50%);
 }
+
+.xxx {
+  z-index: 4500 !important;
+}
 </style>

+/*
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-06-01 16:00:48
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-01 16:37:19
+ * @FilePath: /tswj/src/api/C/donate.js
+ * @Description: 捐钱操作API
+ */
+import { fn, fetch } from '@/api/fn';
+
+const Api = {
+  PREPARE_DONATE: '/srv/?a=prepare_donate',
+  ADD_DONATE: '/srv/?a=add_donate',
+}
+
+/**
+ * @description: 当前用户捐献所需信息
+ * @summary 适用于 访客进入操作，幼儿园节目操作，表演者节目操作
+ * @param {String} kg_id 幼儿园ID
+ * @param {String} perf_id 表演者ID
+ * @returns 
+ */
+export const prepareDonateAPI = (params) => fn(fetch.post(Api.PREPARE_DONATE, params));
+
+/**
+ * @description: 用户捐献
+ * @param {Number} qty 数量
+ * @param {String} donate_name 捐赠人名称
+ * @param {Number} kg_id 指定助力幼儿园id
+ * @param {Number} perf_id 指定助力儿童id
+ * @returns 
+ */
+export const addDonateAPI = (params) => fn(fetch.post(Api.ADD_DONATE, params));

@@ -36,7 +36,7 @@
     <div class="date">{{ item.donate_date }}</div>
     <!-- TODO: 编号需要联调 -->
     <div style="color: #713610; padding: 1rem 2rem; font-size: 0.9rem;">
-      证书编号：TSWJ202205260005
+      证书编号：{{ item.cert_code }}
     </div>
     <div class="wrapper-border" />
     <div style="height: 2rem;" />

@@ -24,19 +24,19 @@
           </van-col>
         </van-row>
       </div>
-      <div class="donate-name">
+      <div v-if="item.kg_name" class="donate-name">
         <van-row>
           <van-col span="4" style="line-height: 2;">幼儿园</van-col>
           <van-col span="18">
-            <div class="donate-text">杨浦民办科技幼稚园杨浦民办科技幼稚园</div>
+            <div class="donate-text">{{ item.kg_name }}</div>
           </van-col>
         </van-row>
       </div>
-      <div class="donate-name">
+      <div v-if="item.perf_name" class="donate-name">
         <van-row>
           <van-col span="4" style="line-height: 2;">助力人</van-col>
           <van-col span="18">
-            <div class="donate-text">瑟日古娜</div>
+            <div class="donate-text">{{ item.perf_name }}</div>
           </van-col>
         </van-row>
       </div>
@@ -44,7 +44,7 @@
         <van-row>
           <van-col span="4" style="line-height: 2;">捐赠人<span style="color: red;">*</span></van-col>
           <van-col class="donate-input" span="18">
-            <input v-model="item.perf_name" type="text" style="border: 0; padding: 0.25rem;" />
+            <input v-model="item.donate_name" type="text" style="border: 0; padding: 0.25rem;">
           </van-col>
         </van-row>
       </div>
@@ -55,7 +55,7 @@
               <van-checkbox v-model="agreed" checked-color="#ee0a24">同意&nbsp;</van-checkbox>
             </div>
             <div style="display: flex; flex-direction: column; justify-content: center;">
-              <span style="text-decoration: underline; color: #713610;" @click="handleDonationAgreement">捐赠协议</span>
+              <span style="text-decoration: underline; color: #713610;" @click="handleDA">捐赠协议</span>
             </div>
           </div>
         </van-col>
@@ -66,99 +66,82 @@
           <my-button type="plain" @on-click="cancelDonate">取消</my-button>
         </div>
         <div class="donate-imd">
-          <my-button type="primary" @on-click="donateBook">确定</my-button>
+          <my-button type="primary" @on-click="donateFlower">确定</my-button>
         </div>
       </div>
     </div>
   </van-popup>
-  <van-popup v-model:show="showDonationAgreement" position="bottom" :style="{ height: '100%', zIndex: 4000 }">
+  <!-- TODO: 正式文案需要更新 -->
+  <van-popup v-model:show="showDA" position="bottom" :style="{ height: '100%', zIndex: 4000 }">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum voluptates architecto! Itaque magnam modi ducimus minima. Ullam quam, excepturi modi cupiditate quidem optio consequuntur minus porro, saepe, neque incidunt!
-    <div class="bottom-btn" @click="closeDonationAgreement">
+    <div class="bottom-btn" @click="closeDA">
       <div class="text">关闭</div>
     </div>
   </van-popup>
 </template>
 
 <script setup>
-import Cookies from 'js-cookie'
 import { icon_flower } from '@/utils/generateIcons'
-
 import MyButton from '@/components/MyButton/index.vue'
-import { ref, reactive, onMounted, watch, nextTick } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import axios from '@/utils/axios';
-import $ from 'jquery'
-import { Toast, Dialog } from 'vant';
-const $route = useRoute();
-const $router = useRouter();
+import { ref, onMounted, watch, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { $, Toast } from '@/utils/generatePackage'
+import { addDonateAPI } from '@/api/C/donate.js'
 
+const $router = useRouter();
 const props = defineProps({
   item: Object,
   showPopup: Boolean
 })
-
 const emit = defineEmits(['on-close']);
 
 let donate_number = ref(1);
-const donateBook = () => {
-  // 爱心捐书接口
-  axios.post('/srv/?a=add_donate', {
-    book_id: props.item.book_id,
-    qty: donate_number.value,
-    donate_name: props.item.perf_name,
-  })
-    .then(res => {
-      if (res.data.code === 1) {
-        console.warn(res.data.data);
-        closeBtn();
-
-        // 交易成功跳转回调页面
-        // TEMP: 临时传参 donate_id
-        $router.push({
-          path: '/client/wechatpayCallback',
-          query: {
-            donate_id: res.data.data.id
-          }
-        })
-      } else {
-        console.warn(res);
-        if (!res.data.show) return false;
-        Toast({
-          icon: 'close',
-          message: res.data.msg
-        });
+const donateFlower = async () => {
+  if (!agreed.value) {
+    Toast.fail('请选勾选同意按钮！');
+    return false;
+  }
+  // 捐钱接口
+  const { data } = await addDonateAPI({ qty: donate_number.value, donate_name: props.item.donate_name, kg_id: props.item.kg_id, perf_id: props.item.perf_id });
+  if (data.id) {
+    closeBtn();
+    // 交易成功跳转回调页面
+    // TEMP: 临时传参 donate_id
+    $router.push({
+      path: '/client/wechatpayCallback',
+      query: {
+        donate_id: data.id
       }
     })
-    .catch(err => {
-      console.error(err);
-    })
+  }
 }
 
 const show = ref(false);
 let popupHeight = ref('100%');
 
 watch(() => props.showPopup, (v) => {
-  // 如果没有默认儿童需要用户确认一次
-  if (v && !props.item.perf_id) {
-    Dialog.confirm({
-      title: '温馨提示',
-      message: '默认儿童为空, 是否继续捐书!',
-      confirmButtonColor: '#713610'
-    })
-      .then(() => {
-        show.value = v;
-        // DOM调整后，把弹出框高度设定到适合高度，配合不同分辨率效果
-        nextTick(() => {
-          let height = $('.donate-wrapper').height();
-          popupHeight.value = height + 10 + 'px';
-        })
-      })
-      .catch(() => {
-        // 取消按钮回调
-        closeBtn();
-      });
-    return false;
-  }
+  // 现在新需求只要钱，多余步骤先屏蔽掉。
+  // // 如果没有默认儿童需要用户确认一次
+  // if (v && !props.item.perf_id) {
+  //   Dialog.confirm({
+  //     title: '温馨提示',
+  //     message: '默认儿童为空, 是否继续助力!',
+  //     confirmButtonColor: '#713610'
+  //   })
+  //     .then(() => {
+  //       show.value = v;
+  //       // DOM调整后，把弹出框高度设定到适合高度，配合不同分辨率效果
+  //       nextTick(() => {
+  //         let height = $('.donate-wrapper').height();
+  //         popupHeight.value = height + 10 + 'px';
+  //       })
+  //     })
+  //     .catch(() => {
+  //       // 取消按钮回调
+  //       closeBtn();
+  //     });
+  //   return false;
+  // }
   show.value = v;
   // DOM调整后，把弹出框高度设定到适合高度，配合不同分辨率效果
   nextTick(() => {
@@ -190,12 +173,12 @@ const checkList = ref({
 // 捐赠协议
 const agreed = ref(false);
 // 显示捐赠协议弹框
-const showDonationAgreement = ref(false);
-const handleDonationAgreement = () => {
-  showDonationAgreement.value = true
+const showDA = ref(false);
+const handleDA = () => {
+  showDA.value = true
 }
-const closeDonationAgreement = () => {
-  showDonationAgreement.value = false
+const closeDA = () => {
+  showDA.value = false
 }
 </script>
 

@@ -111,7 +111,7 @@
     </div>
   </notice-overlay>
 
-  <donate-flower :show-popup="showDonate" :item="userInfo" @on-close="closeDonate" />
+  <donate-flower :show-popup="showDonate" :item="donateInfo" @on-close="closeDonate" />
 
   <van-overlay :show="show" z-index="9999">
     <div class="wrapper" @click.stop>
@@ -121,7 +121,7 @@
 </template>
 
 <script setup>
-import { ref, onActivated, nextTick } from 'vue'
+import { ref, onActivated, nextTick, onMounted } from 'vue'
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import { Cookies, _, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/generatePackage'
 import { MyButton, VideoCard, NoticeOverlay, DonateFlower, ShortcutFixed } from '@/utils/generateModules'
@@ -129,6 +129,7 @@ import { icon_video, icon_up, icon_down, icon_subscribed, icon_unsubscribe, no_i
 import { JSJ_FORM_C } from '@/constant'
 import { useVideoList, useDefaultPerf, useShortcutBar, useScrollTop } from '@/composables';
 import { addSubscribeAPI } from '@/api/C/book.js'
+import { prepareDonateAPI } from '@/api/C/donate.js'
 
 const { shortcutItem } = useShortcutBar(['home', 'me']); // 配置快捷跳转条
 const { resetScrollTop } = useScrollTop(); // 页面滚动恢复
@@ -140,6 +141,12 @@ const $router = useRouter();
 const { toggleLanguage, onLoad, columns, prod_list, finished, loading, bookInfo, showPicker, checkLocalism, checkMandarin, onConfirm, chooseLanguage, finishedTextStatus, emptyStatus } = useVideoList($route);
 const { userInfo } = useDefaultPerf($route.query.id);
 
+const donateInfo = ref({})
+onMounted(async () => {
+  const { data } = await prepareDonateAPI({ kg_id: $route.query.kg_id });
+  donateInfo.value = data;
+})
+
 // 判断是否显示简介的展开图标
 const hasToggle = ref(false); // 判断是否有展开文字，默认没有
 const isToggle = ref(true); // 判断展开状态，默认展开
@@ -169,7 +176,6 @@ const onSubscribe = async () => {
 const showDonate = ref(false);
 
 const toDonate = () => {
-  // TODO：需要新写组件捐钱
   showDonate.value = true;
 }
 

@@ -53,7 +53,7 @@
     </div>
     <div class="book-list">
       <template v-for="(item, key) in kgInfo.book_list" :key="key">
-        <book-card type="C" :item="item" @on-click="go('/client/bookDetail', { id: item.id })" />
+        <book-card type="C" :item="item" @on-click="go('/client/bookDetail', { id: item.id, kg_id })" />
       </template>
       <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无书籍信息" />
     </div>