tf-business-card/pages/previewCard/index.vue

<template>
    <view class="previewCard">
        <view class="card-container">11111</view>
        <view class="contact-mode">
            <view class="mode-item" v-for="(item,index) in modeList" :key="index" @click="mobeClick(item.value,item.name)">
                <tui-icon :name="item.icon" :size="26" color="#3A8FFF"></tui-icon>
                <text>{{ item.name }}</text>
            </view>
        </view>
        <view class="personal" v-for="(item, index) in briefList" :key="index" :class="index == 1 ? 'act' : ''">
            <view class="title">
                <text>{{ item.title }}</text>
                <view class="edit">
                    <tui-icon name="evaluate" :size="24" color="#3A8FFF"></tui-icon>
                    <text>编辑</text>
                </view>
            </view>
            <tui-textarea :disabled="item.disabled" :value=item.value flexStart :placeholder=item.placeholder
                min-height="200rpx" height="200rpx" :size="28"></tui-textarea>
        </view>
        <view class="footer" :style="{ bottom: bottom + 'rpx' }">
            <view class="preview" @click="goBack">编辑名片</view>
            <view class="preserve">发送名片</view>
        </view>
        <tui-drawer mode="bottom" :visible="visible" @close="closeDrawer">
            <view class="d-container">
                <view class="d-header">
                    <text>{{ drawerVal.title }}</text>
                    <view class="icon" @click="closeDrawer">
                        <tui-icon name="shut" :size="24"></tui-icon>
                    </view>
                </view>
                <view class="d-body">
                    <text>{{ drawerVal.value }}</text>
                    <view class="copy" @click="copyVal">
                        <tui-icon name="feedback"  :size="24" color="#3A8FFF"></tui-icon>
                    </view>
                </view>
            </view>
		</tui-drawer>
    </view>
</template>

<script>
export default {
    onLoad() {
        uni.getSystemInfo({
            success: (res) => {
                this.bottom = res.safeAreaInsets.bottom
            }
        })
    },
    data() {
        return {
            //  控制底部弹框
            visible:false,
            //  控制输入框是否可以编辑
            personalDis: true,
            companylDis: true,
            bottom: null,
            //  联系列表
            modeList:[
                {
                    name:"电话",
                    icon:"voipphone",
                    value:"1"
                },
                {
                    name:"微信",
                    icon:"wechat",
                    value:"2"
                },
                {
                    name:"地址",
                    icon:"gps",
                    value:"3"
                }
            ],
            //  简介列表
            briefList: [
                {
                    title: "个人简介",
                    value: "广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介广东团蜂科技个人简介",
                    placeholder: "请填写个人简介",
                    disabled: true
                },
                {
                    title: "公司简介",
                    value: "团蜂科技公司理念：用专业获得尊重，用系统解决问题，用服务赢得信任，用结果换来认可，执行，认真，快，坚守承诺！！！向奋斗者学习，和创新者共进，与价值观一致者同行",
                    placeholder: "请填写公司简介",
                    disabled: true
                }
            ],
            //  弹框数据 
            drawerVal:{
                value:"11111",
                title:"电话"
            }
        }
    },
    methods: {
        mobeClick(val,title){
            //  给弹框赋值
            this.drawerVal.value = val
            this.drawerVal.title = title
            this.visible = true
        },
        //  拷贝文本
        copyVal(){
            uni.setClipboardData({
                data:this.drawerVal.value,
                success: (res) => {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'none'
                    })
                }
            })
        },
        //  关闭弹框
        closeDrawer(){
            this.visible = false
        },
        goBack() {
            uni.navigateBack()
        }
    },
}
</script>

<style lang="scss" scoped>
%paddBox {
    margin-top: 20rpx;
    border-radius: 10rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    background-color: #fff;
}

%title {
    border-bottom: 1rpx solid #ccc;
    font-size: 30rpx;
    color: #000;
    font-weight: 600;
    padding-bottom: 20rpx;
}

page {
    background-color: #f5f5f5;
}

.previewCard {
    padding: 30rpx 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
    box-sizing: border-box;

    .card-container {
        width: 100%;
        height: 400rpx;
        background-color: aquamarine;
        border-radius: 20rpx;
    }

    .contact-mode {
        @include flex(center, null);
        width: 100%;
        height: 250rpx;
        background-color: #fff;
        border-radius: 20rpx;

        .mode-item {
            flex: 1;
            @include flex(center, column, 20rpx);

            text {
                font-size: 28rpx;
                color: #000;
            }
        }
    }

    .personal {
        @extend %paddBox;

        .title {
            @extend %title;
            @include flex(space-between, null, 0);

            .edit {
                @include flex(center, null, 10rpx);
                color: #3A8FFF;

                text {
                    font-size: 26rpx;
                }
            }
        }
    }

    .act {
        margin-bottom: 150rpx;
    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        z-index: 99;
        @include flex(space-between, null);
        font-size: 30rpx;
        text-align: center;

        .preview {
            width: 250rpx;
            background-color: #fff;
            color: rgb(58, 143, 255);
        }

        .preserve {
            flex: 1;
            background-color: #3A8FFF;
            color: #fff;
        }
    }
}

//  弹框
.d-container{
    height: 500rpx;
    width: 100%;
    .d-header{
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 28rpx;
        position: relative;
        .icon{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 30rpx;
        }
    }
    .d-body{
        margin-top: 30rpx;
        padding-left: 50rpx;
        padding-right: 30rpx;
        box-sizing: border-box;
        // justify-content: 
        @include flex(space-between);
    }
}
</style>