App跳转支付宝支付打开HTML页面---支付宝生活号

<template>
  <div class="wrapper">
    <!-- 支付中的展示 -->
    <div class="zf-center" v-if="isCenter">
      <div class="img-box">
        <div class="img"></div>
        <div class="t">{{ isSuccess ? "支付成功" : "正在支付" }}</div>
        <div class="money">￥{{ money }}</div>
      </div>
      <div class="text">
        <span>订单号：</span>
        <span>{{ orderNo }}</span>
      </div>
      <!-- 支付成功 -->

      <div class="btn" v-show="isSuccess" @click="goToApp">支付成功，请返回app刷新</div>
    </div>

    <!-- 支付失败 -->
    <div class="zf-center zf-error" v-if="error">
      <div class="img-box">
        <div class="img"></div>
        <div class="t">支付失败</div>
        <div class="money">￥{{ money }}</div>
      </div>
      <div class="text">
        <span>订单号：</span>
        <span>{{ orderNo }}</span>
      </div>
      <div class="btn" @click="init">重新支付</div>
    </div>
  </div>
</template>
<script>
import { Account } from "@/apis/";
import Toast from "@/components/common/toast";
import Indicator from "@/components/common/indicator";
import "@/assets/styles/empty.css";
import "@/assets/styles/common";
import { getQueryParam, setupWebViewJavascriptBridge } from "@/utils/common";
import { jsBridge } from "@/utils/jsbridge";
const qs = getQueryParam(location.href);
export default {
  data() {
    return {
      isCenter: true, // 正在支付
      error: false,
      money: 0,
      orderNo: "",
      payKey: "",
      userCode: "",
      code: "",
      payData: "",
      tradeNO: "",
      isSuccess: false,
    };
  },
  methods: {
    readys(callback) {
      // console.log(window);
      if (window.AlipayJSBridge) {
        callback && callback();
      } else {
        document.addEventListener("AlipayJSBridgeReady", callback, false);
      }
    },
    init() {
      Indicator.show("加载中....");
      this.orderNo = qs("orderNo");
      this.payKey = qs("payKey");
      this.userCode = qs("auth_code");
      this.money = qs("amount");
      
      if (this.orderNo == "" || this.payKey == "" || this.userCode == "") return;
      //  发送页面请求  拿到
      let data = {
        orderNo: this.orderNo,
        payKey: this.payKey,
        userCode: this.userCode,
      };
      let _this = this;
      Account.prepay(data).then((res) => {
        Indicator.close();
        // alert(res.code+'接口返回code');
        // alert(JSON.parse(res.data.payData)+'接口返回payData');
        // this.code = res.code + "--" + res.message;
        if (res.code == 1) {
          let payData = JSON.parse(res.data.payData);
          this.payData = payData;
          this.tradeNO = payData.tradeNO;
          // alert(payData.tradeNO+'tradeNO');
          AlipayJSBridge.call(
            "tradePay",
            {
              tradeNO: payData.tradeNO, // 必传，此使用方式下该字段必传
            },
            function (result) {
              // alert(result.resultCode+'result');
              _this.code = result.resultCode;
              if (result.resultCode != 9000) {
                //支付失败
                _this.isCenter = false;
                _this.error = true;
              } else {
                _this.isSuccess = true;
                _this.error = false;
              }
            }
          );
        } else {
          Toast(res.message);
          _this.isCenter = false;
          _this.error = true;
        }
      });
    },
    goToApp() {
      location.href = "com.yxf.extension://pay";
    },
  },
  created () {
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src =
      "https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js";
    document.body.appendChild(s);
  },
  mounted() {
      let _this = this;
    document.addEventListener("visibilitychange", () => {
      if (document.hidden) {
        // 页面被挂起
        console.log("页面挂起");
      } else {
        // 页面呼出 支付宝购买后返回
        console.log("页面呼出");
        if (_this.code == 9000) {
          _this.isSuccess = true;
          _this.isCenter = true;
          _this.error = false;
        }
      }
    });
    window.onload = () => {
      //初始化产生一个全局变量 AlipayJSBridge
      _this.readys();
      _this.init();
    };
  },
};
</script>

<style lang="postcss">
@import "../../../assets/styles/mixins.css";
.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #f7f7f7;
  z-index: 10;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.28rem;
  display: flex;
  flex-direction: column;
  .zf-center {
    .img-box {
      background: #fff;
      padding: 0.32rem;
    }
    .t {
      color: #333;
      text-align: center;
      margin-top: 0.24rem;
    }
    .img {
      width: 2.4rem;
      height: 2.4rem;
      background: url("../../../assets/images/pay-loading.png") no-repeat center/100%;
      margin: auto;
    }
    .money {
      font-size: 0.4rem;
      text-align: center;
      margin-top: 0.24rem;
    }
    .text {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.32rem;
      margin: 0.24rem 0 0.48rem;
      padding: 0.32rem;
      background: #fff;
      color: #333;
    }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.2rem;
    height: 0.84rem;
    background: linear-gradient(135deg, #ffd78c, #ffb92d);
    border-radius: 1rem;
    color: #fff;
    margin: auto;
  }
  .zf-error {
    .img {
      background: url("../../../assets/images/pay-error.png") no-repeat center/100%;
    }
    .t {
      color: red;
    }
  }
}
</style>