390 lines
9.4 KiB
Vue
390 lines
9.4 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="conent">
|
||
<view class="form-item">
|
||
<view class="label">
|
||
<u-icon name="order" color="#3B8CFF" size="38"></u-icon>
|
||
工单内容
|
||
</view>
|
||
<textarea v-model="workOrderContent" placeholder="请输入..." style="width: 100%;" />
|
||
<view class="voice-icon">
|
||
<u-icon name="mic" color="#409EFF" size="36"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- 上传照片/视频 -->
|
||
<view class="form-item">
|
||
<view class="label">
|
||
<u-icon name="photo" color="#3B8CFF" size="38"></u-icon>
|
||
上传照片/视频
|
||
</view>
|
||
<view class="upload-area">
|
||
<u-upload :fileList="fileList" @afterRead="handleAfterRead" @delete="handleDelete" :maxCount="8"
|
||
width="200" height="200" accept="image/*,video/*" :previewFullImage="true">
|
||
</u-upload>
|
||
</view>
|
||
<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
|
||
</view>
|
||
|
||
<!-- 工单分类 -->
|
||
<view class="form-item" style="height: 60rpx;line-height: 50rpx;">
|
||
<view class="label" @click="showSelect = true">
|
||
工单类型
|
||
<view @click="showPicker = true" class="select-box">
|
||
{{ workOrderCategory || '请选择' }}
|
||
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
|
||
</view>
|
||
</view>
|
||
<u-picker :show="showSelect" :columns="categoryList" keyName="label" @confirm="handleConfirm"
|
||
@cancel="handleCancel">
|
||
</u-picker>
|
||
</view>
|
||
|
||
<!-- 工单地点 -->
|
||
<view class="form-item" style="margin-bottom: 30rpx;height: 200rpx;">
|
||
<view class="label">
|
||
<u-icon name="map" color="#3B8CFF" size="38"></u-icon>
|
||
工作地点
|
||
</view>
|
||
<textarea v-model="workOrderLocation" placeholder="请输入..." style="width: 100%;" />
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-button">
|
||
<u-button type="primary" @click="handleSubmit">提交</u-button>
|
||
</view>
|
||
</view>
|
||
<Footer></Footer>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Footer from '@/components/footer_common.vue';
|
||
import {
|
||
get,
|
||
post
|
||
} from '@/utils/request';
|
||
import {
|
||
IMAGE_BASE_URL,
|
||
BASE_URL
|
||
} from '@/utils/config';
|
||
export default {
|
||
components: {
|
||
Footer
|
||
},
|
||
data() {
|
||
return {
|
||
workOrderContent: '',
|
||
fileList: [],
|
||
workOrderCategory: '',
|
||
workOrderCategoryID: '',
|
||
showSelect: false,
|
||
categoryList: [],
|
||
workOrderLocation: '',
|
||
expectedTime: '',
|
||
uploadedImages: [], // 专门存储图片URL
|
||
uploadedVideos: [], // 专门存储视频URL
|
||
videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv']
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getOrderList();
|
||
},
|
||
methods: {
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
|
||
// 文件上传相关方法
|
||
handleAfterRead(event) {
|
||
const {
|
||
file
|
||
} = event;
|
||
let files = [].concat(file);
|
||
|
||
// 检查文件数量和类型
|
||
if (this.fileList.length + files.length > 8) {
|
||
uni.showToast({
|
||
title: '最多只能上传8个文件',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
files.forEach(item => {
|
||
// 检查文件类型
|
||
const extension = this.getFileExtension(item.url);
|
||
const isVideo = this.videoFormats.includes(extension.toLowerCase());
|
||
|
||
// 添加到文件列表
|
||
this.fileList.push({
|
||
...item,
|
||
status: 'uploading',
|
||
message: '上传中...',
|
||
isVideo: isVideo
|
||
});
|
||
|
||
// 开始上传
|
||
this.uploadFile(item, isVideo);
|
||
});
|
||
},
|
||
|
||
// 获取文件扩展名
|
||
getFileExtension(filename) {
|
||
return filename.split('.').pop().split('?')[0];
|
||
},
|
||
|
||
handleDelete(event) {
|
||
const {
|
||
index
|
||
} = event;
|
||
const file = this.fileList[index];
|
||
|
||
// 从对应数组中删除
|
||
if (file.isVideo) {
|
||
const videoIndex = this.uploadedVideos.indexOf(file.url);
|
||
if (videoIndex !== -1) this.uploadedVideos.splice(videoIndex, 1);
|
||
} else {
|
||
const imageIndex = this.uploadedImages.indexOf(file.url);
|
||
if (imageIndex !== -1) this.uploadedImages.splice(imageIndex, 1);
|
||
}
|
||
|
||
this.fileList.splice(index, 1);
|
||
},
|
||
|
||
async uploadFile(file, isVideo) {
|
||
try {
|
||
const fullUrl = await this.uploadAvatar(file.url);
|
||
const relativePath = fullUrl.replace(BASE_URL, '');
|
||
|
||
// 更新文件状态
|
||
const fileIndex = this.fileList.findIndex(item => item.url === file.url);
|
||
if (fileIndex !== -1) {
|
||
this.fileList[fileIndex] = {
|
||
...this.fileList[fileIndex],
|
||
status: 'success',
|
||
message: '上传成功',
|
||
url: fullUrl, // 预览用完整URL
|
||
relativeUrl: relativePath, // 存储相对路径
|
||
isVideo: isVideo
|
||
};
|
||
|
||
// 存储相对路径到对应数组
|
||
if (isVideo) {
|
||
this.uploadedVideos.push(relativePath);
|
||
} else {
|
||
this.uploadedImages.push(relativePath);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
const fileIndex = this.fileList.findIndex(item => item.url === file.url);
|
||
if (fileIndex !== -1) {
|
||
this.fileList[fileIndex] = {
|
||
...this.fileList[fileIndex],
|
||
status: 'failed',
|
||
message: '上传失败'
|
||
};
|
||
}
|
||
uni.showToast({
|
||
title: `${isVideo ? '视频' : '图片'}上传失败: ${error.message}`,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
uploadAvatar(filePath) {
|
||
return new Promise((resolve, reject) => {
|
||
uni.uploadFile({
|
||
url: `${BASE_URL}/api/v1/upload`,
|
||
filePath: filePath,
|
||
name: 'file',
|
||
header: {
|
||
'Authorization': `Bearer ${uni.getStorageSync('token')}`
|
||
},
|
||
success: (uploadRes) => {
|
||
try {
|
||
const res = JSON.parse(uploadRes.data);
|
||
if (res && res.success) {
|
||
resolve(`${IMAGE_BASE_URL}${res.data}`);
|
||
} else {
|
||
reject(new Error(res.message || '上传失败'));
|
||
}
|
||
} catch (e) {
|
||
reject(new Error('解析响应失败'));
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
reject(new Error('上传失败: ' + JSON.stringify(err)));
|
||
}
|
||
});
|
||
});
|
||
},
|
||
|
||
async handleSubmit() {
|
||
if (!this.workOrderContent) {
|
||
uni.showToast({
|
||
title: '请填写工单内容',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.workOrderCategory) {
|
||
uni.showToast({
|
||
title: '请选择工单类型',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.workOrderLocation) {
|
||
uni.showToast({
|
||
title: '请填写工作地点',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
const submitData = {
|
||
title: this.workOrderContent,
|
||
orderTypeId: this.workOrderCategoryID,
|
||
address: this.workOrderLocation,
|
||
images: this.uploadedImages, // 只包含图片
|
||
videos: this.uploadedVideos, // 只包含视频·
|
||
};
|
||
|
||
console.log('提交数据:', submitData);
|
||
|
||
// 调用API保存信息
|
||
const res = await post('/api/v1/app_auth/work-order', submitData);
|
||
|
||
uni.hideLoading();
|
||
|
||
if (res && res.success) {
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
this.workOrderContent = null;
|
||
this.workOrderCategoryID = null;
|
||
this.workOrderCategory = null;
|
||
this.workOrderLocation = null;
|
||
this.fileList = [];
|
||
this.uploadedImages = [];
|
||
this.uploadedVideos = [];
|
||
setTimeout(()=>{
|
||
uni.navigateTo({
|
||
url: `/pages/myTickets/index`,
|
||
});
|
||
},1000)
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: res?.message || '提交失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
// 用户点击"确定"时触发
|
||
handleConfirm(e) {
|
||
this.workOrderCategory = e.value[0].label;
|
||
this.workOrderCategoryID = e.value[0].id;
|
||
this.showSelect = false;
|
||
},
|
||
|
||
// 用户点击"取消"时触发
|
||
handleCancel() {
|
||
this.showSelect = false;
|
||
},
|
||
|
||
//获取工单类型
|
||
async getOrderList() {
|
||
try {
|
||
const res = await get('/api/v1/apps/work-order-type');
|
||
if (res?.success) {
|
||
this.categoryList = [
|
||
[...res.data]
|
||
]
|
||
}
|
||
} catch (err) {
|
||
console.error('获取工单类型失败:', err);
|
||
uni.showToast({
|
||
title: '获取工单类型失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
width: 100%;
|
||
height: 130vh;
|
||
opacity: 1;
|
||
background: rgba(210, 227, 255, 1);
|
||
position: relative;
|
||
|
||
.conent {
|
||
width: 100%;
|
||
position: absolute;
|
||
margin-top: 20rpx;
|
||
|
||
.form-item {
|
||
margin-bottom: 20px;
|
||
height: 400rpx;
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
margin-bottom: 20rpx;
|
||
background: #fff;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
|
||
.label {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
margin-bottom: 30px;
|
||
display: flex;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.select-box {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 30rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.voice-icon {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
bottom: 20rpx;
|
||
}
|
||
|
||
.upload-area {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100px;
|
||
}
|
||
|
||
.note {
|
||
font-size: 20rpx;
|
||
color: #999;
|
||
margin-top: 60rpx;
|
||
}
|
||
|
||
.submit-button {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |