<template>
<div class="wrap">
<loading v-if="loadding"></loading>
<div class="billWrap">
<div class="bankWrap">
<div style="display: inline-block;">
<svg class="iconBank" aria-hidden="true">
<use :xlink:href="'#icon-' + data.bank_logo_id"></use>
</svg>
<span class="bankName">{{data.repay_bank_name}}</span>
</div>
</div>
<div class="money" v-text="data.amount"></div>
<div :class="textColor(orderStatus[data.order_status])" v-text="orderStatus[data.order_status]"></div>
<ul class="detailUl">
<li class="detailLi" v-if="ifBlock">
<span>付款方式</span>
<span>
{{list.issue_bank_name}}
({{payStyle}})
<!--招商银行(0875)-->
</span>
</li>
<li class="detailLi">
<span>还款说明</span>
<span>信用卡还款</span>
</li>
<li class="detailLi">
<span>还款到</span>
<span>{{data.repay_bank_name}}({{bankNum}})</span>
</li>
<li class="detailLi">
<span>创建时间</span>
<span v-text="data.create_time"></span>
</li>
<li class="detailLi">
<span>订单号</span>
<span>{{data.order_no}}</span>
</li>
</ul>
</div>
<!--<button class="complete">确认支付</button>-->
</div>
</template>
<script>
import loading from './loading.vue'
export default{
components:{loading},
data(){
return{
data: {},
list:{},
ifBlock:true,
orderStatus:'',
bankNum:'',
payStyle:'',
loadding:true,
pay_order_no:'',
orderStatus:['待支付','还款中','还款成功','还款失败','退款中','退款失败','退款成功','订单关闭','还款中'],
// payStatus:['待支付','支付中','支付成功','支付失败']
}
},
// mounted(){
// this.btnActive();
// },
//
created: function() {
this.loginInf();
this.getData();
},
methods:{
//按钮点击状态
// btnActive(){
// var btn=document.querySelector(".complete");
// btn.ontouchstart=function(){
// this.className="complete completeTouch";
// }
// btn.ontouchend=function(){
// this.className="complete";
// }
// },
//订单状态颜色
textColor(order_status){
var str = order_status;
if( str == '还款成功' || str == '退款成功' || str == '订单关闭' ){ //成功的
return 'greyStatus'
}else if( str == '还款失败' || str == '退款失败' ){ //失败的
return 'redStatus'
}else{
return 'blueStatus' //其他状态
}
//还款成功 退款成功 订单关闭grey
//还款失败 退款失败red
//还款中 退款中blue
//待支付blue
//等待退款blue
},
loginInf() { //登录
var ajaxUrl = "/payment/login";
this.$api_post({
url: ajaxUrl,
data: {
login_token: '964d02b21ebe498bab5628c920ed9bd9',
sign: 'f8ca9ebd1e1895674658be705f0fcbfc'
}
})
},
//获取详情信息
getData(){
this.$api_post({
url:'/order/getCreditCardOrderDetail',
data:{
order_id: this.$route.query.id
// order_id:13
},
callback:(res)=> {
this.loadding = false;
this.data = res.data;
//给还款方式那个方法传数据
this.getStyleData(res.data.pay_order_no)
//还款到某银行 截取银行卡号后四位
var str=res.data.repay_bank_card_no
this.bankNum=str.substr(-4,4);
// 判断付款方式是否显示 如果返回数据是空 还款方式那一行不显示
var sta=res.data.pay_status
if ( sta== 0) {
this.ifBlock=false;
} else{}
if (res.code=='00') {
}else{
alert(res.msg)
}
},
errorback:(res)=>{
this.loadding = false;
//console.log("接口出错了，请求无反应")
if(this.num <= 3){ //请求最多3次
this.num +=1; //错误一次加1
this.getData(); //调用本身方法
}else{
this.$router.push({path:'/error404'})
}
}
})
},
//详情里付款方式单独请求另一个借口
getStyleData(a){
this.$api_post({
url:'/payment/payorderinfo',
data:{
pay_order_no:a
},
callback:(res)=> {
this.loadding = false;
this.list = res.data
//还款方式 截取银行卡号后四位
var strs=res.data.account_number_name
this.payStyle=strs.substr(-4,4);
if (res.code=='00') {
}else{
alert(res.msg)
}
},
errorback:(res)=>{
this.loadding = false;
//console.log("接口出错了，请求无反应")
if(this.num <= 3){ //请求最多3次
this.num +=1; //错误一次加1
this.getData(); //调用本身方法
}else{
this.$router.push({path:'/error404'})
}
}
})
}
}
}
</script>
<style>
.billWrap{
background: #fff;
padding-bottom: 0.1rem;
}
.bankWrap{
text-align: center;
line-height: 0.32rem;
margin: 0rem auto 0.4rem;
padding-top: 0.77rem;
}
.iconBank{
width: 0.4rem;
height: 0.4rem;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
float: left;
}
.bankName{
font-size: 0.32rem;
color: #333;
float: left;
margin-left: 0.15rem;
line-height: 0.4rem;
}
.money{
font-size: 0.66rem;
line-height: 0.66rem;
color: #333333;
text-align: center;
}
.blueStatus{
color: #4498e6;
font-size: 0.3rem;
text-align: center;
margin: 0.34rem auto 0.48rem;
}
.greyStatus{
color: #bcbcbc;
font-size: 0.3rem;
text-align: center;
margin: 0.34rem auto 0.48rem;
}
.redStatus{
color: #f00;
font-size: 0.3rem;
text-align: center;
margin: 0.34rem auto 0.48rem;
}
.detailLi{
font-size: 0.3rem;
width: 6.9rem;
height: 0.88rem;
line-height: 0.88rem;
margin: 0rem auto;
}
.detailLi span:nth-child(1){
float: left;
color: #8c8c8c;
}
.detailLi span:nth-child(2){
float: right;
color: #333333;
}
.complete{
width: 6.9rem;
height: 0.88rem;
font-size: 0.36rem;
color: #ffffff;
background: #0190DC;
border-radius: 0.1rem;
border: 0rem none;
margin: 0.4rem auto 0rem;
display: block;
}
.completeTouch{
background: #0181d2;
}
</style>
