teambuy-front/pages_order/mine/share.vue

<template>
    <!-- 导航栏 -->
    <view class="share-page">
    <navbar title="推广链接" leftClick @leftClick="$utils.navigateBack" bgColor="#019245" color="#fff" />
    
        <!-- 名片展示区域 -->
        <view class="card-container">
            <!-- 用户头像 - 放在卡片容器外，使其一半在卡片之上 -->
            <view class="avatar-container">
                <image :src="shareData.userInfo.avatar" class="avatar" mode="aspectFill" />
            </view>

            <view class="share-card">
                <!-- 用户信息 -->
                <view class="user-info">
                    <view class="nickname">{{ shareData.userInfo.nickname }} {{ shareData.userInfo.role }}</view>
                </view>

                <!-- 小程序码 -->
                <view class="qrcode-container">
                    <image :src="shareData.qrCodeImage" class="qrcode-image" mode="aspectFit" />  
                </view>

                <!-- 邀请码 -->
                <view class="invite-code">
                    邀请码：{{ shareData.inviteCode }}
                </view>
            </view>
        </view>

        <!-- 底部按钮区域 -->
        <view class="action-buttons">
            <button class="action-btn share-btn" @click="shareToFriend">
                分享给好友
            </button>
            <button class="action-btn save-btn" @click="saveToLocal">
                保存到本地
            </button>
        </view>
    </view>
</template>

<script>
import navbar from '@/components/base/navbar.vue'
import { shareData } from '@/static/js/mockShare.js'

export default {
    components: {
        navbar
    },
    data() {
        return {
            shareData: null
        }
    },
    onLoad() {
        this.shareData = shareData
    },
    methods: {
        // 分享给好友 - 微信小程序特有功能
        shareToFriend() {
            // 触发按钮形式的分享，提示用户使用右上角的分享
            uni.showModal({
                title: '分享提示',
                content: '点击右上角"..."按钮，选择"转发"即可分享给好友',
                confirmText: '我知道了',
                confirmColor: '#019245',
                showCancel: false
            })
        },

        // 保存到本地
        saveToLocal() {
            // 微信小程序保存图片需要用户授权
            try{
                this.$authorize('scope.writePhotosAlbum')
                this.saveImage()
            } catch (error) {
                
            }
        },

        // 保存图片的具体实现
        saveImage() {
            uni.showLoading({
                title: '保存中...'
            })

            // 直接保存小程序码图片
            uni.getImageInfo({
                // 获取图片信息
                src: this.shareData.qrCodeImage, // 图片的本地路径
                success: (res) => {
                    uni.saveImageToPhotosAlbum({
                        // 保存图片到系统相册
                        filePath: res.path, // 返回的图片
                        success: () => {
                            uni.hideLoading()
                            uni.showToast({
                                title: '已保存到相册',
                                icon: 'success'
                            })
                        },
                        fail: () => {
                            uni.hideLoading()
                            uni.showToast({
                                title: '保存失败',
                                icon: 'error'
                            })
                        }
                    })
                },
                fail: () => {
                    uni.hideLoading()
                    uni.showToast({
                        title: '图片获取失败',
                        icon: 'exception'
                    })
                }
            })
        }
    },
    // 微信小程序的分享功能
    onShareAppMessage() {
        return {
            title: `邀请您使用敢为人鲜小程序，邀请码: ${this.shareData.inviteCode}`,
            path: `/pages/index/index?inviteCode=${this.shareData.inviteCode}`,
            imageUrl: this.shareData.qrCodeImage,
            success: () => {
                uni.showToast({
                    title: '分享成功',
                    icon: 'success'
                })
            },
            fail: () => {
                uni.showToast({
                    title: '分享失败',
                    icon: 'fail'
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.share-page {
    min-height: 100vh;
    background-color: $uni-color;
    display: flex;
    flex-direction: column;
    // padding-top: 30rpx;
}

.card-container {
    position: relative;
    display: flex;
    justify-content: center;
    margin: auto;
    // margin-bottom: 30rpx;
    width: 96%;
    padding-top: 80rpx;
    /* 为头像腾出空间 */
}

.avatar-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    .avatar {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        // border: 4rpx solid #fff;
    }
}

.share-card {
    width: 100%;
    /* 卡片占屏幕宽度的80% */
    background-color: #fff;
    border-radius: 16rpx;
    padding: 80rpx 20rpx 40rpx;
    /* 顶部padding增加，给头像留空间 */
    text-align: center;
}

.user-info {
    margin-bottom: 20rpx;

    .nickname {
        font-size: 26rpx;
        font-weight: bold;
        color: #333;
    }
}

.qrcode-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20rpx 0;
    
    .qrcode-image {
        width: 440rpx;
        /* 稍微缩小二维码图片 */
        height: 440rpx;
    }
}

.invite-code {
    font-size: 26rpx;
    color: #333;
    margin: 20rpx 0;
    font-weight: 500;
}

.action-buttons {
    width: 100%;
    padding: 0 30rpx;
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    margin-bottom: 60rpx;
    box-sizing: border-box;

    .action-btn {
        width: 45%;
        height: 110rpx;
        line-height: 110rpx;
        background-color: #fff;
        color: $uni-color;
        font-size: 32rpx;
        border-radius: 15rpx;
        border: none;
    }
}
</style>