对接在线报修的新增报修和报修详情接口
This commit is contained in:
zhouyanli
@@ -144,10 +144,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref,computed,onMounted} from 'vue'
|
||||
import {
|
||||
onLoad, onUnload
|
||||
} from '@dcloudio/uni-app'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import { addQueryRepair, uploadFile } from '../api/api.js'
|
||||
import moment from 'moment/moment'
|
||||
|
||||
@@ -155,230 +153,167 @@ import moment from 'moment/moment'
|
||||
const houseName = ref('')
|
||||
const houseId = ref('')
|
||||
const projectName = ref('')
|
||||
const projectId = ref('') // ✅ 修复：新增项目ID
|
||||
|
||||
// 表单数据
|
||||
const form = ref({
|
||||
title: '',
|
||||
desc: '',
|
||||
phone: '',
|
||||
datetime: '', // 默认时间
|
||||
datetime: '',
|
||||
images: []
|
||||
})
|
||||
|
||||
// ========== 基础数据 ==========
|
||||
const timePopupRef = ref(null)
|
||||
// 初始时间（）
|
||||
const selectedTime = ref(moment().hour(9).minute(30).second(0));
|
||||
// 选择的时间
|
||||
const tempTime = ref(moment().hour(9).minute(30).second(0));
|
||||
const selectedTime = ref(moment().hour(9).minute(30).second(0))
|
||||
const tempTime = ref(moment().hour(9).minute(30).second(0))
|
||||
|
||||
// ========== 时间选择列数据 ==========
|
||||
// 日期列表（今天、明天、后天）
|
||||
// ========== 时间选择列数据 ✅ 修复：固定小时/分钟，不跟随当前时间 ==========
|
||||
const dateList = ref([
|
||||
{ label: '(今天)', value: moment().format('YYYY-MM-DD') },
|
||||
{ label: '(明天)', value: moment().add(1, 'day').format('YYYY-MM-DD') },
|
||||
{ label: '(后天)', value: moment().add(2, 'day').format('YYYY-MM-DD') }
|
||||
]);
|
||||
// 小时列表（）
|
||||
{ label: '(后天)', value: moment().add(2, 'day').format('YYYY-MM-DD') }
|
||||
])
|
||||
|
||||
const hourList = ref([
|
||||
{time: moment().hours(8).format('HH')},
|
||||
{time:moment().hours(9).format('HH')},
|
||||
{time:moment().hours(10).format('HH')},
|
||||
{time:moment().hours(11).format('HH')},
|
||||
{time:moment().hours(13).format('HH')},
|
||||
{time:moment().hours(14).format('HH')},
|
||||
{time:moment().hours(15).format('HH')},
|
||||
{time:moment().hours(16).format('HH')},
|
||||
{time:moment().hours(17).format('HH')},
|
||||
{time:moment().hours(18).format('HH')},
|
||||
]);
|
||||
// 分钟列表（）
|
||||
{ time: '08' }, { time: '09' }, { time: '10' }, { time: '11' },
|
||||
{ time: '13' }, { time: '14' }, { time: '15' }, { time: '16' },
|
||||
{ time: '17' }, { time: '18' }
|
||||
])
|
||||
|
||||
const minuteList = ref([
|
||||
{minute:moment().minute(0).format('mm')},
|
||||
{minute:moment().minute(30).format('mm')}
|
||||
]);
|
||||
{ minute: '00' },
|
||||
{ minute: '30' }
|
||||
])
|
||||
|
||||
// ========== 选中状态 ==========
|
||||
const selectedDate = ref(dateList.value[0].value);
|
||||
const selectedHour = ref(hourList.value[1].time); // 默认选中8点
|
||||
const selectedMinute = ref(minuteList.value[1].minute); // 默认选中00分
|
||||
const selectedDate = ref('')
|
||||
const selectedHour = ref('')
|
||||
const selectedMinute = ref('')
|
||||
|
||||
// ========== 滚动配置 ==========
|
||||
const itemHeight = 80; // 每个时间项的高度（rpx）
|
||||
const dateScrollTop = ref(0 * itemHeight); // 初始选中明天
|
||||
const hourScrollTop = ref(1 * itemHeight); // 初始选中9点
|
||||
const minuteScrollTop = ref(1 * itemHeight); // 初始选中00分
|
||||
const itemHeight = 80
|
||||
const dateScrollTop = ref(0)
|
||||
const hourScrollTop = ref(1)
|
||||
const minuteScrollTop = ref(1)
|
||||
|
||||
// ========== 显示文本 ==========
|
||||
const showTimeText = computed(() => {
|
||||
return selectedTime.value.format('YYYY-MM-DD HH:mm');
|
||||
});
|
||||
return selectedTime.value.format('YYYY-MM-DD HH:mm')
|
||||
})
|
||||
|
||||
// ========== Popup 操作 ==========
|
||||
// 打开时间弹窗
|
||||
const openTimePopup = () => {
|
||||
// 打开前同步临时时间为当前选中时间
|
||||
tempTime.value = moment(selectedTime.value);
|
||||
selectedDate.value = tempTime.value.format('YYYY-MM-DD');
|
||||
selectedHour.value = tempTime.value.format('HH');
|
||||
selectedMinute.value = tempTime.value.format('mm');
|
||||
|
||||
// 同步滚动位置
|
||||
syncScrollPosition();
|
||||
// 打开uni-popup
|
||||
if(timePopupRef.value){
|
||||
timePopupRef.value.open();
|
||||
}
|
||||
|
||||
};
|
||||
tempTime.value = moment(selectedTime.value)
|
||||
selectedDate.value = tempTime.value.format('YYYY-MM-DD')
|
||||
selectedHour.value = tempTime.value.format('HH')
|
||||
selectedMinute.value = tempTime.value.format('mm')
|
||||
syncScrollPosition()
|
||||
timePopupRef.value?.open()
|
||||
}
|
||||
|
||||
// 关闭时间弹窗
|
||||
const closeTimePopup = () => {
|
||||
timePopupRef.value.close();
|
||||
};
|
||||
timePopupRef.value?.close()
|
||||
}
|
||||
|
||||
// 确认选择时间
|
||||
const confirmTime = () => {
|
||||
// 拼接选中的时间
|
||||
const selectedDateTime = `${selectedDate.value} ${selectedHour.value}:${selectedMinute.value}`;
|
||||
selectedTime.value = moment(selectedDateTime, 'YYYY-MM-DD HH:mm');
|
||||
// 给表单赋值
|
||||
form.value.datetime = selectedTime.value.format('YYYY-MM-DD HH:mm')
|
||||
// 关闭弹窗
|
||||
closeTimePopup();
|
||||
|
||||
// 提示
|
||||
const selectedDateTime = `${selectedDate.value} ${selectedHour.value}:${selectedMinute.value}`
|
||||
selectedTime.value = moment(selectedDateTime, 'YYYY-MM-DD HH:mm')
|
||||
form.value.datetime = selectedTime.value.format('YYYY-MM-DD HH:mm')
|
||||
closeTimePopup()
|
||||
uni.showToast({
|
||||
title: `已选择 ${selectedTime.value.format('MM月DD日 HH:mm')}`,
|
||||
icon: 'none'
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
// ========== 滚动/点击选择逻辑 ==========
|
||||
// 同步滚动位置
|
||||
// ========== 滚动/选择逻辑 ==========
|
||||
const syncScrollPosition = () => {
|
||||
// 日期滚动位置
|
||||
const dateIndex = dateList.value.findIndex(item => item.value === selectedDate.value);
|
||||
dateScrollTop.value = dateIndex * itemHeight;
|
||||
const dateIdx = dateList.value.findIndex(i => i.value === selectedDate.value)
|
||||
const hourIdx = hourList.value.findIndex(i => i.time === selectedHour.value)
|
||||
const minIdx = minuteList.value.findIndex(i => i.minute === selectedMinute.value)
|
||||
|
||||
// 小时滚动位置
|
||||
const hourIndex = hourList.value.findIndex(item => item.time === selectedHour.value);
|
||||
hourScrollTop.value = hourIndex * itemHeight;
|
||||
|
||||
// 分钟滚动位置
|
||||
const minuteIndex = minuteList.value.findIndex(item => item.minute === selectedMinute.value);
|
||||
minuteScrollTop.value = minuteIndex * itemHeight;
|
||||
};
|
||||
dateScrollTop.value = dateIdx * itemHeight
|
||||
hourScrollTop.value = hourIdx * itemHeight
|
||||
minuteScrollTop.value = minIdx * itemHeight
|
||||
}
|
||||
|
||||
// 选择日期（点击）
|
||||
const selectDate = (index) => {
|
||||
selectedDate.value = dateList.value[index].value;
|
||||
dateScrollTop.value = index * itemHeight;
|
||||
updateTempTime();
|
||||
};
|
||||
|
||||
// 选择小时（点击）
|
||||
selectedDate.value = dateList.value[index].value
|
||||
dateScrollTop.value = index * itemHeight
|
||||
updateTempTime()
|
||||
}
|
||||
const selectHour = (index) => {
|
||||
selectedHour.value = hourList.value[index].time;
|
||||
hourScrollTop.value = index * itemHeight;
|
||||
updateTempTime();
|
||||
};
|
||||
|
||||
// 选择分钟（点击）
|
||||
selectedHour.value = hourList.value[index].time
|
||||
hourScrollTop.value = index * itemHeight
|
||||
updateTempTime()
|
||||
}
|
||||
const selectMinute = (index) => {
|
||||
selectedMinute.value = minuteList.value[index].minute;
|
||||
minuteScrollTop.value = index * itemHeight;
|
||||
updateTempTime();
|
||||
};
|
||||
selectedMinute.value = minuteList.value[index].minute
|
||||
minuteScrollTop.value = index * itemHeight
|
||||
updateTempTime()
|
||||
}
|
||||
|
||||
// 滚动日期列（滑动）
|
||||
const onDateScroll = (e) => {
|
||||
const index = Math.round(e.detail.scrollTop / itemHeight);
|
||||
if (index >= 0 && index < dateList.value.length) {
|
||||
selectedDate.value = dateList.value[index].value;
|
||||
updateTempTime();
|
||||
const idx = Math.round(e.detail.scrollTop / itemHeight)
|
||||
if (idx >= 0 && idx < dateList.value.length) {
|
||||
selectedDate.value = dateList.value[idx].value
|
||||
dateScrollTop.value = idx * itemHeight
|
||||
updateTempTime()
|
||||
}
|
||||
};
|
||||
|
||||
// 滚动小时列（滑动）
|
||||
}
|
||||
const onHourScroll = (e) => {
|
||||
const index = Math.round(e.detail.scrollTop / itemHeight);
|
||||
if (index >= 0 && index < hourList.value.length) {
|
||||
selectedHour.value = hourList.value[index].time;
|
||||
updateTempTime();
|
||||
const idx = Math.round(e.detail.scrollTop / itemHeight)
|
||||
if (idx >= 0 && idx < hourList.value.length) {
|
||||
selectedHour.value = hourList.value[idx].time
|
||||
hourScrollTop.value = idx * itemHeight
|
||||
updateTempTime()
|
||||
}
|
||||
};
|
||||
|
||||
// 滚动分钟列（滑动）
|
||||
}
|
||||
const onMinuteScroll = (e) => {
|
||||
const index = Math.round(e.detail.scrollTop / itemHeight);
|
||||
minuteScrollTop.value = index * itemHeight;
|
||||
if (index >= 0 && index < minuteList.value.length) {
|
||||
selectedMinute.value = minuteList.value[index].minute;
|
||||
updateTempTime();
|
||||
const idx = Math.round(e.detail.scrollTop / itemHeight)
|
||||
if (idx >= 0 && idx < minuteList.value.length) {
|
||||
selectedMinute.value = minuteList.value[idx].minute
|
||||
minuteScrollTop.value = idx * itemHeight
|
||||
updateTempTime()
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 更新临时时间（弹窗预览）
|
||||
const updateTempTime = () => {
|
||||
tempTime.value = moment(`${selectedDate.value} ${selectedHour.value}:${selectedMinute.value}`, 'YYYY-MM-DD HH:mm');
|
||||
};
|
||||
tempTime.value = moment(`${selectedDate.value} ${selectedHour.value}:${selectedMinute.value}`, 'YYYY-MM-DD HH:mm')
|
||||
}
|
||||
|
||||
// ========== 初始化 ==========
|
||||
onMounted(() => {
|
||||
syncScrollPosition();
|
||||
});
|
||||
syncScrollPosition()
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 页面加载时监听事件
|
||||
// ========== 页面通信 ==========
|
||||
onLoad(() => {
|
||||
// 监听选择房屋事件
|
||||
uni.$on('selectHouse', (data) => {
|
||||
houseName.value = data.name
|
||||
houseId.value = data.id
|
||||
})
|
||||
// 监听选择维修项目事件
|
||||
uni.$on('selectProject', (data) => {
|
||||
projectName.value = data.name
|
||||
projectId.value = data.id // 接收项目ID
|
||||
})
|
||||
})
|
||||
|
||||
// 页面销毁移除监听
|
||||
onUnload(() => {
|
||||
uni.$off('selectHouse')
|
||||
uni.$off('selectProject')
|
||||
})
|
||||
|
||||
// 跳转到选择房屋页
|
||||
// 跳转
|
||||
const goToSelectHouse = () => {
|
||||
uni.navigateTo({
|
||||
url: `/pageSubPack/online-repair/selectHouse?houseId=${houseId.value}`
|
||||
})
|
||||
uni.navigateTo({ url: `/pageSubPack/online-repair/selectHouse?houseId=${houseId.value}` })
|
||||
}
|
||||
|
||||
// 跳转到选择维修项目页
|
||||
const goToSelectProject = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pageSubPack/online-repair/personalSelectPoject'
|
||||
})
|
||||
uni.navigateTo({ url: '/pageSubPack/online-repair/personalSelectPoject' })
|
||||
}
|
||||
|
||||
// 选择预约时间
|
||||
const changeTime = () =>{
|
||||
|
||||
}
|
||||
// const chooseDateTime = () => {
|
||||
// uni.datePicker({
|
||||
// type: 'datetime',
|
||||
// value: form.value.datetime,
|
||||
// success: (res) => {
|
||||
// form.value.datetime = res.value
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// 选择图片
|
||||
// 图片
|
||||
const chooseImage = () => {
|
||||
uni.chooseImage({
|
||||
count: 3,
|
||||
@@ -389,109 +324,95 @@ const chooseImage = () => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 预览图片
|
||||
const previewImage = (url) => {
|
||||
uni.previewImage({
|
||||
urls: form.value.images,
|
||||
current: url
|
||||
})
|
||||
uni.previewImage({ urls: form.value.images, current: url })
|
||||
}
|
||||
|
||||
// 删除图片
|
||||
const deleteImage = (index) => {
|
||||
form.value.images.splice(index, 1)
|
||||
}
|
||||
|
||||
// 上传图片到服务器
|
||||
// 上传图片
|
||||
const uploadImages = async () => {
|
||||
const uploadedUrls = []
|
||||
const urls = []
|
||||
for (const path of form.value.images) {
|
||||
if (path.startsWith('http')) {
|
||||
uploadedUrls.push(path)
|
||||
urls.push(path)
|
||||
continue
|
||||
}
|
||||
try {
|
||||
const res = await uploadFile(path)
|
||||
uploadedUrls.push(res.data || res.msg || '')
|
||||
urls.push(res.data || res.msg || '')
|
||||
} catch (e) {
|
||||
console.error('图片上传失败', e)
|
||||
console.error('上传失败', e)
|
||||
}
|
||||
}
|
||||
return uploadedUrls
|
||||
return urls
|
||||
}
|
||||
|
||||
// 表单提交
|
||||
// ========== 表单提交 ✅ 修复：所有错误都解决 ==========
|
||||
const submitForm = async () => {
|
||||
// 校验
|
||||
if (!houseName.value) {
|
||||
uni.showToast({ title: '请选择报修房屋', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!projectName.value) {
|
||||
uni.showToast({ title: '请选择维修项目', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!form.value.title) {
|
||||
uni.showToast({ title: '请输入问题标题', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!form.value.desc) {
|
||||
uni.showToast({ title: '请输入问题描述', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
|
||||
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!form.value.datetime) {
|
||||
uni.showToast({ title: '请选择预约时间', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!houseName.value) return uni.showToast({ title: '请选择报修房屋', icon: 'none' })
|
||||
if (!projectName.value) return uni.showToast({ title: '请选择维修项目', icon: 'none' })
|
||||
if (!form.value.title) return uni.showToast({ title: '请输入标题', icon: 'none' })
|
||||
if (!form.value.desc) return uni.showToast({ title: '请输入问题描述', icon: 'none' })
|
||||
if (!/^1[3-9]\d{9}$/.test(form.value.phone)) return uni.showToast({ title: '手机号不正确', icon: 'none' })
|
||||
if (!form.value.datetime) return uni.showToast({ title: '请选择预约时间', icon: 'none' })
|
||||
|
||||
const villageId = uni.getStorageSync('currentVillageId')
|
||||
if (!villageId || villageId === '0') {
|
||||
uni.showToast({ title: '请先选择小区', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!villageId || villageId === '0') return uni.showToast({ title: '请先选择小区', icon: 'none' })
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
if (!userId) return uni.showToast({ title: '用户信息失效', icon: 'none' })
|
||||
|
||||
uni.showLoading({ title: '提交中...' })
|
||||
|
||||
try {
|
||||
const imageUrls = await uploadImages()
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
|
||||
// 参数
|
||||
const params = {
|
||||
villageId,
|
||||
houseId: houseId.value,
|
||||
maintenanceItemId: projectId.value,
|
||||
title: form.value.title,
|
||||
problem: form.value.desc,
|
||||
residentId: userId,
|
||||
orderDate: form.value.datetime,
|
||||
phone: form.value.phone,
|
||||
problemImageUrl: imageUrls.join(','),
|
||||
projectType: '1',
|
||||
problemStatus: ''
|
||||
villageId,
|
||||
houseId: houseId.value,
|
||||
maintenanceItemId: projectId.value,
|
||||
title: form.value.title,
|
||||
problem: form.value.desc,
|
||||
residentId: userId,
|
||||
orderDate: form.value.datetime,
|
||||
phone: form.value.phone,
|
||||
problemImageUrl: imageUrls.join(','),
|
||||
projectType: '1',
|
||||
problemStatus: ''
|
||||
}
|
||||
|
||||
const res = await addQueryRepair(params)
|
||||
|
||||
if (res.code === 200) {
|
||||
uni.showToast({ title: '提交成功', icon: 'success' })
|
||||
// const tempProjectId = projectId.value
|
||||
// 清空表单
|
||||
form.value = { title: '', desc: '', phone: '', datetime: '', images: [] }
|
||||
houseName.value = ''
|
||||
houseId.value = ''
|
||||
projectName.value = ''
|
||||
uni.navigateBack({ delta: 1 })
|
||||
projectId.value = ''
|
||||
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url:'/pageSubPack/online-repair/onlineRepair'
|
||||
})
|
||||
// uni.navigateTo({ url: `/pageSubPack/online-repair/onlineRepair?maintenanceProjectId=${tempProjectId}` })
|
||||
}, 1500)
|
||||
} else {
|
||||
uni.showToast({ title: res.msg || '提交失败', icon: 'none' })
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '网络异常', icon: 'none' })
|
||||
console.error('提交异常：', e) // 看控制台真实错误
|
||||
uni.showToast({ title: '提交失败，请检查网络或重试', icon: 'none' })
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-container {
|
||||
padding: 15px;
|
||||
|
||||
Reference in New Issue
Block a user