jzhw_uni/pages/ucenter/parter/steward/steward.vue

<template>
    <view>
        <view class="top-wrapper">
            <view>添加鲸致管家</view>
        </view>
        <view class="qrcode-wrapper">
            <image :src="shareImage" class="qr-code" mode="aspectFill" ontap="saveImage"></image>
        </view>

        <view class="img-tips">点击保存二维码</view>
        <view class="view-tips">查看引荐人信息、订单咨询</view>
    </view>
</template>

<script>
const util = require('../../../../utils/util.js');
const api = require('../../../../config/api.js');
const app = getApp();
export default {
    data() {
        return {
            shareImage: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData({
            shareImage: app.globalData.shareImage
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        saveImage() {
            uni.showLoading({
                title: '图片保存中'
            });
            uni.downloadFile({
                url: this.shareImage,
                timeout: 3000,
                success: function (res) {
                    uni.hideLoading();
                    uni.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success(res) {
                            uni.showToast({
                                title: '二维码图片已保存到您的相册',
                                icon: 'none',
                                duration: 2000
                            });
                        },
                        fail(res) {
                            uni.hideLoading();
                            uni.showToast({
                                title: '网络或授权问题 图片保存失败 请重试',
                                icon: 'none',
                                duration: 2000
                            });
                        }
                    });
                },
                fail: function () {
                    uni.hideLoading();
                }
            });
        }
    }
};
</script>
<style>
.top-wrapper {
    background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/recommend-bd.jpg') no-repeat center;
    background-size: cover;
    width: 750rpx;
    height: 775rpx;
    padding: 46rpx 0 0;
}
.top-wrapper view {
    font-size: 48rpx;
    font-weight: bold;
    text-align: center;
    color: #fff;
}
.qrcode-wrapper {
    margin: -125rpx auto 0;
    width: 250rpx;
    height: 250rpx;
}
.qr-code {
    width: 250rpx;
    height: 250rpx;
    padding: 4rpx;
    border-radius: 4rpx;
    background: #fff;
}
.img-tips {
    text-align: center;
    font-size: 16rpx;
    margin: 18rpx 0 0;
}
.view-tips {
    color: #2a2a2a;
    margin-top: 76rpx;
    font-size: 32rpx;
    text-align: center;
}
</style>