<template>
<div>
<div class="container">
<div><h1>开卡充值</h1></div>
<div class=‘prompt‘>{{prompt}}</div>
<div class="form-group">
<label for="userbarcode">请刷卡</label>
<input type="number" id="cardCode" class="form-control" @keyup.enter="submit" v-model="cardCode" placeholder="请放卡" >
</div>
<div class="form-group">
<div v-if=‘newCard‘>
<div>
<label for="name">开卡用户名</label>
<input id="name" type="text" class="form-control" placeholder="输入姓名" v-model=‘roleName‘>
<label for="phone">开卡电话</label>
<input id="phone" type="number" class="form-control" placeholder="输入电话" v-model=‘phone‘>
<label for="address">地址</label>
<input id="address" type="text" class="form-control" placeholder="输入地址" v-model=‘address‘>
<label for="userbarcode">选择卡片类型</label>
<select class="form-control" id="cardType" v-model="cardType">
<option value="">请选择!</option>
<option v-for=‘item in cardList‘ :value="item.cardType" >{{item.cardType}}</option>
</select>
</div>
</div>
<div v-if=‘newCard || chargeCard‘>
<label for="userbarcode">选择充值类型</label>
<select class="form-control" id="chargeType" v-model="chargeType" >
<option value="">请选择!</option>
<option v-for=‘item in payList‘ :value="item.payWays" >{{item.payWays}}</option>
</select>
<div>
<span>selected1:{{chargeType}}</span>
</div>
<label for="userbarcode">充值金额</label>
<input id="recharge" type="number" class="form-control" v-model=‘money‘ placeholder="输入金额(单位元)">
<div id="alipay_code" v-show=‘showHid‘>
<label for="userbarcode">支付宝付款码</label>
<input id="payCode" type="text" v-model=‘paymentCode‘ class="form-control" name=‘payCode‘ placeholder="选中并扫码">
</div>
<button id="chargeButton" type="button" v-bind:disabled="disables" @click=‘recharge‘ class="btn btn-primary">充值</button>
</div>
<div v-if=‘chargeCard=true‘>
<button id="backCard" type="button" @click=‘rebackCard‘ class="btn btn-primary">退卡</button>
<table class="table">
<caption>用户基本信息</caption>
<thead>
<tr>
<th>卡号</th>
<th>姓名</th>
<th>卡片类别</th>
<th>余额</th>
<th>现金</th>
<th>状态</th>
<th>创建时间</th>
<th>操作时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
<div>
<table class="table">
<caption>用户消费信息</caption>
<thead>
<tr>
<th>项目</th>
<th>收银机</th>
<th>操作</th>
<th>金额</th>
<th>余额</th>
<th>时间</th>
<th>操作人</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: ‘practice‘,
data:function(){
return {
cardCode:‘1234567890‘,
dataCode:‘1234567890‘,
prompt:"",
newCard:false,
chargeCard:false,
disables:false,
money:‘‘,
phone:‘‘,
address:"",
roleName:‘‘,
paymentCode:"",
chargeType:"",
cardType:"",
cardList:[
{cardType:‘测试卡‘},
{cardType:‘正式‘},
],
payList:[
{payWays:‘现金‘},
{payWays:‘微信‘},
{payWays:‘支付宝‘}
]
}
},
computed:{
showHid:function(){
if(this.chargeType==‘微信‘||this.chargeType==‘支付宝‘){
return true
}else{
return false
}
}
},
methods:{
submit:function(){
this.newCard=true
},
recharge:function(){
var data={}
if(this.newCard){
data={
cardCode:this.cardCode,
paymentCode:this.paymentCode,
chargeType:this.chargeType,
money:this.money,
newCard: {
name: this.roleName,
phone: this.phone,
address: this.address,
cardType: this.cardType
}
}
}else{
data={
cardCode:this.cardCode,
money:this.money,
paymentCode:this.paymentCode,
chargeType:this.chargeType,
}
}
//data 赋值完毕
this.disables=true
if(confirm(‘确认充值吗？‘)){
if(this.cardCode!=this.dataCode){
this.prompt="卡号未识别，请重新刷卡 "
return
}
this.prompt=‘正在支付中....‘
console.log(this)
var vm=this
console.log(vm)
this.$http({
method: ‘get‘,
url: ‘aaa.json‘,
data:{
data:data
}
}).then(function (res) {
if(res.data.status==‘success‘){
vm.prompt=‘充值成功‘
setTimeout(function(){
window.location.reload();
},500)
}else if(res.data.status==‘paying‘){
vm.$options.methods.queryCharge(vm.cardCode,vm.chargeType,3,vm)
}else{
vm.prompt=‘错误‘
}
})
.catch(function (error) {
vm.prompt=‘服务器响应缓慢 请耐心等候‘
vm.$options.methods.queryCharge(vm.cardCode,vm.chargeType,3,vm)
})
}else{
this.disables=false
}
// 确认充值end
},
// recharge 函数结束
queryCharge:function(cardCode,chargeType,times,vm){
vm.prompt=‘发起轮询‘+times
var vms=vm
setTimeout(function(){
vms.$http({
method: ‘get‘,
url: ‘query.json‘,
data:{
cardCode:cardCode,
chargeType:chargeType
}
}).then(function (res) {
if(res.data.status==‘success‘){
vms.prompt=‘充值成功‘
setTimeout(function(){
window.location.reload();
},500)
}else if(res.data.status==‘paying‘){
if(times>1){
times--
vms.$options.methods.queryCharge(cardCode,chargeType,times,vms)
}else{
vms.$options.methods.cancelPost(cardCode,chargeType,vms)
}
}else{
vms.prompt=‘错误‘
}
})
},3000)
},
// queryCharge 函数结束
cancelPost:function(cardCode,chargeType,vm){
var vms=vm
vms.$http({
method:‘get‘,
url:‘cancel.json‘,
data:{
cardCode:cardCode,
chargeType:chargeType
}
}).then(function(res){
if(res.data.status==‘close‘){
vms.prompt="轮询完毕 充值不成功"
}else if(res.data.status==‘success‘){
vms.prompt=‘充值成功‘
vms.newCard=false
vms.chargeCard=true
setTimeout(function(){
window.location.reload();
},3000)
}else{
vms.prompt="轮询完毕 充值不成功"
}
})
},
// cancelPost函数结束
rebackCard:function(){
if(confirm(‘确认退卡吗？‘)){
this.$http({
method:‘get‘,
url:‘backCard.json‘,
data:{
cardCode:this.cardCode
}
}).then(function(res){
if(res.data.status==‘success‘){
alert("退卡成功")
window.location.href = "http://localhost:8080/#/practice" + cardCode
}else if(res.data.status==‘error‘){
alert("退卡失败")
}else{
alert(‘退卡失败‘)
}
})
}
}
}
//methods 结束
// watch:{
// question:function(newQuestion){
// this.answer=123
// this.getAnswer()
// }
// },
// methods:{
// getAnswer:function(){
// if(this.question.indexOf(‘?‘)===-1){
// this.answer=‘问题通常需要包含一个中文问号。;-)‘
// return
// }
// this.answer=‘思考中‘
// var vm=this
// this.$http({
// method: ‘get‘,
// baseURL: ‘‘,
// url: ‘http://localhost:8080/static/datas/aaa.json‘,
// })
// .then(function (response) {
// vm.answer = response.data.subjects
// })
// .catch(function (error) {
// vm.answer = ‘错误！API 无法处理。‘ + error
// })
// }
// },
// mounted(){
// var that=this
// this.$http({
// method: ‘get‘,
// url: ‘static/datas/aaa.json‘,
// // data: {
// // // name: ‘virus‘
// // }
// }) .then(function(res){
// // alert(1)
// // console.log(that)//VueComponent
// // console.log(this)//undefined
// that.articles=res.data.subjects
// })
// .catch(function(err){
// console.log(err)
// })
}
</script>
<style scoped>
</style>
