VAVABUY/components/paymentModal/googlePayment_app.vue

<template>
  <view class="wallet_app" v-if="show">
    <view class="wallet_footer" :style="{ 'height': footerHeight + 'px' }">
      <view class="close">
        <view class="close_icon" @click.stop="close">
          <uni-icons type="closeempty" size="28" color="var(--text-01)"></uni-icons>
        </view>
      </view>
			<!-- <iframe :src="fullUrl"></iframe> -->
    </view>
  </view>
</template>


<script>
import { systemInfo, Toast, openUrl } from "@/utils"
import { SHOP_SUBMIT_PAY } from '@/api'

export default {
  props: {
    paramsObj: { type: Object }
  },
	
  data() {
    return {
      webview: null,
      show: false,
      footerHeight: 0,
      googleParams: {},
			// srcUrl: 'http://192.168.5.103:4000/static/hybrid/html/google.html',
			srcUrl: 'https://get.vavabuy.com/google.html',
    }
  },
	
	
  methods: {
    open() {
      this.show = true;
      this.$nextTick(() => {
        this.fetchPaymentInfo()
      })
    },
    close() {
      this.webview && this.webview.close();
      this.webview = null;
      this.show = false
    },
		
    getRequest(url) {
      let theRequest = new Object();
      let index = url.indexOf("?");
      if (index != -1) {
        let str = url.substring(index + 1);
        let strs = str.split("&");
        for (let i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
      }
      return theRequest;
    },
		
    async initWebViewBelowElement(eventData) {
      console.log(21121);

      try {
        let wvPath = '/static/hybrid/html/google.html';
        let wv = plus.webview.create("", wvPath, {
          'uni-app': 'none',
          position: 'fixed',
          background: 'transparent',
          left: '24px',
          right: '24px',
          top: this.footerHeight + 48 + 28 + 'px',
          overflowY: 'auto',
        });
        wv.loadURL(wvPath);
        wv.overrideUrlLoading({ mode: 'reject' }, (e) => {
					console.log('回调地址',JSON.stringify(e));
					if (e.url && e.url.includes('pay.google.com')) return openUrl(e.url);
          let { str } = this.getRequest(e.url);
          str = unescape(str)
          return this.handleBack(str)
        });
        wv.evalJS(`
        window.dispatchEvent(new CustomEvent('appMessage', 
        { detail: ${JSON.stringify(eventData)} }))`);
        this.$root.$scope.$getAppWebview().append(wv);
        this.webview = wv;
      } catch (error) {
        console.error(error);
      }
    },
		
    async fetchPaymentInfo() {
			const params = this.paramsObj ? this.paramsObj : {}
      try {
        const res = await SHOP_SUBMIT_PAY({
          payType: 'airwallex',
          ...params
        })
        const { id, client_secret, amount, currency, countryCode } = res.data;
				const paramsData = {
					intent_id: id,
					client_secret: client_secret,
					amount: {
						value: amount,
						currency,
					},
					countryCode: countryCode
				}
        this.googleParams = paramsData;
        this.initWebViewBelowElement({ type: 'pay', ...this.googleParams })
      }
			catch (error) {
				console.log('----- fetch info error ----- ', JSON.stringify(error))
				Toast(error.msg)
			}
    },
		
    handleBack(str) {
      console.log('----- 收到消息 -----', str);
    }
  },
	
  async mounted() {
    const res = await systemInfo();
    this.footerHeight = res.windowHeight / 2;
		/* this.$nextTick(() => {
		  this.fetchPaymentInfo()
		}) */
  }
	
}
</script>


<style lang="less" scoped>
.wallet_app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999999;
  background-color: rgba(0, 0, 0, .5);
  display: flex;
  align-items: flex-end;

  .wallet_footer {
    width: 100%;
    background-color: #fff;
    padding: 24px;
    border-radius: 10px 10px 0 0;

    .close {
      height: 28px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>