使用 QR code实现微信扫码支付 实测有效

Posted 2023-06-08 0722tian

 

　　直接给代码自己理解

html部分：

 <el-button type="primary"
                                   @click="recibo(scope.row)">确认收货</el-button>



 <div>
        <el-dialog title="付款码"
                   :visible.sync="moneyShow"
                   width="400px"
                   v-if="moneyShow"
                   :close-on-click-modal=true
                   :destroy-on-close=true
                   :show-close=true
                   :modal="true">
          <!-- <div class="moneyShowBox"> -->
          <canvas id="QRCode_header"
                  style="width: 280px; height: 280px;margin: 0 0 0 40px;"></canvas>
          <!-- </div> -->
        </el-dialog>
      </div>

js部分：

 data () 
    return 
      qrUrl: "",
      tabId: 0,
      shopid: 0,
      moneyShow: false,
      orderno: \'\',
      paymentDtoPay: ,
    ;
  ,  


  // 确认付款
    pagamento (row) 
      console.log(row, \'付款信息\');
      this.moneyShow = true
      this.selectOrder()
      let paymentDto = 
        shopId: row.shop.shopId,
        addressId: row.orderId,
        number: row.orderNum
      
      this.paymentDtoPay = paymentDto
　　　　　　//扫码时的接口 传递商品参数
      paymentWx(paymentDto).then(res => 
        this.orderno = res.orderNo
        let opts = 
          errorCorrectionLevel: "H", //容错级别
          type: "png", //生成的二维码类型
          quality: 0.3, //二维码质量
          margin: 0, //二维码留白边距
          width: 280, //宽
          height: 280, //高
          text: res.codeUrl, //二维码内容
          color: 
            dark: "#333333", //前景色
            light: "#fff", //背景色
          ,
        ;

        let msg = document.getElementById("QRCode_header");
        // 将获取到的数据(val)画到msg(canvas)
        QRCode.toCanvas(msg, res.codeUrl, opts, function (error) 
          console.log(msg, \'msg\');
          console.log(opts, \'opts\');
          if (error) 
            console.log("二维码加载失败", error);
           else 
            console.log(\'二维码加载成功\');
          
        )
      )
    ,
    // 监听是否支付
    selectOrder () 
      this.timer = setInterval(async () => 
　　　　　　//参数
        let paymentDto = 
          orderNo: this.orderno,
          shopId: this.paymentDtoPay.shopId,
          addressId: this.paymentDtoPay.addressId,
          number: this.paymentDtoPay.number
        
　　　　　　　　//查询订单是否支付 两秒调一次
        payQuery(paymentDto).then((res) => 
          console.log(res);
          if (res.orderStatus === \'支付成功\') 
            this.dialogVisible = false;
　　　　　　　　//消除定时器
            this.closeMaskzhifu();
            this.$message.success(\'支付成功!\')
            location.reload();

          
        )
      , 2000);
    ,
　　//清除定时器函数
    closeMaskzhifu () 
      this.moneyShow = false;
      clearInterval(this.timer);
    ,

 CSS部分就不展示了自己改吧

 

三方网站调用微信扫码支付

第一步获取code_url，第二步生成支付二维码，第三回调函数修改数据

//购买产品展示支付二维码
    public function yijihuiyuan(){
        Loader::import("weixinpay.lib.WxPay", EXTEND_PATH, ".Api.php");
        Loader::import("weixinpay.example.log", EXTEND_PATH, ".php");
        Loader::import("weixinpay.example.WxPay", EXTEND_PATH, ".Config.php");
        $notify=new NativePay();
        //初始化日志
        //$logHandler= new CLogFileHandler("../logs/".date(‘Y-m-d‘).‘.log‘);
       // $logHandler= new CLogFileHandler(EXTEND_PATH."weixinpay/logs/".date(‘Y-m-d‘).‘.log‘);
       // $log = Log::Init($logHandler, 15);
        $input = new WxPayUnifiedOrder();
        $input->SetBody("第一次微信扫码支付");
        $input->SetAttach("测试");
        $input->SetOut_trade_no("swdkyj123456789".date("YmdHis"));
        $input->SetTotal_fee("1");
        $input->SetTime_start(date("YmdHis"));
        $input->SetTime_expire(date("YmdHis", time() + 600));
        $input->SetGoods_tag("test");
        $input->SetNotify_url("http://test.gdzhisheng.top/index.php/index/mine/notify.html");
        $input->SetTrade_type("NATIVE");
        $input->SetProduct_id("12235413214070356458058");
       $result = $notify->GetPayUrl($input);
$url2 = $result["code_url"];
        $url=urlencode($url2);
        $this->assign("url",$url);
        return $this->fetch();
    }

前台页面获取到code_url后生成二维码

<img alt="模式二扫码支付" src="{:url(‘qrcode‘)}?data={$url}"/>

将后台配置好qrcode方法

  //生成二维码
    public function qrcode()
    {
        Loader::import("weixinpay.example.phpqrcode.phpqrcode", EXTEND_PATH, ".php");
        $url = urldecode($_GET["data"]);
        if(substr($url, 0, 6) == "weixin"){
            QRcode::png($url);
        }else{
            header(‘HTTP/1.1 404 Not Found‘);
        }
    }

这时就会出现支付二维码，然后我们设置回调函数

//微信回调接口
public function notify(){
  //  $this->array= 3030;
    $post = $_REQUEST;
    if ($post == null) {
        $post = file_get_contents("php://input");
    }
    if ($post == null) {
        $post = isset($GLOBALS[‘HTTP_RAW_POST_DATA‘]) ? $GLOBALS[‘HTTP_RAW_POST_DATA‘] : ‘‘;
    }
    if (empty($post) || $post == null || $post == ‘‘) {
        //阻止微信接口反复回调接口  文档地址 https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=9_7&index=7，下面这句非常重要!!!
        $str=‘<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>‘;
        echo $str;
        exit(‘Notify 非法回调‘);
    }
    libxml_disable_entity_loader(true); //禁止引用外部xml实体
    $xml = simplexml_load_string($post, ‘SimpleXMLElement‘, LIBXML_NOCDATA);//XML转数组
    $post_data = (array)$xml;
    //如果微信支付成功，添加一条订单信息

        $data[‘openid‘]=$post_data[‘openid‘];
     $data[‘trade_type‘]=$post_data[‘trade_type‘];
        $data[‘total_fee‘]=$post_data[‘total_fee‘];
        $data[‘transaction_id‘]=$post_data[‘transaction_id‘];
        $data[‘result_code‘]=$post_data[‘result_code‘];
       $data[‘out_trade_no‘]=$post_data[‘out_trade_no‘];
        $data[‘time_end‘]=$post_data[‘time_end‘];
        $data[‘cash_fee‘]=$post_data[‘cash_fee‘];
        $data[‘bank_type‘]=$post_data[‘bank_type‘];
        $rel=Db("sw_order")->insert($data);
        if($rel){
            echo "<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>";
            exit(‘Notify 非法回调‘);
        }
//    }
}

支付成功后微信服务器就会调用我们设置的回调地址返回一些参数，我们再根据参数修改数据库的数据。