new-zx-front-app/pages/pay/result.vue

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

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  name: 'App',
  setup() {
    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);
    };

    return {
      logo,
      order,
      goBack
    };
  }
};
</script>

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