shop4.3.57/components/page-component/app-my-app/app-my-share.vue

<template>
    <view class="app-my-share" v-if="shareInfo.parent_id"  :style="{backgroundColor: newData.background}">
        <view class="share-info">
            <view class="headimg">
                <image :src="shareInfo.parent_headimg"></image>
            </view>
            <text class="nickname" :style="{color:newData.color}">{{shareInfo.parent_name}}为您服务</text>
            <view class="contact" @click="showQrCode" :style="{borderColor:newData.color,color:newData.color}">
                <image src="../../../static/image/icon/wechat-white.png"></image> 联系
            </view>
        </view>
        <view class="show-qrcode" v-if="showQrCodeStatus">
            <div class="info">
                <view class="close" @click="showQrCode">
                    <image src="../../../static/image/icon/invalid.png"></image>
                </view>
                <view class="share">
                    <view class="headimg">
                        <image :src="shareInfo.parent_headimg"></image>
                    </view>
                    <view class="nickname">
                        <view>{{shareInfo.parent_name}}</view>
                        <view class="desc">加我微信，随时为您服务</view>
                    </view>
                </view>
                <image class="qrcode" :src="shareInfo.parent_qr_code"></image>
                <view class="saoyisao">扫一扫上面的二维码图案，加我微信</view>
            </div>

            <view class="save-btn" @click="saveImg">保存二维码</view>
        </view>
        <view class="placeholder"></view>
    </view>
</template>
<script>
    import {mapState, mapGetters} from 'vuex';
    export default {
        name: "app-my-share",
        props:{
            shareInfo:{
                type: Object,
                default(){
                    return {
                    }
                }
            },
            value: {
                type: Object,
                default: function() {
                    return {
                        background: `#efeff4`,
                        color: '#ffffff',
                    }
                }
            },
            homePages: {
                type: Object|Array,
                default() {
                    return {};
                }
            },
        },
        data(){
            return {
                showQrCodeStatus: false,
            }
        },
        methods: {
            showQrCode(){
                console.log(this.homePages)
                this.showQrCodeStatus = !this.showQrCodeStatus;
            },
            saveImg(){
                uni.downloadFile({
                    url: this.shareInfo.qrcode,
                    success: (res) =>{
                        if (res.statusCode === 200){
                            uni.saveImageToPhotosAlbum({
                                filePath: res.tempFilePath,
                                success: function() {
                                    uni.showToast({
                                        title: "保存成功",
                                        icon: "none"
                                    });
                                },
                                fail: function() {
                                    uni.showToast({
                                        title: "保存失败",
                                        icon: "none"
                                    });
                                }
                            });
                        }
                    }
                });
            }
        },
        onLoad(){

        },
        computed: {
            ...mapState('mallConfig', {
                setting: state => state.mall.setting
            }),
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme',
            }),
            newData() {
                let value = this.value;
                if (typeof this.homePages.navs !== "undefined") {
                    this.homePages.navs.forEach(item => {
                        item.template.data.forEach(temp => {
                            if(temp.id === 'search'){
                                value = temp.data;
                            }
                        })
                    })
                }
                return value;
            },
        },
    }
</script>
<style scoped lang="scss">
    .app-my-share{
        width: 100%;
        height: #{124rpx};
        z-index: 9999999;
        background: #ffffff;
        font-size: #{26rpx};
        padding: 40rpx #{30rpx} 0;
        .share-info{
            display: flex;
            align-items: center;
            height: 100%;
            .headimg{
                border-radius: 50%;
                width: #{50rpx};
                height: #{50rpx};
                overflow: hidden;
                margin-right: #{10rpx};
                image{
                    width: 100%;
                    height: 100%;
                }
            }
            .contact{
                border: #{1rpx} solid #ccc;
                border-radius: #{20rpx};
                padding: #{2rpx} #{15rpx};
                display: flex;
                align-items: center;
                margin-left: #{10rpx};
                image{
                    width: #{30rpx};
                    height: #{30rpx};
                    margin-right: #{10rpx};
                }
            }
        }
        .show-qrcode{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: rgba(0,0,0,.3);
            padding-top: #{150rpx};
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 999999999;
            image{
                height: 100%;
                width: 100%;
            }
            .info{
                background: #ffffff;
                padding: #{60rpx} #{70rpx};
                border-radius: #{30rpx};
                .close{
                    float: right;
                    width: #{40rpx};
                    height: #{40rpx};
                    position: relative;
                    top: -30rpx;
                    right: -30rpx;
                }
                .share{
                    display: flex;
                    align-items: center;
                    margin-top: #{30rpx};
                    .headimg{
                        width: #{80rpx};
                        height: #{80rpx};
                        border-radius: 50%;
                        overflow: hidden;
                    }
                    .nickname{
                        display: flex;
                        flex-direction: column;
                        margin-left: #{15rpx};
                        .desc{
                            font-size: #{20rpx};
                            color: #888888;
                        }
                    }
                }
                .qrcode{
                    width: #{450rpx};
                    height: #{450rpx};
                }
                .saoyisao{
                    color: #888888;
                    text-align: center;
                    font-size: #{20rpx};
                }
            }
            .save-btn{
                background: #FE3666;
                color: #ffffff;
                font-size: #{28rpx};
                margin-top: #{40rpx};
                padding: #{20rpx} #{100rpx};
                border-radius: #{30rpx};
            }

        }
    }
</style>