123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- <!-- 充值失败页面 -->
- <template>
- <rechargeResult :rechargeData="rechargeData"></rechargeResult>
- </template>
- <script>
- import rechargeResult from "@/components/recharge_result.vue";
- export default {
- components: {
- rechargeResult,
- },
- data() {
- return {
- rechargeData:{
- resule:'fail',
- icon:getApp().globalData.imgUrl+'recharge_fail.png',
- title:'充值失败',
- detail:[{
- key: 'amount',
- name:'交易金额',
- value:'',
- },{
- key: 'method',
- name:'交易方式',
- value:'支付宝',
- },{
- key: 'time',
- name:'交易时间',
- value:'2019-09-05 10:55:47',
- },{
- key: 'order_sn',
- name:'交易单号',
- value:'54243241324324',
- },{
- key: 'trade_no',
- name:'交易流水号',
- value:'324324324324324',
- },]
- },
- }
- },
- onLoad(options){
- let tmp_data = this.rechargeData.detail;
- tmp_data.map((item,index)=>{
- if(item.key == 'amount'){
- item.value = '¥'+options.total_amount;
- }else if(item.key == 'method'){
- item.value = options.method.indexOf('alipay')>-1?'支付宝':'微信';
- }else if(item.key == 'time'){
- item.value = options.timestamp;
- }else if(item.key == 'order_sn'){
- item.value = options.order_sn;
- }else if(item.key == 'trade_no'){
- item.value = options.trade_no;
- }
- });
- },
- methods: {
- }
- }
- </script>
- <style lang="scss">
- page {
- background: $bg-color-split;
- .container {
- width: 750rpx;
- height: 100vh;
- .top_bg {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- width: 750rpx;
- height: 533rpx;
- background-size: contain;
- z-index: 0;
- }
- .top_content {
- width: 100%;
- .nav {
- width: 100%;
- padding: 20rpx;
- height: 90rpx;
- position: relative;
- margin-bottom: 40rpx;
- .iconfont {
- position: absolute;
- font-size: 26rpx;
- left: 20rpx;
- top: 37rpx;
- color: #fff;
- }
- .title {
- color: #fff;
- font-size: 36rpx;
- }
- }
- .detail {
- width: 670rpx;
- background: #fff;
- box-shadow: 0px 0px 20px 0px rgba(86, 86, 86, 0.15);
- border-radius: 10rpx;
- z-index: 1;
- padding: 30rpx 30rpx 50rpx;
- .result_icon {
- width: 146rpx;
- height: 146rpx;
- margin-top: 60rpx;
- }
- .result {
- color: $main-third-color;
- font-size: 28rpx;
- width: 100%;
- text-align: center;
- border-bottom: 1rpx solid rgba(0,0,0,.1);
- padding-bottom: 50rpx;
- }
- .item {
- width: 100%;
- color: $main-third-color;
- font-size: 26rpx;
- margin-top: 30rpx;
- }
- }
- }
- .operate {
- width: 670rpx;
- height: 88rpx;
- margin-bottom: 40rpx;
- background: linear-gradient(-90deg, rgba(252, 29, 28, 1) 0%, rgba(255, 122, 24, 1) 100%);
- box-shadow: 0px 3rpx 20rpx 0px rgba(252, 30, 28, 0.26);
- border-radius: 44rpx;
- color: #fff;
- font-size: 36rpx;
- }
- }
- }
- </style>
|