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

<template>
    <view class="seller-card" v-if="sellerUserId !== 0">
        <view class="seller-card-mine" v-if="!modal" @click="modal=true"></view>
        <tui-modal class="sellerMode" @click="handleClick" @cancel="hideModal" :show="modal" custom>
            <view class="tui-modal-custom">
                <view class="close" @click="modal=false">
                    <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="https://static.caimei365.com/app/img/icon/default-head.png" mode="" class="head"></image>
                            </view>
                            <view class="card-info">
                                <view class="card-info-head">
                                    <view class="card-name">
                                        未知
                                    </view>
                                    <view class="card-info-tab">
                                        客户经理
                                    </view>
                                </view>
                                <view class="card-info-iphone">
                                    158-8958-6633
                                </view>
                            </view>
                        </view>
                        <view class="card-qrcode">
                            <view class="qrcode-message">
                                <image :show-menu-by-longpress="true" src="" class="qrcode" mode=""></image>
                            </view>
                            <view class="tips">
                                长按或扫二维码
                                联系我
                            </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',
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        handleClick() {},
        hideModal() {
            this.modal = false
        },
        initData() {
            if(this.sellerUserId > 0) {
                this.modal = true
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.seller-card-mine {
    position: fixed;
    right: 20rpx;
    width: 80rpx;
    height: 80rpx;
    border: 1px solid;
    z-index: 99;
    bottom: 500rpx;
    border-radius: 50%;
}
.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>