147 lines
2.8 KiB
Vue
147 lines
2.8 KiB
Vue
<template>
|
||
<view class="pay-success" v-if="!loading">
|
||
<cu-custom bgColor="" :isBack="true" :class="'bg-' + themeColor.name">
|
||
<block slot="content">支付成功</block>
|
||
</cu-custom>
|
||
<view class="pay-section" :class="'bg-' + themeColor.name">
|
||
<image class="bg" :src="moneyBg"></image>
|
||
<view class="tips-wrapper">
|
||
<text class="iconfont iconxuanzhong2"></text>
|
||
<view class="content">
|
||
<text class="title">充值成功！</text>
|
||
<view class="tip">感谢您的充值</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pay-card">
|
||
|
||
<view class="pay-card-money" >{{moneySymbol}}{{ orderCode }}</view>
|
||
|
||
</view>
|
||
<view class="btn-group">
|
||
<button
|
||
class="confirm-btn"
|
||
@tap="navTo"
|
||
:class="'bg-' + themeColor.name"
|
||
>充值记录</button
|
||
>
|
||
<button
|
||
class="confirm-btn"
|
||
@tap="toHome"
|
||
>返回首页</button
|
||
>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { orderDetail,ordersByCode } from '@/api/userInfo';
|
||
import moment from '@/common/moment';
|
||
import mConstDataConfig from '@/config/constData.config';
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
type: '',
|
||
id: '',
|
||
orderCode: '',
|
||
moneyBg: this.$mAssetsPath.moneyBg,
|
||
moneySymbol: this.moneySymbol,
|
||
orderDetail: {}
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.orderCode = options.money;
|
||
},
|
||
filters: {
|
||
time(val) {
|
||
return moment(val * 1000).format('YYYY-MM-DD HH:mm');
|
||
},
|
||
|
||
|
||
},
|
||
methods: {
|
||
|
||
navTo() {
|
||
let route;
|
||
route = '/pages/user/account/bill?state=2';
|
||
this.$mRouter.push({ route });
|
||
},
|
||
// 返回主页
|
||
toHome() {
|
||
this.$mRouter.reLaunch({ route: '/pages/index/index' });
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $page-color-base;
|
||
}
|
||
.pay-success {
|
||
.pay-section {
|
||
height: 400upx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.bg {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100vw;
|
||
height: 60vw;
|
||
}
|
||
.tips-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: $color-white;
|
||
.iconfont {
|
||
font-size: 132upx;
|
||
margin-right: $spacing-base;
|
||
}
|
||
.content {
|
||
.title {
|
||
font-size: $font-lg + 4upx;
|
||
}
|
||
.tip {
|
||
font-size: $font-sm + 2upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.pay-card {
|
||
width: 90%;
|
||
height: 590upx;
|
||
background-color: $color-white;
|
||
border-radius: 12upx;
|
||
margin: -80upx 5% 0;
|
||
box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.05);
|
||
.pay-card-money {
|
||
text-align: center;
|
||
font-size: $font-lg + 12upx;
|
||
padding: $spacing-base 0;
|
||
color: $color-black;
|
||
font-weight: 500;
|
||
border-bottom: 1upx solid rgba(0, 0, 0, 0.05);
|
||
}
|
||
.item {
|
||
height: 80upx;
|
||
line-height: 80upx;
|
||
margin-left: $spacing-lg;
|
||
color: $font-color-dark;
|
||
.tit {
|
||
color: $font-color-light;
|
||
}
|
||
}
|
||
}
|
||
.btn-group {
|
||
padding-top: 60upx;
|
||
.confirm-btn {
|
||
margin-top: $spacing-lg;
|
||
width: 72%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|