|
@@ -1,61 +1,74 @@
|
|
|
<import name="x-page" src="../../components/page/page.ux"></import>
|
|
|
<template>
|
|
|
- <div class="consume-record__wrap">
|
|
|
- <div class="stack" style="background-color: #ff8b63">
|
|
|
- <image src="https://cdn-novel.iycdm.com/h5/channelActivity/activity-2020-04-17/20200417173207-bg.jpeg"></image>
|
|
|
- <div class="contain">
|
|
|
- <div class="charge-item">
|
|
|
- <text class="title">冲<span>19</span>得<span>19</span></text>
|
|
|
- <text class="desc">多得3000书币</text>
|
|
|
- </div>
|
|
|
- <div class="charge-item">
|
|
|
- <text class="title">冲<span>19</span>得<span>19</span></text>
|
|
|
- <text class="desc">多得3000书币</text>
|
|
|
- </div>
|
|
|
- <text class="charge-button" @click="wantCharge">
|
|
|
- 立即充值
|
|
|
- </text>
|
|
|
- </div>
|
|
|
- <div class="rule">
|
|
|
- <text class="rule-bd">活动说明</text>
|
|
|
- <text>1.此充值为书币充值,1元=100书币</text>
|
|
|
- <text>2.书币为虚拟物品,一经充值不得退款</text>
|
|
|
- <text>3.活动期间不限充值次数</text>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="mask">
|
|
|
- <div class="pop-pay">
|
|
|
- <div class="title-pay"><text class="index"></text><text>支付方式</text>
|
|
|
- <image src="../../assets/imgs/close.png"></image>
|
|
|
- </div>
|
|
|
- <div class="pay-item">
|
|
|
- <div class="item-left"><image src="../../assets/imgs/wechat.png"></image><text>微信支付</text></div>
|
|
|
- <image src="../../assets/imgs/pay_checked.png" class="checked"></image>
|
|
|
- </div>
|
|
|
- <div class="pay-item">
|
|
|
- <div class="item-left"><image src="../../assets/imgs/zfb.png"></image><text>支付宝支付</text></div>
|
|
|
- <image src="../../assets/imgs/rank_grey.png" class="checked"></image>
|
|
|
- </div>
|
|
|
- <text class="charge-now">确认支付</text>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="consume-record__wrap">
|
|
|
+ <div class="stack" style="background-color: #ff8b63">
|
|
|
+ <image src="https://cdn-novel.iycdm.com/h5/channelActivity/activity-2020-04-17/20200417173207-bg.jpeg"></image>
|
|
|
+ <div class="contain">
|
|
|
+ <div class="charge-item">
|
|
|
+ <text class="title">冲<span>19</span>得<span>19</span></text>
|
|
|
+ <text class="desc">多得3000书币</text>
|
|
|
+ </div>
|
|
|
+ <div class="charge-item">
|
|
|
+ <text class="title">冲<span>19</span>得<span>19</span></text>
|
|
|
+ <text class="desc">多得3000书币</text>
|
|
|
+ </div>
|
|
|
+ <text class="charge-button" @click="wantCharge">
|
|
|
+ 立即充值
|
|
|
+ </text>
|
|
|
+ </div>
|
|
|
+ <div class="rule">
|
|
|
+ <text class="rule-bd">活动说明</text>
|
|
|
+ <text>1.此充值为书币充值,1元=100书币</text>
|
|
|
+ <text>2.书币为虚拟物品,一经充值不得退款</text>
|
|
|
+ <text>3.活动期间不限充值次数</text>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mask" show={{showPay}}>
|
|
|
+ <div class="pop-pay">
|
|
|
+ <div class="title-pay"><text class="index"></text><text>支付方式</text>
|
|
|
+ <image src="../../assets/imgs/close.png"></image>
|
|
|
+ </div>
|
|
|
+ <div class="pay-item">
|
|
|
+ <div class="item-left">
|
|
|
+ <image src="../../assets/imgs/wechat.png"></image><text>微信支付</text>
|
|
|
+ </div>
|
|
|
+ <image src="../../assets/imgs/pay_checked.png" class="checked"></image>
|
|
|
+ </div>
|
|
|
+ <div class="pay-item">
|
|
|
+ <div class="item-left">
|
|
|
+ <image src="../../assets/imgs/zfb.png"></image><text>支付宝支付</text>
|
|
|
+ </div>
|
|
|
+ <image src="../../assets/imgs/rank_grey.png" class="checked"></image>
|
|
|
+ </div>
|
|
|
+ <text class="charge-now">sdasdasd asd as</text>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { } from "../../api/index";
|
|
|
+
|
|
|
import { configWxPay, configAliPay } from "../../helper";
|
|
|
+import { getAcitivity } from "../../api/index";
|
|
|
+import { getAppConfig, getToken } from '../../api/utils';
|
|
|
export default {
|
|
|
- private: {
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- onInit() {
|
|
|
-
|
|
|
- },
|
|
|
- wantCharge() {
|
|
|
+ private: {
|
|
|
+ showPay:false,
|
|
|
+ activity:null
|
|
|
+ },
|
|
|
+ onInit() {
|
|
|
+ console.log('sssss')
|
|
|
+ //getAppConfig(this);
|
|
|
+ this.getAcitvy();
|
|
|
+ },
|
|
|
+ async getAcitvy(){
|
|
|
+ let token = await getToken();
|
|
|
+ let activity = await getAcitivity('780a71bfa53bf1940903e070ec639113');
|
|
|
+
|
|
|
+ },
|
|
|
+ wantCharge() {
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
|
@@ -73,34 +86,34 @@ export default {
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
- z-index: 2;
|
|
|
- .charge-now{
|
|
|
- width: 450px;
|
|
|
- height:80px;
|
|
|
- margin: 20px auto 0;
|
|
|
- border-radius:40px;
|
|
|
- background-color: #FF6200;
|
|
|
- font-size: 28px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .pay-item{
|
|
|
- justify-content: space-between;
|
|
|
- padding:10px 0;
|
|
|
- .checked{
|
|
|
- width: 40px;
|
|
|
- }
|
|
|
- .item-left{
|
|
|
- image{
|
|
|
- width: 60px;
|
|
|
- }
|
|
|
- text{
|
|
|
- font-size:28px;
|
|
|
- font-weight: bolder;
|
|
|
- margin-left:26px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ z-index: 2;
|
|
|
+ .charge-now {
|
|
|
+ width: 450px;
|
|
|
+ height: 80px;
|
|
|
+ margin: 20px auto 0;
|
|
|
+ border-radius: 40px;
|
|
|
+ background-color: #ff6200;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .pay-item {
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 0;
|
|
|
+ .checked {
|
|
|
+ width: 40px;
|
|
|
+ }
|
|
|
+ .item-left {
|
|
|
+ image {
|
|
|
+ width: 60px;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bolder;
|
|
|
+ margin-left: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.pop-pay {
|
|
|
height: 420px;
|
|
|
padding: 30px 30px;
|
|
@@ -110,18 +123,18 @@ export default {
|
|
|
flex-direction: column;
|
|
|
border-top-right-radius: 18px;
|
|
|
.title-pay {
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 30px;
|
|
|
- border-bottom: 2px solid #ccc;
|
|
|
- padding-bottom: 30px;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ border-bottom: 2px solid #ccc;
|
|
|
+ padding-bottom: 30px;
|
|
|
text {
|
|
|
color: #333;
|
|
|
font-weight: bold;
|
|
|
font-size: 32x;
|
|
|
- }
|
|
|
- image{
|
|
|
- width: 30px;
|
|
|
- }
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -151,7 +164,7 @@ export default {
|
|
|
}
|
|
|
.contain {
|
|
|
background-color: #fff;
|
|
|
- width: 600px;
|
|
|
+ width: 700px;
|
|
|
padding: 28px;
|
|
|
border-radius: 14px;
|
|
|
flex-direction: column;
|
|
@@ -159,24 +172,24 @@ export default {
|
|
|
align-items: center;
|
|
|
.charge-button {
|
|
|
background-color: #e82b2f;
|
|
|
- width: 500px;
|
|
|
+ width: 600px;
|
|
|
height: 100px;
|
|
|
line-height: 100px;
|
|
|
color: #fff;
|
|
|
font-weight: bold;
|
|
|
text-align: center;
|
|
|
margin-top: 20px;
|
|
|
- border-radius: 20px;
|
|
|
+ border-radius: 60px;
|
|
|
}
|
|
|
.charge-item {
|
|
|
- width: 500px;
|
|
|
+ width: 600px;
|
|
|
background-color: #ffe4c4;
|
|
|
border: 1px solid #e82b2f;
|
|
|
color: #333;
|
|
|
flex-direction: column;
|
|
|
text-align: center;
|
|
|
padding: 10px 0;
|
|
|
- border-radius: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
margin: 15px 0;
|
|
|
.title {
|
|
|
text-align: center;
|