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

<template>
    <view class="cm-share-popup">
        <!-- 分享弹窗 -->
        <simple-share-popup ref="sharePopup" :posterUrl="posterUrl" @click="onPopupClick" @close="onClose">
            <slot name="title"></slot>
        </simple-share-popup>
        <!-- 海报画布 -->
        <canvas canvas-id="poster" class="poster-canvas"></canvas>
    </view>
</template>

<script>
import DrawPoster from './draw-poster.js'
import {mapState} from 'vuex'
import { codeQueryStr } from '@/pages/goods/mixins/share.helper.js'
import simpleSharePopup from './simple-share-popup/simple-share-popup.vue'
export default {
    name: 'cm-share-popup',
    components: {
        simpleSharePopup
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        },
        type: {
            type: String,
            default: 'normal',
            validator: value => {
                return ['product', 'normal', 'activity'].indexOf(value) > -1
            }
        }
    },
    data() {
        return {
            posterUrl: '',
            posterData: {
                /* 用户信息 */
                image: '', // 用户头像
                qrCode: '', // 用户二维码
                linkMan: '', // 用户名
                contractMobile: '', // 用户手机号
                /* 页面参数 */
                query: '/', // 查询参数字符串
                path: '', // 页面路径
                qrCodeImage: '', //页面二维码，小程序二维码

                /* 产品参数 */
                porductName: '', // 产品名
                productPrice: '', // 产品价格
                productOriginPrice: '', // 产品原价
                productImage: '', // 产品图片

                /* 活动参数 */
                activityName: '', // 活动名称
                activityImage: 'https://picsum.photos/400/400' //活动封面
            }
        }
    },
    computed: {
        ...mapState(['userInfo'])
    },
    methods: {
        // 分享操作
        onPopupClick(e) {
            if (e.type === 'create-poster') {
                console.log('生成海报')
                this.createPoster()
            } else {
                console.log('普通分享')
                this.$refs.sharePopup.close()
                this.onShare()
            }
        },
        // 打开弹窗
        open() {
            this.$refs.sharePopup.open()
            this.$emit('open')
        },
        close() {
            this.$refs.sharePopup.close()
        },
        onClose() {
            uni.hideLoading()
            this.$emit('close')
        },
        onShare() {
            this.$emit('share')
            console.log('分享')
        },
        // 创建海报
        async createPoster() {
            try {
                uni.showLoading({ title: '正在生成海报' })
                if (!this.posterUrl) {
                    this.posterData = { ...this.posterData, ...this.data }
                    const userProfile = await this.SellerService.GetSellerHome({ userId: this.userInfo.userId })
                    console.log('userProfile', userProfile)
                    this.posterData.image = '' // 用户头像
                    this.posterData.qrCode = '' // 用户二维码
                    this.posterData.linkMan = '' // 用户名
                    this.posterData.contractMobile = '' // 用户手机号
                    // const { data: qrCodeImage } = await this.SellerService.wxUnlimited({
                    //     page: this.posterData.path || 'pages/index/index',
                    //     scene: codeQueryStr(this.posterData.query),
                    //     check_path: process.env.NODE_ENV === 'production', // 是否校验页面
                    //     env_version: process.env.NODE_ENV === 'production' ? 'release' : 'trial', // 正式版 or 开发版
                    //     width: 200, // 二维码宽度
                    //     auto_color: false, // 自动颜色
                    //     line_color: { 'r': 0, 'g': 0, 'b': 0 }, // 线条颜色
                    //     is_hyaline: true // 透明底
                    // })
                    // const { data: qrCodeImage } = await generateWxUnlimited({
                    //     pagePath: this.posterData.path,
                    //     queryStr: this.posterData.query
                    // })
                    // this.posterData.qrCodeImage = qrCodeImage
                    // this.posterData.qrCodeImage = ''

                    switch (this.type) {
                        case 'product':
                            await this.createProductPoster()
                            break
                        case 'activity':
                            await this.createActivityPoster()
                            break
                        default:
                            await this.createNormalPoster()
                    }

                    // const {tempFilePath} = await this.canvasToTempFilePath()
                    // this.posterUrl = tempFilePath
                }
                uni.hideLoading()
                // 下载完成后转发
                // wx.showShareImageMenu({ path: this.posterUrl })
                this.onShare()
                // console.log(this.posterUrl)
            } catch (e) {
                console.log(e)
            } finally {
                uni.hideLoading()
            }
        },

        // 画布转图片临时链接
        canvasToTempFilePath() {
            return new Promise((resolve, reject) => {
                uni.canvasToTempFilePath(
                    {
                        canvasId: 'poster',
                        success: res => {
                            resolve(res)
                        },
                        fail() {
                            reject(false)
                        }
                    },
                    this
                )
            })
        },

        // 生成绘制文本数组
        generateTextArray() {
            const textArray = []
            const { productPrice, productOriginPrice, productName, activityName } = this.posterData

            // 处理价格
            let priceText = ''
            if (this.type === 'product') {
                if (productPrice) {
                    priceText += productPrice
                }
                if (productOriginPrice) {
                    priceText += '￥' + productOriginPrice
                }
            }
            textArray.push(priceText)
            console.log(this.posterData)
            // 处理产品名称
            if (productName) {
                const nameStr = productName || activityName
                textArray.push(nameStr.substring(0, 12))
                if (nameStr.length > 24) {
                    textArray.push(nameStr.substring(12, 23) + '...')
                } else {
                    textArray.push(nameStr.substring(12))
                }
            }
            return textArray
        },

        // 商品海报
        async createProductPoster() {
            try {
                const ctx = uni.createCanvasContext('poster', this)
                const drawPoster = new DrawPoster(ctx, {
                    avatarUrl: this.posterData.avatar,
                    userName: this.posterData.username,
                    subTitle: '强烈为你推荐该商品',
                    coverUrl: this.posterData.productImage,
                    // ewmUrl: this.posterData.qrCodeImage,
                    textArray: this.generateTextArray()
                })
                return await drawPoster.draw()
            } catch (e) {
                throw e
            }
        },

        // 活动页面
        async createActivityPoster() {
            try {
                const ctx = uni.createCanvasContext('poster', this)
                const drawPoster = new DrawPoster(ctx, {
                    avatarUrl: this.posterData.avatar,
                    userName: this.posterData.username,
                    subTitle: '强烈为你推荐该活动',
                    coverUrl: this.posterData.activityImage,
                    ewmUrl: this.posterData.qrCodeImage,
                    textArray: this.generateTextArray()
                })
                return await drawPoster.draw()
            } catch (e) {
                throw e
            }
        },

        // 普通海报
        async createNormalPoster() {
            try {
                const ctx = uni.createCanvasContext('poster', this)
                const drawPoster = new DrawPoster(ctx, {
                    avatarUrl: this.posterData.avatar,
                    userName: this.posterData.username,
                    subTitle: '强烈为你推荐该商城',
                    textArray: ['', '护肤上颜选，正品', '有好货~~']
                })
                return await drawPoster.draw()
            } catch (e) {
                throw e
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.poster-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 375px;
    height: 610px;
    border: 1px solid;
}
</style>