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

src/components/unlock/Coins.vue

@@ -10,12 +10,31 @@
                     <svg-icon icon-class="bi" class-name="coin-img"></svg-icon>
                     {{ coinConfig.strategy.tips }}
                 </div>
-                <div class="strategy-btn flexcenter" @click.stop="skipUrl(coinConfig.strategy.url)">{{
+                <div class="strategy-btn flexcenter" @click.stop="$skipUrl(coinConfig.strategy.url)">{{
                     coinConfig.strategy.button }}
                     <svg-icon icon-class="arrowsRoundLeft" class-name="strategy-icom"></svg-icon>
                 </div>
             </div>
         </div>
+
+        <!-- 投币解锁 -->
+        <div class="pop-box flexflex flexcolumn" @click="handlePopCancel()" v-if="popState == 'coindisplayuser'">
+            <div class="unlockCoin-box pop-box-box" @click.stop="">
+                <div class="coin-close flexcenter" @click="handlePopCancel()">
+                    <svg-icon icon-class="gray-cross" class-name="coin-close-icom"></svg-icon>
+                </div>
+                <div class="unlockCoin-header flexacenter">
+                    <svg-icon icon-class="bi" class-name="coin-img"></svg-icon>
+                    投币解锁
+                </div>
+                <div class="unlockCoin-hint flexacenter" style="font-size: .36rem;">作者设置了阅读限制，解锁所有内容仅需 <div
+                        class="unlockCoin-hint-sum">{{ defaultcoinnum }}</div> 寄托币</div>
+                <div class="unlockCoin-btn flexcenter" @click="postCoin(defaultcoinnum)">立即解锁
+                </div>
+                <div class="unlockCoin-hint flexcenter">你共有 {{ mybalance }} 个寄托币</div>
+            </div>
+        </div>
+
     </div>
 </template>
 
@@ -25,15 +44,21 @@ export default {
     props: ["popState", "coinConfig"],
     data() {
         return {
-
+            defaultcoinnum: 1
         };
     },
 
     mounted() {
 
+
+
     },
 
     methods: {
+        handlePopCancel() {
+            this.$parent.popState = ""
+        },
+
 
     },
 };
@@ -48,18 +73,14 @@ export default {
 }
 
 .coin-insufficient {
-    .coin-img {
-        width: 1.3333rem;
-        height: 1.4667rem;
-        margin-right: .2667rem;
-        padding-left: .48rem;
-        padding-top: .48rem;
-    }
+
 
     .insufficient-header {
         height: 1.4rem;
         margin-top: 1.36rem;
         margin-bottom: .9333rem;
+        color: #333;
+        font-size: .4rem;
     }
 
     .coin-img {
@@ -85,16 +106,71 @@ export default {
         height: .4rem;
     }
 
-    .coin-close {
-        position: absolute;
-        top: 0;
-        right: 0;
-        padding: .4rem;
-    }
+
+}
+
+
+
+.coin-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .4rem;
 
     .coin-close-icom {
         width: .32rem;
         height: .32rem;
     }
 }
+
+.coin-img {
+    width: 1.3333rem;
+    height: 1.4667rem;
+    margin-right: .2667rem;
+    // padding-left: .48rem;
+    // padding-top: .48rem;
+}
+
+.unlockCoin-box {
+    padding-bottom: 1.4667rem;
+
+
+    .unlockCoin-header {
+        font-size: .48rem;
+        color: #000;
+        font-weight: 650;
+        padding: .48rem .48rem .9333rem;
+    }
+
+    .unlockCoin-icom {
+        width: 1.3333rem;
+        height: 1.4667rem;
+        margin-right: .2667rem;
+    }
+
+    .unlockCoin-hint {
+        font-size: .32rem;
+        color: #555555;
+        justify-content: center;
+    }
+
+    .unlockCoin-hint-sum {
+        color: #000;
+        font-weight: 650;
+        font-size: .56rem;
+        margin: 0 .2rem;
+    }
+
+    .unlockCoin-btn {
+        width: 6.4rem;
+        height: 1.28rem;
+        border-radius: 2rem;
+        font-size: .48rem;
+        color: #000;
+        font-weight: 650;
+        background-color: rgb(80, 227, 194);
+        margin: 1.1067rem auto .48rem;
+    }
+
+}
 </style>