shangfutong-ui/jeepay-ui-uapp-agent/pages/publicizeCode/publicizeCode.vue

<template>
    <view class="pub-card">
        <view class="pub-title">我的邀请码：</view>
        <view class="pub-code">{{ userInfo.inviteCode }}<veiw class="copy-code" hover-class="hover-but-style"
                @tap="copyCode">复制</veiw>
        </view>
        <view class="pub-code-img">
            <view class="code-img">
                <image :src="qrCode.drawImg(userInfo.inviteCodeUrl)" />
            </view>
            <view class="tips-text"> 使用微信或浏览器扫一扫</view>
            <view class="tips-text"> 即可进入商家注册页</view>
        </view>
        <view class="save-img-but" hover-class="hover-but-style" @tap="saveImg(userInfo.inviteCodeUrl)">保存商家邀请码至相册</view>
       <view class="pub-code-img">
            <view class="code-img">
                <image :src="qrCode.drawImg(userInfo.agtInviteCodeUrl)" />
            </view>
            <view class="tips-text"> 使用微信或浏览器扫一扫</view>
            <view class="tips-text"> 即可进入服务商注册页</view>
        </view>
        <view class="save-img-but" hover-class="hover-but-style" @tap="saveFwsImg(userInfo.agtInviteCodeUrl)">保存服务商邀请码至相册</view>
    </view>
</template>

<script setup>
import { ref, reactive } from "vue"
import storageManage from "@/util/storageManage.js"
import qrCode from '@/util/qrCode.js'
import { saveHeadImgFile } from '@/util/saveImg.js'
const userInfo = reactive({ ...storageManage.userInfo() })
function copyCode () {
    uni.setClipboardData({
        data: userInfo.inviteCode
    }).then(res => {
        tips('复制成功')
    }).catch(err => {
        tips('复制失败')
    })
}
function tips (title) {
    return uni.showToast({ title, icon: 'none' })
}
function saveImg (codeUrl) {
    //#ifdef  H5 ||  APP-PLUS
    saveQrcodeImg(qrCode.drawImg(codeUrl))
    //#endif
    // #ifdef MP-WEIXIN
    saveWxQrcodeImg(qrCode.drawImg(codeUrl))
    //#endif
}
function saveFwsImg (codeUrl) {
    //#ifdef  H5 ||  APP-PLUS
    saveQrcodeImg(qrCode.drawImg(codeUrl))
    //#endif
    // #ifdef MP-WEIXIN
    saveWxQrcodeImg(qrCode.drawImg(codeUrl))
    //#endif
}
// 保存图片
const saveQrcodeImg = (data) => {
    saveHeadImgFile(data, 80)
        .then((success) => {
            tips('保存成功')
        })
        .catch((err) => {
            console.log(err)
            tips('保存失败')
        })
}
// #ifdef MP-WEIXIN
const saveWxQrcodeImg = (data) => {
    const fileManager = wx.getFileSystemManager()
    const filePath = wx.env.USER_DATA_PATH + '/res.png'
    //这块是定义图片的名称，可自定义其他
    fileManager.writeFile({
        filePath: filePath,
        data: data.slice(22),
        encoding: 'base64',
        success: (res) => {
            wx.saveImageToPhotosAlbum({
                filePath: filePath,
                success: function (res) {
                    //保存成功
                    tips('保存成功')
                },
                fail: function (err) {
                    console.log(err)
                    //保存失败
                    tips('保存失败')
                },
            })
        },
        fail: (err) => {
            tips('保存失败')
        },
    })
}
//#endif
</script>

<style lang="scss" scoped>
page {
    background-color: #f7f7f7;
}

.pub-card {
    margin: 50rpx auto;
    padding: 10rpx;
    width: 690rpx;
    background-color: #fff;
    border-radius: 32rpx;

    .pub-title {
        margin: 20rpx;
        font-size: 24rpx;
        color: #a6a6a6;
    }

    .pub-code {
        display: flex;
        align-items: center;
        margin: 0 20rpx;
        font-weight: 600;

        .copy-code {
            padding: 5rpx 15rpx;
            margin-left: 15rpx;
            font-size: 24rpx;
            font-weight: 500;
            background: rgba(119, 55, 254, 0.15);
            color: $primaryColor;
            border-radius: 10rpx;
        }
    }

    .pub-code-img {
        margin: 80rpx auto;
        width: 300rpx;

        .code-img {
            margin-bottom: 30rpx;
            width: 300rpx;
            height: 300rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .tips-text {
            margin: 15rpx 0;
            font-size: 24rpx;
            color: #a6a6a6;
            text-align: center;
        }
    }

    .save-img-but {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 670rpx;
        height: 110rpx;
        background-color: $primaryColor;
        color: #fff;
        border-radius: 15rpx;
    }
}

.hover-but-style {
    opacity: 0.5;
}
</style>