exam_mp/pages/user/share.vue

<script setup>
import Container from "../../components/Container/Container.vue";
import { ref, onMounted } from "vue";
import { request } from "../../utils/request";
const qrCode = ref("");

onMounted(() => {
  // 生成二维码
  request("api/question_bank/question_reception/user_share/get_invite_poster", {
    page_url: "/pages/index/index",
  }).then((res) => {
    console.log(res);
    qrCode.value = res.data
  });
});
</script>
<template>
  <Container
    :scrollStyle="{
      padding: 0,
    }"
    title="分享有礼"
  >
    <view class="bg">
      <image
        class="qr-code"
        :src="qrCode"
        mode="scaleToFill"
      />
    </view>
  </Container>
</template>
<style scoped lang="scss">
@import "@/uni.scss";
.bg {
  height: 100%;
  width: 100%;
  background: url("https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/MTMhEHtFleeotSfPxxtyozvk9Qr7tRK1lSzwO4L3.png");
  background-size: cover;
  position: relative;
  .qr-code {
    position: absolute;
    width: 448rpx;
    height: 448rpx;
    border-radius: 24rpx;
    background-color: red;
    border: 16rpx solid $primary;
    left: 50%;
    top: 37%;
    transform: translateX(-50%);
  }
}
</style>