信用卡（完）

<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>

　　

转载于:https://www.cnblogs.com/ourLifes/p/7986405.html