Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ca5c4be4 1 parent 3e481cf3

✨ feat(组件): 新增警告提示框组件及应用

Inline Side-by-side
Showing 3 changed files with 110 additions and 82 deletions
<template>
<van-overlay :show="showNotice" z-index="1000">
<div class="wrapper" @click.stop>
<div class="block">
<div style="position: absolute; top: -2rem; right: 1rem; font-size: 1.5rem;">
<van-icon name="close" color="#FFFFFF" @click="handleClose" />
</div>
<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>
<slot></slot>
<div style="margin: 3rem 0;">
<my-button @on-click="handleSubmit" type="primary">{{ text }}</my-button>
</div>
</div>
</div>
</van-overlay>
</template>
<script setup>
import MyButton from '@/components/MyButton/index.vue'
import icon_notice from '@images/que-tishi@2x.png'
import { ref, reactive, onMounted } from 'vue'
const props = defineProps({
showNotice: Boolean,
text: String
})
const emit = defineEmits(['on-close', 'on-submit']);
let show = props.showNotice;
const handleClose = () => { // 关闭提示框回调
show = false
emit('on-close', false)
}
// 底部按钮
const handleSubmit = () => {
emit('on-submit', false)
}
onMounted(() => {
})
</script>
<script>
export default {
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.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;
position: relative;
margin-top: 1rem;
margin-bottom: 5rem;
}
</style>
\ No newline at end of file
......@@ -84,30 +84,13 @@
<shortcut-fixed type="C" :item="['home', 'me']"></shortcut-fixed>
</div>
<!-- 上传作品时，如果没有实名认证提示弹框 -->
<van-overlay :show="showNotice" z-index="1000">
<div class="wrapper" @click.stop>
<div class="block">
<div style="position: absolute; top: -2rem; right: 1rem; font-size: 1.5rem;">
<van-icon name="close" color="#FFFFFF" @click="closeNotice" />
</div>
<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>
<!-- 写评论时，如果没有实名认证提示弹框 -->
<notice-overlay :show="showNotice" text="前往认证" @on-submit="onSubmit" @on-close="onClose">
<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>
<p>请前往个人中心进行实名认证</p>
</div>
</div>
</van-overlay>
</notice-overlay>
</template>
<script setup>
......@@ -115,14 +98,13 @@ import { useVideoList } from '@/composables/useVideoList.js'
import MyButton from '@/components/MyButton/index.vue'
import VideoCard from '@/components/VideoCard/index.vue'
import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
import icon_video from '@images/video.png'
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 ShortcutFixed from '@/components/ShortcutFixed/index.vue'
import tools from '@/common/tool'
......@@ -190,11 +172,18 @@ const payFor = () => {
console.warn('弹出框');
}
// 上传作品
// 未实名认证提示
const showNotice = ref(false)
const closeNotice = () => {
const onClose = () => { // 关闭提示框回调
showNotice.value = false;
}
// 跳转个人中心
const onSubmit = () => {
$router.push({
path: '/me/index'
});
}
/**
* 上传作品回调
*/
......
......@@ -43,27 +43,13 @@
<comment-list :showPopup="showCommentListPopup" :data="commentData" @on-close="closeCommentList"></comment-list>
<comment-box :showPopup="showCommentBoxPopup" :type="commentType" :replayUser="replayUser" @on-submit="submitCommentBox" @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>
<!-- 写评论时，如果没有实名认证提示弹框 -->
<notice-overlay :show="showNotice" text="前往认证" @on-submit="onSubmit" @on-close="onClose">
<div style="color: #333333;">
<!-- <p>您还没有上传作品</p>
<p>请返回书籍详情页，点击 <span style="font-weight: bold; color: #713610;">上传作品</span> 按钮</p>
<p>上传之后再留言</p> -->
<p>您还没有实名认证</p>
<p>请前往个人中心进行实名认证</p>
</div>
<div style="margin: 3rem 0;">
<my-button @on-click="closeNotice" type="primary">前往认证</my-button>
</div>
</div>
</div>
</van-overlay>
</notice-overlay>
</template>
<script setup>
......@@ -71,9 +57,7 @@ import { mainStore } from '@/store'
import CommentList from '@/components/CommentList/index.vue'
import CommentBox from '@/components/CommentBox/index.vue'
import MyButton from '@/components/MyButton/index.vue'
import icon_notice from '@images/que-tishi@2x.png'
import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
......@@ -160,8 +144,11 @@ const onReload = () => {
/******** 留言框列表相关操作 END *******/
const showNotice = ref(false)
const closeNotice = () => { // 关闭提示框回调
const onClose = () => { // 关闭提示框回调
showNotice.value = false;
}
// 跳转个人中心
const onSubmit = () => {
$router.push({
path: '/me/index'
});
......@@ -180,9 +167,8 @@ const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为
*/
const commentId = ref('')
const replayUser = ref('')
// TODO: 本人的评论还是应该把回复按钮屏蔽掉，后台要给个字段判断一下，comment_list/reply_list两个接口都要调整
const setComment = (v, type) => { //
if (validIdCard.can_use) {
const setComment = (v, type) => {
if (validIdCard.can_use.value) {
showCommentBoxPopup.value = true;
commentType.value = type;
replayUser.value = v.name;
......@@ -223,25 +209,11 @@ const submitCommentBox = (note) => {
// 留言可以刷新列表
onReload();
} else {
// TODO: 初始化列表数据，会使得列表滚到最上面
// 初始化列表数据，会使得列表滚到最上面
// 处理方法只能是插入相应的一条数据，这样就需要后台新增完成后，返回完整数据
// 后端需要返回一个完整结构，我临时写进去
let temp = {
"id": 314178,
"prod_id": 314058,
"pid": 314171,
"reply_to": "王申羽",
"name": "王申羽",
"avatar": "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf033a3cc00e4bb414ad696adbaf90a05f496c00e7210e889cd4ff3e4ea10ef24",
"kg_name": "杨浦科技幼儿园",
"note": "这是一条回复",
"created_by": 314051,
"comment_time": "5-4 07:03"
}
_.each(commentList.value, comment => {
if (comment.id === commentId.value) {
comment.reply_list.push(temp)
comment.reply_list.push(res.data.data)
comment.total = comment.total + 1
}
})
......@@ -340,21 +312,4 @@ 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
......