sweet-hut-ui/src/views/journal/detail[id].vue

<template>
  <div class="mobile-journal-detail common-mobile-view">
    <el-form ref="formRef" :model="journalStore.currentJournal"
             :rules="rules" label-position="top" label-width="60px"
             class="form-item">
      <el-form-item label="日期" prop="date">
        <el-date-picker
            v-model="journalStore.currentJournal.date"
            type="datetime" :editable="false" placeholder="请选择日期"
            value-format="YYYY-MM-DD HH:mm:ss"/>
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <el-input
            v-model="journalStore.currentJournal.content"
            :rows="5" type="textarea"
            show-word-limit :maxlength="200"
            placeholder="请输入日记内容"
        />
      </el-form-item>

      <el-form-item label="地址">
        <el-input
            v-model="journalStore.currentJournal.location"
            placeholder="请输入日记地址"
            show-word-limit :maxlength="10"
        >
          <template #prefix>
            <el-icon class="el-input__icon">
              <location/>
            </el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="分类">
        <el-radio-group v-model="journalStore.currentJournal.category"
                        placeholder="请选择分类" clearable>
          <el-radio
              v-for="(item, index) in journalCategoryTypeList"
              :key="index" :label="item" :value="item"
          />
        </el-radio-group>
      </el-form-item>

      <el-form-item label="天气">
        <el-radio-group v-model="journalStore.currentJournal.weather"
                        placeholder="请选择天气" clearable>
          <el-radio
              v-for="(item, index) in journalWeatherTypeList"
              :key="index" :value="item.value"
          >
            <template #default>
              <svg-icon :name="`weather-${item.value}`"/>
            </template>
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="心情">
        <el-radio-group v-model="journalStore.currentJournal.mood"
                        placeholder="请选择心情" clearable>
          <el-radio
              v-for="(item, index) in journalMoodTypeList"
              :key="index" :value="item" :label="item"
          />
        </el-radio-group>
      </el-form-item>

      <el-form-item label="图片">
        <el-upload
            v-model:file-list="imageFileList"
            list-type="picture-card"
            :accept="acceptImageTypes"
            :limit="1"
            :before-upload="beforeImageUpload"
            :http-request="httpImageRequest"
            :on-success="handleImageSuccess"
            :on-exceed="handleImageExceed"
            :before-remove="beforeRemove"
            :on-remove="handleImageRemove"
        >
          <el-icon><Plus /></el-icon>
          <template #tip>
            <div class="el-upload__tip">
              请上传小于10M的图片
            </div>
          </template>
        </el-upload>
      </el-form-item>

      <el-form-item label="视频">
        <el-upload
            v-model:file-list="videoFileList"
            :accept="acceptVideoTypes"
            :limit="1"
            :before-upload="beforeVideoUpload"
            :http-request="httpVideoRequest"
            :on-success="handleVideoSuccess"
            :on-exceed="handleVideoExceed"
            :before-remove="beforeRemove"
            :on-remove="handleVideoRemove"
        >
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">
              请上传小于200M的视频
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>

    <div class="form-button">
      <el-button type="primary" @click="confirmClick">确认</el-button>
      <el-button v-if="journalStore.journalApiType === 'UPDATE'"
                 type="danger" @click="deleteClick">删除
      </el-button>
      <el-button type="info" @click="cancelClick">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Location, Plus } from '@element-plus/icons-vue'
import { useJournalStore } from '@/store/journal.ts'
import { useAppStore } from '@/store/app.ts'
import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
import { journalRules } from '@/utils/element/elRules.ts'
import { onMounted, reactive, ref } from 'vue'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { SvgIcon } from 'vue3-common'
import { acceptImageTypes, acceptVideoTypes } from '@/utils/file.ts'
import { beforeUploadImage, beforeUploadVideo, httpRequestFile } from '@/utils/element/elUpload.ts'
import { journalCategoryTypeList, journalMoodTypeList, journalWeatherTypeList } from '@/utils/home/journalUtil.ts'

const formRef = ref()
const rules = reactive<FormRules>(journalRules)
const journalStore = useJournalStore()
const appStore = useAppStore()

const imageFileList = ref<UploadUserFile[]>([])
const videoFileList = ref<UploadUserFile[]>([])

onMounted(async () => {
  appStore.isShowMobileBack = true

  initFileList()
})

const initFileList = () => {
  imageFileList.value = []
  videoFileList.value = []

  const { imageUrl, videoUrl } = journalStore.currentJournal
  if (imageUrl) {
    imageFileList.value.push({
      name: 'image',
      url: imageUrl
    })
  }

  if (videoUrl) {
    videoFileList.value.push({
      name: 'video',
      url: videoUrl
    })
  }
}

const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
  return beforeUploadImage(rawFile)
}

const httpImageRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
  return await httpRequestFile(journalStore.journalImagePath, options)
}

const handleImageSuccess = (response: string) => {
  journalStore.currentJournal.imageUrl = response
}

const handleImageExceed: UploadProps['onExceed'] = () => {
  ElMessage.warning('最多上传1张图片')
}

const handleImageRemove: UploadProps['onRemove'] = () => {
  journalStore.currentJournal.imageUrl = ''
}

const beforeRemove: UploadProps['beforeRemove'] = () => {
  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
}

const beforeVideoUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
  return beforeUploadVideo(rawFile)
}

const httpVideoRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
  return await httpRequestFile(journalStore.journalImagePath, options, false)
}

const handleVideoSuccess = (response: string) => {
  journalStore.currentJournal.videoUrl = `p${response}`
}

const handleVideoExceed: UploadProps['onExceed'] = () => {
  ElMessage.warning('最多上传1个视频')
}

const handleVideoRemove: UploadProps['onRemove'] = () => {
  journalStore.currentJournal.videoUrl = ''
}

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value.validate().then(async () => {
    await journalStore.handleJournalApi(journalStore.currentJournal)
    history.back()
    appStore.isShowMobileBack = false
  })
}

const cancelClick = () => {
  history.back()
  appStore.isShowMobileBack = false
}

const deleteClick = () => {
  commonElMessageBox('是否确认删除该日记内容?').then(async () => {
    journalStore.journalApiType = 'DELETE'
    await journalStore.handleJournalApi(journalStore.currentJournal)
    history.back()
    appStore.isShowMobileBack = false
  })
}
</script>

<style lang="scss">
.mobile-journal-detail {
  .el-radio {
    .el-radio__label {
      display: flex;
      align-items: center;
    }
  }
}
</style>