exam_mp/pages/success/paysuccess.vue

<template>
  <Container
    class="body-content"
    title="支付成功"
    bgColor="#f7f7f7"
    :onBack="onBack"
    :scrollStyle="{
      padding: 0,
    }"
  >
    <view class="info-area">
      <image
        class="success-icon"
        src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/XTYZzM0uKjmKGV2cXN3QC5R1icHXmQDo10mUNZ6T.png"
        mode="aspectFill"
      ></image>
    </view>
    <view class="button-group">
      <view type="default" class="btn" @click="back">返回首页</view>
    </view>
    <view class="qr-code">
      <span>恭喜你成为VIP</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";
import { onShow } from "@dcloudio/uni-app";
import { request } from "@/utils/request";
const onBack = () => new Promise((resolve) => resolve("/pages/user/index"));
const back = () => {
  router.switchTab("/pages/user/index");
};
const src = ref("");
onShow(() => {
  request(
    "api/question_bank/question_reception/channel_active_code/random_detail"
  ).then((res) => {
    src.value = res.data.qr_code;
  });
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";
.qr-code {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: $success;
  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>