vue支付项目-APP支付宝支付功能

 会员开通或者续费按钮：

<div class="open-btn">
          <!-- 去开通 -->
          <img src="../../assets/img/open_btn.png" v-show="memberLevel=='0'" @click="handlePayment"/>
          <!-- 去续费 -->
          <img src="../../assets/img/gopay_btn.png" v-show="memberLevel=='1'" @click="handlePayment"/>
        </div>

微信支付前进行商品选择和协议查看验证： 

    // 去开通去续费  立即支付
    handlePayment(){
      if(this.checked==false){
        this.$toast.fail("请先同意一江通VIP会员服务协议");
        return;
      }else if(this.payIndex==-1){
        this.goodsId="";
        this.$toast.fail("请选择商品");
        this.isShoosePayType = false;
        return;
      }else{
        //打开支付方式弹窗
        this.isShoosePayType = true;
      }
    },

<!-- 选择支付方式 -->
      <van-popup v-model="isShoosePayType" position="bottom" closeable @close="closePayType">
        <div class="text-center orderPrice">
          <div class="priceText">订单总价</div>
          <div class="priceNumber">{{totalPrice}}元</div>
        </div>
        <div class="priceType">请选择支付方式</div>
        <van-radio-group v-model="payType" class="mt20">
          <van-cell-group>
            <van-cell title="微信" clickable @click="handleChooseWx('1')" :icon="wxico" class="payico">
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell label="10亿用户都在用，真安全，更放心" clickable @click="handleChooseZfb('2')" :icon="zfbico" class="payico alipayIcon">
              <template #title>
                <div class="alipayTitle">
                  <span class="custom-title mr10">支付宝</span>
                  <img src="../../assets/img/alipaytj.png" class="alipaytj">
                </div>
              </template>
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <van-button block type="info" size="large" color="#024ee0" class="btnBorder" @click="handleSurePay">确认支付</van-button>
        <div class="mb50"></div>
      </van-popup>

handleChooseZfb(payType){
  this.payType = payType;  
},

注意事项：

1.判断支付方式，如果是2，则是支付宝支付方式 

• 安卓 支付宝支付原生方法：

this.alipayBack(payResult,payInfo);

• ios苹果 支付宝支付原生方法：

window.webkit.messageHandlers.callNative.postMessage

• ios函数返回处理方法callWeb()，通过此方法可以对返回的数据进行处理：

window.callWeb = this.callWeb;

• 传递的参数：timeout_express,product_code,total_amount,subject,body,out_trade_no,timestamp,notifyUrl，这里不在介绍，可查看相应的文档
• alipayPay 支付宝APP支付下单接口

    // 点击确认支付
    handleSurePay(){
      if(this.payType=="2"){
        let alipayParams = {
          goodsId:this.goodsId,
        }
        alipayPay(alipayParams).then(res=>{
          this.isShoosePayType = false;
          console.log(res,"支付宝支付");
          if(res.code == 200){
            let bizContent = res.data.bizContent;
            // 调用安卓方法
            let [
              timeout_express,
              product_code,
              total_amount,
              subject,
              body,
              out_trade_no,
              timestamp
            ] = [
              bizContent.timeout_express,
              bizContent.product_code,
              bizContent.total_amount,
              bizContent.subject,
              bizContent.body,
              bizContent.out_trade_no,
              bizContent.timeStamp
            ];
            // alert(res.data.notifyUrl)
            if(this.$utils.isAndroid_ios() == "andriod"){
              window.AndroidFunction.alipay(timeout_express,product_code,total_amount,subject,body,out_trade_no,timestamp,res.data.notifyUrl);
              this.alipayBack(payResult,payInfo);
            }else{
              // ios
              new Promise((resolve, reject) => {
                window.webkit.messageHandlers.callNative.postMessage({
                  name: "支付-支付宝",
                  data: {
                    timeout_express,
                    product_code,
                    total_amount,
                    subject,
                    body,
                    out_trade_no,
                    timestamp,
                    notifyUrl:res.data.notifyUrl
                  },
                });
                resolve();
              }).then((res) => {
                  window.callWeb = this.callWeb;
              });
            }
          }else{
            this.$toast.fail("请求失败");
          }
        })

      }
    },

    // ios函数方法
    callWeb(versionIos){
      if(versionIos.name=="支付回调-支付宝"){
        let {payResult,payInfo} = versionIos.data;
        this.alipayBack(payResult,payInfo);
      }
    }

    // 处理安卓支付宝支付后返回的结果
    alipayBack(payResult,payInfo){
      if(payResult=="9000"){
        this.queryMinePageFun();//调用个人信息接口
        this.$toast.success("支付成功");
      }else if(payResult=="8000"){
        this.$toast.fail("正在处理中");
      }else if(payResult=="4000"){
        this.$toast.fail("支付失败");
      }else if(payResult=="6001"){
        this.$toast.fail("订单取消");
      }else if(payResult=="6002"){
        this.$toast.fail("网络连接出错");
      }else if(payResult=="5000"){
        this.$toast.fail("重复请求");
      }else if(payResult=="6004"){
        this.$toast.fail("支付完成");
      }else{
        this.$toast.fail("支付错误");
      }
    },