exam_mp/components/ShareTemplate/ShareTemplate.vue

<script setup name="shareTemplate">
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 lPainterText from "@/uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue";
import { ref, onMounted } from "vue";
import { request } from "../../utils/request";
import { getRoute, objToUrlParams } from "../../utils/router";

const painter = ref(null);
const prosp = defineProps({
  onClose: {
    type: Function,
    default: () => {},
  },
  bg: {
    type: String,
    default: "",
  },
  correct: {
    type: Object,
    default: () => ({}),
  },
  onSuccess: {
    type: Function,
    default: () => {},
  },
});

const qrCode = ref("");

onMounted(() => {
  request("api/question_bank/question_reception/user_share/get_invite_qrcode", {
    page_url: "pages/index/index",
    scene: `id=${getRoute().params.id}`,
  }).then((res) => {
    if (res.data.image) {
      let url = res.data.image;
      qrCode.value = url;
    }
  });
});

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",
          });
          prosp.onClose?.();
        },
      });
    },
  });
};
</script>
<template>
  <view class="share-template">
    <view class="share-img">
      <l-painter ref="painter">
        <l-painter-view
          css="width: 620rpx; height: 889rpx; position: relative;"
        >
          <l-painter-image
            :src="bg"
            css="width: 620rpx; height: 889rpx; position: absolute;top: 0;z-index: 1;"
          />
          <l-painter-text
            :text="correct.right + '题'"
            css="position: absolute;top: 350rpx;left: 280rpx;color: #3e8647; z-index: 2;"
          />
          <l-painter-text
            :text="correct.total + '题'"
            css="position: absolute;top: 265rpx;color: #e7a552;left: 255rpx; z-index: 2;"
          />
          <l-painter-text
            :text="correct.error + '题'"
            css="position: absolute;top: 440rpx;left: 290rpx;color: red; z-index: 2;"
          />
          <l-painter-text
            :text="correct.rate.toFixed(1) + '%'"
            css="position: absolute;top: 550rpx;left: 100rpx;color: #e7a552;font-size: 30rpx; z-index: 2;"
          />
          <l-painter-image
            :src="qrCode"
            css="width: 146rpx; height: 146rpx;position: absolute;bottom: 18rpx;left: 18rpx;"
          >
          </l-painter-image>
        </l-painter-view>
      </l-painter>
    </view>
    <view class="footer">
      <div class="title">
        <view>分享更多好友</view>
        <uni-icons type="closeempty" class="closeempty" @click="onClose" />
      </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">
.share-template {
  height: 100vh;
  width: 100%;
  background: #999999;
  position: relative;
  .share-img {
    position: absolute;
    top: 368rpx;
    left: 65rpx;
  }

  .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>