weixin支付

最新推荐文章于 2024-05-30 11:27:58 发布

小母牛开飞机.

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量1.2k

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_65942614/article/details/126336561

版权

前端
<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/&#