vue Pc端微信支付和支付宝支付

1、支付宝支付

<template>
  <div>
    <el-dialog
      top="7.5vh"
      title="支付"
      :visible.sync="payDialogVisible"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      center>
      <div class="qrcode">
        <div style="border-radius:2px;" class="payForm">
          <el-form ref="form" label-width="80px">
            <el-form-item label="商品名称:">
              <el-input v-model="name" readonly></el-input>
            </el-form-item>
            <el-form-item label="支付金额:">
              <el-input v-model="amount" readonly></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-col :span="8">
             <div style="line-height: 2.1rem">请选择支付方式：</div>
          </el-col>
          <el-col :span="8">
            <span class="iconfont icon-zhifubao" style="font-size: 50px;color: #02A9F1;margin-right: 5%;cursor: pointer"
                  @click="alipayPay"></span>
            <span class="iconfont icon-weixin1" style="font-size:50px;color: #28C445;cursor: pointer"
                  @click="wxPay"></span>
          </el-col>
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {order, alipay} from '../../../src/http/api.js'
  export default {
    data() {
      return {
        amount: '',
        name: '',
        payDialogVisible: false
      }
    },
    methods: {
      //跳转到微信支付页面
      wxPay() {
        this.$router.push('/wxPay/index')
      },
      //支付宝支付
      alipayPay() {
        this.fetchVideoPay()
      },
      //调用后台接口
      fetchVideoPay() {
        alipay().then(res => {
          document.querySelector('body').innerHTML = res.form // 查找到当前页面的body，将后台返回的form替换掉他的内容
          document.forms[0].submit()  // 执行submit表单提交，让页面重定向，跳转到支付宝页面
        })
      },
      init() {
        //获取订单详细信息
        order().then(res => {
          this.amount = res.amount + '元'
          this.name = res.name
        })
      }
    },
    created() {
      this.payDialogVisible = true
      this.init()
    }
  }
</script>
<style scoped>
  .payForm {
    padding: 5%;
  }
</style>

2、微信支付
先安装：cnpm i qrcodejs2 -S
然后引入：import QRCode from “qrcodejs2”;
选择微信支付后跳转到支付页面（自己重构的），pages新建文件夹新建wxPay文件夹，再新建vue文件index.vue，index.vue中的写入以下代码：

<template>
  <div>
    <div class="title">
      微信扫码支付
    </div>
    <div class="boxBg">
      <div class="mainbox">
        <div class="wxzfbox">
          <div class="timg">
            <img src="../../assets/img/wxPay/wxzf.png" alt="" height="45">
          </div>
          <div class="wrap" id="qrcode" ref="qrcode"></div>
          <div class="wxinfo">
            <ul>
              <li>
                <span>产品名称：</span>
                <span>{{ this.name }}</span>
              </li>
              <li>
                <span>订单金额：</span>
                <span>{{ this.amount }}</span>
              </li>
              <li>
                <span>实付金额：</span>
                <span>{{ this.amount }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {order, wxPay} from "../../http/api";
  import QRCode from "qrcodejs2";

  export default {
    data() {
      return {
        amount: '',
        name: '',
        qrcode: ''
      }
    },
    created() {
      this.getWxPays()
      this.getOrder()
    },
    methods: {
      //获取订单信息
      getOrder() {
        order().then(res => {
          this.amount = res.amount + '元'
          this.name = res.name
        })
      },
      //获取微信支付后台返回的url
      getWxPays() {
      //调用后台接口
        wxPay().then(res => {
          this.qrcode = res.resp.code_url
          this.$nextTick(() => {
            this.crateQrcode()
          })
        })
      },
      // 生成二维码
      crateQrcode() {
        new QRCode("qrcode", {
          width: 210,
          height: 210, // 高度
          text: this.qrcode,// 二维码内容
          background: "#f0f"
        })
      }
    }
  }
</script>
<style scoped>
  .title {
    height: 50px;
    background: #0ae;
    color: #FFF;
    text-align: center;
    font-size: 18px;
    line-height: 50px;
  }

  .boxBg {
    width: 100%;
    height: 630px;
    border-bottom: 1px solid #eee;
    background: #eee url('../../assets/img/wxPay/wxBg.jpg') no-repeat 35% -100px;
  }

  .mainbox {
    width: 1190px;
    margin: 0 auto;
  }

  .wxzfbox {
    width: 241px;
    float: right;
    margin-top: 55px;
    margin-right: 160px;
    background: #fff;
    border-top: 1px solid #e9e9e9;
    border: 1px solid #e5e5e5;
    box-shadow: 0px 1px 10px #e5e9ed;
    padding: 20px 30px;
    border-radius: 10px;
  }

  .wrap {
    width: 210px;
    height: 210px;
    display: block;
    margin: 30px auto;
    z-index: 99999;
    background: url('../../assets/img/wxPay/loading.gif') no-repeat center center;
  }

  .wxinfo {
    margin-top: 30px;
    font-weight: bold;
  }

  .wxzfbox .wxinfo ul {
    height: 155px;
    overflow: auto;
  }

  .wxzfbox .wxinfo ul li {
    font-size: 14px;
    padding: 5px 0 5px 10px;
    line-height: 20px;
    position: relative;
  }

  li {
    list-style-type: none;
    text-align: left;
  }
</style>

微信支付页面用到的图片如下，放到对应的文件夹下即可：