VUE+element-ui微信充值支付

最新推荐文章于 2024-11-26 09:54:37 发布

xiaoxudaren

最新推荐文章于 2024-11-26 09:54:37 发布

阅读量3.9k

点赞数 1

文章标签： vue elementui

本文链接：https://blog.csdn.net/xiaoxudaren/article/details/112281862

版权

本文介绍了如何使用Vue和Element-UI框架参考他人前端页面实现微信充值支付功能。重点在于后台代码的参考与调整，特别是设置正确的mchid，appid和apiKey。回调功能的实现仍在进行中。

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

VUE+element-ui微信充值支付

前端页面是参考别人的

前端页面是参考别人的

链接：http://www.lanlanwork.com/blog/?post=5839

在这里插入图片描述

<template>
  <el-card class="box-card">
    <ul class="msg-box">
      <li>
        <h4>我要充值</h4>
      </li>
      <li>
        <h4 style="margin-bottom: 15px">充值金额</h4>
        <el-radio-group v-model="amountVal" @change="amountChange">
          <el-radio border :label="'' + 100">充值100</el-radio>
          <el-radio border :label="'' + 500">充值500</el-radio>
          <el-radio border :label="'' + 1000">充值1000</el-radio>
          <el-radio border :label="'' + 2000">充值2000</el-radio>
          <el-radio border :label="'' + 5000">充值5000</el-radio>
          <el-radio border :label="''">自定义</el-radio>
        </el-radio-group>
      </li>

      <li>
        <h4 style="margin-bottom: 15px">充值方式</h4>
        <el-radio-group v-model="rechargeParams.paymentType" @change="paymentTypeChange">
          <el-radio border :label="'' + 0">微信</el-radio>
          <el-radio border :label="'' + 1">支付宝</el-radio>
        </el-radio-group>
      </li>

      <li>
        <h4 style="margin-bottom: 15px">充值金额</h4>
        <!-- <img src="{:url('qrcode',['text'=>$text])}" /> -->
        <el-input
          :disabled="disabled"
          clearable
          v-model="rechargeParams.totalAmt"
          placeholder="请输入金额"
          style="width: 150px"
        ></el-input>
      </li>
    </ul>
    <div style="text-align: center; margin-top: 30px">
      <el-button type="primary" @click="surePay">确认支付</el-button>
    </div>
  </el-card>
</template>

<script>
import {
    post } from "@/api/api";
export default {
   
  data() {
   
    return {
   
      amountVal: "",
      disabled: false,
      //充值参数
      rechargeParams: {
   
        totalAmt: "", //金额
        paymentType: "0", //支付方式[0:微信,1:支付宝,2:余额,3:活动]
        // transType: "0", //交易类型[0:充值,1:消费]
      },
      code: "",
    };
  },

  methods: {
   
    //充值金额
    amountChange(val) {
   
      this.rechargeParams.totalAmt = val;
      if (val == "") {
   
        this.disabled = false;
      } else {
   
        this.disabled = true;
      }
    },

    //支付方式

    paymentTypeChange(val) {
   
      this.rechargeParams.paymentType = val;
    },

    //确认支付

    surePay() {
   
      if (this.rechargeParams.totalAmt == "") {
   
        this.$message.warning("请输入金额");
        return;
      }
      // this.$router.push({path: '/code'});

      post("weixin/createOrderInfo", this.rechargeParams).then((res) => {
   
        var result = res.result;
        if (res.code === 20000) {
   
          // 支付方式跳转

          if (this.rechargeParams.paymentType == "0") {
   
            this.$message.success("微信支付");
            this.wechatPay(result);
          } else if (this.rechargeParams.paymentType == "1") {
   
            this.$message.success("支付宝支付");
            const payDiv = document.getElementById

最低0.47元/天解锁文章