上个小节我们用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>
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14

因为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>
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13

我们看一下弹窗页面的模型层，内容也不复杂。

export default {
    data: function() {
        return {
            visible: false,
            dataForm: {
                id: null
            },
            result: false,
            qrCode: null
        };
    },
    ……
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13

二、显示弹窗页面

在罚款页面中有缴纳罚款按钮，点击这个按钮就会显示弹窗页面。

<el-button
    type="text"
    size="medium"
    :disabled="!(scope.row.mine == 'true' && scope.row.status == '未缴纳')"
    @click="payHandle(scope.row.id)"
>
    交款
</el-button>
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8

创建交款按钮点击事件的回调函数payHandle()，传入的参数是当前罚款记录的主键值。

payHandle: function(id) {
    this.payVisible = true;
    this.$nextTick(() => {
        this.$refs.pay.init(id);
    });
},
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6

三、创建支付订单，显示二维码

实现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;
        });
    });
},
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12