【私活儿分享】手串珠子管理小程序，便捷查询珠子（串手链的珠子）位置

前言

  之间帮客户做了个查询手串珠子位置的小程序，便于帮助客户管理众多的珠子，这个珠子就是戴在手上串起来的饰品。好了，话不多说，进入正题！

正文

  小程序比较简单，采用云开发。两个页面，一个查询页，一个管理页。

  首先需要建立一个表，设计字段：姓、区、排、格，后三个字段都代表位置。表结构创建好之后，使用unicloud云开发数据库jql完成一套crud，然后在首页查询页面，用户输入具体姓搜索时，查询数据库进而展示位置即可。首页支持多字查询，这个在查询的时候将多个字进行分割，遍历查询即可。

// 位置维护页
<template><view class="uni-container"><uni-forms ref="form" :model="formData" validate-trigger="submit" err-show-type="toast"><uni-forms-item name="char" label="姓" required><uni-easyinput v-model="formData.char" trim="both"></uni-easyinput></uni-forms-item><uni-forms-item name="area" label="区" required><uni-easyinput type="number" v-model="formData.area"></uni-easyinput></uni-forms-item><uni-forms-item name="row" label="排" required><uni-easyinput type="number" v-model="formData.row"></uni-easyinput></uni-forms-item><uni-forms-item name="col" label="格" required><uni-easyinput type="number" v-model="formData.col"></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>import { validator } from '../../js_sdk/validator/char_position.js';const db = uniCloud.database();const dbCollectionName = 'char_position';function getValidator(fields) {let result = {}for (let key in validator) {if (fields.indexOf(key) > -1) {result[key] = validator[key]}}return result}export default {data() {let formData = {"char": "","area": null,"row": null,"col": null}return {formData,formOptions: {},rules: {...getValidator(Object.keys(formData))}}},onReady() {this.$refs.form.setRules(this.rules)},methods: {/*** 验证表单并提交*/submit() {uni.showLoading({mask: true})this.$refs.form.validate().then((res) => {return this.submitForm(res)}).catch(() => {}).finally(() => {uni.hideLoading()})},/*** 提交表单*/submitForm(value) {// 使用 clientDB 提交数据return db.collection(dbCollectionName).add(value).then((res) => {uni.showToast({icon: 'none',title: '新增成功'})this.getOpenerEventChannel().emit('refreshData')setTimeout(() => uni.navigateBack(), 500)}).catch((err) => {uni.showModal({content: err.message || '请求服务失败',showCancel: false})})}}}
</script><style>.uni-container {padding: 15px;}.uni-input-border,.uni-textarea-border {width: 100%;font-size: 14px;color: #666;border: 1px #e5e5e5 solid;border-radius: 5px;box-sizing: border-box;}.uni-input-border {padding: 0 10px;height: 35px;}.uni-textarea-border {padding: 10px;height: 80px;}.uni-button-group {margin-top: 50px;/* #ifndef APP-NVUE */display: flex;/* #endif */justify-content: center;}.uni-button {width: 184px;}
</style>

总结

  小程序还是比较简单的，但对于用户而言，发挥的意义较大，因为在珠子比较多的情况下，确实需要一个工具去管理。好了，今天的分享就到这里，感谢阅读，关注我💗，持续分享比较实用的程序😄😄！