feat:重构模块

src/views/journal/detail[id].vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="mobile-journal-detail common-mobile-view">
+    <el-form ref="formRef" :model="journalStore.currentJournal"
+             :rules="rules" label-width="60px">
+      <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 categoryTypeList"
+              :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 weatherTypeList"
+              :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 moodTypeList"
+              :key="index" :value="item" :label="item"
+          />
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="图片">
+        <upload-image v-model="journalStore.currentJournal.imageUrl"
+                      :service-url="fileServiceUrl"
+                      :image-limit="1"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="journalStore.journalImagePath"/>
+      </el-form-item>
+
+      <el-form-item label="视频">
+        <upload-video v-model="journalStore.currentJournal.videoUrl"
+                      :service-url="fileServiceUrl"
+                      :image-limit="1"
+                      :service-file-root-path="serviceFileRootPath"
+                      :video-path="journalStore.journalVideoPath"
+                      style="width: 100%;"/>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <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 } from '@element-plus/icons-vue'
+import { useJournalStore } from '@/store/journal.ts'
+import { useAppStore } from '@/store/app.ts'
+import { FormRules } from 'element-plus'
+import { journalRules } from '@/utils/element/elRules.ts'
+import { onMounted, reactive, ref } from 'vue'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+import { UploadImage, UploadVideo, SvgIcon } from 'vue3-common'
+
+const formRef = ref()
+const rules = reactive<FormRules>(journalRules)
+const journalStore = useJournalStore()
+const appStore = useAppStore()
+
+const categoryTypeList = ['生活', '工作', '其他']
+
+const weatherTypeList = [{
+  value: 'sunny',
+  label: '晴'
+}, {
+  value: 'rainy',
+  label: '雨'
+}, {
+  value: 'snowy',
+  label: '雪'
+}, {
+  value: 'cloudy',
+  label: '阴'
+}]
+
+const moodTypeList = ['😀', '🙁', '😡']
+
+onMounted(async () => {
+  appStore.isShowMobileBack = true
+})
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await journalStore.handleJournalApi(journalStore.currentJournal)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该日记内容?').then(async () => {
+    journalStore.journalApiType = 'DELETE'
+    await journalStore.handleJournalApi(journalStore.currentJournal)
+    history.back()
+  })
+}
+</script>
+
+<style lang="scss">
+.mobile-journal-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .el-radio {
+    .el-radio__label {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>