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

hookehuyr
Commit ca5c4be4c41ce8a0ce708044b94bbcb53bf461ee ca5c4be4 1 parent 3e481cf3
Showing 3 changed files with 115 additions and 87 deletions
src/components/NoticeOverlay/index.vue
src/views/client/bookDetail.vue
src/views/client/videoDetailComment.vue
--- a/src/components/NoticeOverlay/index.vue 0 → 100644
View file @ca5c4be
+++ b/src/components/NoticeOverlay/index.vue 0 → 100644
View file @ca5c4be
+<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
--- a/src/views/client/bookDetail.vue
View file @ca5c4be
+++ b/src/views/client/bookDetail.vue
View file @ca5c4be
@@ -84,30 +84,13 @@
     <shortcut-fixed type="C" :item="['home', 'me']"></shortcut-fixed>
   </div>
-  <!-- 上传作品时，如果没有实名认证提示弹框 -->
+  <!-- 写评论时，如果没有实名认证提示弹框 -->
-  <van-overlay :show="showNotice" z-index="1000">
+  <notice-overlay :show="showNotice" text="前往认证" @on-submit="onSubmit" @on-close="onClose">
-    <div class="wrapper" @click.stop>
+    <div style="color: #333333;">
-      <div class="block">
+      <p>您还没有实名认证</p>
-        <div style="position: absolute; top: -2rem; right: 1rem; font-size: 1.5rem;">
+      <p>请前往个人中心进行实名认证</p>
-          <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>
-        <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>
+  </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'
+  });
+}
+
 /**
  * 上传作品回调
  */
--- a/src/views/client/videoDetailComment.vue
View file @ca5c4be
+++ b/src/views/client/videoDetailComment.vue
View file @ca5c4be
@@ -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">
+  <notice-overlay :show="showNotice" text="前往认证" @on-submit="onSubmit" @on-close="onClose">
-    <div class="wrapper" @click.stop>
+    <div style="color: #333333;">
-      <div class="block">
+      <p>您还没有实名认证</p>
-        <div>
+      <p>请前往个人中心进行实名认证</p>
-          <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> -->
-          <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 NoticeOverlay from '@/components/NoticeOverlay/index.vue'
-
-import icon_notice from '@images/que-tishi@2x.png'
 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) => {
-const setComment = (v, type) => { // 
+  if (validIdCard.can_use.value) {
-  if (validIdCard.can_use) {
     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