caimei-applets-caimei/components/cm-share-popup/cm-seller-modal.vue

<template>
    <view class="seller-card" v-if="userId > 0">
        <view class="seller-card-mine" v-if="!modal" @click="changeModal">
            <image
                :src="userInfo.image.length > 12 ? userInfo.image : 'https://static.caimei365.com/app/img/icon/default-head-new.png'"
                style="width: 100%;height: 100%;object-fit: contain;border-radius: 50%;"
                mode=""
            ></image>
        </view>
        <tui-modal class="sellerMode" @cancel="hideModal" :show="modal" custom>
            <view class="tui-modal-custom">
                <view class="close" @click="changeModal">
                    <image
                        src="https://static.caimei365.com/app/img/supplier-login/close.png"
                        style="width: 100%;height: 100%;"
                        mode=""
                    ></image>
                </view>
                <view class="card" :style="{ backgroundImage: `url(${imgUrl})`, backgroundSize: '100% 100%' }">
                    <view class="logo">
                        <image
                            src="https://static.caimei365.com/app/img/icon/logo-fanbai.png"
                            mode=""
                            class="titleImgUrl"
                        ></image>
                    </view>
                    <view class="card-contain">
                        <view style="display: flex;">
                            <view class="card-head">
                                <image
                                    :src="
                                        userInfo.image.length > 12 ? userInfo.image : 'https://static.caimei365.com/app/img/icon/default-head-new.png'
                                    "
                                    mode=""
                                    class="head"
                                ></image>
                            </view>
                            <view class="card-info">
                                <view class="card-info-head">
                                    <view class="card-name">{{ userInfo.linkMan }}</view>
                                    <view class="card-info-tab">客户经理</view>
                                </view>
                                <view class="card-info-iphone">{{ userInfo.contractMobile && userInfo.contractMobile.replace(/(?=(\d{4})+$)/g,"-") }}</view>
                            </view>
                        </view>
                        <view class="card-qrcode">
                            <view class="qrcode-message">
                                <image
                                    :show-menu-by-longpress="true"
                                    :src="userInfo.qrCode || ''"
                                    class="qrcode"
                                    mode=""
                                ></image>
                            </view>
                            <view class="tips">
                                <view>
                                    长按或扫二维码
                                </view>
                                <view style="white-space: nowrap;">——联系我——</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </tui-modal>
    </view>
</template>

<script>
export default {
    props: {
        sellerUserId: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            modal: false,
            imgUrl: 'https://static.caimei365.com/app/img/icon/bg-card.png',
            userInfo: {},
            userId: ''
        }
    },
    mounted() {
        if (!uni.getStorageSync('sellerCardChange')) {
            uni.setStorageSync('sellerCardChange', 1)
        }
        this.initData()
    },
    methods: {
        hideModal() {
            this.modal = false
            uni.setStorageSync('sellerCardChange', 2)
        },
        initData() {
            this.userId = this.sellerUserId || uni.getStorageSync('sellerUserId')
            if(this.userId > 0) {
                this.getUserInfo()
                if (uni.getStorageSync('sellerCardChange') === 1) {
                    this.modal = true
                } else {
                    this.modal = false
                }
            }
        },
        async getUserInfo() {
            const { data } = await this.SellerService.GetSellerHome({ userId: this.userId })
            this.userInfo = data
        },
        changeModal() {
            this.modal = !this.modal
            uni.setStorageSync('sellerCardChange', this.modal ? 1 : 2)
        }
    }
}
</script>

<style lang="scss" scoped>
.seller-card-mine {
    position: fixed;
    right: 20rpx;
    width: 80rpx;
    height: 80rpx;
    z-index: 99;
    bottom: 460rpx;
    border-radius: 50%;
    &::after {
        content: '客户经理';
        width: 100rpx;
        height: 30rpx;
        position: absolute;
        color: #fff;
        font-size: 18rpx;
        font-weight: bold;
        background-color: #FF5B00;
        bottom: 0;
        left: 0;
        border-radius: 20rpx;
        text-align: center;
        line-height: 30rpx;
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(255,92,0,0.16);
        transform: translate(-12%, 70%);
    }
}
.tui-modal-custom {
    .close {
        position: fixed;
        right: -20px;
        top: -200rpx;
        width: 60rpx;
        height: 60rpx;
    }
}
.card {
    position: fixed;
    left: -34rpx;
    top: -150%;
    width: 702rpx;
    height: 340rpx;
    background: #ff5b00;
    border-radius: 16rpx;
    opacity: 1;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 16rpx 32rpx;
    .titleImgUrl {
        width: 241rpx;
        height: 80rpx;
    }
    .card-contain {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .head {
            width: 128rpx;
            height: 128rpx;
            border-radius: 50%;
            object-fit: contain;
        }
        .card-info {
            height: 128rpx;
            margin-left: 30rpx;
        }
        .card-info-head {
            display: flex;
            align-items: center;
            margin-bottom: 13rpx;
            .card-name {
                color: #ffffff;
                font-size: 40rpx;
                font-weight: bold;
            }
            .card-info-tab {
                width: 88rpx;
                height: 31rpx;
                background-color: #ffbb00;
                color: #fff;
                font-size: 22rpx;
                padding: 0 8rpx;
                margin-left: 10rpx;
            }
        }
        .card-info-iphone {
            color: #ffffff;
            font-size: 28rpx;
        }
        .card-qrcode {
            .qrcode {
                width: 126rpx;
                height: 126rpx;
                object-fit: contain;
                margin-bottom: 6rpx;
            }
            .tips {
                font-size: 18rpx;
                color: #fff;
                text-align: center;
                width: 126rpx;
                line-height: 24rpx;
            }
        }
    }
}
</style>