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 187 additions and 41 deletions
......@@ -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>
......
......@@ -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>
......
<!--
* @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>
/*
* @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,
}
......
......@@ -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;
}
......
......@@ -59,9 +59,7 @@
</div>
<div style="height: 5rem" />
<!-- TODO: 新需求：爱心助力捐钱弹框 -->
<div class="fix-btn">
<div class="text">爱心助力</div>
</div>
<donate-bar :donate-type="donateType">爱心助力</donate-bar>
<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>
......
<!--
* @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;
// 生成捐赠数据
}
......
......@@ -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"
style="padding-right: 1rem;" />
<van-image v-if="userInfo.avatar" round width="50" height="50" :src="userInfo.avatar" 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;">
<video-card :item="item"></video-card>
<template v-for="item in userInfo.prod" :key="item">
<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 { icon_avatar, no_image } from '@/utils/generateIcons.js'
import { MyButton, VideoCard } 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'
......@@ -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>
......
......@@ -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 => {
if (res.data.code === 1) {
videoInfo.value = res.data.data;
// 动态调整留言数量
store.changeCommentNum(res.data.data.comment_num);
} else {
console.warn(res);
if (!res.data.show) return false;
Toast({
icon: 'close',
message: res.data.msg
});
}
})
.catch(err => {
console.error(err);
});
.then(res => {
if (res.data.code === 1) {
videoInfo.value = res.data.data;
// 动态调整留言数量
store.changeCommentNum(res.data.data.comment_num);
} else {
console.warn(res);
if (!res.data.show) return false;
Toast({
icon: 'close',
message: res.data.msg
});
}
})
.catch(err => {
console.error(err);
});
})
const onVideoDetail = (v) => {
......
......@@ -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;
......