✨ feat(捐花组件): API和业务逻辑调整

hookehuyr
Commit 9095d76dfc580f62a37d679131558a1a8d574e49 9095d76d 1 parent cd742e2a
Showing 4 changed files with 80 additions and 17 deletions
src/components/DonateBar/index.vue
src/components/DonateFlower/index.vue
src/views/client/bookDetail.vue
src/views/client/personIndex.vue
--- a/src/components/DonateBar/index.vue
View file @9095d76
+++ b/src/components/DonateBar/index.vue
View file @9095d76
@@ -2,26 +2,29 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 18:32:38
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-05-31 19:01:49
+ * @LastEditTime: 2022-06-01 19:17:16
  * @FilePath: /tswj/src/components/DonateBar/index.vue
  * @Description: 爱心助力底部固定栏
 -->
 <template>
   <div class="fix-btn">
-    <div class="text"><slot /></div>
+    <div class="text" @click="toDonate"><slot /></div>
   </div>
+  <donate-flower :user-type="donateType" :show-popup="showDonate" :item="donateInfo" @on-close="closeDonate" />
 </template>
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
+import { DonateFlower } from '@/utils/generateModules'
+import { prepareDonateAPI } from '@/api/C/donate.js'
+
 const $route = useRoute();
-const $router = useRouter();
 useTitle($route.meta.title);
 const props = defineProps({
@@ -36,7 +39,29 @@ const props = defineProps({
 // 捐钱-游客 type: V
 // 捐钱-幼儿园 type: K
-console.warn(props.donateType);
+// 捐钱-指定儿童 type: C
+const donateInfo = ref({})
+let params = {};
+if (props.donateType === 'C') { // 助力TA
+  params = { perf_id: $route.query.perf_id }
+} else if (props.donateType === 'K') {
+  params = { kg_id: $route.query.kg_id }
+}
+onMounted(async () => {
+  const { data } = await prepareDonateAPI(params);
+  donateInfo.value = data;
+})
+
+// 弹出捐赠弹框模块
+const showDonate = ref(false);
+
+const toDonate = () => {
+  showDonate.value = true;
+}
+
+const closeDonate = (v) => {
+  showDonate.value = v;
+}
 </script>
--- a/src/components/DonateFlower/index.vue
View file @9095d76
+++ b/src/components/DonateFlower/index.vue
View file @9095d76
@@ -24,7 +24,7 @@
           </van-col>
         </van-row>
       </div>
-      <div v-if="item.kg_name" class="donate-name">
+      <div v-if="item.kg_name && (userType === 'C' || userType === 'K')" class="donate-name">
         <van-row>
           <van-col span="4" style="line-height: 2;">幼儿园</van-col>
           <van-col span="18">
@@ -32,7 +32,7 @@
           </van-col>
         </van-row>
       </div>
-      <div v-if="item.perf_name" class="donate-name">
+      <div v-if="item.perf_name && userType === 'C'" class="donate-name">
         <van-row>
           <van-col span="4" style="line-height: 2;">助力人</van-col>
           <van-col span="18">
@@ -91,7 +91,8 @@ import { addDonateAPI } from '@/api/C/donate.js'
 const $router = useRouter();
 const props = defineProps({
   item: Object,
-  showPopup: Boolean
+  showPopup: Boolean,
+  userType: String
 })
 const emit = defineEmits(['on-close']);
@@ -102,7 +103,21 @@ const donateFlower = async () => {
     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 });
+  // 根据类型过滤提交数据
+  // C 儿童: 提交 perf_id,kg_id
+  // K 幼儿园: 提交 kg_id
+  // V 访客: 不提交 perf_id,kg_id
+  let params = {
+    qty: donate_number.value, 
+    donate_name: props.item.donate_name,
+  };
+  if (props.donateType === 'C') { // 助力TA
+    params.perf_id = props.item.perf_id;
+    params.kg_id = props.item.kg_id;
+  } else if (props.donateType === 'K') {
+    params.kg_id = props.item.kg_id;
+  }
+  const { data } = await addDonateAPI(params);
   if (data.id) {
     closeBtn();
     // 交易成功跳转回调页面
--- a/src/views/client/bookDetail.vue
View file @9095d76
+++ b/src/views/client/bookDetail.vue
View file @9095d76
@@ -70,7 +70,7 @@
               <template #bookDetailSub>
                 <div
                   style="color: #999999; padding: 0px 1rem 0.5rem;"
-                  @click="goToDetail(item.id, item.book_id, item.type)"
+                  @click="goToDetail(item.id, item.book_id, item.type, item.perf_id)"
                 >
                   {{ item.kg_name }} ｜ {{ item.localism_type }}
                 </div>
@@ -111,7 +111,7 @@
     </div>
   </notice-overlay>
-  <donate-flower :show-popup="showDonate" :item="donateInfo" @on-close="closeDonate" />
+  <donate-flower :user-type="donateType" :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, onMounted } from 'vue'
+import { ref, onActivated, nextTick, onMounted, computed } 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'
@@ -142,6 +142,11 @@ const { toggleLanguage, onLoad, columns, prod_list, finished, loading, bookInfo,
 const { userInfo } = useDefaultPerf($route.query.id);
 const donateInfo = ref({})
+const userType = Cookies.get('userType')
+// 判断是访客进入还是幼儿园进入
+const donateType = computed(() => {
+  return userType === 'client' ? 'K' : 'V';
+})
 onMounted(async () => {
   const { data } = await prepareDonateAPI({ kg_id: $route.query.kg_id });
   donateInfo.value = data;
@@ -286,13 +291,14 @@ onBeforeRouteLeave(() => {
 })
 /****************** 视频组件相关操作 *******************/
-const goToDetail = (prod_id, book_id, type) => { // 跳转作品详情页
+const goToDetail = (prod_id, book_id, type, perf_id) => { // 跳转作品详情页
   $router.push({
     path: '/client/videoDetail',
     query: {
       prod_id,
       book_id,
-      type // 特殊标识，判断入口 为keepAlive使用
+      type, // 特殊标识，判断入口 为keepAlive使用
+      perf_id
     }
   });
 }
--- a/src/views/client/personIndex.vue
View file @9095d76
+++ b/src/views/client/personIndex.vue
View file @9095d76
@@ -57,23 +57,26 @@
         <span>&nbsp;3000</span>
       </div>
       <div class="button">
-        <my-button type="primary">为TA助力</my-button>
+        <my-button type="primary" @on-click="toDonate">为TA助力</my-button>
       </div>
     </div>
   </div>
   <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无作品信息" />
+
+  <donate-flower user-type="C" :show-popup="showDonate" :item="donateInfo" @on-close="closeDonate" />
 </template>
 <script setup>
 import { ref, onActivated, onMounted } from 'vue'
 import { useRoute, onBeforeRouteLeave } from 'vue-router'
 import { storeToRefs } from 'pinia'
-import { MyButton, VideoCard } from '@/utils/generateModules'
+import { MyButton, VideoCard, DonateFlower } from '@/utils/generateModules'
 import { icon_avatar, no_image, icon_flower } from '@/utils/generateIcons.js'
 import { _, Toast } from '@/utils/generatePackage.js'
 import { addPages, store } from '@/hooks/useKeepAlive'
 import { perfInfoAPI, addFollowAPI } from '@/api/C/perf.js'
 import { useScrollTop } from '@/composables';
+import { prepareDonateAPI } from '@/api/C/donate.js'
 const { resetScrollTop } = useScrollTop(); // 页面滚动恢复
 resetScrollTop('scrollTopPerson');
@@ -84,6 +87,7 @@ const userInfo = ref({});
 // 因为不能让空图标提前出来的写法
 const emptyStatus = ref(false);
+const donateInfo = ref({})
 onMounted(async () => {
   // 获取表演者信息
   const { data } = await perfInfoAPI({ perf_id: $route.query.perf_id });
@@ -95,8 +99,21 @@ onMounted(async () => {
     })
     userInfo.value = data;
   }
+  const donateData = await prepareDonateAPI({ perf_id: $route.query.perf_id });
+  donateInfo.value = donateData.data;
 });
+// 弹出捐赠弹框模块
+const showDonate = ref(false);
+
+const toDonate = () => {
+  showDonate.value = true;
+}
+
+const closeDonate = (v) => {
+  showDonate.value = v;
+}
+
 // 关注个人用户
 const followUser = async () => {
   const { msg } = await addFollowAPI({ perf_id: $route.query.perf_id });