cnblogs -- load() name cli url conf sub ces

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

Vue-開卡充值 -輪詢