feat(bi组件): 添加解锁内容和币不足弹窗功能

- 在bi组件中新增解锁内容和币不足的弹窗样式及逻辑
- 添加根据用户币数量显示不同弹窗的功能
- 优化投币逻辑，支持解锁内容场景
- 修复学校链接显示条件判断
- 调整CSS样式增加底部间距

component/bi/bi.txt

@@ -54,6 +54,10 @@
         display: none;
     }
 
+    .coins-area * {
+        box-sizing: border-box;
+    }
+
     .coins-area a {
         text-decoration: none;
     }
@@ -66,6 +70,7 @@
         flex-direction: column;
         padding: 40px 30px 35px;
         position: relative;
+        display: none;
     }
 
     .coins-area .coins-box .fork {
@@ -221,6 +226,111 @@
         font-size: 13px;
         margin-left: 2px;
     }
+
+    .unlock-insertcoins-box {
+        width: 520px;
+        border: 1px solid #e5e5e5;
+        background-color: #fff;
+        border-radius: 11px;
+        flex-direction: column;
+        display: flex;
+        -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21);
+        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21);
+        display: none;
+    }
+
+    .unlock-insertcoins-box .unlock-insertcoins-close {
+        width: 16px;
+        height: 16px;
+        padding: 10px;
+        align-self: self-end;
+        box-sizing: content-box;
+        cursor: pointer;
+    }
+
+    .unlock-insertcoins-box .unlock-insertcoins-head {
+        font-size: 14px;
+        color: #555555;
+        margin: 10px auto 35px;
+    }
+
+    .unlock-insertcoins-box .unlock-insertcoins-head .bi-icon {
+        width: 40px;
+        height: 48px;
+    }
+
+    .unlock-insertcoins-box .unlock-insertcoins-btn {
+        width: 175px;
+        height: 43px;
+        border-radius: 45px;
+        background-color: #50e3c2;
+        cursor: pointer;
+    }
+
+    .unlock-insertcoins-box .in-all {
+        color: #555555;
+        font-size: 13px;
+        margin-top: 17px;
+        margin-bottom: 54px;
+    }
+
+    .unlock-insertcoins-box .in-all span {
+        font-weight: 650;
+    }
+
+    .no-jituobi-pop-box {
+        width: 520px;
+        flex-direction: column;
+        border: 1px solid #e5e5e5;
+        background-color: #fff;
+        border-radius: 11px;
+        display: flex;
+        -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21);
+        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21);
+        padding-bottom: 55px;
+        display: none;
+    }
+
+    .no-jituobi-pop-box .no-jituobi-close {
+        width: 16px;
+        height: 16px;
+        padding: 10px;
+        align-self: flex-end;
+        cursor: pointer;
+        box-sizing: content-box;
+    }
+
+    .no-jituobi-pop-box .no-jituobi-head {
+        font-size: 16px;
+        color: #333;
+        margin: 23px auto 42px;
+    }
+
+    .no-jituobi-pop-box .no-jituobi-head .bi-icon {
+        width: 50px;
+        height: 60px;
+    }
+
+    .no-jituobi-pop-box .strategy-btn {
+        width: 198px;
+        height: 43px;
+        color: #000;
+        font-size: 16px;
+        border-radius: 100px;
+        margin: 0 auto;
+        cursor: pointer;
+    }
+
+    .no-jituobi-pop-box .strategy-btn .strategy-icon {
+        width: 16px;
+        height: 16px;
+        margin-left: 8px;
+    }
+
+    .greenBj {
+        background-color: #50e3c2;
+        border-color: #50e3c2 !important;
+    }
 </style>
 
 <div class="coins-area flexcenter">
@@ -229,7 +339,7 @@
         <div class="coins-head flexacenter">
             <img class="icon" src="https://app.gter.net/image/gter/commonCom/bi/img/bi.png" />
             <div class="text flexacenter">
-                该帖子已获得
+                该<span class="pagetpyeText"></span>已获得
                 <div class="sum"></div>
                 个寄托币
             </div>
@@ -249,4 +359,36 @@
 
         <div class="coins-list-area flexflex"></div>
     </div>
+
+    <!-- <div class="unlock-insertcoins-box flexcenter" v-if="coinMybalance >= defaultcoinnum"> -->
+    <div class="unlock-insertcoins-box flexcenter">
+        <img class="unlock-insertcoins-close closeCoinBox"
+            src="https://app.gter.net/image/gter/commonCom/bi/img/fork-icon.png" />
+        <div class="unlock-insertcoins-head flexacenter">
+            <img class="bi-icon" src="https://app.gter.net/image/gter/commonCom/bi/img/bi.png"
+                style="margin-right: 11px;" />
+            作者设置了阅读限制，解锁所有内容仅需 <span style="font-size: 20px;font-weight: 650;margin: 0 4px;" class="coinNum"></span>
+            寄托币
+        </div>
+        <div class="unlock-insertcoins-btn flexcenter">投币解锁</div>
+        <div class="in-all">你共有 <span class="balance"></span> 寄托币</div>
+    </div>
+
+    <!-- <div class="no-jituobi-pop-box" v-else-if="coinMybalance <= 0 || coinMybalance < defaultcoinnum"> -->
+    <div class="no-jituobi-pop-box">
+        <img class="no-jituobi-close closeCoinBox"
+            src="https://app.gter.net/image/gter/commonCom/bi/img/fork-icon.png" />
+        <div class="no-jituobi-head flexacenter">
+            <img class="bi-icon" src="https://app.gter.net/image/gter/commonCom/bi/img/bi.png"
+                style="margin-right: 12px;">
+            <span style="margin-top: 10px;">你的寄托币不够，快去发帖挣币吧</span>
+        </div>
+
+        <a href="https://bbs.gter.net/thread-2543548-1-1.html" target="_blank">
+            <div class="strategy-btn greenBj flexcenter">
+                攒币指南
+                <img class="strategy-icon" src="https://app.gter.net/image/gter/commonCom/bi/img/u1045.svg" />
+            </div>
+        </a>
+    </div>
 </div>

component/item-mj/item-mj.js

@@ -29,5 +29,5 @@ export const itemMj = defineComponent({
         itemHead,
     },
 
-    template: `<div class="item-box item-mj">    <item-head :itemdata="item" :page="page"></item-head>    <a class="school flexacenter" :href="item.url" target="_blank">        <img class="icon" v-if="item.data.schoollogo" :src="item.data.schoollogo" mode="heightFix"></image>        <div class="text flex1 one-line-display">{{ item.data.schoolname }}</div>    </a>    <a class="major flexacenter" v-if="item.data.professional" :href="item.url" target="_blank">        <div class="key">{{ item.data.project ? '专业' : '项目/专业' }}</div>        <div class="value flex1 one-line-display">{{ item.data.professional }}</div>    </a>    <a class="major flexacenter" v-if="item.data.project" :href="item.url" target="_blank">        <div class="key">项目</div>        <div class="value flex1 one-line-display">{{ item.data.project }}</div>    </a>    <a class="major flexacenter" v-if="item.data.interviewtime" :href="item.url" target="_blank">        <div class="key">面试</div>        <div class="value time flex1 one-line-display">{{ item.data.interviewtime }}</div>    </a>    <a class="message" v-if="item.content" :href="item.url" target="_blank">{{ item.content }}</a>    <item-bottom :itemdata="item" :page="page"></item-bottom></div>`,
+    template: `<div class="item-box item-mj">    <item-head :itemdata="item" :page="page"></item-head>    <a class="school flexacenter" :href="item.url" target="_blank" v-if="item.data.schoolname">        <img class="icon" v-if="item.data.schoollogo" :src="item.data.schoollogo" mode="heightFix"></image>        <div class="text flex1 one-line-display">{{ item.data.schoolname }}</div>    </a>    <a class="major flexacenter" v-if="item.data.professional" :href="item.url" target="_blank">        <div class="key">{{ item.data.project ? '专业' : '项目/专业' }}</div>        <div class="value flex1 one-line-display">{{ item.data.professional }}</div>    </a>    <a class="major flexacenter" v-if="item.data.project" :href="item.url" target="_blank">        <div class="key">项目</div>        <div class="value flex1 one-line-display">{{ item.data.project }}</div>    </a>    <a class="major flexacenter" v-if="item.data.interviewtime" :href="item.url" target="_blank">        <div class="key">面试</div>        <div class="value time flex1 one-line-display">{{ item.data.interviewtime }}</div>    </a>    <a class="message" v-if="item.content" :href="item.url" target="_blank">{{ item.content }}</a>    <item-bottom :itemdata="item" :page="page"></item-bottom></div>`,
 });

component/item-mj/item-mj.txt

@@ -1,6 +1,6 @@
 <div class="item-box item-mj">
     <item-head :itemdata="item" :page="page"></item-head>
-    <a class="school flexacenter" :href="item.url" target="_blank">
+    <a class="school flexacenter" :href="item.url" target="_blank" v-if="item.data.schoolname">
         <img class="icon" v-if="item.data.schoollogo" :src="item.data.schoollogo" mode="heightFix"></image>
         <div class="text flex1 one-line-display">{{ item.data.schoolname }}</div>
     </a>

css/details.css

@@ -1203,6 +1203,7 @@
 }
 .answer-discuss .edit-comment .box .input-box {
   margin-right: 0;
+  padding-top: 10px;
 }
 .answer-discuss .edit-comment .box .btn-list {
   padding: 15px 0;

css/details.less

@@ -1405,6 +1405,7 @@
 }
 .answer-discuss .edit-comment .box .input-box {
     margin-right: 0;
+    padding-top: 10px;
 }
 .answer-discuss .edit-comment .box .input-box .bottom {
     // border-top: 1px solid #ebebeb;

css/public.css

@@ -541,6 +541,7 @@ body {
 }
 .item-box.item-mj .message {
   margin-top: 13px;
+  margin-bottom: 15px;
   font-size: 14px;
   color: #555555;
   display: block;

css/public.less

@@ -645,6 +645,7 @@ body {
 
         .message {
             margin-top: 13px;
+            margin-bottom: 15px;
             font-size: 14px;
             color: #555555;
             display: block;

js/index.js

@@ -107,6 +107,10 @@ const appIndex = createApp({
             getTalkingRecommend();
             getTopicHandpicked();
             getTopicLatest();
+
+            setTimeout(() => {
+                BiComponent.initComponent('unlock');
+            }, 1000);
         });
 
         let ongoingbj = ref({}); // 话题数据