exam_mp/pages/success/error.vue

<template>
  <Container
    class="body-content"
    title="支付失败"
    bgColor="#F8F8F8"
    :onBack="onBack"
  >
    <view class="info-area">
      <image
        class="success-icon"
        src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/3vShBotzJZS3S9dogDOAf1P8J6CvXW2EzE24tXq6.png"
        mode="aspectFill"
      ></image>
    </view>
    <view class="button-group">
      <view type="default" class="btn" @click="back">返回首页</view>
    </view>
    <view class="qr-code">
      <span>是遇到问题了吧</span>
      <span>可联系客服进行反馈</span>
      <div class="card">
        <img :src="src" show-menu-by-longpress class="img" alt="">
        <span>可长按识别二维码</span>
      </div>
    </view>
  </Container>
</template>

<script setup>
import Container from "../../components/Container/Container.vue";
import { ref } from "vue";
import { router } from "../../utils/router";
const onBack = () => new Promise((resolve) => resolve("/pages/user/index"));
const back = () => {
  router.switchTab("/pages/user/index");
};
const src = ref("https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/XTYZzM0uKjmKGV2cXN3QC5R1icHXmQDo10mUNZ6T.png");

</script>

<style scoped lang="scss">
.qr-code {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: $error;
  gap: 12rpx;
  .card {
    margin:10rpx auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 80rpx;
    background-color: #fff;
    gap: 40rpx;
    border-radius: 40rpx;
    width: calc(100% - 64rpx);
    box-sizing: border-box;
    color: #333;

    .img {
      width: 181px;
      height: 181px;
    }
  }
}
.success-icon {
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 80rpx;
  margin-top: 50rpx;
}

/* 中间说明区域 */
.info-area {
  flex: 2;
  text-align: center;
  margin: 0 20rpx;
}

.info-text {
  font-size: 28rpx;
  color: #666;
}

/* 底部按钮组 */
.button-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.btn {
  border-radius: 40rpx;
  font-size: 32rpx;
  line-height: 84rpx;
  display: block;
  border: 1rpx solid green;
  text-align: center;
  width: 94%;
  margin: auto;
}
</style>