exam_mp/pages/user/share.vue

<script setup>
import Container from "../../components/Container/Container.vue";
import lPainter from "@/uni_modules/lime-painter/components/l-painter/l-painter.vue";
import lPainterView from "@/uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue";
import lPainterImage from "@/uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue";

import { ref, onMounted } from "vue";
import { request } from "../../utils/request";
const qrCode = ref("");
const painter = ref(null);
const showShare = ref(false);

const onSaveImage = () => {
  painter.value?.canvasToTempFilePathSync({
    fileType: "jpg",
    pathType: "url",
    quality: 1,
    success: (res) => {
      // 非H5 保存到相册
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function () {
          uni.showToast({
            title: "保存成功",
            icon: "success",
          });
          showShare.value = false;
        },
      });
    },
  });
};

onMounted(() => {
  // 生成二维码
  request("api/question_bank/question_reception/user_share/get_invite_qrcode", {
    page_url: "/pages/index/index",
  }).then((res) => {
    console.log(res);
    qrCode.value = res.data?.image;
  });
});
</script>
<template>
  <Container
    :scrollStyle="{
      padding: 0,
    }"
    title="分享有礼"
    v-if="!showShare"
  >
    <view>
      <view class="bg">
        <image class="qr-code" :src="qrCode" mode="scaleToFill" />
      </view>
    </view>
    <template #footer>
      <button @click="showShare = true">立即分享</button>
    </template>
  </Container>
  <view class="share-template" v-else>
    <view class="share-img">
      <l-painter ref="painter">
        <l-painter-view
          css="width: 686rpx; height: 888rpx; position: relative;"
        >
          <l-painter-image
            src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/12nSpSIh19rrhQBm0q3jvmT6dgXeN77q4el6cdXX.png"
            css="width: 686rpx; height: 888rpx; position: absolute;top: 0;"
          />
          <l-painter-image
            :src="qrCode"
            css="width: 448rpx; height: 448rpx; position: absolute;top: 268rpx;left: 119rpx;"
          />
        </l-painter-view>
      </l-painter>
    </view>
    <view class="footer">
      <div class="title">
        <view>分享更多好友</view>
        <uni-icons
          type="closeempty"
          class="closeempty"
          @click="showShare = false"
        />
      </div>
      <view class="items">
        <view class="save-img" @click="onSaveImage">
          <image
            src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/zGBXaE27pgRjEA6NoMLC75CSdMs3BKjh1vnpGKAc.png"
            mode="scaleToFill"
            class="save"
          />
          <text>保存图片</text>
        </view>
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
@import "@/uni.scss";
.bg {
  height: 1285rpx;
  width: 100%;
  background: url("https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/Ahdg7M3KIES9pNSnFB55Mlm9NNf6wrGq8oltvNUB.png");
  background-size: cover;
  position: relative;
  .qr-code {
    position: absolute;
    width: 322.14rpx;
    height: 322.14rpx;
    border-radius: 24rpx;
    border: 8rpx solid $primary;
    left: 50%;
    top: 36.5%;
    transform: translateX(-50%);
  }
}

.share-template {
  height: 100vh;
  width: 100%;
  background: #999999;
  position: relative;
  .share-img {
    position: absolute;
    top: 368rpx;
    left: 32rpx;
  }

  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(68rpx + 80rpx + 140rpx);
    background-color: #fff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;

    .title {
      display: flex;
      height: 80rpx;
      align-items: center;
      justify-content: center;
      position: relative;

      .closeempty {
        position: absolute;
        right: 32rpx;
      }
    }

    .items {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 140rpx;
      .save-img {
        display: flex;
        align-items: center;
        gap: 12rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;

        .save {
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
  }
}
</style>