YXGJ/packageA/dailyYttendance/makePoster.vue

<template>
  <view>
    <view class="head">
      <view class="left"
        >海报预览
        <text class="text"> （请拖动到下方编辑、保存海报） </text>
      </view>
      <My_upload @uploadCallback="handleFileLink">
        <view class="right"> 更换背景图 </view>
      </My_upload>
    </view>
    <view class="painter-box">
      <view>
        <l-painter ref="painter" css="position: relative;">
          <!-- 背景图片 -->
          <l-painter-image
            :src="file.url"
            css="width: 280px; height: 500px"
            object-fit="fill"
          />
          <!-- 模板1 底部背景图 -->
          <l-painter-image
            v-if="mode == 'model1'"
            src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714733820B3d50bdd4.png"
            css="width: 280px; height: 130px;position: absolute;bottom: 0;z-index: 1;"
            object-fit="fill"
          />
          <block v-if="mode == 'model1' || mode == 'model2'">
            <!-- 站点logo -->
            <l-painter-image
              :src="siteLogo"
              css="width: 60px; height:60px;position: absolute;bottom: 0px;left:10px;z-index: 2;"
              object-fit="cover"
            />
            <!-- 文字描述 -->
            <l-painter-text
              :text="painterText"
              :css="
                'width: 190px; line-height:20px;position: absolute;bottom: 62px;left:10px;z-index: 2;font-size: 14px;color: #333333;line-clamp:2;' +
                'color:' +
                textColor
              "
            />
          </block>
          <!-- 二维码 -->
          <l-painter-qrcode
            v-if="mode != 'default' && detail.isqrcode"
            :text="detail.qrcodecontent"
            css="width: 64px; height: 64px;position: absolute;bottom: 22px;right:10px;z-index: 2;"
          />
        </l-painter>
      </view>
    </view>

    <view class="custom">
      <view class="models">
        <view class="group">
          <view class="title">海报样式</view>
          <view class="options">
            <view
              class="option"
              v-for="option in ops.painter"
              hover-class="navigator-hover"
              :key="option.mode"
              @click="mode = option.mode"
            >
              <image v-if="option.imgUrl" class="image" :src="option.imgUrl" />
              <image
                class="current"
                v-if="option.mode == mode"
                src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712715614059B373541f3.png"
              />
            </view>
          </view>
        </view>
        <view class="group">
          <view class="title">文字色彩</view>
          <view class="options">
            <view
              class="option"
              v-for="option in ops.text"
              hover-class="navigator-hover"
              :key="option.name"
              @click="textColor = option.color"
            >
              <view class="text" :style="option.style">
                {{ option.name }}
              </view>
              <image
                class="current"
                v-if="option.color == textColor"
                src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712715614059B373541f3.png"
              />
            </view>
          </view>
        </view>
      </view>

      <view class="text-box">
        <view class="title"> 海报文案 </view>
        <view class="input-box">
          <input
            class="input"
            maxlength="16"
            type="text"
            v-model="painterText"
          />
          <view class="icon-box" @click="painterText = ''">
            <icon v-if="painterText" class="icon" type="clear" size="3.733vw" />
          </view>
        </view>
      </view>
      <view
        class="but"
        @click="loading ? '' : saveTheImage()"
        hover-class="navigator-hover"
      >
        <u-loading-icon v-if="loading" color="#fff" />
        <text v-else> 保存 </text>
      </view>
    </view>

    <view class="tips">
      *自定义海报区域可以选择海报样式、文字色彩等，文案部分最多可输入16个字，若留空，则不显示自定义文案。
    </view>
    <view style="height: 20px" />
  </view>
</template>

<script>
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 lPainterText from "../../uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue";
import lPainterImage from "../../uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue";
import lPainterQrcode from "../../uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue";
export default {
  components: {
    lPainter,
    lPainterView,
    lPainterText,
    lPainterImage,
    lPainterQrcode,
  },
  data() {
    return {
      detail: {},
      file: {},
      siteLogo: "",
      painterText: "自定义海报区域可以选择海报样式",
      mode: "model1",
      textColor: "#000000",
      ops: {
        painter: [
          {
            mode: "model1",
            imgUrl:
              "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714638752Bc18af43.png",
          },
          {
            mode: "model2",
            imgUrl:
              "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714646946B480ca84d.png",
          },
          {
            mode: "model3",
            imgUrl:
              "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714656283B28c9d1df.png",
          },
          {
            mode: "default",
          },
        ],
        text: [
          {
            name: "灰色",
            color: "#999999",
            style:
              "color: #999999; background: #FFFFFF;border: 1px solid #DDDDDD;",
          },
          {
            name: "黑色",
            color: "#000000",
            style:
              "color: #000000; background: #FFFFFF; border: 1px solid #DDDDDD;",
          },
          {
            name: "白色",
            color: "#FFFFFF",
            style: "color: #FFFFFF;background: #CCCCCC;",
          },
        ],
      },
      loading: false,
    };
  },
  onLoad() {
    try {
      this.detail = this.$Http.data.detail;
      this.file = this.$Http.data.file;
      delete this.$Http.data;
    } catch (error) {}

    try {
      this.siteLogo = uni.getStorageSync("site").attinfos[0].url || "";
    } catch (error) {}
  },
  beforeDestroy() {
    this.deteleFiles();
  },
  methods: {
    saveTheImage() {
      let that = this;
      this.loading = true;
      this.$refs.painter.canvasToTempFilePathSync({
        fileType: "jpg",
        // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
        pathType: "url",
        quality: 1,
        success: (res) => {
          // 非H5 保存到相册
          // H5 提示用户长按图另存
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (e) {
              uni.showModal({
                title: "提示",
                content: "图片已保存到系统相册",
                showCancel: false,
              });
              that.loading = false;
              that.$Http
                .basic({
                  id: 20240319142702,
                  content: {
                    sat_sharematerialid: that.detail.sat_sharematerialid,
                    type: 1,
                  },
                })
                .then((res) => {
                  console.log(type, "记录", res);
                });
            },
            fail: ({ errMsg }) => {
              if (errMsg == "saveImageToPhotosAlbum:fail auth deny") {
                uni.showModal({
                  title: "提示",
                  content: "请授权添加到相册权限后再试！",
                  showCancel: false,
                  complete: (complete) => {
                    uni.openSetting({
                      success: (res) => {
                        that.loading = false;
                        if (res.authSetting["scope.writePhotosAlbum"]) {
                          this.saveTheImage();
                        } else {
                          uni.showModal({
                            title: "提示",
                            content: "未获取授权！已取消保存",
                            showCancel: false,
                          });
                        }
                      },
                    });
                  },
                });
              } else {
                that.loading = false;
                uni.showModal({
                  title: "提示",
                  content: "已取消保存",
                  showCancel: false,
                });
              }
            },
          });
        },
      });
    },
    handleFileLink(attachmentids, ownertable = "temporary", ownerid = 1, data) {
      this.deteleFiles();
      this.$Http
        .basic({
          classname: "system.attachment.Attachment",
          method: "createFileLink",
          content: {
            ownertable,
            ownerid,
            usetype: "painter",
            attachmentids,
          },
        })
        .then((res) => {
          console.log("绑定附件", res);
          if (this.cutoff(res.msg)) return;
          this.file = res.data[0];
        });
    },
    //删除附件
    deteleFiles() {
      if (this.file.ownertable == "temporary")
        this.$Http
          .basic({
            classname: "system.attachment.Attachment",
            method: "deleteFileLink",
            content: {
              linksids: [this.file.linksid],
            },
          })
          .then((res) => {
            console.log("处理删除附件", res);
            if (this.cutoff(res.msg)) return;
          });
    },
  },
};
</script>

<style lang="scss">
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;

  .left {
    line-height: 20px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-size: 14px;
    color: #333333;

    .text {
      color: #666666;
    }
  }

  .right {
    color: #c30d23;
    font-size: 12px;
  }
}

.custom {
  width: 355px;
  background: #ffffff;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  margin: 10px auto;

  .models {
    display: flex;
    justify-content: space-between;

    .group {
      .title {
        line-height: 20px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #333333;
        margin-bottom: 10px;
      }

      .options {
        display: flex;

        .option {
          position: relative;
          width: 40px;
          height: 40px;
          background: #cccccc;
          border-radius: 5px;
          margin-right: 5px;
          overflow: hidden;
          box-sizing: border-box;

          .image,
          .text {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            box-sizing: border-box;
            border-radius: 5px;
          }

          .current {
            position: absolute;
            height: 14px;
            width: 14px;
            top: 0;
            right: 0;
          }
        }

        .option:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .text-box {
    margin-top: 20px;

    .title {
      line-height: 20px;
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-size: 14px;
      color: #333333;
    }

    .input-box {
      display: flex;
      align-items: center;
      width: 335px;
      height: 50px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #cccccc;
      margin-top: 10px;
      padding: 10px;
      box-sizing: border-box;

      .input {
        flex: 1;
      }
    }

    .icon-box {
      display: flex;
      width: 30px;
      height: 30px;
      justify-content: center;
      align-items: center;
    }
  }

  .but {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 333px;
    height: 45px;
    background: #c30d23;
    border-radius: 5px;
    margin-top: 20px;

    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
  }
}

.tips {
  width: 355px;
  height: 34px;
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-size: 12px;
  color: #666666;
  margin: 10px auto;
}

.painter-box {
  display: flex;
  justify-content: center;
}
</style>