a1300399510@qq.com 提交于 2023/03/31 -16:20:01

src/main.js

@@ -4,7 +4,7 @@ import router from './router'
 import store from './store'
 import ElementUI, { Message, Pagination } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import { skipUrl, pageStop, pageMove, goTologin } from "@/utils/common.js"
+import { skipUrl, pageStop, pageMove, goTologin, copy } from "@/utils/common.js"
 import http from "@/utils/request"
 
 Vue.config.productionTip = false
@@ -19,7 +19,8 @@ Vue.prototype.$goTologin = goTologin  // 跳转登录页面的方法
 
 Vue.prototype.$pageStop = pageStop   // 页面禁止滑动
 Vue.prototype.$pageMove = pageMove  // 页面可以滑动
-Vue.prototype.$Message = Message  // 页面可以滑动
+Vue.prototype.$Message = Message  // 消息提示框
+Vue.prototype.$copy = copy  // 复制
 
 //svg文件引入
 import './icons'

src/utils/common.js

@@ -27,7 +27,23 @@ function goTologin() {
 }
 
 // 点击复制
-function copy(value, ismessage) {
+function copy(value, message) {
+    // 创建一个新的输入元素
+    let copyInput = document.createElement('input');
+    // 将输入元素添加到文档的主体中
+    document.body.appendChild(copyInput);
+    // 将输入元素的值设置为需要复制的URL
+    copyInput.setAttribute('value', value);
+    // 选择输入元素
+    copyInput.select();
+    // 使用clipboard API将所选文本复制到剪贴板
+    navigator.clipboard.writeText(copyInput.value);
+    // 向用户显示成功消息
+    // 从文档中删除动态创建的输入元素
+    copyInput.remove();
+
+    if (message) this.$message.success(message);
+        
     
 }
 

src/views/detail/detailIndex.vue

@@ -33,9 +33,9 @@
                     <div class="card-head-fool">{{ index == 0 ? '楼主' : `${index}楼` }}</div>
                 </div>
 
-                <div class="card-content">
+                <div class="card-content flex1">
                     <!-- 回复引用 -->
-                    <div class="quotation flexflex">
+                    <div class="quotation flexflex" v-if="index == 1">
                         <svg-icon icon-class="quotation-left" class-name="quotation-icon"></svg-icon>
                         <div class="quotation-right flex1 flexflex">
                             <div class="quotation-wenzi flex1 three-lines">
@@ -48,6 +48,13 @@
                         </div>
                     </div>
                     之前申请永久居民，参考了不少寄托的帖子和经验，现在回馈给大家，积攒RP。
+                    <!-- 未解锁区域 -->
+                    <div class="flexcenter content-unlock">
+                        <img class="unlock-icom" src="@/assets/img/detail/unlock.png">
+                        作者设置了回复可见
+                    </div>
+                    之前申请永久居民，参考了不少寄托的帖子和经验，现在回馈给大家，积攒RP。
+                    之前申请永久居民，参考了不少寄托的帖子和经验，现在回馈给大家，积攒RP。
                 </div>
             </div>
 
@@ -95,7 +102,7 @@
                         <img v-else class="bottom-operation-icom" src="@/assets/img/detail/collect-c.png">
                         <div class="bottom-operation-text">收藏</div>
                     </div>
-                    <div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="transmit">
+                    <div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="transmit()">
                         <img class="bottom-operation-icom bottom-transmit-icom" src="@/assets/img/detail/share.png" />
                         <div class="bottom-operation-text">转发</div>
                         <button class="bottom-operation-button flexcolumn flexcenter" open-type="share"></button>
@@ -224,7 +231,8 @@ export default {
 
         // 点击转发
         transmit() {
-
+            let value = location.href
+            this.$copy(value, "已经复制链接，欢迎分享！")
         },
 
         setValue(key, value) {
@@ -421,6 +429,14 @@ export default {
                         }
                     }
                 }
+
+                .content-unlock {
+                    .unlock-icom {
+                        width: .64rem;
+                        height: .64rem;
+                    }
+                }
+
             }
         }
     }