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">
                    <icon v-if="painterText" class="icon" type="clear" size="3.733vw" @click="painterText = ''" />
                </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: uni.getStorageSync('site').attinfos[0].url || '',
            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) {

        }
    },
    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;
            }
        }
    }

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