Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3527887e 1 parent fbe2fada

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

Inline Side-by-side
Showing 10 changed files with 168 additions and 22 deletions
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
6 <title></title> 6 <title></title>
7 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css" /> 7 + <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css" /> -->
8 </head> 8 </head>
9 <body> 9 <body>
10 <div id="app"></div> 10 <div id="app"></div>
......
...@@ -136,4 +136,16 @@ export default { ...@@ -136,4 +136,16 @@ export default {
136 margin-left: 1rem; 136 margin-left: 1rem;
137 margin-bottom: 1rem; 137 margin-bottom: 1rem;
138 } 138 }
139 +.text {
140 + text-align: center;
141 + padding: 0.7rem;
142 + margin: 0.8rem;
143 + font-size: 1rem;
144 + font-weight: bold;
145 + border-radius: 24px;
146 + // border: 1px solid F7F7F7;
147 + color: #713610;
148 + background-color: @base-color;
149 + box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
150 +}
139 </style> 151 </style>
......
1 +<!--
2 + * @Author: hookehuyr hookehuyr@gmail.com
3 + * @Date: 2022-05-31 18:32:38
4 + * @LastEditors: hookehuyr hookehuyr@gmail.com
5 + * @LastEditTime: 2022-05-31 19:01:49
6 + * @FilePath: /tswj/src/components/DonateBar/index.vue
7 + * @Description: 爱心助力底部固定栏
8 +-->
9 +<template>
10 + <div class="fix-btn">
11 + <div class="text"><slot /></div>
12 + </div>
13 +</template>
14 +
15 +<script setup>
16 +import { ref } from 'vue'
17 +import { useRoute, useRouter } from 'vue-router'
18 +
19 +import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
20 +//import { } from '@/utils/generateModules.js'
21 +//import { } from '@/utils/generateIcons.js'
22 +//import { } from '@/composables'
23 +const $route = useRoute();
24 +const $router = useRouter();
25 +useTitle($route.meta.title);
26 +
27 +const props = defineProps({
28 + donateType: {
29 + type: String,
30 + default: (value) => value,
31 + validator: value => {
32 + return ['C', 'V', 'K'].includes(value); // type: C | V | K， 儿童｜访客｜幼儿园
33 + }
34 + }
35 +})
36 +
37 +// 捐钱-游客 type: V
38 +// 捐钱-幼儿园 type: K
39 +console.warn(props.donateType);
40 +
41 +</script>
42 +
43 +<style lang="less" scoped>
44 +.fix-btn {
45 + position: fixed;
46 + bottom: 0;
47 + left: 0;
48 + right: 0;
49 + background-color: white;
50 + box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
51 + .text {
52 + text-align: center;
53 + padding: 0.7rem;
54 + margin: 0.8rem;
55 + font-size: 1rem;
56 + font-weight: bold;
57 + border-radius: 24px;
58 + // border: 1px solid F7F7F7;
59 + color: #713610;
60 + background-color: @base-color;
61 + box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
62 + }
63 +}
64 +</style>
1 +/*
2 + * @Author: hookehuyr hookehuyr@gmail.com
3 + * @Date: 2022-05-17 11:17:58
4 + * @LastEditors: hookehuyr hookehuyr@gmail.com
5 + * @LastEditTime: 2022-05-31 18:34:18
6 + * @FilePath: /tswj/src/utils/generateModules.js
7 + * @Description:
8 + */
1 import MyButton from '@/components/MyButton/index.vue' 9 import MyButton from '@/components/MyButton/index.vue'
2 import VideoCard from '@/components/VideoCard/index.vue' 10 import VideoCard from '@/components/VideoCard/index.vue'
3 import NoticeOverlay from '@/components/NoticeOverlay/index.vue' 11 import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
...@@ -5,6 +13,7 @@ import DonateBook from '@/components/DonateBook/index.vue' ...@@ -5,6 +13,7 @@ import DonateBook from '@/components/DonateBook/index.vue'
5 import ShortcutFixed from '@/components/ShortcutFixed/index.vue' 13 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
6 import BookCard from '@/components/BookCard/index.vue' 14 import BookCard from '@/components/BookCard/index.vue'
7 import VideoDetail from '@/components/VideoDetail/index.vue' 15 import VideoDetail from '@/components/VideoDetail/index.vue'
16 +import DonateBar from '@/components/DonateBar/index.vue'
8 17
9 export { 18 export {
10 MyButton, 19 MyButton,
...@@ -13,5 +22,6 @@ export { ...@@ -13,5 +22,6 @@ export {
13 DonateBook, 22 DonateBook,
14 ShortcutFixed, 23 ShortcutFixed,
15 BookCard, 24 BookCard,
16 - VideoDetail 25 + VideoDetail,
26 + DonateBar,
17 } 27 }
......
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
98 <my-button type="primary" @on-click="uploadVideo">上传作品</my-button> 98 <my-button type="primary" @on-click="uploadVideo">上传作品</my-button>
99 </div> 99 </div>
100 <div class="button"> 100 <div class="button">
101 - <my-button type="plain" @on-click="toDonate">爱心捐书</my-button> 101 + <my-button type="plain" @on-click="toDonate">爱心助力</my-button>
102 </div> 102 </div>
103 </div> 103 </div>
104 <shortcut-fixed type="C" :item="shortcutItem" /> 104 <shortcut-fixed type="C" :item="shortcutItem" />
...@@ -169,6 +169,7 @@ const onSubscribe = async () => { ...@@ -169,6 +169,7 @@ const onSubscribe = async () => {
169 const showDonate = ref(false); 169 const showDonate = ref(false);
170 170
171 const toDonate = () => { 171 const toDonate = () => {
172 + // TODO：需要新写组件捐钱
172 showDonate.value = true; 173 showDonate.value = true;
173 } 174 }
174 175
......
...@@ -59,9 +59,7 @@ ...@@ -59,9 +59,7 @@
59 </div> 59 </div>
60 <div style="height: 5rem" /> 60 <div style="height: 5rem" />
61 <!-- TODO: 新需求：爱心助力捐钱弹框 --> 61 <!-- TODO: 新需求：爱心助力捐钱弹框 -->
62 - <div class="fix-btn"> 62 + <donate-bar :donate-type="donateType">爱心助力</donate-bar>
63 - <div class="text">爱心助力</div>
64 - </div>
65 <shortcut-fixed type="C" :item="shortcutItem" /> 63 <shortcut-fixed type="C" :item="shortcutItem" />
66 </div> 64 </div>
67 </template> 65 </template>
...@@ -73,7 +71,9 @@ import { styleObject3 } from '@/settings/designSetting.js'; ...@@ -73,7 +71,9 @@ import { styleObject3 } from '@/settings/designSetting.js';
73 import { useBookList, useShortcutBar } from '@/composables'; 71 import { useBookList, useShortcutBar } from '@/composables';
74 import { useGo } from '@/hooks/useGo'; 72 import { useGo } from '@/hooks/useGo';
75 import { killPages, store } from '@/hooks/useKeepAlive'; 73 import { killPages, store } from '@/hooks/useKeepAlive';
76 - 74 +import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
75 +import { DonateBar } from '@/utils/generateModules.js'
76 +import { ref, computed } from 'vue'
77 const go = useGo(); 77 const go = useGo();
78 78
79 // 删除所有的 keep-alive 缓存 79 // 删除所有的 keep-alive 缓存
...@@ -83,6 +83,12 @@ store.changeScrollTop(0); ...@@ -83,6 +83,12 @@ store.changeScrollTop(0);
83 83
84 const { kg_id, kgInfo, emptyStatus } = useBookList(); 84 const { kg_id, kgInfo, emptyStatus } = useBookList();
85 const { shortcutItem } = useShortcutBar(); // 配置快捷跳转条 85 const { shortcutItem } = useShortcutBar(); // 配置快捷跳转条
86 +
87 +const userType = Cookies.get('userType')
88 +// 判断是访客进入还是幼儿园进入
89 +const donateType = computed(() => {
90 + return userType === 'client' ? 'K' : 'V';
91 +})
86 </script> 92 </script>
87 93
88 <style lang="less" scoped> 94 <style lang="less" scoped>
......
1 +<!--
2 + * @Author: hookehuyr hookehuyr@gmail.com
3 + * @Date: 2022-04-26 16:06:31
4 + * @LastEditors: hookehuyr hookehuyr@gmail.com
5 + * @LastEditTime: 2022-05-31 20:12:23
6 + * @FilePath: /tswj/src/views/client/finishUpload.vue
7 + * @Description: 作品上传成功提示页面
8 +-->
1 <template> 9 <template>
2 <div class="finishUpload-page"> 10 <div class="finishUpload-page">
3 <div style="background-color: #F7F7F7; padding-top: 2rem; padding-bottom: 2rem;"> 11 <div style="background-color: #F7F7F7; padding-top: 2rem; padding-bottom: 2rem;">
...@@ -11,14 +19,14 @@ ...@@ -11,14 +19,14 @@
11 <p>共读这么精彩的书籍</p> 19 <p>共读这么精彩的书籍</p>
12 </div> 20 </div>
13 <div v-if="book_id" style="padding: 0 15% 0.5rem 15%;"> 21 <div v-if="book_id" style="padding: 0 15% 0.5rem 15%;">
14 - <my-button @on-click="toDonate" type="primary">我要爱心捐书</my-button> 22 + <my-button type="primary" @on-click="toDonate">我要爱心助力</my-button>
15 </div> 23 </div>
16 <div style="padding: 0 15% 1rem 15%;"> 24 <div style="padding: 0 15% 1rem 15%;">
17 - <my-button @on-click="goBack" type="plain">返回</my-button> 25 + <my-button type="plain" @on-click="goBack">返回</my-button>
18 </div> 26 </div>
19 </div> 27 </div>
20 28
21 - <donate-book :showPopup="showDonate" :item="userInfo" @on-close="closeDonate"></donate-book> 29 + <donate-book :show-popup="showDonate" :item="userInfo" @on-close="closeDonate" />
22 </template> 30 </template>
23 31
24 <script setup> 32 <script setup>
...@@ -47,6 +55,7 @@ if (!book_id) { ...@@ -47,6 +55,7 @@ if (!book_id) {
47 const showDonate = ref(false); 55 const showDonate = ref(false);
48 56
49 const toDonate = () => { 57 const toDonate = () => {
58 + // TODO: 调用新的捐钱组件
50 showDonate.value = true; 59 showDonate.value = true;
51 // 生成捐赠数据 60 // 生成捐赠数据
52 } 61 }
......
...@@ -4,8 +4,7 @@ ...@@ -4,8 +4,7 @@
4 <div class="info"> 4 <div class="info">
5 <van-row> 5 <van-row>
6 <van-col> 6 <van-col>
7 - <van-image v-if="userInfo.avatar" round width="50" height="50" :src="userInfo.avatar" 7 + <van-image v-if="userInfo.avatar" round width="50" height="50" :src="userInfo.avatar" style="padding-right: 1rem;" />
8 - style="padding-right: 1rem;" />
9 <van-image v-else round width="50" height="50" :src="icon_avatar" style="padding-right: 1rem;" /> 8 <van-image v-else round width="50" height="50" :src="icon_avatar" style="padding-right: 1rem;" />
10 </van-col> 9 </van-col>
11 <van-col class="text-wrapper" span="18"> 10 <van-col class="text-wrapper" span="18">
...@@ -46,10 +45,20 @@ ...@@ -46,10 +45,20 @@
46 </van-row> 45 </van-row>
47 </div> 46 </div>
48 <div> 47 <div>
49 - <template v-for="item in userInfo.prod" :key="item" style="height: 3rem;"> 48 + <template v-for="item in userInfo.prod" :key="item">
50 - <video-card :item="item"></video-card> 49 + <video-card :item="item" />
51 </template> 50 </template>
52 - <div style="height: 2rem;"></div> 51 + <div style="height: 5rem;" />
52 + </div>
53 + <div class="donate-bar">
54 + <div class="text">
55 + <span style="font-size: 0.85rem; color: #999999;">收到小红花&nbsp;</span>
56 + <van-icon :name="icon_flower" color="#c5c5c5" size="1.25rem" style="margin: 0 auto;" />
57 + <span>&nbsp;3000</span>
58 + </div>
59 + <div class="button">
60 + <my-button type="primary">为TA助力</my-button>
61 + </div>
53 </div> 62 </div>
54 </div> 63 </div>
55 <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无作品信息" /> 64 <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无作品信息" />
...@@ -59,8 +68,8 @@ ...@@ -59,8 +68,8 @@
59 import { ref, onActivated, onMounted } from 'vue' 68 import { ref, onActivated, onMounted } from 'vue'
60 import { useRoute, onBeforeRouteLeave } from 'vue-router' 69 import { useRoute, onBeforeRouteLeave } from 'vue-router'
61 import { storeToRefs } from 'pinia' 70 import { storeToRefs } from 'pinia'
62 -import VideoCard from '@/components/VideoCard/index.vue' 71 +import { MyButton, VideoCard } from '@/utils/generateModules'
63 -import { icon_avatar, no_image } from '@/utils/generateIcons.js' 72 +import { icon_avatar, no_image, icon_flower } from '@/utils/generateIcons.js'
64 import { _, Toast } from '@/utils/generatePackage.js' 73 import { _, Toast } from '@/utils/generatePackage.js'
65 import { addPages, store } from '@/hooks/useKeepAlive' 74 import { addPages, store } from '@/hooks/useKeepAlive'
66 import { perfInfoAPI, addFollowAPI } from '@/api/C/perf.js' 75 import { perfInfoAPI, addFollowAPI } from '@/api/C/perf.js'
...@@ -134,7 +143,8 @@ onBeforeRouteLeave(() => { ...@@ -134,7 +143,8 @@ onBeforeRouteLeave(() => {
134 <style lang="less" scoped> 143 <style lang="less" scoped>
135 .person-index-page { 144 .person-index-page {
136 .header-wrapper { 145 .header-wrapper {
137 - background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%); 146 + // background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);
147 + background: @base-color;
138 148
139 .info { 149 .info {
140 padding: 2rem; 150 padding: 2rem;
...@@ -199,5 +209,35 @@ onBeforeRouteLeave(() => { ...@@ -199,5 +209,35 @@ onBeforeRouteLeave(() => {
199 text-align: center; 209 text-align: center;
200 } 210 }
201 } 211 }
212 +
213 + .donate-bar {
214 + z-index: 999;
215 + position: fixed;
216 + right: 0;
217 + bottom: 0;
218 + left: 0;
219 + display: flex;
220 + align-items: center;
221 + box-sizing: content-box;
222 + background-color: white;
223 + padding: 1rem;
224 + box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
225 + .text {
226 + display: flex;
227 + // flex-direction: column;
228 + justify-content: center;
229 + // flex: 1;
230 + color: #713610;
231 + text-align: center;
232 + }
233 +
234 + .button {
235 + display: flex;
236 + flex-direction: column;
237 + justify-content: center;
238 + flex: 1;
239 + padding: 0 0.5rem;
240 + }
241 + }
202 } 242 }
203 </style> 243 </style>
......
...@@ -24,8 +24,11 @@ ...@@ -24,8 +24,11 @@
24 title-active-color="#222222" title-inactive-color="#777777"> 24 title-active-color="#222222" title-inactive-color="#777777">
25 <van-tab title="简介" :title-style="tabClass"> 25 <van-tab title="简介" :title-style="tabClass">
26 <div class="intro">{{ videoInfo.note }}</div> 26 <div class="intro">{{ videoInfo.note }}</div>
27 + <!-- TODO: 新需求：爱心助力捐钱弹框 -->
28 + <donate-bar donate-type="C">为TA助力</donate-bar>
27 </van-tab> 29 </van-tab>
28 - <van-tab :title="'留言 ' + comment_num" :title-style="tabClass" :to="'/client/videoDetail/comment?prod_id=' + $route.query.prod_id + '&book_id=' + $route.query.book_id"> 30 + <van-tab :title="'留言 ' + comment_num" :title-style="tabClass"
31 + :to="'/client/videoDetail/comment?prod_id=' + $route.query.prod_id + '&book_id=' + $route.query.book_id">
29 <router-view></router-view> 32 <router-view></router-view>
30 </van-tab> 33 </van-tab>
31 </van-tabs> 34 </van-tabs>
...@@ -40,7 +43,7 @@ import { ref, reactive, onMounted, watch } from 'vue' ...@@ -40,7 +43,7 @@ import { ref, reactive, onMounted, watch } from 'vue'
40 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router' 43 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
41 44
42 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/generatePackage' 45 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/generatePackage'
43 -import { VideoDetail } from '@/utils/generateModules' 46 +import { VideoDetail, DonateBar } from '@/utils/generateModules'
44 import { icon_avatar } from '@/utils/generateIcons' 47 import { icon_avatar } from '@/utils/generateIcons'
45 48
46 const $route = useRoute(); 49 const $route = useRoute();
......
...@@ -308,12 +308,13 @@ onMounted(() => { ...@@ -308,12 +308,13 @@ onMounted(() => {
308 left: 0; 308 left: 0;
309 right: 0; 309 right: 0;
310 background-color: white; 310 background-color: white;
311 - 311 + box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
312 .text { 312 .text {
313 text-align: center; 313 text-align: center;
314 - padding: 0.5rem; 314 + padding: 0.8rem;
315 margin: 0.8rem; 315 margin: 0.8rem;
316 font-size: 0.85rem; 316 font-size: 0.85rem;
317 + font-weight: bold;
317 border-radius: 24px; 318 border-radius: 24px;
318 // border: 1px solid F7F7F7; 319 // border: 1px solid F7F7F7;
319 color: #713610; 320 color: #713610;
......