订单详情页 recordDetails.vue
<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">
<span>付款方式</span>
<span>招商银行(0875)</span>
<!------------------------------------------->
</li>
<li class="detailLi">
<span>还款说明</span>
<span>信用卡还款</span>
</li>
<li class="detailLi">
<span>还款到</span>
<span>{{data.repay_bank_name}}({{bankNum(data.repay_bank_card_no)}})</span>
</li>
<li class="detailLi">
<span>创建时间</span>
<span>{{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: {},
orderStatus:'',
loadding:true,
orderStatus:['待支付','还款中','还款成功','还款失败','退款中','退款失败','退款成功','订单关闭','还款中']
}
},
// 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 'grey'
}else if( str == '还款失败' || str == '退款失败' ){ //失败的
return 'red'
}else{
return 'blueStatus' //其他状态
}
//还款成功 退款成功 订单关闭grey
//还款失败 退款失败red
//还款中 退款中blue
//待支付blue
//等待退款blue
},
loginInf() { //登录
var ajaxUrl = "/payment/login";
this.$api_post({
url: ajaxUrl,
data: {
login_token: '7d3baa9317054cb8831340f6de85bb0f',
sign: '3c91ee1d32f2f541bbc34674ac38cea8'
}
})
},
//获取详情信息
getData(){
this.$api_post({
url:'/order/getCreditCardOrderDetail',
data:{
order_id: this.$route.params.id
},
callback:(res)=> {
this.loadding = false;
this.data = res.data
if (res.code=='00') {
//订单状态
// if( typeof(res.data)=='object'){
// var obj={
// '0':'待支付',
// '1':'还款中',
// '2':'还款成功',
// '3':'还款失败',
// '4':'退款中',
// '5':'退款失败',
// '6':'退款成功',
// '7':'订单关闭',
// '8':'还款中',
// }
// this.orderStatus=obj[res.data.order_status]
// }
}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'})
}
}
})
},
//银行卡只显示后四位
bankNum(arg){
if(arg){
return arg.slice(14,18)
}
}
}
}
</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>