add.uvue

<template>
  <view class="page">
    <unicloud-db ref="udb" :collection="collection" loadtime="manual"></unicloud-db>
    <form @submit="onFormSubmit">
      <view class="form-item">
        <text class="form-item-label">姓名</text>
        <input class="form-item-input" placeholder="姓名" name="username" />
      </view>
      <view class="form-item">
        <text class="form-item-label">电话</text>
        <input class="form-item-input" placeholder="电话" name="mobile" />
      </view>
      <view class="form-item">
        <text class="form-item-label">邮箱</text>
        <input class="form-item-input" placeholder="邮箱地址" name="email" />
      </view>
      <view class="form-item">
        <text class="form-item-label">备注</text>
        <textarea class="form-item-input" placeholder="备注" name="comment" />
      </view>
      <view class="form-item">
        <text class="form-item-label">性别</text>
        <radio-group class="radio-list" name="gender">
          <view class="radio-item" v-for="(item, _) in genderList" :key="item.value">
            <radio :value="item.value" />
            <text>{{item.text}}</text>
          </view>
        </radio-group>
      </view>
      <button class="btn-add" type="primary" form-type="submit">保存</button>
    </form>
  </view>
</template>

<script>
  import { COLLECTION_NAME, GenderType, GenderList, UNICLOUD_DB_CONTACTS_ADD } from './types.uts'

  export default {
    data() {
      return {
        collection: COLLECTION_NAME,
        genderList: GenderList as GenderType[],
        $uniCloudElement: null as UniCloudDBElement | null
      }
    },
    onReady() {
      this.$uniCloudElement = this.$refs['udb'] as UniCloudDBElement
    },
    methods: {
      onFormSubmit: function (e : FormSubmitEvent) {
        const formData = e.detail.value
        const genderString = formData['gender'] as string
        formData['gender'] = (genderString.length > 0) ? parseInt(genderString) : -1
        this.$uniCloudElement!.add(formData, {
          showToast: false,
          needLoading: true,
          loadingTitle: "正在保存...",
          success: (_ : UniCloudDBAddResult) => {
            // TODO 后续通过 EventChannel 实现
            uni.$emit(UNICLOUD_DB_CONTACTS_ADD, '')
            setTimeout(() => {
              uni.navigateBack()
            }, 500)
          },
          fail: (err : any | null) => {
            const error = err as UniCloudError
            uni.showModal({
              content: error.errMsg,
              showCancel: false
            })
          }
        })
      }
    }
  }
</script>

<style>
  .page {
    padding: 15px;
  }

  .form-item {
    flex-direction: row;
    margin-bottom: 15px;
    align-items: center;
  }

  .form-item-label {
    width: 45px;
    margin-right: 10px;
  }

  .form-item-input {
    flex: 1;
    font-size: 14px;
    color: #666;
    border: 1px #e5e5e5 solid;
    border-radius: 5px;
    padding: 8px;
  }

  .radio-list {
    flex-direction: row;
  }

  .radio-item {
    flex-direction: row;
    margin-right: 30px;
    align-items: center;
  }

  .btn-add {
    margin-top: 50px;
  }
</style>