<template>
  <view class="Mall4j result">
    <view class="pay-det">
      <view class="img">
        <image
          class="pay-img"
          src="/static/images/hook.png"
          alt=""
        />
      </view>
      <view class="error-text">
        支付成功，感谢您的购买
      </view>
    </view>
    <view class="pay-bottom">
      <view
        class="btn"
        @tap="jupout('index')"
      >
        返回首页
      </view>
      <view
        class="btn back"
        @tap="jupout('order')"
      >
        查看订单
      </view>
    </view>
    <!-- 广告弹窗 -->
    <popup-ad
      v-model="popupadShow"
      :popup-info="popupInfo"
      :shop-id="0"
    />
  </view>
</template>

<script setup>
onMounted(() => {
  const mchData = {
    action: 'onIframeReady',
    displayStyle: 'SHOW_CUSTOM_PAGE'
  }
  const postData = JSON.stringify(mchData)
  parent.postMessage(postData, 'https://payapp.weixin.qq.com')
  onGetPopupInfo()
})

// 获取弹窗广告信息
const popupadShow = ref(false)
const popupInfo = ref({})
const onGetPopupInfo = async () => {
  const info = await util.getPopupInfo({ pageType: 3, shopId: 0 })
  if (info) {
    popupInfo.value = info
    popupadShow.value = true
  }
}

const jupout = (type) => {
  let url
  if (type === 'index') {
    url = import.meta.env.VITE_APP_DOMAIN_ADDRESS + '/pages/index/index'
  } else {
    url = import.meta.env.VITE_APP_DOMAIN_ADDRESS + '/package-user/pages/order/order?orderStatus=0'
  }
  const mchData = { action: 'jumpOut', jumpOutUrl: url }
  const postData = JSON.stringify(mchData)
  parent.postMessage(postData, 'https://payapp.weixin.qq.com')
}

</script>
<style lang="scss" scoped>
@use "./result.scss";
</style>
<style scoped>
  /* eslint-disable vue-scoped-css/no-unused-selector */
  @media screen and (min-height:0px) and (max-height:449px) {
    html {
      font-size: 9px;
    }
  }

  @media screen and (min-height:450px) and (max-height:499px) {
    html {
      font-size: 10px;
    }
  }

  @media screen and (min-height:500px) and (max-height:549px) {
    html {
      font-size: 11px;
    }
  }

  @media screen and (min-height:550px) and (max-height:599px) {
    html {
      font-size: 12px;
    }
  }

  @media screen and (min-height:600px) and (max-height:649px) {
    html {
      font-size: 13px;
    }
  }

  @media screen and (min-height:650px) and (max-height:699px) {
    html {
      font-size: 14.5px;
    }
  }

  @media screen and (min-height:700px) and (max-height:749px) {
    html {
      font-size: 16px;
    }
  }

  @media screen and (min-height:750px) and (max-height:799px) {
    html {
      font-size: 16.5px;
    }
  }

  @media screen and (min-height:800px) and (max-height:849px) {
    html {
      font-size: 17.5px;
    }
  }

  @media screen and (min-height:850px) and (max-height:899px) {
    html {
      font-size: 18.5px;
    }
  }

  @media screen and (min-height:900px) and (max-height:949px) {
    html {
      font-size: 19.5px;
    }
  }

  @media screen and (min-height:950px) and (max-height:999px) {
    html {
      font-size: 20.5px;
    }
  }

  @media screen and (min-height:1000px) and (max-height:1280px) {
    html {
      font-size: 21px;
    }
  }

  @media (min-height:1281px) {
    html {
      font-size: 22px;
    }
  }
</style>
