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

<template>
    <view class="establish">
        <view class="business-card"></view>
        <view class="business-style">
            <view class="business-title">名片样式</view>
            <view class="style-list">
                <view class="style-item"></view>
                <view class="style-item"></view>
                <view class="style-item"></view>
            </view>
        </view>
        <tui-form ref="form">
            <view class="basic-info">
                <view class="info-title">基本信息</view>
                <view class="tui-form">
                    <tui-form-item label="头像">
                        <image class="" src="@/static/header_image.png"
                            style="width: 80rpx;height: 80rpx; border-radius: 50%;" />
                    </tui-form-item>
                    <tui-form-item label="姓名" :asterisk="true" :labelSize="28">
                        <tui-input padding="0" :borderBottom="false" :size="28" placeholder="请输入姓名"></tui-input>
                    </tui-form-item>
                    <tui-form-item label="公司" :asterisk="true" :labelSize="28">
                        <tui-input padding="0" :borderBottom="false" :size="28" placeholder="请输入公司名称"></tui-input>
                    </tui-form-item>
                    <tui-form-item label="职位" :asterisk="true" :labelSize="28">
                        <tui-input padding="0" :borderBottom="false" :size="28" placeholder="请输入担任职位"></tui-input>
                    </tui-form-item>
                </view>
            </view>
            <view class="contact-mode">
                <view class="mode-title">联系方式</view>
                <tui-form-item label="手机" :asterisk="true" :labelSize="28">
                    <tui-input padding="0" :borderBottom="false" :size="28" placeholder="请输入手机号"></tui-input>
                </tui-form-item>
                <tui-form-item label="微信" :labelSize="28">
                    <tui-input padding="0" :borderBottom="false" :size="28" placeholder="请输入微信号"></tui-input>
                </tui-form-item>
                <tui-form-item label="地址" :labelSize="28">
                    <tui-input padding="0" :borderBottom="false" :size="28" placeholder="请填写地址信息"></tui-input>
                </tui-form-item>
            </view>
            <view class="personal-brief">
                <view class="brief-title">个人简介</view>
                <tui-textarea flexStart placeholder="请输入个人简介" min-height="100rpx" height="100rpx"
                    :size="28"></tui-textarea>
            </view>
            <view class="company-brief">
                <view class="company-title">公司简介</view>
                <tui-textarea flexStart placeholder="请填写公司简介" min-height="100rpx" height="100rpx"
                    :size="28"></tui-textarea>
            </view>
        </tui-form>
        <view class="footer" :style="{ bottom: bottom + 'rpx' }">
            <view class="preview" @click="goCard">预览名片</view>
            <view class="preserve">保存</view>
        </view>
    </view>
</template>

<script>
export default {
    onLoad() {
        uni.getSystemInfo({
            success: (res) => {
                this.bottom = res.safeAreaInsets.bottom
            }
        })
    },
    data() {
        return {
            bottom: null
        }
    },
    methods: {
        goCard() {
            uni.navigateTo({
                url: '/pages/previewCard/index'
            })  
        }
    },
}
</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;
}

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

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

    .business-style {
        @extend %paddBox;

        .business-title {
            @extend %title;
        }

        .style-list {
            margin-top: 20rpx;
            @include flex(space-between, null, 20rpx);

            .style-item {
                flex: 1;
                height: 100rpx;
                background-color: bisque;
                border-radius: 10rpx
            }
        }
    }

    .basic-info {
        @extend %paddBox;

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

    .contact-mode {
        @extend %paddBox;

        .mode-title {
            @extend %title;
        }
    }

    .personal-brief {
        @extend %paddBox;

        .brief-title {
            @extend %title;
        }
    }

    .company-brief {
        @extend %paddBox;
        margin-bottom: 130rpx;

        .company-title {
            @extend %title;
        }
    }

    .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;
        }
    }
}
</style>