上个小节我们用Swagger测试Web方法，成功的创建了支付订单。那么这节课咱们去前端页面写JS代码，这样就能在前端页面对某个罚款单创建支付订单了。
一、熟悉前端页面
我们在页面上点击交款按钮之后，会显示弹窗页面，弹窗页面会发起Ajax请求调用后端Web方法创建支付订单。支付订单创建成功之后，弹窗页面上会出现二维码。
在amect.vue页面中，已经引入了amect-pay.vue弹窗页面。
<template>
<div>
……
<pay v-if="payVisible" ref="pay" @refreshDataList="loadDataList"></pay>
</div>
</template>
<script>
import Pay from './amect-pay.vue';
export default {
components: { AddOrUpdate, Pay },
……
}
</script>
因为amect-pay.vue弹窗页面内容并不多，所以视图层的标签也很简单。
<template>
<el-dialog title="缴纳罚款" :close-on-click-modal="false" v-model="visible" width="305px" center>
<img :src="qrCode" class="qrcode" v-if="!result" />
<div v-if="result" class="pay-success">
<el-result icon="success" title="付款成功" subTitle="请根据提示进行操作"></el-result>
</div>
<div class="dialog-footer-style">
<el-button type="danger" size="medium" v-if="!result" @click="cancelHandle">取消支付</el-button>
<el-button type="primary" size="medium" v-if="!result" @click="successHandle">支付成功</el-button>
<el-button type="primary" size="medium" v-if="result" @click="closeHandle">关闭窗口</el-button>
</div>
</el-dialog>
</template>
我们看一下弹窗页面的模型层，内容也不复杂。
export default {
data: function() {
return {
visible: false,
dataForm: {
id: null
},
result: false,
qrCode: null
};
},
……
}
二、显示弹窗页面
在罚款页面中有缴纳罚款按钮，点击这个按钮就会显示弹窗页面。
<el-button
type="text"
size="medium"
:disabled="!(scope.row.mine == 'true' && scope.row.status == '未缴纳')"
@click="payHandle(scope.row.id)"
>
交款
</el-button>
创建交款按钮点击事件的回调函数payHandle()，传入的参数是当前罚款记录的主键值。
payHandle: function(id) {
this.payVisible = true;
this.$nextTick(() => {
this.$refs.pay.init(id);
});
},
三、创建支付订单，显示二维码
实现amect-pay.vue页面的init()函数，在函数中我们发起Ajax请求，并且把Base64字符串显示到页面上。
init: function(id) {
let that = this;
that.visible = true;
that.dataForm.id = id;
that.result = false;
that.$nextTick(() => {
//TODO 利用WebSocket接受后端推送的付款结果
that.$http('amect/createNativeAmectPayOrder', 'POST', { amectId: id }, true, function(resp) {
that.qrCode = resp.qrCodeBase64;
});
});
},