aishangjia-uniapp/components/house-poster-generator/index.vue

<template>
  <view class="house-poster-generator">
    <!-- 海报生成器 -->
    <l-painter
      ref="painter"
      custom-style="position: fixed; left: -9999px; top: -9999px;"
      :isCanvasToTempFilePath="true"
      @success="onPosterSuccess"
      @fail="onPosterFail"
      css="height: 800rpx; width: 600rpx;"
      file-type="png"
    >
      <template v-if="shouldRender">
        <l-painter-view css="height: 800rpx; width: 600rpx; backgroundColor: #fff; position: relative;">
          <!-- 房源主图 -->
          <l-painter-image
            :src="mainImageUrl"
            css="width: 600rpx; height: 400rpx; borderRadius: 0;"
          />

          <!-- 房源标题 -->
          <l-painter-text
            :text="houseData.houseTitle || '房源标题'"
            css="position: absolute; top: 420rpx; left: 30rpx; width: 540rpx; fontSize: 32rpx; fontWeight: bold; color: #333333;"
          />

          <!-- 价格信息 -->
          <l-painter-text
            :text="priceText"
            css="position: absolute; top: 480rpx; left: 30rpx; fontSize: 30rpx; fontWeight: bold; color: #ff4444;"
          />

          <!-- 房源详情 -->
          <l-painter-text
            :text="houseDetailsText"
            css="position: absolute; top: 530rpx; left: 30rpx; fontSize: 26rpx; color: #666666;"
          />

          <!-- 地址信息 -->
          <l-painter-text
            :text="houseData.address || '地址信息'"
            css="position: absolute; top: 580rpx; left: 30rpx; width: 540rpx; fontSize: 24rpx; color: #999999;"
          />

          <!-- 分享文案 -->
          <l-painter-text
            text="扫码查看房源详情"
            css="position: absolute; top: 650rpx; left: 30rpx; fontSize: 24rpx; color: #666666;"
          />

          <!-- 小程序码预留位置 -->
          <l-painter-view css="position: absolute; top: 630rpx; left: 470rpx; width: 100rpx; height: 100rpx; backgroundColor: #f5f5f5; borderRadius: 10rpx; display: flex; alignItems: center; justifyContent: center;">
            <l-painter-text
              text="小程序码"
              css="fontSize: 18rpx; color: #cccccc;"
            />
          </l-painter-view>
        </l-painter-view>
      </template>
    </l-painter>
  </view>
</template>

<script>
import LPainter from '@/uni_modules/lime-painter/components/l-painter/l-painter.vue'

export default {
  name: 'HousePosterGenerator',
  components: {
    LPainter
  },
  props: {
    // 房源数据
    houseData: {
      type: Object,
      default: () => ({})
    },
    // 房源图片列表
    swiperList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 海报生成状态
      isGenerating: false,
      // 当前生成的海报URL
      currentPosterUrl: '',
      // 是否应该渲染海报
      shouldRender: false
    }
  },
  computed: {
    // 主图URL
    mainImageUrl() {
      if (this.swiperList && this.swiperList.length > 0) {
        const firstImage = this.swiperList[0];
        const imageUrl = firstImage.url || firstImage.image || firstImage.src || firstImage || '';
        if (imageUrl && typeof imageUrl === 'string' && imageUrl.trim() !== '') {
          return imageUrl.trim();
        }
      }
      return 'https://dummyimage.com/600x400/f0f0f0/999999&text=暂无图片';
    },
    // 价格文本
    priceText() {
      return (this.houseData.monthlyRent || 0) + '元/月';
    },
    // 房源详情文本
    houseDetailsText() {
      const houseType = this.houseData.houseType || '户型';
      const extent = this.houseData.extent || 0;
      const floor = this.houseData.floor || '楼层';
      return houseType + ' | ' + extent + 'm² | ' + floor;
    }
  },
  methods: {
    // 生成房源海报
    async generatePoster() {
      if (this.isGenerating) {
        console.log('海报正在生成中，请稍候...');
        return;
      }

      try {
        this.isGenerating = true;
        console.log('开始生成房源海报...');

        // 检查房源数据
        if (!this.houseData || !this.houseData.houseTitle) {
          throw new Error('房源数据不完整');
        }

        // 启用渲染
        this.shouldRender = true;

        // 等待DOM更新
        await this.$nextTick();

        // 等待一段时间确保图片加载完成
        await new Promise(resolve => setTimeout(resolve, 1000));

        console.log('海报模板渲染完成，等待生成图片...');

        // 由于设置了 isCanvasToTempFilePath="true"，会自动触发 onPosterSuccess
        return new Promise((resolve, reject) => {
          this.resolveGenerate = resolve;
          this.rejectGenerate = reject;
        });

      } catch (error) {
        console.error('海报生成失败:', error);
        this.isGenerating = false;
        this.shouldRender = false;
        this.$emit('posterFailed', error);
        throw error;
      }
    },



    // 海报生成成功回调
    onPosterSuccess(tempFilePath) {
      console.log('lime-painter 生成成功:', tempFilePath);
      this.currentPosterUrl = tempFilePath;
      this.isGenerating = false;
      this.shouldRender = false;

      // 触发生成完成事件
      this.$emit('posterGenerated', tempFilePath);

      // 如果有等待的Promise，resolve它
      if (this.resolveGenerate) {
        this.resolveGenerate(tempFilePath);
        this.resolveGenerate = null;
        this.rejectGenerate = null;
      }
    },

    // 海报生成失败回调
    onPosterFail(error) {
      console.error('lime-painter 生成失败:', error);
      this.isGenerating = false;
      this.shouldRender = false;

      // 触发生成失败事件
      this.$emit('posterFailed', error);

      // 如果有等待的Promise，reject它
      if (this.rejectGenerate) {
        this.rejectGenerate(error);
        this.resolveGenerate = null;
        this.rejectGenerate = null;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.house-poster-generator {
  // 隐藏组件，只用于生成海报
  display: none;
}
</style>