<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.queryCharge(vm.cardCode,vm.chargeType,3) }else{ vm.prompt='错误' } }) .catch(function (error) { vm.prompt='服务器响应缓慢 请耐心等候' vm.queryCharge(vm.cardCode,vm.chargeType,3) }) }else{ this.disables=false } // 确认充值end }, // recharge 函数结束 queryCharge:function(cardCode,chargeType,times){ this.prompt='发起轮询'+times var vms=this setTimeout(function(){ console.log(this)//Window 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.queryCharge(cardCode,chargeType,times) }else{ vms.cancelPost(cardCode,chargeType) } }else{ vms.prompt='错误' } }) },3000) }, // queryCharge 函数结束 cancelPost:function(cardCode,chargeType){ var vms=this this.$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>