|
@@ -1,17 +1,26 @@
|
|
|
<import name="x-page" src="../../components/page/page.ux"></import>
|
|
|
<template>
|
|
|
<div class="consume-record__wrap">
|
|
|
- <div class="stack" style="background-color: #ff8b63">
|
|
|
+ <div class="stack" style="background-color: #ff8b63" if={{activity}}>
|
|
|
<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>
|
|
|
+ <text class="promotion-title">活动时间:{{activity.startTime.substring(0,10)}} 至 {{activity.endTime.substring(0,10)}}</text>
|
|
|
+ <div class="charge-item {{currentIdx==$idx?'charge-on':''}}" for="{{activity.products}}" @click="chooseItem($item,$idx)">
|
|
|
+ <block if="{{$item.type=='YEAR_ORDER'}}">
|
|
|
+ <text class="title"><span>365包年</span></text>
|
|
|
+ <text class="desc">全站小说免费阅读</text>
|
|
|
+ </block>
|
|
|
+ <block elif="{{$item.type=='QUARTER'}}">
|
|
|
+ <text class="title"><span>98元包季</span></text>
|
|
|
+ <text class="desc">全站小说免费阅读</text>
|
|
|
+
|
|
|
+ </block>
|
|
|
+ <block else>
|
|
|
+ <text class="title">充<span>{{$item.price}}元</span>得<span>{{$item.total}}书币</span></text>
|
|
|
+ <text class="desc">多得{{$item.given}}书币</text>
|
|
|
+ </block>
|
|
|
</div>
|
|
|
+
|
|
|
<text class="charge-button" @click="wantCharge">
|
|
|
立即充值
|
|
|
</text>
|
|
@@ -23,53 +32,169 @@
|
|
|
<text>3.活动期间不限充值次数</text>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="mask" show={{showPay}}>
|
|
|
+ <!-- <div class="loading-wrap" if="showLoading">
|
|
|
+ <div class="loading-content">
|
|
|
+ <progress type="circular"></progress>
|
|
|
+ <text class="loading-text">{{loadingText}}</text>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="mask" if={{showPay}} @click="closeMask">
|
|
|
<div class="pop-pay">
|
|
|
<div class="title-pay"><text class="index"></text><text>支付方式</text>
|
|
|
- <image src="../../assets/imgs/close.png"></image>
|
|
|
+ <image src="../../assets/imgs/close.png" @click="closeMask"></image>
|
|
|
</div>
|
|
|
- <div class="pay-item">
|
|
|
+ <div class="pay-item" @click="changePayType(0)" if="{{activity.payChannels.wechat=='1'}}">
|
|
|
<div class="item-left">
|
|
|
<image src="../../assets/imgs/wechat.png"></image><text>微信支付</text>
|
|
|
</div>
|
|
|
- <image src="../../assets/imgs/pay_checked.png" class="checked"></image>
|
|
|
+ <image src="../../assets/imgs/pay_checked.png" class="checked" if={{!payType}}></image>
|
|
|
+ <image src="../../assets/imgs/rank_grey.png" class="checked" if={{payType}}></image>
|
|
|
</div>
|
|
|
- <div class="pay-item">
|
|
|
+ <div class="pay-item" @click="changePayType(1)" if="{{activity.payChannels.ali=='1'}}">
|
|
|
<div class="item-left">
|
|
|
<image src="../../assets/imgs/zfb.png"></image><text>支付宝支付</text>
|
|
|
</div>
|
|
|
- <image src="../../assets/imgs/rank_grey.png" class="checked"></image>
|
|
|
+ <image src="../../assets/imgs/rank_grey.png" class="checked" if={{!payType}}></image>
|
|
|
+ <image src="../../assets/imgs/pay_checked.png" class="checked" if={{payType}}></image>
|
|
|
</div>
|
|
|
- <text class="charge-now">sdasdasd asd as</text>
|
|
|
+ <text class="charge-now" @click="goPay">确认充值</text>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
|
|
|
import { configWxPay, configAliPay } from "../../helper";
|
|
|
-import { getAcitivity } from "../../api/index";
|
|
|
+import { getAcitivity, getUserInfo, checkWxOrder } from "../../api";
|
|
|
import { getAppConfig, getToken } from '../../api/utils';
|
|
|
+import router from '@system.router';
|
|
|
+import prompt from '@system.prompt';
|
|
|
+
|
|
|
export default {
|
|
|
+ public: {
|
|
|
+ token: '',
|
|
|
+ send_order_id: '',
|
|
|
+ },
|
|
|
private: {
|
|
|
- showPay:false,
|
|
|
- activity:null
|
|
|
+ showPay: false,
|
|
|
+ activity: null,
|
|
|
+ payType: 0,
|
|
|
+ currentProduct: null,
|
|
|
+ currentIdx:0,
|
|
|
+ showLoading: false,
|
|
|
},
|
|
|
onInit() {
|
|
|
console.log('sssss')
|
|
|
//getAppConfig(this);
|
|
|
- this.getAcitvy();
|
|
|
- },
|
|
|
- async getAcitvy(){
|
|
|
- let token = await getToken();
|
|
|
- let activity = await getAcitivity('780a71bfa53bf1940903e070ec639113');
|
|
|
+ this.getUserInfo();
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.getAcitvy();
|
|
|
+ },1000)
|
|
|
|
|
|
+
|
|
|
+ },
|
|
|
+ changePayType(type,evt) {
|
|
|
+ evt.stopPropagation();
|
|
|
+ this.payType = type;
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ closeMask() {
|
|
|
+ this.showPay = false;
|
|
|
+ },
|
|
|
+ async getAcitvy() {
|
|
|
+ let activity = await getAcitivity(this.token);
|
|
|
+ this.activity = activity;
|
|
|
+ this.currentProduct = this.activity.products[0];
|
|
|
},
|
|
|
wantCharge() {
|
|
|
+ this.showPay = true;
|
|
|
+ },
|
|
|
+ async getUserInfo() {
|
|
|
+ let userinfo = await getUserInfo();
|
|
|
+ this.send_order_id = userinfo.send_order_id || this.send_order_id;
|
|
|
+ },
|
|
|
+ chooseItem(product,idx) {
|
|
|
+ this.currentProduct = product;
|
|
|
+ this.currentIdx = idx;
|
|
|
+ },
|
|
|
+ async goPay(evt) {
|
|
|
+ evt.stopPropagation();
|
|
|
+ let cur_pay_type = this.payType;
|
|
|
+ let product_id = this.currentProduct.product_id;
|
|
|
+ let ret = null;
|
|
|
+ if (cur_pay_type == 1) {
|
|
|
+ ret = await configAliPay({ product_id: product_id, send_order_id: this.send_order_id });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ ret = await configWxPay({ product_id: product_id, send_order_id: this.send_order_id });
|
|
|
+ }
|
|
|
+ // 成功支付后的回调操作
|
|
|
+ if (ret.code === "9000") this.showWaitingWrap(ret);
|
|
|
+ else this.showToastByCode(ret.code);
|
|
|
+ },
|
|
|
+ checkOrder(order_info) {
|
|
|
+ this.showLoading = true;
|
|
|
+ let { data, order } = order_info;
|
|
|
+ let times = 10;
|
|
|
+ /* this.loadingText = `订单查询中...${times}s`;
|
|
|
+ this.timer = setInterval(async () => {
|
|
|
+ if (times === 0) clearInterval(this.timer), this.showToastByCode("6004");
|
|
|
+ else {
|
|
|
+ times--;
|
|
|
+ this.loadingText = `订单查询中...${times}s`;
|
|
|
+ let fb = await checkWxOrder(order);
|
|
|
+ if (fb && typeof fb === "object") clearInterval(this.timer), this.showToastByCode("9000");
|
|
|
+ }
|
|
|
+ }, 1000); */
|
|
|
+ setTimeout(()=>{
|
|
|
+ if (router.getLength() === 1) {
|
|
|
+ router.replace({ uri: "/views/Index" });
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ router.back()
|
|
|
+ }
|
|
|
+ },2000)
|
|
|
+ },
|
|
|
+ showToastByCode(code) {
|
|
|
+ this.showLoading = false;
|
|
|
+ let msg = "支付成功!";
|
|
|
+ switch (code) {
|
|
|
+ case "9000": (msg = "支付成功!", router.back()); break;
|
|
|
+ case "8000": msg = "订单已提交,请等待结果"; break;
|
|
|
+ case "4000": msg = "订单支付失败!"; break;
|
|
|
+ case "5000": msg = "订单重复!"; break;
|
|
|
+ case "6001": msg = "您已取消支付"; break;
|
|
|
+ case "6002": msg = "网络错误!"; break;
|
|
|
+ case "6004": msg = "请联系客服查询订单"; break;
|
|
|
+ default: msg = "请联系客服" + code;
|
|
|
+ }
|
|
|
+
|
|
|
+ prompt.showToast({ message: msg });
|
|
|
+
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
+ },
|
|
|
+ showWaitingWrap(order) {
|
|
|
+ prompt.showDialog({
|
|
|
+ title: "支付结果",
|
|
|
+ message: "请确认支付结果",
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ text: "已支付",
|
|
|
+ color: "#EF5952"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "重新选择金额",
|
|
|
+ color: "#999"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ success: (data) => {
|
|
|
+ if (data.index === 0) this.checkOrder(order);
|
|
|
+ },
|
|
|
+ cancel: () => {
|
|
|
+ console.log("cancel");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
|
|
|
}
|
|
@@ -99,7 +224,7 @@ export default {
|
|
|
}
|
|
|
.pay-item {
|
|
|
justify-content: space-between;
|
|
|
- padding: 10px 0;
|
|
|
+ padding: 10px 30px;
|
|
|
.checked {
|
|
|
width: 40px;
|
|
|
}
|
|
@@ -116,7 +241,7 @@ export default {
|
|
|
}
|
|
|
.pop-pay {
|
|
|
height: 420px;
|
|
|
- padding: 30px 30px;
|
|
|
+ padding: 30px 0;
|
|
|
background-color: #fff;
|
|
|
border-top-left-radius: 18px;
|
|
|
width: 100%;
|
|
@@ -127,6 +252,8 @@ export default {
|
|
|
margin-bottom: 30px;
|
|
|
border-bottom: 2px solid #ccc;
|
|
|
padding-bottom: 30px;
|
|
|
+ padding-left: 30px;
|
|
|
+ padding-right: 30px;
|
|
|
text {
|
|
|
color: #333;
|
|
|
font-weight: bold;
|
|
@@ -170,6 +297,12 @@ export default {
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+ .promotion-title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 10px 0 20px 0;
|
|
|
+ }
|
|
|
.charge-button {
|
|
|
background-color: #e82b2f;
|
|
|
width: 600px;
|
|
@@ -181,14 +314,17 @@ export default {
|
|
|
margin-top: 20px;
|
|
|
border-radius: 60px;
|
|
|
}
|
|
|
+
|
|
|
.charge-item {
|
|
|
width: 600px;
|
|
|
- background-color: #ffe4c4;
|
|
|
- border: 1px solid #e82b2f;
|
|
|
+ background-color:#fff;
|
|
|
+ border:1px solid #e6e6e6;
|
|
|
color: #333;
|
|
|
flex-direction: column;
|
|
|
text-align: center;
|
|
|
- padding: 10px 0;
|
|
|
+ height: 110px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
border-radius: 10px;
|
|
|
margin: 15px 0;
|
|
|
.title {
|
|
@@ -205,6 +341,34 @@ export default {
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
}
|
|
|
+ .charge-on{
|
|
|
+ background-color: #ffe4c4;
|
|
|
+ border: 1px solid #e82b2f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .loading-wrap {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: rgba(0, 0, 0, .6);
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .loading-content {
|
|
|
+ width: 300px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-color: #fff;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .loading-text {
|
|
|
+ font-size: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|