mall-front-app/pages/pay/result.vue

<template>
  <div class="page-box">
    <div class="container">
		小票
      <div class="img-wrapper">
        <img class="img-inner"  />
      </div>
      <div style="padding: .4267rem 0;">xxxx有限公司</div>
      <div class="list-style">
        <div class="title">订单状态</div>
        <div class="detail"></div>
      </div>
      <div class="list-style">
        <div class="title">订单尾号</div>
        <div class="detail"></div>
      </div>
      <div class="line-style"></div>
      <div class="list-style">
        <div class="title">支付总额</div>
        <div class="detail"></div>
      </div>
      <div class="list-style" style="justify-content: center;">
        <div class="button-style" @click="goBack">
          返回首页
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import 'https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js';
    const logo = ref('./imgs/logo.png');
    const order = ref({});
    const result = ref({});
    const url = ref('https://payapp.weixin.qq.com');

    // 组件挂载后执行
    onMounted(() => {
      getQueryVal();
      if (!result.value.out_trade_no) {
        parent.alert('没有订单号，请联系管理员！');
      } else {
        queryOrderInfo();
      }
      showCustomPage();
    });

    // 获取地址栏字段
    const getQueryVal = () => {
      const queryStr = window.location.search.substring(1); // 地址栏字符串
      const strArr = queryStr.split('&');
      if (strArr.length) {
        strArr.forEach((val) => {
          const subStrArr = val.split('=');
          result.value[subStrArr[0]] = subStrArr[1];
        });
      }
    };

    // 用于展示商家小票
    const showCustomPage = () => {
      const customData = JSON.stringify({
        action: 'onIframeReady',
        displayStyle: 'SHOW_CUSTOM_PAGE',
        height: 900
      });
      parent.postMessage(customData, url.value);
    };

    // 请求订单信息（需要保存订单信息的后台系统提供）
    // const queryOrderInfo = () => {
    //   axios({
    //     baseURL: 'https://www.xxxx.com/xxxxx',
    //     method: 'get',
    //     url: 'xxx', // 这里需要替换为实际的URL
    //     params: {
    //       out_trade_no: result.value.out_trade_no
    //     }
    //   })
    //   .then((res) => {
    //     if (res.data.success) {
    //       order.value = res.data.result;
    //     } else {
    //       parent.alert('出错了，请联系管理员！');
    //     }
    //   })
    //   .catch((err) => {
    //     parent.alert('出错了，请联系管理员！');
    //   });
    // };

    // 返回首页
    // const goBack = () => {
    //   const mchData = { action: 'jumpOut', jumpOutUrl: `${location.origin}/xxxxx/user` };
    //   const postData = JSON.stringify(mchData);
    //   parent.postMessage(postData, url.value);
    // };

</script>

<style scoped>
/* 您的样式 */
</style>