gypsy-crm-frontend-vu/components/cwg-pay-webview-popup.vue

<template>
  <cwg-popup
    :visible="visible"
    :title="displayTitle"
    width="min(920px, 94vw)"
    :show-footers="false"
    footer-type="none"
    :mask-click="true"
    @update:visible="onVisibleChange"
    @close="handleClose"
  >
    <view class="pay-webview-body">
      <!-- #ifdef H5 -->
      <iframe v-if="payUrl" :src="payUrl" class="pay-webview-frame" frameborder="0" />
      <!-- #endif -->
    </view>
  </cwg-popup>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { payWebviewState, closePayWebview } from '@/hooks/usePayWebview'

const { t } = useI18n()

const visible = computed({
  get: () => payWebviewState.value.visible,
  set: (val) => {
    if (!val) closePayWebview()
  },
})

const payUrl = computed(() => payWebviewState.value.url)

const displayTitle = computed(() => {
  return t('Shop.Order.OrderDetails')
})

function onVisibleChange(val) {
  if (!val) closePayWebview()
}

function handleClose() {
  closePayWebview()
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.pay-webview-body {
  width: 100%;
  height: 70vh;
  min-height: px2rpx(360);
  max-height: 80vh;
  overflow: hidden;
  border-radius: px2rpx(8);
  background: var(--bs-body-bg, #fff);
}

.pay-webview-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
</style>