使用Vue.js和ElementUI实现微信支付-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_65942614/article/details/126336561

这个博客展示了如何在Vue.js应用中结合ElementUI实现微信支付功能。用户点击'支付'按钮后，会显示包含支付二维码的对话框。通过调用微信支付API创建订单并查询支付状态，同时应用中还包括了跨域配置。支付成功后，会显示成功消息并关闭对话框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端
<template>
  <div id="app">
  <el-button type="primary" @click="pay">支付</el-button>
    <el-dialog
        title="收银台"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <div style="text-align: center">
        <p>微信支付{
 {payResult.price}}</p>

      <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin:0px auto">
        <vue-qr
              :text="payResult.codeUrl"
              :margin="0"
              colorDark="red"
              :logoSrc="require('@/assets/logo.png')"
              colorLight="#fff"
              :size="200"
        ></vue-qr>
      </div>
      </div>
    <el-divider></el-divider>
      <div style="font-size: 13px">
        提示:<br>
        支付成功前请勿关闭此页面<br>
        二维码两小时内有效，请及时扫码支付
      </div>
    </el-dialog>

<!--    &lt;!&ndash;渲染组件   渲染到这里&ndash;&gt;-->
<!--    &lt;!&ndash;路由视图  点击首页 通过路径渲染到这里&ndash;&gt;-->
<!--    <router-view/>-->
  </div>
</template>

<script>
import vueQr from "vue-qr"
export default {
  name: 'app',
  data(){
    return{
        orderNo:"c60801fbdd9d45f92d4",
        payResult:{
            price:0.01,
            //借助vue-ur 可以吧二维码的地址转化为图片
            codeUrl:"",
            orderNo: "",
                    },
        codeUrl:"",
        dialogVisible:false,
        timer1:""
    }
  },

  components:{
    vueQr
  },
  methods:{
    //根据订单号查询支付状态
    queryPayStatus(orderNo){
          this.axios.post("/order/queryPayStutus/&#

weixin支付