信用卡还款项目

订单详情页 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{
		 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;
		 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{
		 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>