Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
94557e0f 1 parent f550109e

✨ feat(书籍详情页，作品详情页): 新增实名认证和上传作品判断提示

Inline Side-by-side
Showing 5 changed files with 112 additions and 21 deletions
<template>
<div @click="handle">
<img
class="icon-me"
referrerpolicy="no-referrer"
:src="icon_me"
/>
<img class="icon-me" referrerpolicy="no-referrer" :src="icon_me" />
</div>
</template>
......@@ -44,7 +40,7 @@ export default {
z-index: 169;
position: fixed;
right: 2rem;
bottom: 5rem;
bottom: 15%;
width: 44px;
height: 44px;
}
......
......@@ -57,12 +57,8 @@
</van-col>
</van-row>
<van-popup v-model:show="showPicker" round position="bottom">
<van-picker
:columns="columns"
:columns-field-names="{ text: 'text', value: 'val', children: 'children' }"
@cancel="showPicker = false"
@confirm="onConfirm"
/>
<van-picker :columns="columns" :columns-field-names="{ text: 'text', value: 'val', children: 'children' }"
@cancel="showPicker = false" @confirm="onConfirm" />
</van-popup>
</div>
</van-sticky>
......@@ -91,6 +87,26 @@
</div>
<to-me @on-click="gotoMe()"></to-me>
</div>
<!-- 上传作品时，如果没有实名认证提示弹框 -->
<van-overlay :show="showNotice" z-index="1000">
<div class="wrapper" @click.stop>
<div class="block">
<div>
<van-image width="100" height="100" :src="icon_notice" />
<p style="margin: 1rem; font-size: 1.15rem; font-weight: bold; color: #222222;">温馨提示</p>
</div>
<div style="color: #333333;">
<p>您还没有实名认证</p>
<p>请点击 <van-icon :name="icon_me" /> 进行实名认证</p>
<p>实名认证之后再上传</p>
</div>
<div style="margin: 3rem 0;">
<my-button @on-click="closeNotice" type="primary">返回</my-button>
</div>
</div>
</div>
</van-overlay>
</template>
<script setup>
......@@ -104,6 +120,8 @@ import icon_up from '@images/icon-guanbi@2x.png'
import icon_down from '@images/icon-zhankai@2x.png'
import icon_subscribed from '@images/icon-dingyue01@2x.png'
import icon_unsubscribe from '@images/icon-dingyue02@2x.png'
import icon_me from '@images/icon-my@2x.png'
import icon_notice from '@images/que-tishi@2x.png'
import ToMe from '@/components/ToMe/index.vue'
import tools from '@/common/tool'
......@@ -198,24 +216,30 @@ const onLoad = () => {
// 书籍订阅
let is_subscribe = ref(false);
const onSubscribe = () => {
is_subscribe.value = !is_subscribe.value
is_subscribe.value = !is_subscribe.value
}
// 爱心捐书
const payFor = () => {
console.warn('弹出框');
console.warn('弹出框');
}
// 上传作品
const showNotice = ref(false)
const closeNotice = () => {
showNotice.value = false;
}
const uploadVideo = () => {
console.warn('跳转页面');
// 如果没有实名认证需要提示用户实名认证
showNotice.value = true;
// 实名认证之后直接跳转上传页面
}
</script>
<script>
import mixin from 'common/mixin';
function transCaseList (url, pic) {
function transCaseList(url, pic) {
return { url, pic }
}
......@@ -230,7 +254,7 @@ export default {
this.getList()
},
methods: {
getList () {
getList() {
_.each(this.dataList, item => {
let video = item.video && item.video.url ? item.video.url : 'http://static.smartisanos.cn/common/video/t1-ui.mp4';
let cover = item.cover && item.cover.url ? item.cover.url : 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg';
......@@ -285,6 +309,7 @@ export default {
.book-video-language {
padding: 1rem;
background-color: white;
.uncheck {
background: #F7F7F7;
border-radius: 15px;
......@@ -361,4 +386,21 @@ export default {
}
}
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: auto;
text-align: center;
}
.block {
width: 80%;
// height: 25rem;
background-color: #fff;
border-radius: 10px;
padding: 1rem;
}
</style>
\ No newline at end of file
......
......@@ -75,7 +75,7 @@ const data_video = reactive({
"collected": false
})
const active = ref(1); // index 0 为简介，1 为留言
const active = ref(0); // index 0 为简介，1 为留言
const onClickTab = ({ title }) => {
console.warn(title);
};
......@@ -103,7 +103,6 @@ export default {
}
},
mounted() {
},
methods: {
......
......@@ -46,11 +46,35 @@
</div>
<comment-list :showPopup="showCommentListPopup" @on-close="closeCommentList"></comment-list>
<comment-box :showPopup="showCommentBoxPopup" :type="commentType" @on-close="closeCommentBox"></comment-box>
<!-- 写评论时，如果没有上传作品提示弹框 -->
<van-overlay :show="showNotice" z-index="1000">
<div class="wrapper" @click.stop>
<div class="block">
<div>
<van-image width="100" height="100" :src="icon_notice" />
<p style="margin: 1rem; font-size: 1.15rem; font-weight: bold; color: #222222;">温馨提示</p>
</div>
<div style="color: #333333;">
<p>您还没有上传作品</p>
<p>请返回书籍详情页，点击 <span style="font-weight: bold; color: #713610;">上传作品</span> 按钮</p>
<p>上传之后再留言</p>
</div>
<div style="margin: 3rem 0;">
<my-button @on-click="closeNotice" type="primary">返回</my-button>
</div>
</div>
</div>
</van-overlay>
</template>
<script setup>
import CommentList from '@/components/CommentList/index.vue'
import CommentBox from '@/components/CommentBox/index.vue'
import MyButton from '@/components/MyButton/index.vue'
import icon_me from '@images/icon-my@2x.png'
import icon_notice from '@images/que-tishi@2x.png'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
......@@ -94,9 +118,22 @@ const closeCommentList = (v) => { // 查看更多回复
// 回复评论控件
const showCommentBoxPopup = ref(false);
const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复
const showNotice = ref(false)
const closeNotice = () => { // 关闭提示框回调
showNotice.value = false;
$router.push({
path: '/client/bookDetail'
});
}
const flag = false; // 后台接口判断是否上传过作品
// 实际调试时，点击回复需要判断是否上传过作品
const setComment = (v, type) => { // 回复/评论
showCommentBoxPopup.value = true;
commentType.value = type;
if (flag) {
showCommentBoxPopup.value = true;
commentType.value = type;
} else {
showNotice.value = true;
}
}
const closeCommentBox = (v) => { // 查看更多回复
showCommentBoxPopup.value = v;
......@@ -164,4 +201,21 @@ export default {
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
}
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: auto;
text-align: center;
}
.block {
width: 80%;
// height: 25rem;
background-color: #fff;
border-radius: 10px;
padding: 1rem;
}
</style>
\ No newline at end of file
......