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

hookehuyr
Commit 79dfc06aeaf96c0310953b83a36f2d6b00a56cd2 79dfc06a 1 parent 99290867
Showing 3 changed files with 106 additions and 4 deletions
src/components/NoticeOverlayTest/index.vue
src/utils/generateModules.js
src/views/client/bookDetail.vue
--- a/src/components/NoticeOverlayTest/index.vue 0 → 100644
View file @79dfc06
+++ b/src/components/NoticeOverlayTest/index.vue 0 → 100644
View file @79dfc06
+<!--
+ * @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>
--- a/src/utils/generateModules.js
View file @79dfc06
+++ b/src/utils/generateModules.js
View file @79dfc06
@@ -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,
--- a/src/views/client/bookDetail.vue
View file @79dfc06
+++ b/src/views/client/bookDetail.vue
View file @79dfc06
@@ -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 模块 *******************/