从零开发一个宝宝账单（六）：实现账单数据上传

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

昨天我们开发好了记一笔的静态页面，今天我们把数据给补上。

打开uniCloud云数据库，把之前测试数据都删了：

现在数据库里啥数据都没有了，一会我们会新增一些账单数据。

我们优化下昨天的表单页，加入一些表单必填校验：

rules: {
    type: {
        rules: [{
            required: true,
            errorMessage: '请输入类型'
        }]
    },
    name: {
        rules: [{
            required: true,
            errorMessage: '请输入名称'
        }]
    },
    price: {
        rules: [{
            required: true,
            errorMessage: '请输入价格'
        }]
    }
}

今天主要实现的是submit提交函数的逻辑：

async submit() {
    uni.showLoading({
        title: '处理中...'
    });
    const formRes = await this.$refs.form.validate();
    const res = await uniCloud.callFunction({
        name: 'add',
        data: {
            ...formRes,
            createTime: Date.now()
        }
    });
    uni.showModal({
        content: `成功添加一条数据，文档id为：${res.result.id}`,
        showCancel: false
    })
    uni.hideLoading();
}

点击提交：

去云数据库查看：

数据过来了。我们把代码优化一下，以下是完整代码：

<template>
    <view class="container">
        <uni-forms ref="form" :value="formData" :rules="rules" validate-trigger="submit" err-show-type="toast">
            <uni-forms-item name="type" label="类型">
                <uni-data-select placeholder="请选择账单所属类型" v-model="formData.type" :localdata="formOptions.type">
                </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">
                </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'
                    }]
                },
                rules: {
                    type: {
                        rules: [{
                            required: true,
                            errorMessage: '请输入类型'
                        }]
                    },
                    name: {
                        rules: [{
                            required: true,
                            errorMessage: '请输入名称'
                        }]
                    },
                    price: {
                        rules: [{
                            required: true,
                            errorMessage: '请输入价格'
                        }]
                    }
                }
            }
        },
        methods: {
            async submit() {
                uni.showLoading({
                    title: '处理中...'
                });
                const formRes = await this.$refs.form.validate();
                const res = await uniCloud.callFunction({
                    name: 'add',
                    data: {
                        ...formRes,
                        createTime: Date.now()
                    }
                });
                uni.showModal({
                    content: `成功添加一条数据，文档id为：${res.result.id}`,
                    showCancel: false
                })
                uni.hideLoading();
            }
        }
    }
</script>

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

至此，账单数据上传云端数据库的功能就实现了。