web前端支付功能

<template>
  <div>
    <mt-header fixed title="支付订单">
      <mt-button icon="back" slot="left" οnclick="history.go(-1)"></mt-button>
    </mt-header>
    <div class="page">
      <div class="icon-box">
        <img src="./imgs/money.png" alt="" class="icon">
        <div class="hint-tlt">等待付款</div>
      </div>
      <div class="hint-txt">订单已提交，请在点击确认支付。</div>
      <div class="money-box">订单金额：¥ {
   {weixinPayMsg.orderPrice}}</div>
      <div class="line"></div>
      <div class="pay-txt">选择支付方式</div>
      <div class="payType" v-if="this.payEnv != 'weixin'">
        <div class="payType-l">
          <img src="./imgs/icon-zhifubao.png" alt="" class="payIcon">
          <div>支付宝支付</div>
        </div>
        <img src="./imgs/iconxh_gy_elect.png" alt="" v-if="payType==1" class="typeIcon">
        <img src="./imgs/iconxh_gy_nomal.png" alt="" v-else class="typeIcon" @click="payChoice(1)">
      </div>
      <div class="payType" v-if="this.payEnv != 'alipay'">
        <div class="payType-l">
          <img src="./imgs/icon-weixin.png" alt="" class="payIcon">
          <div>微信支付</div>
        </div>
        <img src="./imgs/iconxh_gy_elect.png" alt="" v-if="payType==2" class="typeIcon">
        <img src="./imgs/iconxh_gy_nomal.png" alt="" v-else class="typeIcon" @click="payChoice(2)">
      </div>
      <div class="goPays" :class="bgColor?'': 'huisi'" @click="goPays">确认支付</div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import ajax from '@/utils/ajax';
// import doctorAjax from '@/utils/doctorAjax';
import { getQueryString } from '@/utils/index';
import wxjs from '@/utils/wxjsInterface';
export default {
  data: function () {
    return {
      spbill_create_ip: '', // ip
      bgColor: true,
      payType: 1, // 1:支付宝支付,2:微信支付
      payEnv: 'others', // 判断微信还是支付宝或者其他浏览器
      wxopenid: '',
      // 支付订单信息
      weixinPayMsg: {
        orderId: '', // 订单号
        orderPrice: '', // 付款金额
        Category: '', // 商品：product 处方：prescription, 脉诊仪:jinmu
        StoreName: '', // 药店名称 已兼容旧版本
      },
    };
  },
  methods: {
    // 判断微信还是支付宝或者其他浏览器
    liulanqi() {
      if (/MicroMessenger/.test(window.navigator.userAgent)) {
      // 微信
        this.payEnv = 'weixin';
        this.payType = 2;
      } else if (/AlipayClient/.test(window.navigator.userAgent)) {
      // 支付宝
        this.payEnv = 'alipay';
        this.payType = 1;
      } else {
      // 其他浏览器
        this.payEnv = 'others';