caimei-applets-store/components/views/cm-share-popup/cm-share-popup.vue

<template>
    <view class="share-popup">
        <!-- 弹窗 -->
        <uni-popup ref="sharePopup" type="bottom" :safe-area="safeArea" :is-mask-click="false">
            <view class="popup-content" :class="{ 'no-safe-area': !safeArea }">
                <view class="title">
                    <text class="title-text" v-if="title" v-text="title"></text>
                    <template v-else>
                        <slot name="title"></slot>
                    </template>
                </view>
                <view class="content">
                    <view class="row">
                        <button class="share item" open-type="share" @click="share">
                            <view class="icon-image"><image :src="staticUrl + 'icon-share-wechat.png'"></image></view>
                            <text class="label">微信</text>
                        </button>
                        <view class="poster item" @click="createPoster" v-if="!posterUrl">
                            <view class="icon-image"><image :src="staticUrl + 'icon-poster.png'"></image></view>
                            <text class="label">生成海报</text>
                        </view>
                        <view class="poster item" @click="savePoster" v-else>
                            <view class="icon-image"><image :src="staticUrl + 'icon-download.png'"></image></view>
                            <text class="label">保存相册</text>
                        </view>
                    </view>
                    <tui-divider :height="64"></tui-divider>
                    <view class="cancel" @click="cancel">取消</view>
                </view>
            </view>
        </uni-popup>

        <canvas canvas-id="poster" id="poster" class="canvas"></canvas>

        <!-- 海报 -->
        <view class="poster-container" v-show="visiable">
            <!-- 画布 -->
            <image :src="posterUrl" class="poster-image" @load="onImageLoading"></image>
            <!-- 下载按钮 -->
            <view class="poster item" @click="savePoster" v-if="downType === 'fixed'">
                <view class="icon-image"><image :src="staticUrl + 'icon-download.png'"></image></view>
                <text class="label">保存相册</text>
            </view>
        </view>
        <!-- 海报遮罩层 -->
        <view class="poster-mask" @click="cancel" v-if="downType === 'fixed' && posterUrl && visiable"></view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserProfile } from '@/common/auth.js'
import { generateWxUnlimited } from '@/common/share.helper.js'
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        data: {
            type: Object,
            default: () => {}
        },
        type: {
            type: String,
            default: 'normal',
            validator: value => {
                return ['product', 'normal', 'activity'].indexOf(value) > -1
            }
        },
        safeArea: {
            type: Boolean,
            default: true
        },
        // 海报下载类型
        downType: {
            type: String,
            default: 'fixed'
        }
    },
    data() {
        return {
            visiable: false,
            imageList: [],
            posterUrl: '',
            isLoading: false,
            // 海报数据信息
            posterData: {
                query: '', // 查询参数字符串
                path: '', // 页面路径
                avatar: '', // 用户头像
                username: '', // 用户名
                porductName: '', // 产品名
                productPrice: '', // 产品价格
                productOriginPrice: '', // 产品原价
                productImage: '', // 产品图片
                qrCodeImage: '' //页面二维码，小程序二维码
            }
        }
    },
    computed: {
        ...mapGetters(['systemInfo'])
    },
    methods: {
        onImageLoading() {
            this.isLoading = false
            console.log('123')
            uni.hideLoading()
        },

        // 绘制海报  初始化
        initDrawPoster() {
            this.downLoadImageTask()
        },
        open() {
            this.$refs.sharePopup.open()
            this.$emit('open')
        },
        close() {
            this.$refs.sharePopup?.close()
            this.$emit('close')
        },
        share() {
            this.$emit('share', this.posterUrl)
            this.visiable = false
            this.posterUrl = ''
            this.close()
        },
        cancel() {
            this.visiable = false
            this.posterUrl = ''
            this.close()
        },
        savePoster() {
            uni.saveImageToPhotosAlbum({
                filePath: this.posterUrl,
                success: res => {
                    this.share()
                }
            })
        },

        // 下载图片任务
        async downLoadImageTask() {
            // 执行下载图片
            try {
                const { avatar, productImage, qrCodeImage } = this.posterData
                // 背景图片
                const bgImageUrl = this.staticUrl + 'bg-share-01.png'
                // 用户头像
                const avatarUrl = avatar || this.staticUrl + 'icon-join-us.png'
                // 分享封面
                let coverUrl = productImage || this.staticUrl + 'icon-share.png'
                // 分享二维码
                let ewmUrl = qrCodeImage || this.staticUrl + 'icon-ewm-hehe.jpg'

                // 默认分享封面二维码
                if (this.type === 'normal') {
                    coverUrl = this.staticUrl + 'icon-share.png' // 默认封面
                    ewmUrl = this.staticUrl + 'icon-ewm-hehe.jpg' // 默认二维码
                } else {
                    const { data: iamgeUrl } = await generateWxUnlimited({
                        pagePath: this.posterData.path,
                        queryStr: this.posterData.query
                    })
                    ewmUrl = iamgeUrl
                }

                // 下载图片任务
                const taskList = [
                    this.downloadImage(bgImageUrl),
                    this.downloadImage(avatarUrl),
                    this.downloadImage(coverUrl),
                    this.downloadImage(ewmUrl)
                ]

                this.imageList = await Promise.all(taskList)
                this.drawPoster()
            } catch (e) {
                this.cancel()
                uni.hideLoading()
                setTimeout(() => {
                    this.$toast('生成海报失败，请重试')
                }, 200)
            }
        },

        // 绘制海报
        drawPoster() {
            const windowWidth = this.systemInfo.windowWidth
            // const scale = this.systemInfo.windowWidth / 750
            const scale = 1
            var ctx = uni.createCanvasContext('poster', this)
            // 绘制背景
            ctx.drawImage(this.imageList[0].tempFilePath, 0, 0, 540 * scale, 878 * scale)
            ctx.save()

            // 绘制用户信息
            this.drawPosterHead(ctx, scale)

            // 绘制白色矩形区域
            ctx.beginPath()
            ctx.rect(20 * scale, 154 * scale, 500 * scale, 704 * scale)
            ctx.setFillStyle('#FFFFFF')
            ctx.fill()
            ctx.clip()

            const type = this.type
            // 绘制底部内容
            if (!type || type === 'normal') {
                this.drawPosterFoot(ctx, scale)
            } else {
                this.drawGoodsInfo(ctx, scale)
            }

            ctx.restore()
            ctx.draw(true, () => {
                uni.canvasToTempFilePath(
                    {
                        canvasId: 'poster',
                        success: res => {
                            this.posterUrl = res.tempFilePath
                            this.visiable = true
                            if (this.downType === 'fixed') {
                                this.close()
                            }
                        },
                        fail() {
                            uni.hideLoading()
                        }
                    },
                    this
                )
            })
        },

        // 绘制海报头部
        drawPosterHead(ctx, scale) {
            const { username } = this.posterData
            // 绘制头像
            ctx.beginPath()
            ctx.arc(40 * scale + (90 * scale) / 2, 32 * scale + (90 * scale) / 2, (90 * scale) / 2, 0, 2 * Math.PI)
            ctx.setFillStyle('#fff')
            ctx.fill()
            ctx.clip()
            ctx.drawImage(this.imageList[1].tempFilePath, 40 * scale, 32 * scale, 90 * scale, 90 * scale)
            ctx.restore()
            ctx.save()
            // 绘制用户名和推荐语
            ctx.setFillStyle('#FFFFFF')
            ctx.font = 'bold 10px sans-serif'
            ctx.setFontSize(30 * scale)
            ctx.fillText(username, 146 * scale, (30 + 34) * scale, 350 * scale)
            ctx.font = 'normal 10px sans-serif'
            ctx.setFontSize(24 * scale)
            let txt = '强烈为你推荐该商城'
            if (this.type === 'product') {
                txt = '强烈为你推荐该商品'
            } else if (this.type === 'activity') {
                txt = '强烈为你推荐该活动'
            }
            ctx.fillText(txt, 146 * scale, (87 + 24) * scale, 350 * scale)
        },

        // 绘制海报底部
        drawPosterFoot(ctx, scale) {
            // 绘制中心图片
            ctx.drawImage(this.imageList[2].tempFilePath, 40 * scale, 174 * scale, 460 * scale, 460 * scale)
            // 绘制底部
            ctx.setFontSize(24 * scale)
            ctx.setFillStyle('#333')
            ctx.fillText('护肤上颜选，正品', 60 * scale, (710 + 24) * scale)
            ctx.fillText('有好货', 60 * scale, (710 + 24 + 40) * scale)
            // 绘制二维码
            ctx.drawImage(this.imageList[3].tempFilePath, 364 * scale, 690 * scale, 116 * scale, 116 * scale)
        },

        // 绘制商品信息
        drawGoodsInfo(ctx, scale) {
            // 参数处理
            let { porductName, productPrice, productOriginPrice } = this.posterData

            const porductNames = this.getProductNames(porductName)
            console.log(porductNames)

            // 绘制中心图片
            ctx.drawImage(this.imageList[2].tempFilePath, 40 * scale, 174 * scale, 460 * scale, 460 * scale)

            if (this.type === 'product') {
                productPrice = productPrice.toFixed(2)
                if (productOriginPrice) {
                    productOriginPrice = '￥' + productOriginPrice.toFixed(2)
                }

                // 绘制价格符号
                ctx.setFillStyle('#FF457B')
                ctx.setFontSize(24 * scale)
                ctx.fillText('￥', 40 * scale, (680 + 24) * scale)
                // 绘制购买价格
                ctx.setFontSize(40 * scale)
                ctx.fillText(productPrice, 62 * scale, (665 + 40) * scale)
                // 绘制原价
                if (productOriginPrice) {
                    ctx.setFillStyle('#999')
                    ctx.setFontSize(24 * scale)
                    ctx.fillText(productOriginPrice, 200 * scale, (680 + 24) * scale)
                    let m = ctx.measureText(productOriginPrice)
                    ctx.fillRect(200 * scale, (680 + 16) * scale, parseInt(m.width), 1)
                }
            }

            // 绘制商品标题
            ctx.setFillStyle('#333')
            ctx.setFontSize(26 * scale)

            porductNames.forEach((text, index) => {
                text = index === 1 ? text.slice(0, text.length - 1) + '...' : text
                ctx.fillText(text, 40 * scale, (732 + 26 + 40 * index) * scale)
            })
            // 绘制商品二维码
            ctx.drawImage(this.imageList[3].tempFilePath, 384 * scale, 702 * scale, 116 * scale, 116 * scale)
        },

        // 处理产品名称
        getProductNames(porductName) {
            const list = []
            if (porductName.length > 12) {
                for (let i = 0; i < porductName.length; i += 12) {
                    if (list.length < 2) {
                        list.push(porductName.slice(i, i + 12))
                    }
                }
            } else {
                list.push(porductName)
            }
            return list
        },

        // 下载图片
        downloadImage(url) {
            return new Promise((resolve, reject) => {
                uni.downloadFile({
                    url: url,
                    success(data) {
                        resolve(data)
                    },
                    fail(err) {
                        reject(err)
                    }
                })
            })
        },

        async createPoster() {
            if (this.isLoading) return
            this.isLoading = true
            // 合并海报数据
            this.posterData = { ...this.posterData, ...this.data }
            try {
                // 从本地缓存中获取微信用户基本信息
                let userProfile = this.$getStorage('USER_PROFILE')
                if (!userProfile) {
                    userProfile = await getUserProfile()
                    this.$setStorage('USER_PROFILE', userProfile)
                }
                this.posterData.avatar = userProfile.avatarUrl
                this.posterData.username = userProfile.nickName
                uni.showLoading({
                    mask: true,
                    title: '正在为您生成海报'
                })
                // 绘制海报
                this.initDrawPoster()
            } catch (e) {
                //TODO handle the exception
                uni.hideLoading()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.canvas {
    position: fixed;
    left: -600px;
    top: 0;
    width: 540px;
    height: 878px;
    opacity: 0;
}

.poster-mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 96;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
}

.poster-container {
    z-index: 99;
    position: fixed;
    top: 80rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 540rpx;
    overflow: hidden;
    text-align: center;

    .poster-image {
        display: block;
        width: 540rpx;
        height: 878rpx;
    }

    .poster {
        display: inline-block;
        margin: 0 auto;
        margin-top: 48rpx;
        .label {
            color: #fff !important;
        }
    }
}

.popup-content {
    position: relative;
    padding: 40rpx;
    padding-bottom: 0;
    border-radius: 16rpx 16rpx 0 0;
    background-color: #fff;

    &.no-safe-area {
        transform: translateY(34px);
    }

    &::after {
        position: absolute;
        content: '';
        width: 100%;
        height: 80rpx;
        bottom: -80rpx;
        left: 0;
        background-color: #fff;
    }

    .title {
        .title-text {
            font-size: 34rpx;
            color: #666;
            text-align: center;
            padding-bottom: 28rpx;
        }
    }
}

.popup-content,
.poster-container {
    .row {
        @extend .cm-flex-around;
    }

    .item {
        @extend .cm-flex-center;
        flex-direction: column;

        .label {
            color: #333;
            font-size: 26rpx;
            margin-top: 16rpx;
        }

        .icon-image {
            @extend .cm-flex-center;
            width: 100rpx;
            height: 100rpx;
            background-color: #f7f7f7;
            border-radius: 50%;

            image {
                width: 64rpx;
                height: 64rpx;
                display: block;
            }
        }

        &.share {
            line-height: inherit;
            padding: 0;
            margin: 0;
            border: 0;
            background: transparent;
            &::after {
                border: 0;
            }
        }
    }
    .cancel {
        font-size: 28rpx;
        color: #666;
        font-weight: bold;
        text-align: center;
        padding-bottom: 32rpx;
    }
}
</style>