baby-app/src/pages/record/record.vue

<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="feed">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%feed.records%',
  },
}
</route>
<template>
  <view class="min-h-screen bg-[#F2F2F2] box-border pb-35">
    <wd-navbar
      :title="title"
      left-arrow
      fixed
      :bordered="false"
      :placeholder="true"
      :safeAreaInsetTop="true"
      @click-left="handleClickLeft"
    >
      <template v-if="show" #right>
        <view @click="handleClickRight">
          <image class="w-[40rpx] h-[40rpx]" :src="deleteSvg" mode="widthFix" />

          <!-- <wd-icon name="delete" size="40rpx" color="#FB4848"></wd-icon> -->
        </view>
      </template>
    </wd-navbar>
    <wd-form ref="formRef" :model="formData">
      <ItemForm label="记录类型">
        <template #default>
          <PickerInfo
            title="记录类型"
            :columns="columns"
            v-model:value="formData.type"
            @confirm="handleConfirm"
          />
        </template>
      </ItemForm>

      <NurseForm
        v-model:nurseMethod="formData.nurseMethod"
        v-model:type="formData.type"
        v-model:startTime="formData.startTime"
        v-model:endTime="formData.endTime"
        v-model:complementaryName="formData.complementaryName"
        v-model:milkOutput="formData.milkOutput"
        v-model:hasStool="formData.hasStool"
      />

      <ItemForm :border="false" label="备注">
        <template #default>
          <view class="px-4 mt-[16rpx] box-border">
            <view class="rounded-lg bg-[#F2F2F2]">
              <wd-textarea
                clear-trigger="focus"
                auto-height
                placeholder="填写备注信息"
                v-model="formData.remark"
                :maxlength="120"
                no-border
                show-word-limit
              />
            </view>
          </view>
        </template>
      </ItemForm>

      <wd-gap bg-color="#F2F2F2"></wd-gap>

      <ItemForm :border="false" label="图片">
        <template #default>
          <view class="px-4 mt-3">
            <wd-upload
              :file-list="formData.images"
              image-mode="aspectFill"
              :header="{
                Authorization: '1234',
                project: '123',
              }"
              :action="uploadUrl"
              multiple
              @change="handleChangeImage"
              :before-remove="beforeRemove"
            >
              <template #default>
                <view
                  class="flex justify-center items-center w-[160rpx] h-[160rpx] rounded bg-[#F2F2F2]"
                >
                  <wd-icon name="add" color="#666" size="48rpx"></wd-icon>
                </view>
              </template>
            </wd-upload>
          </view>
        </template>
      </ItemForm>

      <view
        class="w-full box-border fixed bottom-0 left-0 px-4 pt-2 pb-8 bg-white"
        :style="{ marginBottom: safeAreaInsets?.bottom + 'px' }"
      >
        <wd-button size="large" @click="handleSubmit" block>保存</wd-button>
      </view>
    </wd-form>
    <wd-toast />
    <wd-message-box />
  </view>
</template>

<script setup>
  import deleteSvg from '@/static/images/delete.svg'
  import PickerInfo from '@/components/picker-info/picker-info.vue'
  import ItemForm from '@/components/item-form/item-form.vue'
  import NurseForm from '@/components/item-form/nurse-form.vue'
  import typeDataList from '@/components/feed-wd-popup/data.json'
  import { ref, reactive } from 'vue'
  import { useToast, useMessage } from 'wot-design-uni'
  import { onLoad } from '@dcloudio/uni-app'

  const messageBox = useMessage()
  const toast = useToast()
  const uploadUrl = `${import.meta.env.VITE_UPLOAD_BASEURL}/admin/app/tourismProjectTravelNotesWrite/upload`

  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()

  const columns = ref(
    typeDataList.map(({ title, type }) => ({
      label: title,
      value: type,
    })),
  )
  const message = useMessage()
  const show = ref(false)
  const title = ref('')
  const formRef = ref('')

  // 表单数据
  const formData = reactive({
    id: '',
    type: 1, //记录类型
    nurseMethod: 1, // 喂奶方式
    complementaryName: '', // 辅食名称
    hasStool: 1, //有无粪便
    milkOutput: '', //吸奶量
    startTime: null,
    endTime: null,
    remark: '', //备注
    images: [], //图片
  })

  // 新增喂养记录和修改喂养记录提交按钮
  function handleSubmit() {
    //  添加宝宝的接口 /baby/bt_feed_record/add
    formRef.value
      .validate()
      .then(({ valid, errors }) => {
        console.log(valid, 'valid')

        if (valid) {
        }
      })
      .catch((error) => {
        console.log(error, 'error')
      })
    console.log(formData, 'handleSubmit')
  }

  // 删除这条数据
  function handleDelete(id) {
    console.log(id, 'handleDelete')
    toast.loading('删除中...')
    setTimeout(() => {
      toast.close()

      toast.success('删除成功')
    }, 2000)
  }

  function handleClickRight() {
    message
      .confirm({
        msg: '确定删除记录吗？',
      })
      .then(() => {
        handleDelete()
      })
      .catch((error) => {
        console.log(error)
      })
  }

  function handleClickLeft() {
    uni.navigateBack()
  }

  function handleConfirm({ value, type }) {
    formData.type = value
  }

  // 图片上传
  function handleChangeImage({ fileList: files }) {
    formData.images = files
  }

  // 移除图片
  const beforeRemove = ({ file, fileList, resolve }) => {
    console.log(file, 555)
    console.log(formData.images, 555)
    formData.images
    messageBox
      .confirm({
        msg: '确定删除这张照片吗？',
        // title: '提示',
      })
      .then(() => {
        toast.success('删除成功')
        // resolve(true)
      })
      .catch(() => {
        toast.show('取消删除操作')
      })
  }

  //
  function changeFormData(types) {
    // if (types == 1) {
    //   formData = {
    //     ...formData,
    //     nurseMethod: 1,
    //     startTime: null,
    //     endTime: null,
    //   }
    // }
    // nurseMethod: 1, // 喂奶方式
    // complementaryName: '', // 辅食名称
    // hasStool: 1, //有无粪便
    // milkOutput: '', //吸奶量
    // startTime: null,
    // endTime: null,
  }

  onLoad(({ type, id }) => {
    if (id) {
      show.value = true
      title.value = '记录详情'
      // 获取详情的请求
    } else {
      show.value = false
      title.value = '新增记录'
    }
    formData.type = type
    formData.id = id ? id : ''
  })
</script>

<style scoped>
  ::v-deep .wd-textarea__value {
    padding: 24rpx;
    background-color: transparent;
  }
  ::v-deep .wd-textarea,
  ::v-deep .wd-textarea__count {
    background-color: transparent;
  }
  ::v-deep .wd-textarea__count {
    right: 56rpx;
  }

  ::v-deep .wd-button.is-primary {
    background: linear-gradient(270deg, #f88842 0%, #ffac78 100%);
  }
  ::v-deep .wd-input.is-large {
    padding: 8rpx 24rpx;
  }

  ::v-deep .wd-upload__close {
    top: 8rpx;
    right: 8rpx;
  }
</style>