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

 <template>
 <template>
   <div @click="handle">
   <div @click="handle">
-    <img
-      class="icon-me"
-      referrerpolicy="no-referrer"
-      :src="icon_me"
-    />
+    <img class="icon-me" referrerpolicy="no-referrer" :src="icon_me" />
   </div>
   </div>
 </template>
 </template>
 
 
@@ -44,7 +40,7 @@ export default {
     z-index: 169;
     z-index: 169;
     position: fixed;
     position: fixed;
     right: 2rem;
     right: 2rem;
-    bottom: 5rem;
+    bottom: 15%;
     width: 44px;
     width: 44px;
     height: 44px;
     height: 44px;
   }
   }

@@ -57,12 +57,8 @@
             </van-col>
             </van-col>
           </van-row>
           </van-row>
           <van-popup v-model:show="showPicker" round position="bottom">
           <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>
           </van-popup>
         </div>
         </div>
       </van-sticky>
       </van-sticky>
@@ -91,6 +87,26 @@
     </div>
     </div>
     <to-me @on-click="gotoMe()"></to-me>
     <to-me @on-click="gotoMe()"></to-me>
   </div>
   </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>
 </template>
 
 
 <script setup>
 <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_down from '@images/icon-zhankai@2x.png'
 import icon_subscribed from '@images/icon-dingyue01@2x.png'
 import icon_subscribed from '@images/icon-dingyue01@2x.png'
 import icon_unsubscribe from '@images/icon-dingyue02@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 ToMe from '@/components/ToMe/index.vue'
 import tools from '@/common/tool'
 import tools from '@/common/tool'
@@ -198,24 +216,30 @@ const onLoad = () => {
 // 书籍订阅
 // 书籍订阅
 let is_subscribe = ref(false);
 let is_subscribe = ref(false);
 const onSubscribe = () => {
 const onSubscribe = () => {
-    is_subscribe.value = !is_subscribe.value
+  is_subscribe.value = !is_subscribe.value
 }
 }
 
 
 // 爱心捐书
 // 爱心捐书
 const payFor = () => {
 const payFor = () => {
-    console.warn('弹出框');
+  console.warn('弹出框');
 }
 }
 
 
 // 上传作品
 // 上传作品
+const showNotice = ref(false)
+const closeNotice = () => {
+  showNotice.value = false;
+}
 const uploadVideo = () => {
 const uploadVideo = () => {
-    console.warn('跳转页面');
+  // 如果没有实名认证需要提示用户实名认证
+  showNotice.value = true;
+  // 实名认证之后直接跳转上传页面
 }
 }
 </script>
 </script>
 
 
 <script>
 <script>
 import mixin from 'common/mixin';
 import mixin from 'common/mixin';
 
 
-function transCaseList (url, pic) {
+function transCaseList(url, pic) {
   return { url, pic }
   return { url, pic }
 }
 }
 
 
@@ -230,7 +254,7 @@ export default {
     this.getList()
     this.getList()
   },
   },
   methods: {
   methods: {
-    getList () {
+    getList() {
       _.each(this.dataList, item => {
       _.each(this.dataList, item => {
         let video = item.video && item.video.url ? item.video.url : 'http://static.smartisanos.cn/common/video/t1-ui.mp4';
         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';
         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 {
     .book-video-language {
       padding: 1rem;
       padding: 1rem;
       background-color: white;
       background-color: white;
+
       .uncheck {
       .uncheck {
         background: #F7F7F7;
         background: #F7F7F7;
         border-radius: 15px;
         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>
 </style>
\ No newline at end of file

@@ -75,7 +75,7 @@ const data_video = reactive({
   "collected": false
   "collected": false
 })
 })
 
 
-const active = ref(1); // index 0 为简介，1 为留言
+const active = ref(0); // index 0 为简介，1 为留言
 const onClickTab = ({ title }) => {
 const onClickTab = ({ title }) => {
   console.warn(title);
   console.warn(title);
 };
 };
@@ -103,7 +103,6 @@ export default {
     }
     }
   },
   },
   mounted() {
   mounted() {
-
   },
   },
   methods: {
   methods: {
 
 

@@ -46,11 +46,35 @@
   </div>
   </div>
   <comment-list :showPopup="showCommentListPopup" @on-close="closeCommentList"></comment-list>
   <comment-list :showPopup="showCommentListPopup" @on-close="closeCommentList"></comment-list>
   <comment-box :showPopup="showCommentBoxPopup" :type="commentType" @on-close="closeCommentBox"></comment-box>
   <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>
 </template>
 
 
 <script setup>
 <script setup>
 import CommentList from '@/components/CommentList/index.vue'
 import CommentList from '@/components/CommentList/index.vue'
 import CommentBox from '@/components/CommentBox/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 { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
@@ -94,9 +118,22 @@ const closeCommentList = (v) => { // 查看更多回复
 // 回复评论控件
 // 回复评论控件
 const showCommentBoxPopup = ref(false);
 const showCommentBoxPopup = ref(false);
 const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复
 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) => { // 回复/评论
 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) => { // 查看更多回复
 const closeCommentBox = (v) => { // 查看更多回复
   showCommentBoxPopup.value = v;
   showCommentBoxPopup.value = v;
@@ -164,4 +201,21 @@ export default {
     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
     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>
 </style>
\ No newline at end of file