上节课我们用swagger调试后端代码，可以主动查询到付款结果。那么这节课咱们把前端页面的JS代码给写一下，让前端页面发起Ajax请求查询付款结果。

一、熟悉前端页面

在amect-pay.vue弹窗页面上有三个按钮，但是这三个按钮不能同时显示。

<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>
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5

二、编写JS代码

刚才看到的三个按钮，它们的点击事件回调函数，需要我们声明一下。

cancelHandle: function() {
    this.visible = false;
},
successHandle: function() {
    let that = this;
    that.visible = false;
    that.$http('amect/searchNativeAmectPayResult', 'POST', { amectId: that.dataForm.id }, true, function(resp) {
        that.$emit('refreshDataList');
    });
},
closeHandle: function() {
    this.visible = false;
    this.$emit('refreshDataList');
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14