add.uvue

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

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

  export default {
    data() {
      return {
        collection: COLLECTION_NAME,
        username: "",
        mobile: "",
        gender: "",
        comment: "",
        email: "",
        genderList: GenderList as GenderType[],
        $uniCloudElement: null as UniCloudDBElement | null
      }
    },
    onReady() {
      this.$uniCloudElement = this.$refs['udb'] as UniCloudDBElement
    },
    methods: {
      radioChange(e : RadioGroupChangeEvent) {
        this.gender = e.detail.value
      },
      submit() {
        const value = {
          username: this.username,
          gender: parseInt(this.gender),
          mobile: this.mobile,
          comment: this.comment,
          email: this.email,
        };

        this.$uniCloudElement!.add(value, {
          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>