mdyxgj/team/userCenter/wechatbind.vue

<template>
    <view>
        <view class="painter-box" v-if="userMsg.userid" style="">
            <view>
                <l-painter ref="painter" css="position: relative;width: 280px; height: 426px">
                    <l-painter-image
                        src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405151715764356769B1a729abd.webp"
                        css="width: 280px; height: 426px;position: absolute;" />
                    <l-painter-image
                        :src="userMsg.headpic || 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202406011717209838416B6150695f.webp'"
                        css="width: 56px; height:56px;border-radius: 50%;position: absolute;top:20px;left:20px;z-index:2;"
                        object-fit="fill" />
                    <l-painter-text :text="name"
                        css="width:180px;line-height:24px;height:24px;position: absolute;left:86px;top:21px;z-index:2;font-family: Source Han Sans SC, Source Han Sans SC;font-weight: 500;font-size: 16px;color: #333333;  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" />
                    <l-painter-text :text="userMsg.areaname"
                        css="width:180px;line-height:20px;height:20px;position: absolute;left:86px;top:55px;z-index:2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-family: Source Han Sans SC, Source Han Sans SC;font-size: 14px;color: #666666;" />
                    <l-painter-text text="扫码绑定微信"
                        css="width:72px;line-height:17px;position: absolute;left:50%;bottom:269px;z-index:2;margin-left:-36px;font-size: 12px;color: #666666;font-family: PingFang SC, PingFang SC;" />
                    <l-painter-qrcode :text="qrCode + 'wechatBind?wechatBindUserid=' + userid + '&userName=' + userName"
                        css="width: 200px; height: 200px;position: absolute;left:50%;bottom:55px;z-index:2;margin-left:-100px;" />
                </l-painter>
            </view>
        </view>
        <view style="height: 70px;" />
        <view class="footer">
            <view class="invite" style="flex: 1;" hover-class="navigator-hover" @click="saveTheImage">
                保存图片
            </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"
import contact from "../../components/contact"

export default {
    components: { lPainter, lPainterView, lPainterText, lPainterImage, lPainterQrcode, contact },
    data() {
        return {
            userMsg: {
                userid: 0
            },
            qrCode: this.qrCodePrefix,
            name: "",
            userid: 0,
            userName: ""
        }
    },
    onLoad(options) {
        console.log(options)
        this.userid = options.id;
        this.userName = options.name;
        uni.setNavigationBarTitle({
            title: '绑定微信'
        });
        this.getUserMsg()
    },
    methods: {
        getUserMsg() {
            this.$Http.basic({
                "id": 20240510104102,
                "content": {},
            }).then(res => {
                console.log("获取个人信息", res)
                if (this.cutoff(res.msg)) return;
                res.data.headpic = res.data.attinfos.find(v => v.usetype == "headportrait") && res.data.attinfos.find(v => v.usetype == "headportrait").url || '';
                this.userMsg = res.data;
                this.name = res.data.enterprise_hr.name ? res.data.enterprise_hr.name + ',邀请您加入' : '邀请您加入'
            })
        },
        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;
                            that.$Http.basic({
                                "id": 20240319142702,
                                "content": {
                                    sat_sharematerialid: that.detail.sat_sharematerialid, type: 1
                                }
                            }).then(res => {
                                console.log(type, '记录', res)
                            })

                        },
                        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,
                                })
                            }
                        },
                    });
                },
            });
        },
        onBack() {
            uni.navigateBack();
        },
        getSheraDate() {
            return {
                title: this.name, // 标题
                path: "/pages/index/index?wechatBindUserid=" + this.userid + '&userName=' + this.userName, // 分享路径
                imageUrl: ""// 分享图
            };
        }
    },
    onShareAppMessage(res) {
        return this.getSheraDate()
    }
}
</script>

<style lang="scss" scoped>
.head {
    position: relative;
    width: 100vw;

    .custom {
        position: absolute;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 17px;
        color: #FFFFFF;

        .back {
            position: absolute;
            padding: 0 10px;
            left: 0;
            color: #fff;
            font-size: 12px;
            transform: rotateY(180deg);
        }
    }
}

.painter-box {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.share {
    display: flex;
    justify-content: space-around;
    width: 275px;
    margin: 30px auto 0;

    .item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        overflow: hidden;

        .iconfont {
            font-size: 28px;
            color: #fff;
        }
    }
}


.footer {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    height: 65px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
    padding: 5px 10px;
    box-sizing: border-box;

    .insert {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 168px;
        height: 45px;
        background: #FFFFFF;
        border-radius: 5px;
        border: 1px solid #999999;
        font-family: PingFang SC, PingFang SC;
        font-size: 16px;
        color: #666666;
        box-sizing: border-box;
        margin-right: 10px;
    }

    .invite {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 177px;
        height: 45px;
        background: #C30D23;
        border-radius: 5px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
    }
}
</style>