从零开发一个宝宝账单（五）：uni-ui表单页面

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

今天我们来实现记一笔功能，首页是数据展示，没有数据如何展示，所以先实现添加数据的功能。

记一笔页面

这是我们最初的页面：

如你所见，空空如也，现在我们往里面加入几个选择框与输入框：

<template>
    <view class="container">
        <uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
            <uni-forms-item name="type" label="类型">
                <uni-data-select placeholder="请选择账单所属类型" v-model="formData.type" :localdata="formOptions.type" @change="handleTypeChange">
                </uni-data-select>
            </uni-forms-item>
            <uni-forms-item name="name" label="名称">
                <uni-easyinput placeholder="请输入账单开销名称" v-model="formData.name"></uni-easyinput>
            </uni-forms-item>
            <uni-forms-item name="unit" label="单位">
                <uni-data-select placeholder="请选择账单开销单位" v-model="formData.unit" :localdata="formOptions.unit" @change="handleUnitChange">
                </uni-data-select>
            </uni-forms-item>
            <uni-forms-item name="count" label="数量">
                <uni-easyinput placeholder="请输入账单开销数值" v-model="formData.count"></uni-easyinput>
            </uni-forms-item>
            <uni-forms-item name="price" label="价格">
                <uni-easyinput placeholder="请输入账单开销价格" v-model="formData.price"></uni-easyinput>
            </uni-forms-item>
            <view class="uni-button-group">
                <button type="primary" class="uni-button" @click="submit">提交</button>
            </view>
        </uni-forms>
    </view>
</template>

<script>
export default {
    data() {
        return {
            formData: {},
            formOptions: {
                type: [{
                    text: '穿的',
                    value: 'wearings',
                }, {
                    text: '吃的',
                    value: 'eattings',
                }, {
                    text: '用的',
                    value: 'usings',
                }, {
                    text: '玩的',
                    value: 'playings'
                }, {
                    text: '教育',
                    value: 'educations'
                }, {
                    text: '医疗',
                    value: 'medicals'
                }, {
                    text: '其他',
                    value: 'others'
                }],
                unit: [{
                    text: '件',
                    value: 'jian'
                }, {
                    text: '次',
                    value: 'ci',
                }, {
                    text: '个',
                    value: 'ge',
                }, {
                    text: '辆',
                    value: 'liang'
                }, {
                    text: '千克',
                    value: 'kg',
                }, {
                    text: '毫升',
                    value: 'ml'
                }, {
                    text: '其他',
                    value: 'other'
                }]
            }
        }
    },
    methods: {
        handleTypeChange() {},
        handleUnitChange() {},
        submit() {}
    }
}
</script>

<style lang="scss" scoped>
    .container {
        padding: 30upx;
    }
</style>

页面现在长这样：

注：如提示uni-data-select组件未注册或找不到，可去插件市场下载导入并重启项目。

DCloud前端团队 uni-ui

uni-data-select 下拉框选择器

至此，我们的记一笔页面静态页就搭好了，明天开始写云函数，操作云数据库了。敬请期待！