hookehuyr

测试把身份验证错误提示框合并到新组件里面

<!--
* @Date: 2022-06-30 17:48:46
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-30 18:11:08
* @FilePath: /tswj/src/components/NoticeOverlayTest/index.vue
* @Description: 文件描述
-->
<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>
<div style="color: #333333;">
<div v-html="noticeHtml" />
</div>
<div style="margin: 3rem 0;">
<my-button type="primary" @on-click="handleSubmit">{{ noticeText }}</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 { USER_STATUS } from '@/constant'
const props = defineProps({
show: Boolean,
type: {
type: Number,
default: -1,
}
})
const emit = defineEmits(['on-close', 'on-submit']);
const handleClose = () => { // 关闭提示框回调
showNotice.value = false
emit('on-close', false)
}
// 底部按钮
const handleSubmit = () => {
emit('on-submit', false)
}
const noticeText = ref('')
const noticeHtml = ref('')
const showNotice = ref(false)
// 监听弹出框
watch(() => props.show, (v) => {
showNotice.value = v;
if (props.type === USER_STATUS.NON_VERIFIED) {
noticeText.value = '前往认证'
noticeHtml.value = `
<p>您还没有实名认证</p>
<p>请前往个人中心进行实名认证</p>
`
} else if (props.type === USER_STATUS.NON_DEFAULT_CHILD) {
noticeText.value = '前往新增'
noticeHtml.value = `
<p>您还没有新增儿童</p>
<p>请前往个人中心进行新增</p>
`
}
})
</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>
......@@ -2,13 +2,14 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-17 11:17:58
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-05-31 22:11:29
* @LastEditTime: 2022-06-30 17:49:41
* @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'
import NoticeOverlayTest from '@/components/NoticeOverlayTest/index.vue'
import DonateBook from '@/components/DonateBook/index.vue'
import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
import BookCard from '@/components/BookCard/index.vue'
......@@ -20,6 +21,7 @@ export {
MyButton,
VideoCard,
NoticeOverlay,
NoticeOverlayTest,
DonateBook,
ShortcutFixed,
BookCard,
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-21 09:35:14
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-30 17:17:14
* @LastEditTime: 2022-06-30 18:26:54
* @FilePath: /tswj/src/views/client/bookDetail.vue
* @Description:
-->
......@@ -109,12 +109,12 @@
</div>
<!-- 上传时,如果没有默认儿童提示弹框, 如果没有实名认证提示弹框 -->
<!-- <notice-overlay-test :show="showNotice" :type="userInfo.can_upload" @on-submit="onSubmit" @on-close="onClose" /> -->
<notice-overlay :show="showNotice" :text="noticeText" @on-submit="onSubmit" @on-close="onClose">
<div style="color: #333333;">
<div v-html="noticeHtml" />
</div>
</notice-overlay>
<donate-flower :user-type="donateType" :show-popup="showDonate" :item="donateInfo" @on-close="closeDonate" />
<van-overlay :show="show" z-index="9999">
......@@ -128,7 +128,7 @@
import { ref, onActivated, nextTick, onMounted, computed } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { Cookies, _, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/generatePackage'
import { MyButton, VideoCard, NoticeOverlay, DonateFlower, ShortcutFixed } from '@/utils/generateModules'
import { MyButton, VideoCard, NoticeOverlay, NoticeOverlayTest, DonateFlower, ShortcutFixed } from '@/utils/generateModules'
import { icon_video, icon_up, icon_down, icon_subscribed, icon_unsubscribe, no_image } from '@/utils/generateIcons'
import { JSJ_FORM_C, JSJ_FORM_MANDARIN, JSJ_FORM_LOCALISM } from '@/constant'
import { useVideoList, useDefaultPerf, useScrollTop } from '@/composables';
......@@ -295,6 +295,10 @@ const uploadVideo = () => {
<p>请前往个人中心进行新增</p>
`
}
// 测试新组件条件
// else {
// showNotice.value = true;
// }
}
/****************** keepAlive 模块 *******************/
......