app-govern/pages/device/share.vue

<template>
    <Cn-page :loading="loading" noPadding beforeRender>
        <view slot="body" class="transfer">
            <!-- <div class="transfer-img" ref="qrCodeUrl" /> -->
            <Cn-htmlToImg domId="content" @renderFinish="renderFinish" style="display: flex">
                <view class="content" id="content">
                    <view class="content-title">灿能物联</view>
                    <view class="content-des">寻电能质量之因</view>
                    <view class="content-des">解电能质量之惑</view>
                    <view class="content-des ">治电能质量之本</view>
                    <view class="user-info "
                          style="margin-top:200rpx;margin-bottom: 0;background: #fff;padding:20rpx;border-radius: 12rpx;overflow: hidden">
                        <uqrcode size="60" ref="uqrcode" canvas-id="qrcode" :value="content"
                                 @complete="complete"
                                 :loading="false"></uqrcode>
                        <view class="right ml20">
                            <view class="user-info-name" style="font-size: 28rpx">{{
                                    userInfo.nickname
                                }}向你分享了{{ number }}台设备，请打开灿能物联APP扫码查看
                            </view>
                        </view>
                    </view>
                </view>
            </Cn-htmlToImg>
            <view class="transfer-text">
                <!--            <view>换个样式</view>-->
                <view @click="save">保存图片</view>
            </view>
            <!-- <view class="transfer-btn">
                <button class="transfer-btn-item" style="background-color: #fff; color: #111" @click="back">
                    返回
                </button>
                <button class="transfer-btn-item ml20" @click="home">转移成功</button>
            </view> -->
        </view>
    </Cn-page>
</template>
<script>
// import QRCode from 'qrcodejs2'
// import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';

import {base64ToPath} from "image-tools";
import setting from "@/pages/engineering/setting.vue";

export default {
    data() {
        return {
            loading: true,
            content: '',
            img: '',
            userInfo: {},
            number: 0
        }
    },
    computed: {
        roleName() {
            let roleName = ''
            switch (this.userInfo.authorities) {
                case 'tourist':
                    roleName = '游客'
                    break
                case 'engineering_user':
                    roleName = '工程用户'
                    break
                case 'app_vip_user':
                    roleName = 'VIP用户'
                    break
                case 'market_user':
                    roleName = '营销用户'
                    break
                case 'operation_manager':
                    roleName = '运维管理员'
                    break
            }
            return roleName
        },
    },
    methods: {
        complete() {
            console.log('图片渲染完成')
            this.loading = false
        },
        renderFinish(e) {
            this.img = e
        },
        save() {
            if (!this.img) {
                setTimeout(() => {
                    this.save()
                }, 500)
            }
            base64ToPath(this.img).then((res) => {
                console.log(res)
                uni.saveImageToPhotosAlbum({
                    filePath: res,
                    success: () => {
                        this.$util.toast('已保存到系统相册')
                    },
                    fail: function (err) {
                        console.log(err)
                    },
                });
            })
        }
    },
    onLoad(options) {
        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
        this.content = JSON.stringify({
            type: 'shareDevice',
            id: options.id,
        })
        this.number = options.id.split(',').length
        console.log(this.content)
    },
}
</script>
<style lang="scss">
.content {
    padding: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url('data:image/png;base64,/9j/4AAQSkZJRgABAQAAkACQAAD/4QCARXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAACQAAAAAQAAAJAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAtagAwAEAAAAAQAABBgAAAAA/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/AABEIBBgC1gMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2wBDAAICAgICAgMCAgMFAwMDBQYFBQUFBggGBgYGBggKCAgICAgICgoKCgoKCgoMDAwMDAwODg4ODg8PDw8PDw8PDw//2wBDAQICAgQEBAcEBAcQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/3QAEAC7/2gAMAwEAAhEDEQA/AODpev4UlPAwK/0B6n8Y9BoBzSjPelAOadyKQ0huBTgtKeadghelAxMCkA7Uoz3oCnqKBIXHan4457Uhx+NKecUFIB0pNvHXFJyDSk5pA2AGaXAJ9MU8HA60duKVwsRkdhTQO1PwwPJpcelO4WEUUgBHWnYxS4FS2DjdCD3qMkk4HSpMEn2pCtNMqwypRgjim7R0pQKdxC5xxTSg+9TwoPJoxxg1KGkRjbTQMHIpyqT2p+R0AqiBi5xSEkc0+k2A5pXQMUEs3NKy8U1RzkCpOvWhopEe31p2wbetLjtSnAHtQ2NIiOR70uBjNPJ+XjmmClcSQ0kDpR8xHFIVy1SZ28VVwsNKsOlPCnGafgkcUJ15NJyBIiKgfWgAkVIeTxQQRxRzEu41VXHvQcjil9ulLtPXqKLghuD1FBB70/2pGXvSuUiM9KTb0OaXn0pO/rTVxtj1GBzS4z0oyDxmj6UhLUQ9aYMkYxTsHNOIwKd7DshvAHvSL15pxXJyKaTjipZXLdCnrTQ5ztFKR3FO49OaYNAVHenAjGFpoPY0uOPlovoTFhv524pMdaf8oHvTTjGT1pDGE4FIpbt2pVQ9TUygCtCAVwevBpCPmyKXA60pBYcHpWYcw0kucU8x4XrTFXJ2ipGRgM5qpCUdSPaUGSc1II1bkHBpvXjvTgFX5j1qR8uocjg07apHPWmB+c44pA/NOxpbUCDSjg05h096eU28nmi+hLTuM3nuKM5zjilyBUyqre1TccVYhCjHJ5qQcjFL5fltz0pG+bgUr6lyEBQcZqTORgVGsabuasbAKTsa0mMIJXBpFwowKdzmgpxupDmuowgsMihVGctTkYcg0F1zgU0yI2tcfuA6U0yHHApAVOCDU5Khc45pPQ3hqiEZPNSqFJ47UzzCeAKlX5ecVLISGuSDinx896RlLcimr8o96Q7jmUA5oOMU4YbrTSpzx0qbiaHLu28VHgj5jU6kdKTOady426iBQ/PSl8oetBOfu8UmG9ak10P/0OEUU/jHNNxTwoxX+gB/GYY4zSjkcUh44FKvrQMdT8fLUYyuTUm7Kg4qWxobjjinBSBmkGCM0/NCuOw0460q8U7A6mgqD0obC2o0jsaaFAOalIwOaMAnFK5LQhXPSnbSBxSbdvQ5py57mkU0NwSfmobjgUYz1oppg0IoJ5NLnrSj2pM+1IYq46mg46ikPAzQWzQFhp55pME4p3XoKAADQCQ8fnSMKQbgemaXNA0tBvXijbtPFKDg8Up9qdyWMbilBAGDUinAwaY/PNIEhucdKU8c09cEUEYNMdkNxu6UpzjFLtNN+lIQgUCkbHQVJtz1qMjByKCkJ5fOaeoTGGpRk9KCAfancJR6iYAPBo5zgUfWlT1pWI3EAYE4pPmHWnlgM+tIW4JNBQHDc0oJApqkAetL3xTRNtbiE4FKCcetO2Z6mk2jPBpsdiP71G3aeaeRt5p3D4zUjsRhBnI70/DBcCk2Fc45pV3Y5FADVU5O6nEdcU1gTSgcUXBgi9zSEZyaeN34Uh449aEO+g1cDqacdo5pGXABppIxzxQi90KQDzmmjrgGkwT9KkVVHOeaDNRsh6jHXrSOKFODSH5zyaCkJjJ9KcMA9c0wja2KkAyOBQS0JgdaF2hvTNPBKnGM0OehxQRFajfunIpctjLUqs2OnFNZgaBxQ0E7sipQSeMUgGBxSEbeV60F2F2qOvWm/KTgCkGZOtSBCv0pjQ5o9ozmkVieG6VJnfihlXoKzZc49UMYKfu0LkHI79aQ7U5NSZBGRQQkPYA9aQDHSm4D8ng1Ivy8daRUtxu0A5NSjaRUZjZzkHFSD5TzSuEXqNPTFIp2jHWpCwPSm8mmaNDffpSAqDgjrTyRTinFFxRWjQiomcipBggimKo5FKwKj5ec1my0hm/acAZqYgMOeKjjVgctxmpiAT70my7Meq7VxnNMCDPz0oU547UhJbqOlMVgKj8KkzgDjiovmJx2pxHFQ9S4vQXjPSk3Iv3hRwBnNHBpJlxghAVIyBS/hTlfAwBTvM9qY7H/0eGHIpRQfajviv8AQA/jJDhijHPFOG0daXhuKTHYf9aGHYUh4xTwPWoLG4xSFuafgE8UYx1qk9RNjaXHrQuAaeQDSe5TG9cAVIVxTSuOlOGR1pDa0EUY60vy9aDzzTaBRQAE04EChQRTselBTiR/NnNB5p2QetA5HHFFyYxE5FNxzzTuelJhs4oNH2HggDim4zzSYJpQSM0EJDctnNO9zQCTTsZ/CgrQYOelPwehpnQ4pwOBzQTJiEYpDzxUgGaZgigQzO04p3HU0uMnNJjDUXL6CdTgU7bgVKQo6UgHGaVyY6jBjHNRkHqKfntSAYplNaAD8tIBg5pSOM9aUHPQUBMeAh60zgEhaVSAfmFBG75hxigmMdRQB0PWm4PSkJzxUmzC5oKSEA25FICV5p2D2p2xcfNS5ieUi+9yKMAGnAHt0pTzxTHsxuNxpCu3n1p+0gUwE9CaVypgpPc0uRnJNLgk80Y4wKZEVcTJzntRnjgUJwcNTnwPu0mNxGLuzyKcQM5oLZ60DJFGoRiLjIyaiYHdTzvYfSmjJ7UIvYlBUJxTOOtIFIOaDkdO9FyUugDJOadjPWjoOaF54PSmUtBVwfekUktikf5T8tKpCj5utBMn0HFdp60pO7rSjkZqPfk4IoRDELcbVqVQoHzUxUGevWpD8vXmgtNNDeC2Fp2AopBgHcoqRfm61LFFX3GAZocEcCpd2BjFM+bOcUkxvYcigJ71GRg7jS/MelC5JxSByuIQr8GngKBTJFOeKkVMihlQ3HADrTl+Y0qfKMNzUgK54qXI26jNxB20uCetSEK2KcFUHJNK4lAq7cNxTsOTipGGenSgKRgjrT5h2uxnlsakJbG3HApSWFMkc4AWpHYVMKMYpynB5piE45qwFyM0mwjFsiY7jmlxhs0pT1NL/DU8xfKwJBPF
    background-size: cover;

    .content-title {
        font-size: 40rpx;
        color: #fff;
        margin-bottom: 100rpx;
    }

    .content-des {
        margin-bottom: 20rpx;
        color: #Fff;
        fons-size: 28rpx;
    }
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 50rpx;
    width: 260px;

    .avatar {
        margin-right: 20rpx;
        height: 100rpx;
        width: 100rpx;
        flex-shrink: 0;
        border-radius: 8rpx;
    }

    .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .user-info-name {
            font-size: 32rpx;
            color: #333333;
        }

        .user-info-role {
            margin-top: 10rpx;
            font-size: 28rpx;
            color: #999999;
        }
    }
}

.transfer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
    box-sizing: border-box;
    padding: 100rpx 0;

    .transfer-img {
    }

    .transfer-text {
        display: flex;
        font-size: 28rpx;
        color: rgb(122, 126, 153);
    }

    .transfer-btn {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 100rpx;
        width: 100%;

        .transfer-btn-item {
            flex: 1;
            height: 80rpx;
            border-radius: 12rpx;
            background-color: $uni-theme-color;
            font-size: 28rpx;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>