記錄(lu)---jsApi支付+h5支付

????? 寫在開頭

點(dian)贊 + 收藏 === 學會(hui)??????

前言：判斷是不是微信內，是微信內就用jsApi支付(屏蔽支付寶)，不是微信內就用H5支付

此實例為vue2實例，需要vue3的(de)寶子可以(yi)自(zi)行轉換，流(liu)程(cheng)上沒(mei)啥區別

var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
this.showAliPay = false;
return true;
} else {
this.showAliPay = true;
return false;
}

一、jsApi支付

1、跳轉到中間頁，也可不跳轉，在中間頁進行一系列的操作

2、訪問這個地址拿到code授權，并傳給后端拿openid，拿到openid存到緩存里，下次進頁面優先讀取緩存的openid，沒有再去找微信拿，完整代碼如下

const localOpenId = localStorage.getItem("wexin-openid-wxc951e84c27099161");
if (localOpenId) {
  this.handleType(localOpenId);
  return;
}
var appid = "wxc951e84c27099161"; //個人公眾號appid
var appsecret = "778ef263f6e1d648d50daa1c5147884b";
var mpPrefix = "wexin-openid-";
this.redirect = encodeURIComponent(window.location.href); //重定向回來的地址
// 判斷是否是ios微信瀏覽器
var wx_code = this.getUrlParam("code"); // 截取url中的code
//獲取code的地址。獲取成功重定向后地址欄中將會帶有code，判斷沒有code的話，就跳轉到微信官方鏈接上獲取，獲取成功后會再重定向回來，注意url是需要使用encodeURIComponent處理一下編碼的
if (!wx_code) {
  // scope: 必傳；應用授權作用域，snsapi_base （不彈出授權頁面，直接跳轉，只能獲取用戶openid），snsapi_userinfo （彈出授權頁面，可通過openid拿到昵稱、性別、所在地。并且， 即使在未關注的情況下，只要用戶授權，也能獲取其信息 ）
  // 靜默授權
  window.location.href =
    "//open.weixin.qq.com/connect/oauth2/authorize?appid=" +
    appid +
    "&redirect_uri=" +
    this.redirect +
    "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
} else {
  // 獲取到了code，找后端拿openid
  axios
    .post(
      `//api.test.chiyanjiasu.com/wx/mp/openId?appid=${appid}&appsecret=${appsecret}&code=${wx_code}`
    )
    .then((res) => {
      // data是形參名，代表返回的數據
      if (res.errcode) {
        alert(res.errmsg);
        return;
      }
      localStorage.setItem(mpPrefix + appid, res.data.openid);
      this.handleType(res.data.openid); // 找后端拿orderId
    })
    .catch((error) => {
      console.log("error", error);
    });

3、拿鏈接里的值，和判斷是否是微信方法

getUrlParam: function (name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
},
isWeChat() {
  let ua = window.navigator.userAgent.toLowerCase();
  return ua.match(/MicroMessenger/i) == "micromessenger"; // 判定為true則是微信瀏覽器，false則不是
},

4、傳給后端拿orderId（訂單編號）

handleType(openId) {
      const info = JSON.parse(localStorage.getItem("productInfo"));
      const obj = {
        amount: 1,
        rtype: 2,
        productId: info.id,
        price: info.price,
        totalPrice: info.price * 1,
        buyTime: info.buyTime,
        openId,
        jsApi: 1,
      };
      userPayType(obj).then((result) => {
        window.WeixinJSBridge.invoke(
          "getBrandWCPayRequest",
          {
            appId: result.jsApiData.appId, //公眾號ID，由商戶傳入
            timeStamp: result.jsApiData.timeStamp, //時間戳，自1970年以來的秒數
            nonceStr: result.jsApiData.nonceStr, //隨機串
            package: result.jsApiData.package,
            signType: result.jsApiData.signType, //微信簽名方式：
            paySign: result.jsApiData.sign, //微信簽名
          },
          function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              // 使用以上方式判斷前端返回,微信團隊鄭重提示：
              //res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對可靠。
            }
          }
        );
        this.getPayResult(result.orderId);
      });
    },

5、循環查詢訂單是否完成

// 循環查詢訂單是否完成
    async getPayResult(orderId) {
      const data = await getResult({ orderId: orderId });
      if (data == "poll") {
        //2秒輪詢
        this.timerPay = setTimeout(() => {
          this.getPayResult(orderId);
        }, 2000);
      } else {
        if (data == "success") {
          this.$router.push({
            name: "oldRecharge",
            query: {
              orderId: orderId,
            },
          });
        }
      }

二、h5支付

1、調后端接口拿h5跳轉鏈接，

1）如果是支付寶，定義returnUrl為通知(zhi)鏈接

2）如果是(shi)微(wei)信(xin)，在后面拼(pin)接(jie)&redirect_url= 為重定(ding)向通知鏈接(jie)（需要帶(dai)上訂單(dan)編(bian)(bian)號，因為支付(fu)寶重定(ding)向鏈接(jie)會自動帶(dai)上訂單(dan)編(bian)(bian)號，但是(shi)微(wei)信(xin)不會帶(dai)上訂單(dan)編(bian)(bian)號）

hanldType(n, flag) {
      // h5支付
      const obj = {
        amount: 1,
        rtype: n,
        productId: this.activeItem.id,
        price: this.activeItem.price,
        totalPrice: this.activeItem.price * 1,
        buyTime: this.activeItem.buyTime,
      };
      if (flag) { // 帶flag代表支付寶
        obj.returnUrl = location.origin + "/#/public/oldRecharge"
      }
      userPayType(obj).then((res) => {
        const weiXinRedirectUrl=encodeURIComponent(location.origin + "/#/public/oldRecharge?charset=UTF-8&out_trade_no="+res.orderId)
        window.location.href=flag?res.redirectUrl:res.redirectUrl+'&redirect_url='+weiXinRedirectUrl
        this.show = false;
        this.getPayResult(res.orderId);
      });
    },

2、跳轉回來的時候查詢鏈接上是否有‘out_trade_no’，并查詢結果

if (location.href.includes("out_trade_no") && !sessionStorage.getItem('isSearchDingDan')) {
      sessionStorage.setItem('isSearchDingDan',true);
      this.getPayResult(this.getUrlParam("out_trade_no"));
    }

// 循環查詢訂單是否完成
    async getPayResult(orderId) {
      const data = await getResult({ orderId });
      if (data == "poll") {
        //2秒輪詢
        this.timerPay = setTimeout(() => {
          this.getPayResult(orderId);
        }, 2000);
      } else {
        if (data == "success") {
          // this.$toast({ msg: "恭喜您支付成功！", type: "success" ,time: 3000});
          this.showMiddle=true;
          setTimeout(() => {
            this.showMiddle=false;
            history.pushState({},'','/#/public/oldRecharge');
            sessionStorage.removeItem('isSearchDingDan')
          }, 3000);
        }
      }
    },

完整代碼

1、主頁面oldRecharge頁面

<template>
  <div class="recharge-index">
    <Header />
    <van-swipe :autoplay="3000" lazy-render class="my-swipe">
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
    <ul class="recharge-list clearfix">
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="handleChecked(index, item)"
        :class="{ active: activeIndex == index }"
      >
        <div class="useableTime">
          {{
            item.name.split("-")[0].indexOf("繽紛夏日活動") != -1
              ? item.buyTime / (3600 * 1000) + "小時"
              : item.name + "小時"
          }}
        </div>
        <div class="unitMoney">
          約<span>{{ (item.price / (item.buyTime / (3600 * 1000))).toFixed(2) }}</span
          >元/小時
        </div>
        <div class="payMoney">
          優惠價:{{ item.price }}<span>￥{{ item.originPrice }}</span>
        </div>
      </li>
    </ul>
    <div class="rechargeRule">
      <p>溫馨提示</p>
      <span>1.所有充值的套餐時長均為可暫停且永久有效的。</span>
      <span>2.公眾號套餐與PC客戶端及官網保持一致，該頁面充值后時</span>
      <span>  長即刻到賬，在公眾號及客戶端可查看時長余額等。</span>
    </div>
    <p class="rechargeRead">
      <span @click="checkBoolen = !checkBoolen"
        ><img
          :src="
            checkBoolen ? require('./images/icon6.png') : require('./images/icon5.png')
          "
        />閱讀并同意</span
      ><label @click="hanldGoRouter">《服務條款》</label>
    </p>
    <div class="rechargeFooter">
      <p>
        金額：<label>￥</label><span>{{ activeItem.price }}</span>
      </p>
      <div @click="handleBuy()">支付</div>
    </div>
    <Service />
    <van-popup class="popup-style" v-model="show" overlay-class="pay" position="bottom">
      <h3>確認訂單</h3>
      <p>
        充值時長：<span>{{ activeItem.buyTime/(3600*1000) + "小時" }}</span>
      </p>
      <p>
        應付金額：<span>￥{{ activeItem.price }}</span>
      </p>
      <div class="payDivBox">
        <div @click="handleWeXinOrAliPay('alipay', 1)" v-if="showAliPay">
          <img src="./images/icon09.png" alt="" />
          <div>支付寶支付</div>
        </div>
        <div @click="handleWeXinOrAliPay('weixin', 2)">
          <img src="./images/icon10.png" alt="" />
          <div>微信支付</div>
        </div>
      </div>
    </van-popup>
    <div class="dialogVisual" v-show="showMiddle">
      <div class="maskLayer"></div>
      <div class="dialogContent">
        <img src="./images/xiaoyan.png" />
        <p>充值成功!</p>
      </div>
    </div>
  </div>
</template>
 
<script>
import Header from "./components/header";
import { Swipe, SwipeItem } from "vant";
import { rechargeList, userPayType, getResult } from "@/api/user";
import Service from "./components/fwtk.vue";
import Vue from "vue";
import { Popup } from "vant";
Vue.use(Popup);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  components: {
    Header,
    Service,
  },
  data() {
    return {
      list: [],
      myswiper: null,
      listIndex: {},
      show: false,
      images: [require("./images/banner.png")],
      checkBoolen: false,
      activeIndex: 0,
      loading: false,
      activeItem: {},
      showAliPay: false,
      showMiddle:false
    };
  },
  computed: {
    logoShow() {
      return this.$store.state.logoShow;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  mounted() {
    this.isWeiXin();
    if (this.$route.query.orderId) {
      this.show = false;
      this.$toast({ msg: "恭喜您支付成功！", type: "success" });
    }
    this.getList();
    if (location.href.includes("out_trade_no") && !sessionStorage.getItem('isSearchDingDan')) {
      sessionStorage.setItem('isSearchDingDan',true);
      this.getPayResult(this.getUrlParam("out_trade_no"));
    }
  },
  methods: {
    async getList() {
      const data = await rechargeList();
      if (!data) {
        return;
      }
      this.list = data.list;
      this.activeItem = this.list[0] || {};
      this.loading = false;
    },
    // 循環查詢訂單是否完成
    async getPayResult(orderId) {
      const data = await getResult({ orderId });
      if (data == "poll") {
        //2秒輪詢
        this.timerPay = setTimeout(() => {
          this.getPayResult(orderId);
        }, 2000);
      } else {
        if (data == "success") {
          // this.$toast({ msg: "恭喜您支付成功！", type: "success" ,time: 3000});
          this.showMiddle=true;
          setTimeout(() => {
            this.showMiddle=false;
            history.pushState({},'','/#/public/oldRecharge'); // 不刷新頁面把url截取
            sessionStorage.removeItem('isSearchDingDan')
          }, 3000);
        }
      }
    },
    isWeiXin() {
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.showAliPay = false;
        return true;
      } else {
        this.showAliPay = true;
        return false;
      }
    },
    handleBuy(n) {
      if(!this.checkBoolen){
        this.$toast({ msg: "請閱讀并同意<p><<服務條款>></p>", type: "warning"});
        return
      }
      const token = localStorage.getItem("token");
      if (token && this.userInfo) {
        this.show = true;
      } else {
        this.$store.dispatch("setLogoShow", true);
      }
    },
    hanldGoRouter() {
      this.$store.commit("setXieyiShowModal", true);
    },
    handleWeXinOrAliPay(typeName, n) {
      if (typeName === "weixin") {
        // 微信支付
        if (this.isWeiXin()) {
          // // 微信內jsApi支付
          localStorage.setItem("productInfo", JSON.stringify(this.activeItem));
          this.$router.push("/public/rechargeRedirect");
        } else {
          // 微信外h5支付
          this.hanldType(n);
        }
      } else {
        // 支付寶h5支付
        this.hanldType(n, true);
      }
    },
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = (window.location.search||window.location.hash).substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    hanldType(n, flag) {
      // h5支付
      const obj = {
        amount: 1,
        rtype: n,
        productId: this.activeItem.id,
        price: this.activeItem.price,
        totalPrice: this.activeItem.price * 1,
        buyTime: this.activeItem.buyTime,
      };
      if (flag) {
        obj.returnUrl = location.origin + "/#/public/oldRecharge"
      }
      userPayType(obj).then((res) => {
        const weiXinRedirectUrl=encodeURIComponent(location.origin + "/#/public/oldRecharge?charset=UTF-8&out_trade_no="+res.orderId)
        window.location.href=flag?res.redirectUrl:res.redirectUrl+'&redirect_url='+weiXinRedirectUrl
        this.show = false;
        this.getPayResult(res.orderId);
      });
    },
    handleChecked(index, item) {
      this.activeIndex = index;
      this.activeItem = item;
    },
  },
};
</script>
 
<style scoped lang="less">
...
 
</style>

2、重定向頁面

<template>
  <div>
    <img src="../images/xiaoyan2.png"/>
    <p>加載中，請稍后...</p>
  </div>
</template>
 
<script>
import { userPayType, getResult } from "@/api/user";
import axios from "axios";
 
export default {
  data() {
    return {
      redirect: "",
      timerPay: null,
    };
  },
  mounted() {
    const localOpenId = localStorage.getItem("wexin-openid-wxc951e84c27099161");
    if (localOpenId) {
      this.handleType(localOpenId);
      return;
    }
    var appid = "wxc951e84c27099161"; //個人公眾號appid
    var appsecret = "778ef263f6e1d648d50daa1c5147884b";
    var mpPrefix = "wexin-openid-";
    this.redirect = encodeURIComponent(window.location.href); //重定向回來的地址
    // 判斷是否是ios微信瀏覽器
    var wx_code = this.getUrlParam("code"); // 截取url中的code
    //獲取code的地址。獲取成功重定向后地址欄中將會帶有code，判斷沒有code的話，就跳轉到微信官方鏈接上獲取，獲取成功后會再重定向回來，注意url是需要使用encodeURIComponent處理一下編碼的
    if (!wx_code) {
      // scope: 必傳；應用授權作用域，snsapi_base （不彈出授權頁面，直接跳轉，只能獲取用戶openid），snsapi_userinfo （彈出授權頁面，可通過openid拿到昵稱、性別、所在地。并且， 即使在未關注的情況下，只要用戶授權，也能獲取其信息 ）
      // 靜默授權
      window.location.href =
        "//open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        appid +
        "&redirect_uri=" +
        this.redirect +
        "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
    } else {
      // 獲取到了code，找后端拿openid
      axios
        .post(
          `//api.test.chiyanjiasu.com/wx/mp/openId?appid=${appid}&appsecret=${appsecret}&code=${wx_code}`
        )
        .then((res) => {
          // data是形參名，代表返回的數據
          if (res.errcode) {
            alert(res.errmsg);
            return;
          }
          localStorage.setItem(mpPrefix + appid, res.data.openid);
          this.handleType(res.data.openid);
        })
        .catch((error) => {
          console.log("error", error);
        });
    }
  },
  destroyed() {
    clearTimeout(this.timerPay)
  },
  methods: {
    getUrlParam: function (name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    isWeChat() {
      let ua = window.navigator.userAgent.toLowerCase();
      return ua.match(/MicroMessenger/i) == "micromessenger"; // 判定為true則是微信瀏覽器，false則不是
    },
    handleType(openId) {
      const info = JSON.parse(localStorage.getItem("productInfo"));
      const obj = {
        amount: 1,
        rtype: 2,
        productId: info.id,
        price: info.price,
        totalPrice: info.price * 1,
        buyTime: info.buyTime,
        openId,
        jsApi: 1,
      };
      userPayType(obj).then((result) => {
        window.WeixinJSBridge.invoke(
          "getBrandWCPayRequest",
          {
            appId: result.jsApiData.appId, //公眾號ID，由商戶傳入
            timeStamp: result.jsApiData.timeStamp, //時間戳，自1970年以來的秒數
            nonceStr: result.jsApiData.nonceStr, //隨機串
            package: result.jsApiData.package,
            signType: result.jsApiData.signType, //微信簽名方式：
            paySign: result.jsApiData.sign, //微信簽名
          },
          function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              // 使用以上方式判斷前端返回,微信團隊鄭重提示：
              //res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對可靠。
            }
          }
        );
        this.getPayResult(result.orderId);
      });
    },
    // 循環查詢訂單是否完成
    async getPayResult(orderId) {
      const data = await getResult({ orderId: orderId });
      if (data == "poll") {
        //2秒輪詢
        this.timerPay = setTimeout(() => {
          this.getPayResult(orderId);
        }, 2000);
      } else {
        if (data == "success") {
          this.$router.push({
            name: "oldRecharge",
            query: {
              orderId: orderId,
            },
          });
        }
      }
    },
  },
};
</script>

本文轉載于：//juejin.cn/post/7550619805817913379

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。

posted @ 2025-09-26 15:18 林恒閱讀(64) 評論(0) 收藏舉報

刷新頁面返回頂部

中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

林恒