346 lines
7.2 KiB
Vue
346 lines
7.2 KiB
Vue
<template>
|
||
<view class="flex-1">
|
||
<!-- <view
|
||
class="flex-row px-24"
|
||
style="height: 88rpx;align-items: center;justify-content: space-between;background: linear-gradient(88deg, #fad2d2 0%, #fae3d2 51%, #fae3d2 100%);"
|
||
>
|
||
<view style="width: 50rpx;flex-center" @click="getkActivity">
|
||
<u-icon name="/static/icon/arrowRight.png" size="48rpx" />
|
||
</view>
|
||
<text class="title"> 充值中心 </text> <view style="width: 50rpx;" />
|
||
</view> -->
|
||
<GLoading />
|
||
<GList class="flex-1">
|
||
<view class="header flex-row">
|
||
<view class="flex-1">
|
||
<text class="balance-text"> 账户余额 </text>
|
||
<view class="flex-row mt-14" style="align-items: center;">
|
||
<view class="flex-row flex-center">
|
||
<text class="balance-num"> {{ egold || 0 }} </text>
|
||
<text class="balance-unit"> K币 </text>
|
||
</view>
|
||
|
||
<u-icon
|
||
class="ml-26"
|
||
name="/static/icon/gold.png"
|
||
size="48rpx"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<image
|
||
class="header-img"
|
||
src="@/static/images/gold.png"
|
||
mode="aspectFill"
|
||
/>
|
||
</view>
|
||
<view class="money mb-20">
|
||
<view class="moneyList flex-row">
|
||
<view
|
||
v-for="(item, index) in payList"
|
||
:key="index"
|
||
:class="{
|
||
'mr-32': (index + 1) % 2 !== 0,
|
||
active: index === 0
|
||
}"
|
||
@click="payItem(item)"
|
||
class="money-item flex-center mb-40"
|
||
>
|
||
<text class="money-item-one">
|
||
{{ item.price || 0 }}元
|
||
</text>
|
||
<text v-if="item.egold" class="money-item-to">
|
||
{{ item.egold || 0 }}k币
|
||
</text>
|
||
<text
|
||
class="money-item-three"
|
||
:class="{ 'mt-20': !item.egold }"
|
||
>
|
||
{{ item.title || '' }}
|
||
</text>
|
||
<view v-if="item.poster" class="tips flex-center">
|
||
<text class="tips-text"> {{ item.poster }} </text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="payWay flex-row mt-30"
|
||
style="justify-content: space-between;align-items: center;"
|
||
>
|
||
<text class="payWay-text"> 支付方式 </text>
|
||
<view class="flex-row">
|
||
<u-icon
|
||
class="mr-20"
|
||
name="/static/icon/wx.png"
|
||
size="48rpx"
|
||
/>
|
||
<text class="payWay-wx"> 微信支付 </text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="warning">
|
||
<text class="warning-one mb-20"> 温馨提示 </text>
|
||
<text class="warning-to mb-20">
|
||
1、IP和书币属于虚拟商品,一旦购买不作退换,望周知。
|
||
</text>
|
||
<view style="display: inline-block;">
|
||
<span class="warning-to"
|
||
>2、充值后书币到账可能有延迟，15分钟内未到账请联系微信客服，微信号:</span
|
||
>
|
||
<span class="warning-three"> yttfyyl, yt20216688 </span>
|
||
<span class="warning-to"
|
||
>，工作时间:周一到周五9:00-17:00。</span
|
||
>
|
||
</view>
|
||
</view>
|
||
<!-- #ifndef H5 -->
|
||
<u-gap height="80" />
|
||
<!-- #endif -->
|
||
</GList>
|
||
<GTopUpActivity ref="GTopUpActivity" @success="payItem" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { paysetting, payback, getTiktokpay } from '@/api/index.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
payList: [],
|
||
egold: 0,
|
||
backClickIndex: 0,
|
||
sid: ''
|
||
};
|
||
},
|
||
onLoad({ sid }) {
|
||
this.sid = sid;
|
||
},
|
||
onShow() {
|
||
this.backClickIndex = 0;
|
||
this.getPayList();
|
||
const isPopup = uni.getStorageSync('isPopup');
|
||
if (isPopup) {
|
||
payback().then(res => {
|
||
setTimeout(() => {
|
||
this.payList.unshift({ ...res, isback: 1 });
|
||
this.$refs.GTopUpActivity.open(res).then(() => {});
|
||
this.backClickIndex++;
|
||
}, 500);
|
||
});
|
||
} else {
|
||
uni.setStorageSync('isPopup', true);
|
||
}
|
||
},
|
||
onBackPress(e) {
|
||
return false;
|
||
},
|
||
onNavigationBarButtonTap() {
|
||
console.log(111);
|
||
},
|
||
methods: {
|
||
getPayList() {
|
||
paysetting().then(res => {
|
||
this.egold = res.egold;
|
||
this.payList = res.list;
|
||
});
|
||
},
|
||
getkActivity() {
|
||
if (this.backClickIndex === 0) {
|
||
payback().then(res => {
|
||
this.payList.unshift({ ...res, isback: 1 });
|
||
this.$refs.GTopUpActivity.open(res).then(() => {
|
||
console.log(11);
|
||
});
|
||
this.backClickIndex++;
|
||
});
|
||
} else {
|
||
if (this.sid) {
|
||
uni.redirectTo({
|
||
url: '/pages/video/index?sid=' + this.sid
|
||
});
|
||
} else {
|
||
uni.switchTab({
|
||
url: this.path || '/pages/my/index/index'
|
||
});
|
||
}
|
||
}
|
||
},
|
||
payItem(item) {
|
||
getTiktokpay({
|
||
id: item.id,
|
||
isback: item.isback === 1 ? 1 : 0
|
||
}).then(res => {
|
||
console.log(res);
|
||
const orderInfo = {
|
||
order_id: res.order_id,
|
||
order_token: res.order_token
|
||
};
|
||
tt.pay({
|
||
orderInfo,
|
||
service: 5,
|
||
success: res => {
|
||
console.log(res);
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
duration: 2000
|
||
});
|
||
|
||
paysetting().then(res => {
|
||
this.egold = res.egold;
|
||
uni.setStorageSync('isPopup', false);
|
||
const eventChannel = this.getOpenerEventChannel();
|
||
eventChannel.emit('paySuccess', {
|
||
egold:res.egold
|
||
});
|
||
uni.navigateBack();
|
||
});
|
||
|
||
// 支付成功处理逻辑，只有res.code=0时，才表示支付成功
|
||
// 但是最终状态要以商户后端结果为准
|
||
}
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '支付失败,请重新支付',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.header {
|
||
height: 282rpx;
|
||
background: linear-gradient(88deg, #fad2d2 0%, #fae3d2 51%, #fae3d2 100%);
|
||
padding: 40rpx 30rpx;
|
||
}
|
||
.money {
|
||
position: relative;
|
||
background: #ffffff;
|
||
border-radius: 48rpx 48rpx 0px 0px;
|
||
padding: 70rpx 30rpx;
|
||
margin-top: -56rpx;
|
||
z-index: 99;
|
||
}
|
||
.header-img {
|
||
width: 238rpx;
|
||
height: 238rpx;
|
||
}
|
||
.balance-text {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #1a1a1a;
|
||
}
|
||
.balance-num {
|
||
font-size: 62rpx;
|
||
color: #ff002e;
|
||
font-weight: bold;
|
||
}
|
||
.balance-unit {
|
||
font-size: 34rpx;
|
||
color: #1a1a1a;
|
||
margin-left: 10rpx;
|
||
}
|
||
.money-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #1a1a1a;
|
||
margin-bottom: 48rpx;
|
||
}
|
||
.moneyList {
|
||
flex-wrap: wrap;
|
||
}
|
||
.money-item {
|
||
position: relative;
|
||
width: 328rpx;
|
||
height: 194rpx;
|
||
border-radius: 24rpx;
|
||
border: 1rpx solid #aaaaaa;
|
||
&.active {
|
||
background: #ff7246;
|
||
border: 0;
|
||
.money-item-one {
|
||
color: #ffffff;
|
||
}
|
||
.money-item-to {
|
||
color: #ffffff;
|
||
}
|
||
.money-item-three {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.tips {
|
||
position: absolute;
|
||
top: -25rpx;
|
||
left: -2rpx;
|
||
width: 140rpx;
|
||
height: 48rpx;
|
||
background: #ffbd12;
|
||
border-radius: 24rpx 0px 24rpx 0px;
|
||
}
|
||
.tips-text {
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
color: #1a1a1a;
|
||
}
|
||
.money-item-one {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #1a1a1a;
|
||
line-height: 46rpx;
|
||
}
|
||
.money-item-to {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 32rpx;
|
||
margin: 8rpx 0;
|
||
}
|
||
.money-item-three {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #ff779e;
|
||
line-height: 32rpx;
|
||
}
|
||
.payWay-text {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #1a1a1a;
|
||
}
|
||
.payWay-wx {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #28c445;
|
||
}
|
||
.warning {
|
||
background-color: #ffffff;
|
||
padding: 52rpx 30rpx;
|
||
.warning-one {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #1a1a1a;
|
||
}
|
||
.warning-to {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
.warning-three {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #ff779e;
|
||
}
|
||
}
|
||
.title {
|
||
font-size: 40rpx;
|
||
|
||
font-weight: 500;
|
||
color: #130f26;
|
||
}
|
||
</style>
|