127 lines
4.0 KiB
Vue
127 lines
4.0 KiB
Vue
<template>
|
|
<div class="mobile-travel-record-form common-mobile-view">
|
|
<el-form ref="formRef" :model="travelStore.currentTravelRecord"
|
|
:rules="rules" label-width="80">
|
|
<el-form-item label="景点名称" prop="name">
|
|
<el-select
|
|
v-model="travelStore.currentTravelRecord.name"
|
|
@focus="travelStore.queryTravelSpotNameList()"
|
|
:disabled="travelStore.travelRecordApiType === 'UPDATE'"
|
|
placeholder="请选择景点名称">
|
|
<el-option
|
|
v-for="(item, index) in travelStore.travelSpotNameList"
|
|
:key="index" :label="item" :value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="旅行日期" prop="date">
|
|
<el-date-picker
|
|
v-model="travelStore.currentTravelRecord.date"
|
|
type="date" placeholder="请选择日期"
|
|
value-format="YYYY-MM-DD"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="旅行人员" prop="persons">
|
|
<el-input-tag v-model="travelStore.currentTravelRecord.persons"
|
|
:max="3" placeholder="请输入旅行人员" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="图片">
|
|
<upload-image v-model="travelStore.currentTravelRecord.imageList"
|
|
:service-url="fileServiceUrl"
|
|
:image-limit="3"
|
|
:service-file-root-path="serviceFileRootPath"
|
|
:image-path="travelStore.travelImagePath"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="视频">
|
|
<upload-video v-model="travelStore.currentTravelRecord.videoList"
|
|
:service-url="fileServiceUrl"
|
|
:image-limit="3"
|
|
:service-file-root-path="serviceFileRootPath"
|
|
:video-path="travelStore.travelVideoPath"
|
|
style="width: 100%;"/>
|
|
</el-form-item>
|
|
|
|
<div class="video-list">
|
|
<video v-for="(item, index) in travelStore.currentTravelRecord.videoList"
|
|
:key="index" controls style="width: 60%; min-height: 200px;">
|
|
<source :src="serviceFileRootPath + item" type="video/mp4">
|
|
您的浏览器不支持 HTML5 视频
|
|
</video>
|
|
</div>
|
|
</el-form>
|
|
|
|
<div class="button-container">
|
|
<el-button type="primary" @click="confirmClick">确认</el-button>
|
|
<el-button type="danger" @click="deleteClick">删除</el-button>
|
|
<el-button type="info" @click="cancelClick">取消</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { UploadImage, UploadVideo } from 'vue3-common'
|
|
import { useTravelStore } from '@/store/travel.ts'
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { FormRules } from 'element-plus'
|
|
import { travelRecordRules } from '@/utils/element/elRules.ts'
|
|
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
|
|
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
|
import { useAppStore } from '@/store/app.ts'
|
|
|
|
const rules = reactive<FormRules>(travelRecordRules)
|
|
|
|
const formRef = ref()
|
|
const travelStore = useTravelStore()
|
|
const appStore = useAppStore()
|
|
|
|
onMounted(async () => {
|
|
appStore.isShowMobileBack = true
|
|
})
|
|
|
|
/**
|
|
* 点击确认按钮
|
|
*/
|
|
const confirmClick = () => {
|
|
formRef.value.validate().then(() => {
|
|
travelStore.handleTravelRecordApi(travelStore.currentTravelRecord)
|
|
history.back()
|
|
appStore.isShowMobileBack = false
|
|
})
|
|
}
|
|
|
|
const cancelClick = () => {
|
|
history.back()
|
|
appStore.isShowMobileBack = false
|
|
}
|
|
|
|
const deleteClick = () => {
|
|
commonElMessageBox('是否确认删除该记录?').then(() => {
|
|
travelStore.travelRecordApiType = 'DELETE'
|
|
travelStore.handleTravelRecordApi(travelStore.currentTravelRecord)
|
|
history.back()
|
|
appStore.isShowMobileBack = false
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mobile-travel-record-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
.video-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.button-container {
|
|
align-self: center;
|
|
}
|
|
}</style>
|