app-govern/pages/user/erweima.vue

<template>
    <Cn-page :loading="loading" before-render>
        <view class="transfer" slot="body">
            <!-- <div class="transfer-img" ref="qrCodeUrl" /> -->
            <Cn-htmlToImg domId="content" @renderFinish="renderFinish" style="display: flex">
                <view class="content" id="content">
                    <view class="user-info">
                        <image class="avatar" :src="userInfo.avatar" v-if="userInfo.avatar"></image>
                        <image class="avatar" src="/static/head.png" v-else></image>
                        <view class="right">
                            <view class="user-info-name">{{ userInfo.nickname }}</view>
                            <view class="user-info-role">{{ roleName }}</view>
                        </view>
                    </view>
                    <uqrcode size="260" ref="uqrcode" canvas-id="qrcode" :value="content" @complete="loading = false"
                             :loading="false"></uqrcode>
                </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: false,
            content: '',
            img: '',
            userInfo: {},
        }
    },
    computed: {
        roleName() {
            let roleName = ''
            switch (this.userInfo.authorities) {
                case 'tourist':
                    roleName = '游客'
                    break
                case 'engineering_user':
                    roleName = '工程用户'
                    break
                case 'app_vip_user':
                    roleName = '正式用户'
                    break
                case 'market_user':
                    roleName = '营销用户'
                    break
                case 'operation_manager':
                    roleName = '运维管理员'
                    break
            }
            return roleName
        },
    },
    methods: {
        renderFinish(e) {
            this.img = e
        },
        save() {
            console.log(this.img)
            if (!this.img) {
                setTimeout(() => {
                    this.save()
                }, 500)
                return
            }
            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)
        console.log(this.userInfo)
        this.content = JSON.stringify({
            type: 'userId',
            id: this.userInfo.userIndex,
        })
    },
}
</script>
<style lang="scss">
.content {
    width: 330px;
    padding: 30px 0;
    border-radius: 12rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
}

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

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

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

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

        .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;
    background: #fff;
    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>