<template>
|
<view class="box">
|
<template>
|
<image v-if="info.status ==1" src="/static/ic_paysuccess@2x.png" mode="widthFix" class="icon"></image>
|
<image v-else-if="info.status ==2" src="/static/ic_payfail.png" mode="widthFix" class="icon"></image>
|
<image v-else src="/static/ic_paysuccess@2x.png" mode="widthFix" class="icon"></image>
|
</template>
|
<view class="title" v-if="info.id">{{info.status==0?'等待支付':(info.status==1?'支付成功':'支付失败')}}</view>
|
<view class="title" v-if="!info.id">查询中</view>
|
<view class="info">
|
<view class="info-item">
|
<view class="info-item-label">付款事由</view>
|
<view class="info-item-val">{{info.type==1?'延期款':'车款'}}</view>
|
</view>
|
<view class="info-item">
|
<view class="info-item-label">姓名</view>
|
<view class="info-item-val">{{info.name}}</view>
|
</view>
|
<view class="info-item">
|
<view class="info-item-label">手机号</view>
|
<view class="info-item-val">{{info.phone}}</view>
|
</view>
|
<view class="info-item">
|
<view class="info-item-label">金额</view>
|
<view class="info-item-val">{{((info.money||0)/100).toFixed(2)}}元</view>
|
</view>
|
<view class="info-item">
|
<view class="info-item-label">备注</view>
|
<view class="info-item-val">{{info.remark}}</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
reqsn:'',
|
info:{},
|
url:''
|
};
|
},
|
created() {
|
|
},
|
mounted() {
|
this.url =(window.location.href)
|
this.info={}
|
this.reqsn = this.fetchParams("reqsn",window.location.href)
|
this.loadOrderDetail()
|
},
|
methods:{
|
async loadOrderDetail(){
|
let res = await this.$u.api.orderDetail({id:this.reqsn})
|
if (res.code === 200) {
|
this.info = res.data
|
}
|
},
|
fetchParams(name,url) {
|
name = name.replace(/[\[\]]/g, '\\$&');
|
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
|
results = regex.exec(url);
|
console.log(results)
|
if (!results) return null;
|
if (!results[2]) return '';
|
return decodeURIComponent(results[2].replace(/\+/g, ' '));
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
padding: 0 40rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
.icon {
|
width: 180rpx;
|
height: 180rpx;
|
margin-top: 54rpx;
|
}
|
.title {
|
font-weight: 500;
|
font-size: 36rpx;
|
color: #222222;
|
margin-top: 32rpx;
|
}
|
.info {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background: #F7F7F7;
|
border-radius: 16rpx;
|
margin-top: 80rpx;
|
.info-item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 30rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.info-item-label {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #666666;
|
}
|
.info-item-val {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
}
|
}
|
}
|
</style>
|
