web前端支付功能

<template>
  <div>
    <mt-header fixed title="支付訂單">
      <mt-button icon="back" slot="left" onclick="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';
        this.payType = 1;
      }
      console.log('瀏覽器this.payEnv', this.payEnv);
    },
    // 選擇支付
    payChoice(val) {
      this.payType = val;
    },
    // 確認支付
    goPays() {
      console.log('確認支付');
      if (this.bgColor === false) {
        return false;
      }
      this.bgColor = false;
      if (this.payEnv === 'weixin') { // 在微信內瀏覽器打開
        if (!this.wxopenid && !sessionStorage.getItem('wxopenid')) {
          Toast({
            message: '賬戶登錄中,請重試！',
            position: 'middle',
            duration: 2000
          });
          this.bgColor = true;
          return false;
        } else if (sessionStorage.getItem('wxopenid')) {
          this.wxopenid = sessionStorage.getItem('wxopenid');
        }
        let data = {
          PayType: 2, // 支付類型
          OrderId: this.weixinPayMsg.orderId, // 訂單號
          PayFee: this.weixinPayMsg.orderPrice, // 付款金額
          OpenId: this.wxopenid, // 公眾號、小程序必傳oo8No013EgwlLLMCt_G4bGwhbXjo
          Category: this.weixinPayMsg.Category, // 商品：product 處方：prescription, 脈診儀:jinmu
          StoreName: this.weixinPayMsg.StoreName, // 葯店名稱 已兼容舊版本
        };
        // 在微信內置瀏覽器中直接調用微信內支付
        console.log('微信內支付參數', data);
        ajax.post('/api/pay/wxpay', data).then(res => {
          console.log('微信內提交支付返回結果', res);
          if (res.status === 200 && res.data.code === 0) {
            this.weixinPay(res.data.data);
          }
        });
      } else if (this.payEnv === 'alipay') { // 在支付寶內瀏覽器打開
        console.log('喚起支付寶h5支付');
        let data = {
          payType: 6, // 支付類型
          OrderId: this.weixinPayMsg.orderId, // 訂單號
          PayFee: this.weixinPayMsg.orderPrice, // 付款金額
          Category: this.weixinPayMsg.Category, // 商品：product 處方：prescription, 脈診儀:jinmu
          StoreName: this.weixinPayMsg.StoreName, // 葯店名稱 已兼容舊版本
          // quity_url: `${process.env.WEB_HOST}/payment/payCompleted?orderId=` + this.weixinPayMsg.orderId, // 退出跳回地址
          quity_url: `${process.env.WEB_HOST}/prescription/prescription_order`, // 退出跳回地址
        };
        this.alipay(data);
      } else if (this.payEnv === 'others') { // 在其他瀏覽器打開
        if (this.payType === 1) { // 普通瀏覽器進行支付寶h5支付
          console.log('喚起支付寶h5支付');
          let data = {
            payType: 6, // 支付類型
            OrderId: this.weixinPayMsg.orderId, // 訂單號
            PayFee: this.weixinPayMsg.orderPrice, // 付款金額
            Category: this.weixinPayMsg.Category, // 商品：product 處方：prescription, 脈診儀:jinmu
            StoreName: this.weixinPayMsg.StoreName, // 葯店名稱 已兼容舊版本
            // quity_url: `${process.env.WEB_HOST}/payment/payCompleted?orderId=` + this.weixinPayMsg.orderId, // 退出跳回地址
            quity_url: `${process.env.WEB_HOST}/prescription/prescription_order`, // 退出跳回地址
          };
          this.alipay(data);
        } else if (this.payType === 2) { // 普通瀏覽器進行微信h5支付
          console.log('喚起微信h5支付');
          let data = {
            PayType: 6, // 支付類型
            OrderId: this.weixinPayMsg.orderId, // 訂單號
            PayFee: this.weixinPayMsg.orderPrice, // 付款金額
            spbill_create_ip: this.spbill_create_ip,
            OpenId: '', // 公眾號、小程序必傳
            Category: this.weixinPayMsg.Category, // 商品：product 處方：prescription, 脈診儀:jinmu
            StoreName: this.weixinPayMsg.StoreName, // 葯店名稱 已兼容舊版本
          };
          this.wxpay(data);
        }
      }
    },
    // 支付寶h5支付
    alipay(data) {
      console.log('支付寶h5支付參數', data);
      ajax.post('/api/pay/AliPayNew', data).then(res => {
        console.log('支付寶h5支付返回結果', res);
        this.bgColor = true;
        if (res.status === 200 && res.data.code === 0) {
          const form = res.data.data;
          const div = document.createElement('div');
          div.id = 'alipay';
          div.innerHTML = form;
          document.body.appendChild(div);
          document.querySelector('#alipay').children[0].submit(); // 執行后會喚起支付寶
        }
      });
    },
    // 微信h5支付
    wxpay(data) {
      // let that = this;
      console.log('微信h5支付參數', data);
      ajax.post('/api/pay/wxpay', data).then(res => {
        console.log('微信h5提交支付返回結果', res);
        this.bgColor = true;
        if (res.status === 200 && res.data.code === 0) {
          // location.href = res.data.data.mweb_url + '&redirect_url=' + encodeURIComponent(`${process.env.WEB_HOST}/payment/payCompleted?orderId=` + that.weixinPayMsg.orderId);
          location.href = res.data.data.mweb_url + '&redirect_url=' + encodeURIComponent(`${process.env.WEB_HOST}/prescription/prescription_order`);
        }
      });
    },
    // 微信內請求支付
    weixinPay(resData) {
      let that = this;
      console.log('進行微信內支付');
      function onBridgeReady() {
        /* eslint-disable */
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            'appId': resData.appid, //公眾號名稱，由商戶傳入
            'timeStamp': resData.timestamp, //時間戳，自1970年以來的秒數
            'nonceStr': resData.nonce_str, //隨機串
            'package': resData.package, //訂單詳情擴展字符串
            // 'signType': resData.signType, //微信簽名方式
            'signType': 'MD5',
            'paySign': resData.sign, //微信簽名
          },
          function (res) {
            console.log(res);
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              that.bgColor = true;
              Toast('付款成功');
              // sessionStorage.removeItem('weixinPayMsg');
              that.$router.push('/payment/paySuccess?orderId=' + that.weixinPayMsg.orderId);
            }
            else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
              that.bgColor = true;
              Toast('付款取消');
              that.$router.push('/payment/payError?openId=' + that.wxopenid);
            } else {
              that.bgColor = true;
              Toast('付款失敗');
              that.$router.push('/payment/payError?openId=' + that.wxopenid);
            }
          }
        );
      }
      if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
      } else {
        onBridgeReady();
      }
    },
    // 查詢訂單狀態
    getOrderState() {
      console.log('查詢訂單狀態參數', this.weixinPayMsg.orderId);
      ajax.get('/api/pay/GetOrderStatus/' + this.weixinPayMsg.orderId).then(res => {
        console.log('訂單狀態結果', res);
        if (res.status === 200 && res.data.code === 0) {
          this.orderState = res.data.data;
          if (res.data.data === 1) {
            sessionStorage.removeItem('weixinPayMsg');
            Toast('訂單付款成功');
            this.$router.push('/prescription/prescription_detail?order_id=' + this.weixinPayMsg.orderId);
          }
        }
      });
    },
    // 獲取ip
    getIP() {
      this.spbill_create_ip = returnCitySN.cip;
      console.log('獲取ip', this.spbill_create_ip);
    }
  },
  created() {
    let _self = this;
    // 先判斷是否是在微信內還是微信外的普通手機瀏覽器
    this.liulanqi();
    // 取出提交支付的參數
    if (JSON.parse(sessionStorage.getItem('weixinPayMsg'))) {
      this.weixinPayMsg = JSON.parse(sessionStorage.getItem('weixinPayMsg'));
      console.log('取出提交支付的參數', this.weixinPayMsg);
    }
    // 查詢訂單狀態
    this.getOrderState();
    // 微信公眾號支付 需要獲取code
    let code = getQueryString('code');
    if(code){
      wxjs.init(code).then((res) => {
        console.log('微信', res.wxconfig);
        if(res.wxconfig.openid){
          sessionStorage.setItem('wxopenid', res.wxconfig.openid);
        }
        _self.wxopenid = res.wxconfig.openid;//openid
        console.log('_self.wxopenid', _self.wxopenid);
      });
    };
    // 獲取ip
    this.getIP();
    // // 修改訂單地址
    // if (JSON.parse(sessionStorage.getItem('orderAddress'))) {
    //   let temData = JSON.parse(sessionStorage.getItem('orderAddress'));
    //   doctorAjax.post('api/order/changeOrderAddress', temData).then(res => {
    //     console.log('修改訂單收貨地址', res);
    //     sessionStorage.removeItem('orderAddress');
    //   });
    // }
  },
};
</script>
<style lang="less" scoped>
.page{
  position: absolute;
  top: 44px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: auto;
  background: #fff;
}
.line{
  height: 10px;
  background-color: #f5f5f5;
}
.icon-box{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0px;
  .icon{
    width: 30px;
    height: 30px;
    margin-right: 5px;
  }
  .hint-tlt{
    font-size: 26px;
  }
}
.hint-txt{
  margin-bottom: 20px;
  text-align: center;
}
.money-box{
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  border-top: 1px solid #e6e6e6;
}
.pay-txt{
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  border-bottom: 1px solid #e6e6e6;
}
.payType{
  height: 50px;
  padding:0 10px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  .payIcon{
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
  .payType-l{
    height: 100%;
    display: flex;
    align-items: center;
    flex: 1;
  }
  .typeIcon{
    width: 20px;
    height: 20px;
  }
}
.goPays{
  margin: 0 10px;
  margin-top: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #ffffff;
  background: rgb(12, 205, 211);
}
.goPays.huisi{
  background: #ccc;
}
</style>