✨ feat: 新增爱心助力功能，调整入口，废弃捐书功能

hookehuyr
Commit 3527887e9ddfe172cf75f3ee989fb78388834fea 3527887e 1 parent fbe2fada
Showing 10 changed files with 187 additions and 41 deletions
index.html
src/components/CommentBox/index.vue
src/components/DonateBar/index.vue
src/utils/generateModules.js
src/views/client/bookDetail.vue
src/views/client/chooseBook.vue
src/views/client/finishUpload.vue
src/views/client/personIndex.vue
src/views/client/videoDetail.vue
src/views/client/videoDetailComment.vue
--- a/index.html
View file @3527887
+++ b/index.html
View file @3527887
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
   <title></title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css" />
+  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css" /> -->
 </head>
 <body>
   <div id="app"></div>
--- a/src/components/CommentBox/index.vue
View file @3527887
+++ b/src/components/CommentBox/index.vue
View file @3527887
@@ -136,4 +136,16 @@ export default {
   margin-left: 1rem;
   margin-bottom: 1rem;
 }
+.text {
+  text-align: center;
+  padding: 0.7rem;
+  margin: 0.8rem;
+  font-size: 1rem;
+  font-weight: bold;
+  border-radius: 24px;
+  // border: 1px solid F7F7F7;
+  color: #713610;
+  background-color: @base-color;
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
+}
 </style>
--- a/src/components/DonateBar/index.vue 0 → 100644
View file @3527887
+++ b/src/components/DonateBar/index.vue 0 → 100644
View file @3527887
+<!--
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-05-31 18:32:38
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-05-31 19:01:49
+ * @FilePath: /tswj/src/components/DonateBar/index.vue
+ * @Description: 爱心助力底部固定栏
+-->
+<template>
+  <div class="fix-btn">
+    <div class="text"><slot /></div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } 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'
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
+
+const props = defineProps({
+  donateType: {
+    type: String,
+    default: (value) => value,
+    validator: value => {
+      return ['C', 'V', 'K'].includes(value);  // type: C | V | K， 儿童｜访客｜幼儿园
+    }
+  }
+})
+
+// 捐钱-游客 type: V
+// 捐钱-幼儿园 type: K
+console.warn(props.donateType);
+
+</script>
+
+<style lang="less" scoped>
+.fix-btn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: white;
+  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
+  .text {
+    text-align: center;
+    padding: 0.7rem;
+    margin: 0.8rem;
+    font-size: 1rem;
+    font-weight: bold;
+    border-radius: 24px;
+    // border: 1px solid F7F7F7;
+    color: #713610;
+    background-color: @base-color;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
+  }
+}
+</style>
--- a/src/utils/generateModules.js
View file @3527887
+++ b/src/utils/generateModules.js
View file @3527887
+/*
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-05-17 11:17:58
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-05-31 18:34:18
+ * @FilePath: /tswj/src/utils/generateModules.js
+ * @Description: 
+ */
 import MyButton from '@/components/MyButton/index.vue'
 import VideoCard from '@/components/VideoCard/index.vue'
 import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
@@ -5,6 +13,7 @@ import DonateBook from '@/components/DonateBook/index.vue'
 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
 import BookCard from '@/components/BookCard/index.vue'
 import VideoDetail from '@/components/VideoDetail/index.vue'
+import DonateBar from '@/components/DonateBar/index.vue'
 export {
   MyButton,
@@ -13,5 +22,6 @@ export {
   DonateBook,
   ShortcutFixed,
   BookCard,
-  VideoDetail
+  VideoDetail,
+  DonateBar,
 }
--- a/src/views/client/bookDetail.vue
View file @3527887
+++ b/src/views/client/bookDetail.vue
View file @3527887
@@ -98,7 +98,7 @@
         <my-button type="primary" @on-click="uploadVideo">上传作品</my-button>
       </div>
       <div class="button">
-        <my-button type="plain" @on-click="toDonate">爱心捐书</my-button>
+        <my-button type="plain" @on-click="toDonate">爱心助力</my-button>
       </div>
     </div>
     <shortcut-fixed type="C" :item="shortcutItem" />
@@ -169,6 +169,7 @@ const onSubscribe = async () => {
 const showDonate = ref(false);
 const toDonate = () => {
+  // TODO：需要新写组件捐钱
   showDonate.value = true;
 }
--- a/src/views/client/chooseBook.vue
View file @3527887
+++ b/src/views/client/chooseBook.vue
View file @3527887
@@ -59,9 +59,7 @@
     </div>
     <div style="height: 5rem" />
     <!-- TODO: 新需求：爱心助力捐钱弹框 -->
-    <div class="fix-btn">
+    <donate-bar :donate-type="donateType">爱心助力</donate-bar>
-      <div class="text">爱心助力</div>
-    </div>
     <shortcut-fixed type="C" :item="shortcutItem" />
   </div>
 </template>
@@ -73,7 +71,9 @@ import { styleObject3 } from '@/settings/designSetting.js';
 import { useBookList, useShortcutBar } from '@/composables';
 import { useGo } from '@/hooks/useGo';
 import { killPages, store } from '@/hooks/useKeepAlive';
-
+import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
+import { DonateBar } from '@/utils/generateModules.js'
+import { ref, computed } from 'vue'
 const go = useGo();
 // 删除所有的 keep-alive 缓存
@@ -83,6 +83,12 @@ store.changeScrollTop(0);
 const { kg_id, kgInfo, emptyStatus } = useBookList();
 const { shortcutItem } = useShortcutBar(); // 配置快捷跳转条
+
+const userType = Cookies.get('userType')
+// 判断是访客进入还是幼儿园进入
+const donateType = computed(() => {
+  return userType === 'client' ? 'K' : 'V';
+})
 </script>
 <style lang="less" scoped>
--- a/src/views/client/finishUpload.vue
View file @3527887
+++ b/src/views/client/finishUpload.vue
View file @3527887
+<!--
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-04-26 16:06:31
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-05-31 20:12:23
+ * @FilePath: /tswj/src/views/client/finishUpload.vue
+ * @Description: 作品上传成功提示页面
+-->
 <template>
   <div class="finishUpload-page">
     <div style="background-color: #F7F7F7; padding-top: 2rem; padding-bottom: 2rem;">
@@ -11,14 +19,14 @@
       <p>共读这么精彩的书籍</p>
     </div>
     <div v-if="book_id" style="padding: 0 15% 0.5rem 15%;">
-      <my-button @on-click="toDonate" type="primary">我要爱心捐书</my-button>
+      <my-button type="primary" @on-click="toDonate">我要爱心助力</my-button>
     </div>
     <div style="padding: 0 15% 1rem 15%;">
-      <my-button @on-click="goBack" type="plain">返回</my-button>
+      <my-button type="plain" @on-click="goBack">返回</my-button>
     </div>
   </div>
-  <donate-book :showPopup="showDonate" :item="userInfo" @on-close="closeDonate"></donate-book>
+  <donate-book :show-popup="showDonate" :item="userInfo" @on-close="closeDonate" />
 </template>
 <script setup>
@@ -47,6 +55,7 @@ if (!book_id) {
 const showDonate = ref(false);
 const toDonate = () => {
+  // TODO: 调用新的捐钱组件
   showDonate.value = true;
   // 生成捐赠数据
 }
--- a/src/views/client/personIndex.vue
View file @3527887
+++ b/src/views/client/personIndex.vue
View file @3527887
@@ -4,8 +4,7 @@
       <div class="info">
         <van-row>
           <van-col>
-            <van-image v-if="userInfo.avatar" round width="50" height="50" :src="userInfo.avatar"
+            <van-image v-if="userInfo.avatar" round width="50" height="50" :src="userInfo.avatar" style="padding-right: 1rem;" />
-              style="padding-right: 1rem;" />
             <van-image v-else round width="50" height="50" :src="icon_avatar" style="padding-right: 1rem;" />
           </van-col>
           <van-col class="text-wrapper" span="18">
@@ -46,10 +45,20 @@
       </van-row>
     </div>
     <div>
-      <template v-for="item in userInfo.prod" :key="item" style="height: 3rem;">
+      <template v-for="item in userInfo.prod" :key="item">
-        <video-card :item="item"></video-card>
+        <video-card :item="item" />
       </template>
-      <div style="height: 2rem;"></div>
+      <div style="height: 5rem;" />
+    </div>
+    <div class="donate-bar">
+      <div class="text">
+        <span style="font-size: 0.85rem; color: #999999;">收到小红花&nbsp;</span>
+        <van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="margin: 0 auto;" />
+        <span>&nbsp;3000</span>
+      </div>
+      <div class="button">
+        <my-button type="primary">为TA助力</my-button>
+      </div>
     </div>
   </div>
   <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无作品信息" />
@@ -59,8 +68,8 @@
 import { ref, onActivated, onMounted } from 'vue'
 import { useRoute, onBeforeRouteLeave } from 'vue-router'
 import { storeToRefs } from 'pinia'
-import VideoCard from '@/components/VideoCard/index.vue'
+import { MyButton, VideoCard } from '@/utils/generateModules'
-import { icon_avatar, no_image } from '@/utils/generateIcons.js'
+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'
@@ -134,7 +143,8 @@ onBeforeRouteLeave(() => {
 <style lang="less" scoped>
 .person-index-page {
   .header-wrapper {
-    background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);
+    // background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);
+    background: @base-color;
     .info {
       padding: 2rem;
@@ -199,5 +209,35 @@ onBeforeRouteLeave(() => {
       text-align: center;
     }
   }
+
+  .donate-bar {
+    z-index: 999;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    box-sizing: content-box;
+    background-color: white;
+    padding: 1rem;
+    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
+    .text {
+      display: flex;
+      // flex-direction: column;
+      justify-content: center;
+      // flex: 1;
+      color: #713610;
+      text-align: center;
+    }
+
+    .button {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      flex: 1;
+      padding: 0 0.5rem;
+    }
+  }
 }
 </style>
--- a/src/views/client/videoDetail.vue
View file @3527887
+++ b/src/views/client/videoDetail.vue
View file @3527887
@@ -24,8 +24,11 @@
             title-active-color="#222222" title-inactive-color="#777777">
             <van-tab title="简介" :title-style="tabClass">
               <div class="intro">{{ videoInfo.note }}</div>
+              <!-- TODO: 新需求：爱心助力捐钱弹框 -->
+              <donate-bar donate-type="C">为TA助力</donate-bar>
             </van-tab>
-            <van-tab :title="'留言 ' + comment_num" :title-style="tabClass" :to="'/client/videoDetail/comment?prod_id=' + $route.query.prod_id + '&book_id=' + $route.query.book_id">
+            <van-tab :title="'留言 ' + comment_num" :title-style="tabClass"
+              :to="'/client/videoDetail/comment?prod_id=' + $route.query.prod_id + '&book_id=' + $route.query.book_id">
               <router-view></router-view>
             </van-tab>
           </van-tabs>
@@ -40,7 +43,7 @@ import { ref, reactive, onMounted, watch } from 'vue'
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/generatePackage'
-import { VideoDetail } from '@/utils/generateModules'
+import { VideoDetail, DonateBar } from '@/utils/generateModules'
 import { icon_avatar } from '@/utils/generateIcons'
 const $route = useRoute();
@@ -82,9 +85,9 @@ const videoInfo = ref('');
 onMounted(() => {
   // 检查$route.path判断tab默认值
   if ($route.path === '/client/videoDetail') {
-     active.value = 0;
+    active.value = 0;
   } else {
-     active.value = 1;
+    active.value = 1;
   }
   /**
    * 获取视频详情
@@ -94,23 +97,23 @@ onMounted(() => {
       prod_id: $route.query.prod_id
     }
   })
-  .then(res => {
+    .then(res => {
-    if (res.data.code === 1) {
+      if (res.data.code === 1) {
-      videoInfo.value = res.data.data;
+        videoInfo.value = res.data.data;
-      // 动态调整留言数量
+        // 动态调整留言数量
-      store.changeCommentNum(res.data.data.comment_num);
+        store.changeCommentNum(res.data.data.comment_num);
-    } else {
+      } else {
-      console.warn(res);
+        console.warn(res);
-      if (!res.data.show) return false;
+        if (!res.data.show) return false;
-      Toast({
+        Toast({
-        icon: 'close',
+          icon: 'close',
-        message: res.data.msg
+          message: res.data.msg
-      });
+        });
-    }
+      }
-  })
+    })
-  .catch(err => {
+    .catch(err => {
-    console.error(err); 
+      console.error(err);
-  });
+    });
 })
 const onVideoDetail = (v) => {
--- a/src/views/client/videoDetailComment.vue
View file @3527887
+++ b/src/views/client/videoDetailComment.vue
View file @3527887
@@ -308,12 +308,13 @@ onMounted(() => {
   left: 0;
   right: 0;
   background-color: white;
-
+  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
   .text {
     text-align: center;
-    padding: 0.5rem;
+    padding: 0.8rem;
     margin: 0.8rem;
     font-size: 0.85rem;
+    font-weight: bold;
     border-radius: 24px;
     // border: 1px solid F7F7F7;
     color: #713610;