shop4.3.57/pages/share/qrcode/qrcode.vue

<template>
    <app-layout>
        <view class="bg">
            <view class="dir-top-wrap cross-center">
                <image mode="aspectFill" class='qrcode' @click='look' :src='img'></image>
                <view @click="saveImg" style="background-color: #F84469;" :class="[`share-btn main-center cross-center`]">保存图片</view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        data() {
            return {
                img: ''
            }
        },
        computed: {
            ...mapState({
                mall: state => state.mallConfig.mall,
                custom_setting: state => state.mallConfig.share_setting_custom,
                share_img: state => state.mallConfig.__wxapp_img.share
            })
        },
        methods: {
            look() {
                let that = this;
                uni.previewImage({
                    current: that.img,
                    urls: [that.img]
                })
            },

            saveImg() {
                let that = this;
                // #ifndef MP-ALIPAY
                uni.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success(res) {
                        if (res.errMsg == "authorize:ok") {
                            uni.downloadFile({
                                url: that.img,
                                success(res) {
                                    uni.saveImageToPhotosAlbum({
                                        filePath: res.tempFilePath,
                                        success(res) {
                                            uni.showToast({
                                                title: '保存成功',
                                                icon: 'success',
                                                duration: 1000
                                            })
                                        },
                                        fail(res) {
                                            uni.showToast({
                                                title: '保存失败',
                                                icon: 'none',
                                                duration: 1000
                                            })
                                        }
                                    })
                                }
                            })
                        }
                    },
                    fail(res) {
                        uni.showModal({
                            title: '提示',
                            content: '保存到相册失败，需要授权保存到相册权限',
                            showCancel: false,
                            confirmText: '打开授权',
                            success(e) {
                                if (e.confirm) {
                                    uni.openSetting({});
                                }
                            }
                        });
                    }
                })
                // #endif
                 // #ifdef MP-ALIPAY
                my.showLoading({
                    content: '图片保存中'
                });
                my.saveImage({
                    url: that.img,
                    showActionSheet: true,
                    success: (res) => {
                        uni.showToast({
                            title: '保存成功',
                            icon: 'success',
                            duration: 1000
                        })
                    },
                    fail() {
                        uni.showToast({
                            title: '保存失败',
                            icon: 'none',
                            duration: 1000
                        })
                    },
                    complete() {
                        my.hideLoading();
                    }
                });
                // #endif
            },

            getList() {
                let that = this;
                that.$request({
                    url: that.$api.share.poster,
                    method: 'get',
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) {
                        that.img = response.data.pic_url;
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                    that.$event.on(that.$const.EVENT_USER_LOGIN).then(()=>{
                        that.getList();
                    });
                });
            },
        },

        onLoad(options) {
            let that = this;
            uni.setNavigationBarTitle({
                title: that.custom_setting.menus.qrcode.name
            });
            that.$showLoading({
                type: 'global',
                text: '加载中...'
            });
            that.getList();
        }
    }
</script>

<style scoped lang="scss">
    .bg {
        position: absolute;
        width: 100%;
        background-color: #fff;
        height: 100%;
    }

    .qrcode {
        height: #{1030rpx};
        width: #{580rpx};
        margin-top: #{32rpx};
    }

    .load {
        width: #{400rpx};
        height: #{400rpx};
        margin: 0 auto;
        padding-top: #{280rpx};
    }

    .share-btn {
        margin-top: #{24rpx};
        width: #{480rpx};
        height: #{80rpx};
        font-size: #{32rpx};
        color: #fff;
        border-radius: #{40rpx};
        background: #ff4544;
    }
</style>