newCashBook/frontEndMobile/src/views/AddAccountLogPage.vue

<template>
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <!-- 允许输入数字，调起带符号的纯数字键盘 -->
        <van-field
          v-model="totalFee"
          name="totalFee"
          type="number"
          label="数字"
        />
        <van-field name="uploader" label="文件上传">
          <template #input>
            <van-uploader
              :model-value="files"
              multiple
              :max-count="5"
              :after-read="afterRead"
              :before-delete="filesDelete"
            />
          </template>
        </van-field>
        <van-field
          v-model="newTime"
          is-link
          readonly
          name="calendar"
          label="日历"
          placeholder="点击选择日期"
          @click="showCalendar = true"
        />
        <van-field
          v-model="remark"
          rows="2"
          autosize
          name="remark"
          label="留言"
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <van-calendar
      :min-date="new Date(2010, 0, 1)"
      v-model:show="showCalendar"
      @confirm="onConfirm"
    />
  </div>
</template>

<script setup>
import { watch, ref, onMounted, toRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import dayjs from 'dayjs'
import { uploadFile } from '@/api/api'

const router = useRouter()
const route = useRoute()

const files = ref([])
const totalFee = ref(0)
const remark = ref('')

const afterRead = async (file) => {
  // 将文件上传至服务器
  let formData = new FormData()
  formData.append('sampleFile', file.file)
  const res = await uploadFile(formData)
  files.value.push({
    // url: window.origin + `/api/v1/files/${res.file_id}`,
    url: file.objectUrl,
    file_id: res.file_id,
    isImage: true
  })
}

const newTime = ref(dayjs().format('YYYY-MM-DD'))
const showCalendar = ref(false)

const onConfirm = (date) => {
  // newTime.value = `${date.getMonth() + 1}/${date.getDate()}`
  newTime.value = dayjs(date).format('YYYY-MM-DD')
  showCalendar.value = false
}
const filesDelete = (file) => {
  files.value = files.value.filter((elm) => elm.url !== file.url)
}
const onSubmit = (values) => {
  // 金额
  // 附件
  // 时间
  // 留言
  // const params = {
  //   totalFee: toRaw(number),
  //   files: toRaw(files),
  //   time: toRaw(newTime),
  //   remark: toRaw(message)
  // }
  // console.log(103, params)

  console.log(102, values)
}
</script>