YXGJ/cloud/businessCard/share.vue

<template>
    <view class="card-box">
        <lPainter ref="painter" css="position:relative;">
            <lPainterView :css="'background:#ffffff;border-radius:'+tovw(8)+';width:'+tovw(280)+';height:'+tovw(463)">
                <lPainterImage :src="imageUrl" :css="'width:'+tovw(280)+';height:'+tovw(200)+';border-radius:'+tovw(8)" object-fit="fill" />

                <lPainterView :css="'display: flex;flex-direction: column;margin:auto;align-items: center;position: absolute;bottom: '+tovw(25)+';width:'+tovw(140)">
                    <lPainterView :css="'width:'+tovw(56)+';height:'+tovw(56)+';border-radius:50%;background:#ffffff'">
                        <lPainterImage :src="userInfo.headpic || 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202406011717209838416B6150695f.webp'" :css="'width:'+tovw(56)+';height:'+tovw(56)+';border-radius:50%;border: 2px solid #FFFFFF'" object-fit="fill" />
                    </lPainterView>
                    <lPainterView :css="'display: flex;align-items: center;align-content: center;font-family: Source Han Sans SC, Source Han Sans SC;padding-top:'+tovw(10)">
                        <lPainterText :text="userInfo.name||'暂无'" :css="'font-weight: 500;font-size: '+tovw(18)+';color: #333333;'"></lPainterText>
                        <lPainterView :css="'border: 1px solid #C30D23;padding-top:'+tovw(5)+';padding-bottom:'+tovw(5)+';padding-left:'+tovw(5)+';padding-right:'+tovw(5)+';margin-top:'+tovw(15)+';margin-bottom:'+tovw(15)+';margin-left:'+tovw(12)+';margin-right:'+tovw(12)+';color: #C30D23;border-radius:'+tovw(10)"><lPainterText :text="userInfo.rolenames||'暂无'" :css="'font-size:'+tovw(10)"></lPainterText></lPainterView>
                    </lPainterView>

                    <lPainterView :css="'margin-bottom: '+tovw(10)+';display: flex;align-items: center;align-content: center;align-self: self-start'">
                        <lPainterImage src="/static/workbench/手机.svg" :css="'width:'+tovw(14)+';height:'+tovw(14)"></lPainterImage>
                        <lPainterText :css="'margin-left: '+tovw(10)+';font-weight: 400;font-size: '+tovw(12)+';color: #666666;'" :text="userInfo.phonebumber||'暂无'"></lPainterText>
                    </lPainterView>

                    <lPainterView :css="'margin-bottom: '+tovw(21)+';display: flex;align-items: center;align-content: center;align-self: self-start'">
                        <lPainterImage src="/static/workbench/邮箱.svg" :css="'width:'+tovw(14)+';height:'+tovw(14)"></lPainterImage>
                        <lPainterText :css="'margin-left: '+tovw(10)+';font-weight: 400;font-size: '+tovw(12)+';color: #666666;'" :text="userInfo.email||'暂无'"></lPainterText>
                    </lPainterView>

                    <lPainterView :css="'display: flex;flex-direction: column;align-content: center;align-items: center;font-weight: 400;font-size: '+tovw(10)+';color: #999999'">
                        <lPainterQrcode :text="qrCode + 'callingCard?userid=' + userid" :css="'width: '+tovw(70)+'; height: '+tovw(70)+';color:#000;'" />
                        <lPainterText :css="'font-weight: 400;font-size: '+tovw(12)+';color: #666666;margin-top:'+tovw(5)" :text="'请长按扫码'"></lPainterText>
                    </lPainterView>
                </lPainterView>
            </lPainterView>
            
        </lPainter>
        <view class="bottom">
            <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>
</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 {
            userInfo:{},
            userid:'',
            imageUrl:'',
            qrCode: this.qrCodePrefix,
            loading:false
        }
    },
    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;
                        },
                        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,
                                })
                            }
                        },
                    });
                },
            });
        },
        async getuserInfo (id) {
            let res = await this.$Http.basic({
                "id": 20240514161502,
                "content": {
                    userid:this.userid
                },
            })
            if (this.cutoff(res.msg)) return;
            this.userInfo = res.data
            this.userInfo.headpic = this.userInfo.attinfos.find(v => v.usetype == "headportrait") && this.userInfo.attinfos.find(v => v.usetype == "headportrait").url || '';
            console.log(this.userInfo,'用户信息');
        },
        async getImages () {
            let res = await this.$Http.basic({
                id:20240426154302,
                content: {
                    systemclient:'wechatsaletool',
                    locations:['business_card']
                }
            })
            if (res.data.business_card.length) {
                this.imageUrl = res.data.business_card[0].attinfos.length && res.data.business_card[0].attinfos[0].url
            }
            console.log(this.imageUrl,'海报广告图');
        }  
    },
    onLoad (option) {
        this.userid = option.id
        this.getImages()
        this.getuserInfo()
    },
    onShareAppMessage(res) {
        return {
            title:this.userInfo.name+'的名片',
            path:'/cloud/businessCard/share?id='+this.userInfo.userid
        }
    }
}
</script>

<style lang="scss">
.card-box {
    width:280px;
    height: 463px;
    margin: 20px auto 0 auto;
    box-sizing: border-box;
    .bottom {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 375px;
        height: 64px;
        background: #FFFFFF;
        box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
        box-sizing: border-box;
        z-index: 9999999;
        padding: 10px;
        .but { 
            width: 355px;
            height: 45px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            background: #C30D23;
            border-radius: 5px 5px 5px 5px;
            border: 1px solid #FFFFFF;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: space-evenly;
        }
    }
}
</style>