|
|
@@ -72,6 +72,99 @@
|
|
|
opacity: 0;
|
|
|
transition: all 0.2s;
|
|
|
}
|
|
|
+ .t-bg .view-detail{
|
|
|
+ position: absolute;
|
|
|
+ color: #2ABED1;
|
|
|
+ font-size: .24rem;
|
|
|
+ right: .24rem;
|
|
|
+ top: .24rem;
|
|
|
+ line-height: .32rem;
|
|
|
+ }
|
|
|
+ .t-bg .view-detail .icon-arrow-right {
|
|
|
+ width: .32rem;
|
|
|
+ height: .32rem;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
+ .highlight-color{
|
|
|
+ color: #2ABED1;
|
|
|
+ }
|
|
|
+ .rights-box{
|
|
|
+ margin: -1.4rem .32rem .24rem;
|
|
|
+ }
|
|
|
+ .subscribe-box{
|
|
|
+ border-radius: .16rem;
|
|
|
+ background: linear-gradient(281deg, #14A7D6 3.53%, #1EC2DB 98.32%);
|
|
|
+ box-shadow: 0 .08rem .32rem 0 rgba(8, 31, 38, 0.08);
|
|
|
+ padding: .24rem .04rem .04rem;
|
|
|
+ }
|
|
|
+ .subscribe-title{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: .24rem;
|
|
|
+ color: #FFF;
|
|
|
+ font-size: .2rem;
|
|
|
+ line-height: .32rem;
|
|
|
+ }
|
|
|
+ .subscribe-box .subscribe-title img{
|
|
|
+ width: .96rem;
|
|
|
+ height: .84rem;
|
|
|
+ margin-right:2px;
|
|
|
+ }
|
|
|
+ .subscribe-box .subscribe-title strong{
|
|
|
+ font-size: .28rem;
|
|
|
+ }
|
|
|
+ .rights-box .box-container{
|
|
|
+ background: #fff;
|
|
|
+ padding: .32rem .24rem .24rem;
|
|
|
+ border-radius: .16rem;
|
|
|
+ }
|
|
|
+ .subscribe-box .box-container{
|
|
|
+ background: linear-gradient(90deg, #F3FEFF 0%, #DEFBFF 100%);
|
|
|
+ }
|
|
|
+ .subscribe-box .free-title{
|
|
|
+ margin-left: 18px;
|
|
|
+ }
|
|
|
+ .rights-box .box-title{
|
|
|
+ text-align: center;
|
|
|
+ color: #171826;
|
|
|
+ font-size: .24rem;
|
|
|
+ line-height: .48rem;
|
|
|
+ padding: .08rem 0;
|
|
|
+ border-bottom: .01rem solid rgba(0, 0, 0, 0.10);
|
|
|
+ }
|
|
|
+ .rights-box .p-row {
|
|
|
+ margin-top: .24rem;
|
|
|
+ }
|
|
|
+ .rights-box .box-content {
|
|
|
+ color: #5F5E64;
|
|
|
+ font-size: .22rem;
|
|
|
+ line-height: .32rem;
|
|
|
+ }
|
|
|
+ .rights-box .row-top{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #1B1A2A;
|
|
|
+ font-size: .28rem;
|
|
|
+ line-height: .4rem;
|
|
|
+ margin-bottom: .08rem;
|
|
|
+ }
|
|
|
+ .rights-box .handle-text{
|
|
|
+ color: #2ABED1;
|
|
|
+ text-align: right;
|
|
|
+ font-size: .24rem;
|
|
|
+ line-height: .36rem;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .rights-box .icon-arrow-right{
|
|
|
+ width: .24rem;
|
|
|
+ height: .24rem;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .rights-box em.highlight-color{
|
|
|
+ font-size: .28rem;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -80,16 +173,74 @@
|
|
|
<div class="j-main portraited" id="proRecord" v-cloak>
|
|
|
<div class="j-container">
|
|
|
<div class="j-main">
|
|
|
- <div class="t-bg flex" style="min-height:3.28rem;">
|
|
|
- <div class="nums">
|
|
|
- <span v-if="points.total>=0">{points.total}</span>个
|
|
|
- <img src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/portraitRecord/image/help-p.png?v={{Msg "seo" "version"}}' @click="helpTiped" alt="">
|
|
|
- </div>
|
|
|
- <div class="btns flex">
|
|
|
- <span>当月附件下载余额</span>
|
|
|
- <van-button round type="primary" @click="setBook">立即充值</van-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<!-- 大会员且有附件下载权益不展示头部-->
|
|
|
+ <template v-if="!(userPower.memberStatus && hasDownloadPower)">
|
|
|
+ <div class="t-bg flex" style="min-height:3.28rem;">
|
|
|
+ <span class="view-detail" @click="viewDetail">兑换/购买附件下载明细<em class="j-icon icon-arrow-right"></em></span>
|
|
|
+ <div class="nums">
|
|
|
+ <span v-if="points.total>=0">{points.total}</span>个
|
|
|
+<!-- <img src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/portraitRecord/image/help-p.png?v={{Msg "seo" "version"}}' @click="helpTiped" alt="">-->
|
|
|
+ </div>
|
|
|
+ <div class="btns flex">
|
|
|
+ <span>当月附件下载余额</span>
|
|
|
+ <!-- <van-button round type="primary" @click="setBook">立即充值</van-button>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rights-box" :class="{'subscribe-box': showSubscribeBox }">
|
|
|
+ <div class="subscribe-title" v-if="showSubscribeBox">
|
|
|
+ <template v-if="userPower.vipStatus > 0">
|
|
|
+ <img src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/collection/image/subscribe-icon.png?v={{Msg "seo" "version"}}' alt="">
|
|
|
+ <span>
|
|
|
+ <strong>您当前是超级订阅用户</strong>，您每月享有 <em>10</em> 个附件下载权益。每月1号上余额清零重新计算。本月剩余 <em>{ accountInfo.number3 || 0} </em> 个权益。
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <span class="free-title" v-if="userPower.isFree">
|
|
|
+ <strong>您当前是免费用户</strong>，可免费下载附件 <em>{ accountInfo.number4 || 0}</em> 次。
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="box-container">
|
|
|
+ <div class="box-title">不够用这么办？你有以下两种途径补充余额</div>
|
|
|
+ <div class="box-content">
|
|
|
+ <template v-if="!userPower.isFree">
|
|
|
+ <!-- 大会员-->
|
|
|
+ <div class="p-row upgrade-row" v-if="userPower.memberStatus">
|
|
|
+ <p class="row-top">
|
|
|
+ <span><em>1</em>、服务升级</span>
|
|
|
+ <span class="handle-text" @click="consultKf">咨询客服 <em class="j-icon icon-arrow-right"></em></span>
|
|
|
+ </p>
|
|
|
+ <p>您当前是大会员用户，目前不享有附件下载权益。您可以联系客服进行服务升级后获得。</p>
|
|
|
+ </div>
|
|
|
+ <!--非大会员-->
|
|
|
+ <div class="p-row upgrade-row" v-else>
|
|
|
+ <p class="row-top">
|
|
|
+ <span><em>1</em>、服务升级</span>
|
|
|
+ <span class="handle-text" @click="knowMore">了解详情 <em class="j-icon icon-arrow-right"></em></span>
|
|
|
+ </p>
|
|
|
+ <p>您可购买大会员，获得每个月不限量附件下载。</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="p-row recharge-row" v-if="!userPower.memberStatus">
|
|
|
+ <p class="row-top">
|
|
|
+ <span>
|
|
|
+ <em>{userPower.isFree ? 1 : 2}</em>、充值</span><span class="handle-text" @click="setBook">去充值 <em class="j-icon icon-arrow-right"></em>
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p>您购买了附加下载包，当月有效。本月剩余权益 <em class="highlight-color">{ accountInfo.number1 || 0 }</em> 个权益。</p>
|
|
|
+ </div>
|
|
|
+ <div class="p-row exchange-row">
|
|
|
+ <p class="row-top">
|
|
|
+ <span>
|
|
|
+ <em>{ (userPower.memberStatus || userPower.isFree) ? 2 : 3 }</em>
|
|
|
+ 、兑换</span><span class="handle-text" @click="exchangeHandle">去兑换 <em class="j-icon icon-arrow-right"></em>
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p>您当月剩余剑鱼币兑换附件下载权益 <em class="highlight-color">{ accountInfo.number2 || 0 }</em> 个。</p>
|
|
|
+ <p><em>350</em> 剑鱼币可兑换查看一个附件下载权益。兑换后30天内有效。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<div class="p1-date">
|
|
|
<div class="d-box flex">
|
|
|
使用记录
|
|
|
@@ -157,6 +308,7 @@
|
|
|
{{include "/big-member/commonjs.html"}}
|
|
|
<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/public/js/china-map-data.js?v={{Msg "seo" "version"}}'></script>
|
|
|
<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/file-pack/js/index.js?v={{Msg "seo" "version"}}'></script>
|
|
|
+<!-- <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/file-pack/js/rights-box.js?v={{Msg "seo" "version"}}'></script>-->
|
|
|
{{include "/common/baiducc.html"}}
|
|
|
</body>
|
|
|
|
zhangsiya
