标签：vue name .. res height Pc amount 支付 微信

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>

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

标签：vue,name,..,res,height,Pc,amount,支付,微信
来源： https://blog.csdn.net/weixin_47264982/article/details/115453693

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。