orchestra-app/src/views/adapay/pay-define/index.tsx

import { browser, getUrlCode } from '@/helpers/utils'
import { Button, Cell, CellGroup, Icon } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'pay-define',
  setup() {
    const state = reactive({
      amount: 0,
      browserStatus: false,
      errorText: '',
      payType: '',
      code: null as any,
      wxAppId: ''
    })

    const getPayment = () => {}

    //  getPayment: throttle(function() {
    //   try {
    //     if (!(parseFloat(this.amount) > 0)) {
    //       this.$toast("支付金额异常");
    //       return;
    //     }
    //     removeAuthToken();
    //     const returnUrl = this.returnUrl.replace(/\^\^/gi, "&");
    //     let that = this,
    //       payMap = {
    //         orderNo: this.orderNo,
    //         sign: this.sign,
    //         amount: numeral(this.amount).format("0.00"),
    //         payChannel: this.payType, // 支付渠道
    //         orderBody: this.orderBody,
    //         orderSubject: this.orderSubject,
    //         tenantId: this.tenantId,
    //         returnUrl: returnUrl,
    //         notifyUrl: this.notifyUrl,
    //         platform: this.platform,
    //       };
    //     // 判断是否是微信公众号支付
    //     if (this.payType == "wx_pub") {
    //       payMap.code = this.code;
    //     }
    //     this.$toast.loading({
    //       duration: 0,
    //       message: "加载中...",
    //       forbidClick: true,
    //     });
    //     console.log(payMap);
    //     executePayment(payMap)
    //       .then((res) => {
    //         this.$toast.clear();
    //         let result = res.data;
    //         if (result.code == 200) {
    //           let payment = result.data;
    //           if (payment.status === "succeeded") {
    //             this.scanCodePay(payment);
    //           } else if (payment.status == "failed") {
    //             this.browserStatus = false;
    //             this.errorText = payment.error_msg;
    //             document.title = "ERROR";
    //           } else if (payment.status == "pending") {
    //             this.$dialog.alert({
    //               title: "提示",
    //               message: "订单处理中...",
    //               confirmButtonColor: "#269a93",
    //             });
    //           }
    //         } else {
    //           this.$dialog.alert({
    //             title: "提示",
    //             message: result.msg,
    //             confirmButtonColor: "#269a93",
    //           });
    //         }
    //       })
    //       .catch((err) => {
    //         this.$toast.clear();
    //         this.$dialog.alert({
    //           title: "提示",
    //           message: JSON.stringify(err),
    //           confirmButtonColor: "#269a93",
    //         });
    //       });
    //   } catch (error) {
    //     this.$dialog.alert({
    //       title: "提示",
    //       message: "网络异常，请检查网络连接",
    //       confirmButtonColor: "#269a93",
    //     });
    //   }
    // }, 500),
    // scanCodePay(data) {
    //   // 判断支付方式 如果是 test 模式 支付用测试url 否则用生产url
    //   if (this.payType == "alipay_qr") {
    //     let url =
    //       data.prod_mode === "false"
    //         ? data.expend.qrcode_url +
    //           "?payment_id=" +
    //           data.id +
    //           "&pay_channel=" +
    //           data.pay_channel
    //         : data.expend.qrcode_url;
    //     window.location.href = url;
    //   } else if (this.payType == "wx_pub") {
    //     let tempPayInfo = JSON.parse(data.expend.pay_info);
    //     this.payInfo = tempPayInfo;
    //     if (typeof WeixinJSBridge == "undefined") {
    //       if (document.addEventListener) {
    //         document.addEventListener(
    //           "WeixinJSBridgeReady",
    //           this.onBridgeReady,
    //           false
    //         );
    //       } else if (document.attachEvent) {
    //         document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady);
    //         document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady);
    //       }
    //     } else {
    //       this.onBridgeReady();
    //     }
    //   }
    // },
    // onBridgeReady() {
    //   let payInfo = this.payInfo;
    //   let orderNo = this.orderNo;
    //   WeixinJSBridge.invoke(
    //     "getBrandWCPayRequest",
    //     {
    //       appId: payInfo.appId, //公众号名称，由商户传入
    //       timeStamp: payInfo.timeStamp, //时间戳，自1970年以来的秒数
    //       nonceStr: payInfo.nonceStr, //随机串
    //       package: payInfo.package,
    //       signType: payInfo.signType, //微信签名方式：
    //       paySign: payInfo.paySign, //微信签名
    //     },
    //     (res) => {
    //       // if(res.err_msg == "get_brand_wcpay_request:ok" ){
    //       // 使用以上方式判断前端返回,微信团队郑重提示：
    //       //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
    //       // } else
    //       if (
    //         res.err_msg == "get_brand_wcpay_request:cancel" ||
    //         res.err_msg == "get_brand_wcpay_request:fail"
    //       ) {
    //         // 用户取消支付
    //         if (this.platform == "manager") {
    //           // 管理端
    //           // window.location.replace(validManageUrl() + '/#/paymentResult?orderNo=' + orderNo)
    //           this.$router.replace({
    //             path: "/paymentResult",
    //             query: {
    //               type: "error",
    //               groupType: "REPAIR",
    //               isBack: "off",
    //             },
    //           });
    //         } else if (this.platform == "teacher") {
    //           // 老师端
    //           window.location.replace(
    //             validTeacherUrl() +
    //               "/#/paymentResult?orderNo=" +
    //               orderNo +
    //               "&isBack=off"
    //           );
    //         } else {
    //           this.$router.replace({
    //             path: "/paymentResult",
    //             query: {
    //               type: "error",
    //               orderNo: orderNo,
    //               isBack: "off",
    //             },
    //           });
    //         }
    //       } else {
    //         // 使用以上方式判断前端返回,微信团队郑重提示：
    //         //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
    //         if (this.platform == "manager") {
    //           // 管理端
    //           // window.location.replace(validManageUrl() + '/#/paymentResult?orderNo=' + orderNo)
    //           this.$router.replace({
    //             path: "/paymentResult",
    //             query: {
    //               orderNo: this.orderNo,
    //               isBack: "off",
    //             },
    //           });
    //         } else if (this.platform == "teacher") {
    //           // 老师端
    //           window.location.replace(
    //             validTeacherUrl() +
    //               "/#/paymentResult?orderNo=" +
    //               orderNo +
    //               "&isBack=off"
    //           );
    //         } else {
    //           this.$router.replace({
    //             path: "/paymentResult",
    //             query: {
    //               orderNo: this.orderNo,
    //               isBack: "off",
    //             },
    //           });
    //         }
    //       }
    //     }
    //   );
    // },
    const goAuth = () => {
      // 用户授权
      const urlNow = encodeURIComponent(window.location.href)
      const scope = 'snsapi_base' //snsapi_userinfo   //静默授权 用户无感知
      const appid = state.wxAppId || 'wx751141096e75a4ee'
      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=STATE&connect_redirect=1#wechat_redirect`
      window.location.replace(url)
    }

    onMounted(() => {
      if (window.location.href.indexOf('?#') < 0) {
        window.location.href = window.location.href.replace('#', '?#')
      }
      // 判断当前浏览器
      const payType = state.payType
      if (browser().weixin) {
        if (payType === 'wx_pub') {
          //授权
          const code = getUrlCode('code')
          if (code) {
            state.code = code // 赋值code码
          }
          state.browserStatus = true
          document.title = '微信支付'
        } else if (payType == 'alipay_qr') {
          state.errorText = '请使用支付宝扫码'
        }
      } else if (browser().alipay) {
        if (payType === 'wx_pub') {
          state.errorText = '请使用微信扫码'
        } else if (payType == 'alipay_qr') {
          // 支付宝支付
          state.browserStatus = true
          document.title = '支付宝支付'
        }
      } else {
        state.errorText = '请在微信或支付宝客户端打开'
      }
      state.errorText && (document.title = 'ERROR')
    })
    return () => (
      <div class={styles.paydefine}>
        {state.browserStatus && (
          <div class={styles.container}>
            <div class={styles.amount}>￥{state.amount}</div>
            <CellGroup>
              <Cell title={'支付方式'} value={''}></Cell>
              <Cell title={'实付金额'} value={'￥0元'}></Cell>
            </CellGroup>

            <Button type="primary" block size="large" onClick={getPayment} round color="#01C1B5">
              立即支付
            </Button>
          </div>
        )}

        {!state.browserStatus && (
          <div class={styles.container}>
            <div class={styles['error-text']}>
              {state.errorText && <Icon class={styles['error-icon']} name="warning-o" />}

              {state.errorText}
            </div>
          </div>
        )}
      </div>
    )
  }
})