我的卡包，绑定就诊卡页面对接

html/payment/css/payment.css

@@ -1,6 +1,10 @@
.bgc-f2f3f4{
	background-color: #f2f3f4;
}
.bgc-000{
	background-color: #000000;
}
.c-ff9526{
	color: #ff9526;
}

html/payment/html/bindingCard.html

@@ -22,19 +22,19 @@
		<div id="app" v-cloak>
			<div class="bgc-fff c-border-tb mt10 flex ptb5 pr15">
	            <div class="f_s_0 c-f17 c-333 c-t-center c-border-r" style="width: 80px;line-height: 32px;">就诊卡</div>
	            <div class="f_g_1"><input type="text" placeholder="输入就诊卡号" class="input-bcard w-calc-220  c-333"/></div>
	            <div class="f_s_0 jiaoyanBtn">校验身份</div>
	            <div class="f_g_1"><input type="text" v-model="cardNo" placeholder="输入就诊卡号" class="input-bcard w-calc-220  c-333"/></div>
	            <div class="f_s_0 jiaoyanBtn" @click="getData">校验身份</div>
		    </div>
		    <div class="bgc-fff c-border-tb mt10 flex ptb5 pr15  c-999">
		            <div class="f_s_0 c-f17 c-t-center c-border-r" style="width: 80px;line-height: 32px;">姓&emsp;名</div>
		            <div class="f_g_1"><input type="text" placeholder="就诊人姓名" class="input-bcard"readonly="readonly"/></div>
		            <div class="f_g_1"><input type="text"  v-model="data.name" placeholder="就诊人姓名" class="input-bcard"readonly="readonly"/></div>
		    </div>
		    <div class="bgc-fff c-border-b flex ptb5 pr15  c-999">
	            <div class="f_s_0 c-f17 c-t-center c-border-r" style="width: 80px;line-height: 32px;">手机号</div>
	            <div class="f_g_1"><input type="text" placeholder="办卡手机号" class="input-bcard" readonly="readonly"/></div>
	            <div class="f_g_1"><input type="text"  v-model="data.mobile" placeholder="办卡手机号" class="input-bcard" readonly="readonly"/></div>
		    </div>
		    <div class="p30">
				<button type="button" class="c-btn-4dcd70 c-btn-arc c-btn-full  c-btn-big" style="height: 45px;">立即添加</button>				
				<button v-show="btnshow" type="button" class="c-btn-4dcd70 c-btn-arc c-btn-full  c-btn-big" style="height: 45px;"  @click="addCard">立即添加</button>				
				<div class="pt20 c-333 c-f14">
					<img src="../images/tishi_icon.png" width="13" class="mr10"/>温馨提示:
					<div class="c-999 mt15">

html/payment/html/patientIDCards-pay.html

@@ -13,6 +13,7 @@
		<link rel="shortcut icon" href="../../../favicon.ico">
		<link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/cross.ui.css" />
		<link rel="stylesheet" type="text/css" href="../../../widget/artDialog/6.0.5/css/ui-dialog.min.css">
		<link rel="stylesheet" href="../css/payment.css" />
	</head>
@@ -21,52 +22,48 @@
			<div class="plr15">
				<div class="bgc-fff mt10 jiuzhen c-radius-5">
					<div class="c-f14 ptb10 pl10">
						<span class="c-333333">DC1326898&nbsp;(张峰)&nbsp;</span>
						<span class="c-4dcd70">默认</span>
						<span style="float: right;">
						<span class="card-icon">就诊</span>
						</span>
						<span class="c-333333">{{data.cardNo}}&nbsp;({{data.name}})&nbsp;</span>
						<span v-if="data.isDefault==1" class="c-4dcd70">默认</span>
						<span class="card-icon" style="float: right;">就诊</span>
					</div>
					<div class="pb10 c-t-center c-ff9526 c-f25">
						￥100.86 元
						￥{{data.cardMoney}}元
					</div>
					<div class="pb10 c-999 pr10 c-f12 c-t-right createdata">
						2018-09-17创建
						{{data.createDate}} 创建
					</div>
					<div>
						<button type="button" class="c-btn-full c-btn-big" style="height: 45px;">门诊缴费</button>
						<button type="button" class="c-btn-full c-btn-big" style="height: 45px;" @click="gotoPay(1)">门诊缴费</button>
					</div>
				</div>
				<div class="bgc-fff mt10 zhuyuan c-radius-5">
				<div class="bgc-fff mt10 zhuyuan c-radius-5" v-show="data.inpCardNo">
					<div class="c-f14 ptb10 pl10">
						<span class="c-333333">DC1326898&nbsp;(张峰)&nbsp;</span>
						<span class="c-4dcd70">默认</span>
						<span style="float: right;">
						<span class="card-icon">住院</span>
						</span>
						<span class="c-333333">{{data.cardNo}}&nbsp;({{data.name}})&nbsp;</span>
						<span v-if="data.isDefault==1" class="c-4dcd70">默认</span>
						<span class="card-icon" style="float: right;">住院</span>
					</div>
					<div class="pb10 c-t-center c-ff9526 c-f25">
						￥100.86 元
						￥{{data.cardInpMoney}} 元
					</div>
					<div class="pb10 c-999 pr10 c-f12 c-t-right createdata">
						2018-09-17创建
					<div class="pb10 c-999 pr10 c-f12 c-t-right createdata">						
					</div>
					<div>
						<button type="button" class="c-btn-full c-btn-big" style="height: 45px;">住院缴费</button>
						<button type="button" class="c-btn-full c-btn-big" style="height: 45px;" @click="gotoPay(2)">住院缴费</button>
					</div>
				</div>
			</div>
			<div :class="BtnClass" class="c-100">
				<div class="pb20 plr30">
					<button type="button" class="c-btn-4dcd70 c-btn-arc c-btn-full  c-btn-big" style="height: 45px;">缴费查询</button>
					<button type="button" class="c-btn-4dcd70 c-btn-arc c-btn-full  c-btn-big" style="height: 45px;" @click="gotoList()">缴费查询</button>
				</div>
				<div class="pb20 mb15 plr30">
					<button type="button" class="c-btn-fff c-btn-full c-btn-arc c-btn-big" style="height: 45px;color:#FF5E6C;">解绑就诊卡</button>
					<button type="button" class="c-btn-fff c-btn-full c-btn-arc c-btn-big" style="height: 45px;color:#FF5E6C;" @click="untieCard()">解绑就诊卡</button>
				</div>
			</div>
		</div>
		<script src="../../../js/post.js"></script>
		<script src="../../../widget/artDialog/6.0.5/js/dialog-plus.js"></script>
		<script src="../js/patientIDCards-pay.js"></script>
	</body>

html/payment/html/patientIDCards.html

@@ -13,41 +13,44 @@
		<link rel="shortcut icon" href="../../../favicon.ico">
		<link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/cross.ui.css" />
		<link rel="stylesheet" type="text/css" href="../../../widget/artDialog/6.0.5/css/ui-dialog.min.css">
		<link rel="stylesheet" href="../css/payment.css" />		
	</head>
	<body class="bgc-f2f3f4">
		<div id="app" v-cloak>
			<div class="c-f14 c-fff ptb10 bgc-000 pl15"><img src="../images/tishi02_icon.png" width="13" class="mr10"/>查看就诊卡信息，快速进行在线缴费</div>
			<div  class="plr15" v-show="length!=0">				
				<div class="bgc-fff mt10 jiuzhen c-radius-20 c-f14">
				<div class="bgc-fff mt10 jiuzhen c-radius-20 c-f14" v-for="(item,i) in dataList" v-key="i"  @click="gotoPay(item.id)">
					<div class="pt12 pb5 pl15">
						<span class="c-333333">DC1326898&nbsp;(张峰)&nbsp;</span>
						<span class="c-333333">{{item.cardNo}}&nbsp;({{item.name}})&nbsp;</span>
						<span  style="float: right;">
							<span class="card-icon c-f14">就诊</span>
						</span>						
					</div>	
					<div class="geduan"></div>
					<div class="pt5 pb10 c-t-center">
						<span class="c-4dcd70"><img src="../images/xuanzhemoren_btn.png" width="22" class="mr5"/>默认</span>
						<span class="c-c8c8c8"><img src="../images/quxiaomoren_btn.png" width="22" class="mr5"/>设为默认</span>
						<span v-if="item.isDefault==1" class="c-4dcd70"><img src="../images/xuanzhemoren_btn.png" width="22" class="mr5"/>默认</span>
						<span v-else class="c-c8c8c8" v-on:click.stop="setDefault(item.id,1)"><img src="../images/quxiaomoren_btn.png" width="22" class="mr5"/>设为默认</span>
					</div>
				</div>
			</div>
			<div class="default-div" v-show="length==0">
				<img src="../images/wushuju.png" width="222"/>
				<div class="c-999 c-f14 pt30">
				<div class="c-999 c-f14 pt30" @click="gotoBindingCard">
					暂无就诊卡，请添加
				</div>
			</div>
			<div :class="BtnClass" class="c-100">	
				<div class="pb20 plr15" style="margin: 0 auto 20px;">					
			<button type="button" class="c-btn-fff c-btn-full c-btn-big" style="height: 45px;color:#999999;"><img src="../images/tianjia_icon.png" width="22" class="mr10"/>添加就诊卡</button>
					<div class="mt10 c-t-center c-c8c8c8 c-f14">还可以添加<span class="c-4dcd70">3</span>张</div>
			<button type="button" class="c-btn-fff c-btn-full c-btn-big" style="height: 45px;color:#999999;" @click="gotoBindingCard"><img src="../images/tianjia_icon.png" width="22" class="mr10"/>添加就诊卡</button>
					<div class="mt10 c-t-center c-c8c8c8 c-f14">还可以添加<span class="c-4dcd70">{{surplus}}</span>张</div>
				</div>	
			</div>
		</div>
		<script src="../../../js/post.js"></script>
		<script src="../../../widget/artDialog/6.0.5/js/dialog-plus.js"></script>
		<script src="../js/patientIDCards.js"></script>
	</body>

html/payment/js/bindingCard.js

@@ -1,21 +1,100 @@
var loading = dialog({
	contentType: 'load',
	skin: 'bk-popup'
});
(function() {
	new Vue({
		el: "#app",
		data: {
			dataList:[],
			code:JSON.parse(localStorage.getItem("wlyyAgent")).uid,
			cardNo:"",
			initdata:{
				name:"",
				mobile:"",
			},
			data:{},
			btnshow:false,
		},
		mounted: function() {
			var vm = this
			checkUserAgent();
			vm.data=vm.initdata
		},
		methods: {
			setMorenDialog:function(){
			//校验就诊卡
			getData:function(){
				var vm=this
				sendPost("patient/card/validByCard", {cardNo:vm.cardNo}, "json", "get",function(){
				 	loading.close();
			    	dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请求失败'}).show();
			        vm.setInit()
			       }, function(res){
			   		loading.close();
			        if(res.status == 200){ 
			        	if(res.data.code==0){			        		
			        		vm.data=res.data
			        		vm.btnshow=true
			        	}else{
			        		 dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.data.message}).show();
			        		 vm.setInit()
			        	}			        	
			        }else{
			            dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'数据获取失败'}).show();
			        	vm.setInit()
			        }
			    })
			},
			//添加就诊卡
			addCard:function(){
				var vm = this
				sendPost("patient/card/bindCard", {cardNo:vm.cardNo,patient:vm.code}, "json", "post",function(){
				 	loading.close();
			    	dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请求失败'}).show();
			        vm.setInit()
			       }, function(res){
			   		loading.close();
			        if(res.status == 200){ 
			        	vm.setMorenDialog(res.data.id)	        	
			        }else{
			            dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();
			        	vm.setInit()
			        }
			    })
			},
			//设置默认弹框
			setMorenDialog:function(id){
				var vm = this				
				dialog({title:'绑定成功', content:'您已添加就诊卡，是否设为默认缴费查询用卡？',okValue: '是', ok: function (){vm.setMoren()}, cancelValue: '否',cancel: function () {} }).showModal();
				dialog({title:'绑定成功', content:'您已添加就诊卡，是否设为默认缴费查询用卡？',okValue: '是', ok: function (){vm.setMoren(id);vm.back()}, cancelValue: '否',cancel: function () {vm.back()} }).showModal();
			},
			setMoren:function(){
			//设置默认
			setMoren:function(id){
				sendPost("/patient/card/defaultOpe", {id:id,isDefault:1}, "json", "post",function(){
		          }, function(res){
	                if(res.status == 200){
	                  dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();
	                }else{
	                  dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'数据获取失败'}).show();
	                }
	            })
				
			},
			//数据置空
			setInit:function(){
				var vm = this
				vm.data=vm.initdata
				vm.btnshow=false
			},
			back:function(){
				setTimeout(function(){
					window.location.href='../../payment/html/patientIDCards.html';
				},2000)
			},
		},
	})
})()
})()
function queryInit(){
//	window.myvue.getData()
}

html/payment/js/patientIDCards-pay.js

@@ -1,15 +1,92 @@
var Request = GetRequest(); 
(function() {
	new Vue({
		el: "#app",
		data: {
			dataList:[],
			cardId:Request.id,
			code:JSON.parse(localStorage.getItem("wlyyAgent")).uid,
			data:{
		        "id": "",
		        "patient": JSON.parse(localStorage.getItem("wlyyAgent")).uid,
		        "hisId": "",
		        "cardNo": "",
		        "name": "",
		        "idCard": "",
		        "mobile": "",
		        "inpCardNo": "",
		        "isDefault": 0,
		        "createDate": "",
		        "cardMoney": "",
		        "cardInpMoney": null
		   },
			BtnClass:"p-fix-bottom-0",
			length:1,
		},
		mounted:function(){
			var vm = this
			vm.setBtnClass()
			checkUserAgent();
			vm.checkType()
		},
		methods: {
			//获取列表数据
			getData:function(){
				var vm=this
				var loading = dialog({
					contentType: 'load',
					skin: 'bk-popup'
				});
				 sendPost("patient/card/getCardInfo", {id:vm.cardId}, "json", "get",function(){
				 	loading.close();
			    	dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请求失败'}).show();
			       }, function(res){
			   		loading.close();
			        if(res.status == 200){ 
			        	vm.data=res.data                  
						if(vm.length>0){
							vm.setBtnClass()				
						}
			        }else{
			          dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'数据获取失败'}).show();
			        }
			    })
			},
			//解绑就诊卡
			untieCard:function(){
				var vm=this	
				dialog({title:'解绑提示', content:'是否确定解绑就诊卡？',okValue: '确定', ok: function (){vm.setuntieCard();}, cancelValue: '取消',cancel: function () {} }).showModal();
			},
			setuntieCard:function(){
				var vm=this	
				sendPost("patient/card/unBindCard", {_method:"DELETE",id:vm.cardId}, "json", "post",function(){
			    	dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请求失败'}).show();
			      }, function(res){
			        if(res.status == 200){ 
			        	dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();
			        	vm.backtoCards()	        	
			        }else{
			            dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();
			        }
			    })
			},
			//跳转去支付
			gotoPay:function(paytype){ //paytype 1为门诊缴费  2为住院缴费
				var vm=this
				window.location.href='../../payment/html/payment.html?id='+vm.cardId+'&paytype='+paytype;				
			},
			//跳转去缴费查询列表
			gotoList:function(){
				var vm=this
				window.location.href='../../payment/html/paymentList.html?id='+vm.cardId;				
			},	
			//返回我的卡包页面
			backtoCards:function(){
				setTimeout(function(){
					window.location.href='../../payment/html/patientIDCards.html';
				},2000)
			},
			//屏幕高度太矮，下方按钮随页面滚动，反之固定底部
			setBtnClass:function(){
				var vm = this
				var screemH=window.screen.availHeight;	
@@ -18,7 +95,22 @@
					vm.BtnClass="mt20"
				}				
			},
			//判断是否验证登录通过
			checkType:function(){
				var vm=this
				var timer = setInterval(function(){
					if(checktype){
						clearInterval(timer);
						vm.getData()
					}
				},100);
			},
		},
	})
})()
function queryInit(){
	checktype=true
}

html/payment/js/patientIDCards.js

@@ -1,18 +1,71 @@
var checktype=false;
(function() {
	new Vue({
	myvue=new Vue({
		el: "#app",
		data: {
			dataList:[],
			BtnClass:"p-fix-bottom-0",
			length:1,
			length:0,
			code:JSON.parse(localStorage.getItem("wlyyAgent")).uid,
			surplus:5,
		},
		mounted:function(){
			var vm = this
			if(vm.length>0){
				vm.setBtnClass()				
			}
			checkUserAgent();
			vm.checkType()
		},
		methods: {
			//获取列表数据
			getData:function(){
				var vm=this
				var loading = dialog({
					contentType: 'load',
					skin: 'bk-popup'
				});
				 sendPost("patient/card/getCardList", {patient:vm.code}, "json", "get",function(){
				 	loading.close();
			    	dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请求失败'}).show();
			       }, function(res){
			   		loading.close();
			        if(res.status == 200){ 
			        	vm.dataList=res.data
			            vm.length=vm.dataList.length
		                vm.surplus=5-vm.length	                  
						if(vm.length>0){
							vm.setBtnClass()				
						}
			        }else{
			          dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'数据获取失败'}).show();
			        }
			    })
			},
			//设置默认就诊卡
			setDefault:function(id,isDefault){
				var vm=this
				sendPost("/patient/card/defaultOpe", {id:id,isDefault:isDefault}, "json", "post",function(){
		          }, function(res){
	                if(res.status == 200){
	                  dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();
					  vm.getData()
	                }else{
	                  dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'数据获取失败'}).show();
	                }
	            })
				
			},
			//跳转绑定就诊卡
			gotoBindingCard:function(){
				var vm=this
				if(vm.surplus>0){
					window.location.href='../../payment/html/bindingCard.html';
				}else{
					dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:"最多只能绑定5张就诊卡"}).show();
				}				
			},
			gotoPay:function(id){
				window.location.href='../../payment/html/patientIDCards-pay.html?id='+id;
			},
			//屏幕高度太矮，下方按钮随页面滚动，反之固定底部
			setBtnClass:function(){
				var vm = this
				var screemH=window.screen.availHeight;	
@@ -21,7 +74,21 @@
					vm.BtnClass="mt20"
				}				
			},
			//判断是否验证登录通过
			checkType:function(){
				var vm=this
				var timer = setInterval(function(){
					if(checktype){
						clearInterval(timer);
						vm.getData()
					}
				},100);
			},
		},
	})
})()
function queryInit(){
	checktype=true
}