ebike-ui/ebike-user/pages/user/login/TroubleReportUser.vue
2025-05-09 16:36:41 +08:00

569 lines
13 KiB
Vue

<template>
<view class="container" :style="{ height: scrollHeight -113+ 'px' }">
<scroll-view class="scroll-container" :scroll-y="isScrollY" :style="{ height: scrollHeight-113 + 'px' }">
<view class="padding">
<uni-forms>
<uni-forms-item label="车辆编号">
<uni-easyinput :disabled="true" v-model="bikeCode" placeholder="车辆编号" />
</uni-forms-item>
<!-- <span @click="goToSH">去审核</span> -->
</uni-forms>
</view>
<view class="">
<view class="containerup">
<view class="titleup">
<view>请选择车辆损坏部位</view>
<view class="wzgl">上报故障车辆让出行更美好~</view>
</view>
</view>
<view class="chetoubox">
<view class="flex ">
<view class="cheleft">
<view class="text-center">
<view class="">
车头部位
</view>
<view class="cheimage">
<image :src="`${imgPath}static/userui/ebike/车头.png`" mode=""></image>
</view>
</view>
</view>
<view style="width: 70%;" class="flex flex-wrap">
<view v-for="(item,index) in ebikelingjiantop" :key="index" class="ebikelingjianclass">
<view :class="['boxlinjian', { selectImg: item.selected }]"
@click="selectParttop(index)">
<image :src="item.image"></image>
<view>{{ item.name }}</view>
</view>
</view>
</view>
</view>
<view class="flex ">
<view class="cheleft">
<view class="text-center">
<view class="">
车尾部位
</view>
<view class="cheimage">
<image :src="`${imgPath}static/userui/ebike/车尾.png`" mode=""></image>
</view>
</view>
</view>
<view style="width: 70%;" class="flex flex-wrap">
<view v-for="(item,index) in ebikelingjianend" :key="index" class="ebikelingjianclass">
<view :class="['boxlinjian', { selectImg: item.selected }]"
@click="selectPartend(index)">
<image :src="item.image"></image>
<view>{{ item.name }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="padding">
<uni-easyinput type="textarea" v-model="bzxx" placeholder="其他问题" />
</view>
</view>
<uni-section title="上传图片" type="line">
<view class="example-body">
<uni-file-picker limit="9" @select="selectImg" @delete="delChangeImg"
:value="fileLists"></uni-file-picker>
</view>
</uni-section>
</scroll-view>
<!-- </you-touchbox> -->
<view class="nav-panel">
<uni-goods-nav :fill="true" :options="[]" :buttonGroup="navButtonGroup" @buttonClick="navButtonClick" />
</view>
</view>
</template>
<script setup>
import {
reactive,
ref,
onMounted
} from 'vue';
import * as api from '@/utils/api.js';
import {
showModelMessage,jkcBaseDecode
} from '@/utils/tools.js';
import {
onLoad
} from '@dcloudio/uni-app';
import mapLocation from "@/pages/map/map-location.vue";
import config from '@/utils/config';
const imgPath = config.imgPath;
const ebikeInfo = ref({
bikeId: '',
bikeCode: '',
ecuId: '',
ecuSn: '',
longitude: '',
latitude: ''
});
const bikeCode = ref("");
const orderCode = ref("");
const childComponent = ref(null);
const fileLists = ref([]);
const address = ref("");
const delChangeImg = (res) => {
const fileUniqueKey = fileLists.value[res.index].fileUniqueKey;
fileLists.value.splice(res.index, 1);
api.callMaintenanceApi("ebikeOrdersSystem/deletedFile?fileUniqueKey=" + fileUniqueKey, {}, "get");
}
const isScrollY = ref(true)
const getEndDetail = ({
minTop,
maxTop,
curTop
}) => {
if (curTop == maxTop) isScrollY.value = true
else isScrollY.value = false
}
const selectImg = (data) => {
const file = data.tempFiles[0];
api.fileUploadUser(file).then(res => {
if (res.code == 200) {
fileLists.value.push(res.data)
} else {
if (fileLists.value.length > 0) {
fileLists.value.pop();
} else {
fileLists.value = [];
}
}
});
}
const check = (item, index) => {
item.checked = !item.checked;
keys.value = keys.value == 1 ? 0 : 1;
}
const bzxx = ref("")
const ebikelingjiantop = ref([{
image: `${imgPath}static/userui/ebike/车把.png`,
name: '车把',
selected: false
},
{
image: `${imgPath}static/userui/ebike/车头1.png`,
name: '车头',
selected: false
},
{
image: `${imgPath}static/userui/ebike/车灯.png`,
name: '车灯',
selected: false
},
{
image: `${imgPath}static/userui/ebike/二维码.png`,
name: '二维码',
selected: false
},
{
image: `${imgPath}static/userui/ebike/车筐.png`,
name: '车筐',
selected: false
},
{
image: `${imgPath}static/userui/ebike/线路.png`,
name: '线路',
selected: false
}
]);
const ebikelingjianend = ref([{
image: `${imgPath}static/userui/ebike/车座.png`,
name: '车座',
selected: false
},
{
image: `${imgPath}static/userui/ebike/电池.png`,
name: '电池',
selected: false
},
{
image: `${imgPath}static/userui/ebike/车轮.png`,
name: '车轮',
selected: false
},
{
image: `${imgPath}static/userui/ebike/脚蹬.png`,
name: '脚蹬',
selected: false
},
{
image: `${imgPath}static/userui/ebike/车撑.png`,
name: '车撑',
selected: false
},
{
image: `${imgPath}static/userui/ebike/挡板.png`,
name: '挡板',
selected: false
}
]);
const navButtonGroup = [{
text: '确认提交',
backgroundColor: '#0078D4',
color: '#fff'
}];
const bikeCodeScanChange = (bikeCode) => {
ebikeInfo.value.bikeCode = bikeCode;
api.callEbikeInfo("getBikeINfoData?bikeCode=" + bikeCode).then((res) => {
if (res.code == 200) {
ebikeInfo.value.bikeId = res.data.bikeId;
ebikeInfo.value.ecuId = res.data.ecuId;
ebikeInfo.value.ecuSn = res.data.ecuSn;
const ecuSn = res.data.ecuSn;
//获取车辆经纬度
api.callCoreApi("gps?ecuId=" + res.data.ecuId + "&bikeId=" + ebikeInfo.value.bikeId, {}, 'get')
.then((res) => {
api.callCoreApi("gpsMsg" + "?ecuSn=" + ecuSn, {}, 'get').then((res) => {
currentCoordinates.value = res.data.longitude + "," + res.data
.latitude;
ebikeInfo.value.latitude = res.data.latitude;
ebikeInfo.value.longitude = res.data.longitude;
})
});
}
});
};
const selectParttop = (index) => {
ebikelingjiantop.value[index].selected = !ebikelingjiantop.value[index].selected
}
const selectPartend = (index) => {
ebikelingjianend.value[index].selected = !ebikelingjianend.value[index].selected
}
const gzlist = ref([]);
const keys = ref(0)
const checkscan = () => {
if (!bikeCode.value) {
showModelMessage("车辆码为空!");
return false;
}
if (!ebikeInfo.value.bikeId) {
showModelMessage("车辆信息不存在!");
return false;
}
return true;
}
const navButtonClick = (index, content) => {
if (!checkscan()) {
return
}
uni.showModal({
title: '确认提交',
content: '您确定要进行提交操作吗?',
success: (res) => {
if (res.confirm) {
let faultPart = [
...ebikelingjiantop.value
.map(res => res.selected ? res.name : null)
.filter(name => name !== null),
...ebikelingjianend.value
.map(res => res.selected ? res.name : null)
.filter(name => name !== null)
];
const params = {
// "faultReportId": "string",
"bikeCode": bikeCode.value,
// "position": "string",
"faultPart": faultPart.join("|"),
"faultDescription": bzxx.value,
// "reportAt": "string",
// "isDeleted": "string",
// "updatedAt": "string",
// "deletedAt": "string",
"reportUser": wechat_user.value.nickname,
"userMobile": wechat_user.value.mobile,
"reportSource": "微信小程序",
// "handleState": "string",
"longitude": Number(ebikeInfo.value.longitude),
"latitude": Number(ebikeInfo.value.latitude),
"orderCode": orderCode.value,
// "workorderId": "string",
"attachmentFiles": fileLists.value
}
api.callOrdereApi("ebikeUserFaultreport/save", params).then((res) => {
if (res.code == 200) {
uni.showToast({
title: '提交成功',
icon: 'success',
duration: 2000,
complete: function() {
// 在弹出提示框后再跳转到我的页面
uni.navigateTo({
url: "/pages/user/mine/MePage"
});
}
});
} else {
uni.showToast({
title: '操作失败',
icon: 'error',
duration: 2000
});
}
})
} else if (res.cancel) {
console.log('用户取消出库');
}
}
});
}
const userInfo = ref(null);
const closePopup = () => {
popup.value.close("center");
}
const gotomaintenancepage = () => {
uni.navigateTo({
url: `/pages/devops/maintenancepage/maintenancepage?bikeCode=${ebikeInfo.value.bikeCode}`
})
}
const createTicket = () => {
//生成工单
const faultIds = gzlist.value.filter(item => item.checked === true).map(item => item.faultReportId);
const params = {
"bikeCode": ebikeInfo.value.bikeCode,
"faultIds": faultIds,
"receiver": userInfo.value.staffId
}
api.callEbikeInfo("createWorkOrder", params).then((res) => {
if (res.code == 200) { //工单生成成功 跳转
closePopup();
setTimeout(() => {
gotomaintenancepage();
}, 200);
}
})
}
const popuptextlx = ref(1);
const typepopup = ref("center");
const popup = ref(null);
const wechat_user = ref(null);
const scrollHeight = ref(0);
const currentCoordinates = ref(null);
onLoad((options) => {
userInfo.value = uni.getStorageSync('userInfo');
wechat_user.value = JSON.parse(jkcBaseDecode(uni.getStorageSync("wechat_user")));
const systemInfo = uni.getSystemInfoSync();
const screenHeight = systemInfo.screenHeight;
const statusBarHeight = systemInfo.statusBarHeight;
scrollHeight.value = screenHeight - statusBarHeight;
if (options.bikeCode) {
bikeCode.value = options.bikeCode;
orderCode.value = options.orderCode;
}
})
onMounted(() => {
if (bikeCode.value != "") {
bikeCodeScanChange(bikeCode.value);
}
})
const changePoint = (res) => {
address.value = res.address;
currentCoordinates.value = res.location.lng + "," + res.location.lat;
ebikeInfo.value.latitude = res.location.lat;
ebikeInfo.value.longitude = res.location.lng;
}
// const goToSH = () => {
// uni.navigateTo({
// url: "/pages/warehouse/UserReportedFaults/UserReportedFaults"
// })
// }
</script>
<style>
.container {
height: 100vh;
padding: 0px 0px;
background-color: #ffffff;
}
.example {
text-align: center;
}
.titleup {
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
padding: 0px 10px;
}
.titleup .wzgl {
color: rgb(164, 169, 172);
font-size: 12px;
}
.cheliangclassbox {
width: 60px;
height: 60px;
border: solid 2px rgb(227, 227, 227);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.border_color_select {
border: solid 2px rgb(16, 130, 255);
}
.uni-grid-item__box {
flex-direction: column;
align-items: center;
margin-top: 10px;
}
.nav-panel {
position: fixed;
bottom: 0rpx;
width: 100%;
padding-bottom: 20px;
background-color: #fff;
z-index: 105;
}
.dialog-box {
padding: 10px;
}
.boxcenter {
width: 290px;
padding: 15px;
}
.buttongroup {
display: flex;
justify-content: space-between;
}
.buttongroup button {
width: 45%;
font-size: 16px;
}
.textbox {
width: 100%;
padding: 15px 5px;
text-align: center;
font-size: 14px;
letter-spacing: 1px;
}
.textlist {
height: 180px;
}
.gzboxlist {
width: 100%;
padding: 0px;
height: 50px;
border: solid 1px rgb(229, 229, 229);
align-items: center;
margin: 6px 0px;
}
.wz14 {
font-size: 14px;
line-height: 15px;
}
.wz12 {
font-size: 12px;
line-height: 15px;
color: rgb(191, 191, 191);
}
.unipopup .uni-popup {
z-index: 199;
}
.classtb {}
.classwz1 {
font-size: 14px;
font-weight: bold;
color: black;
}
.classwz2 {
font-size: 13px;
color: #5a5a5a;
font-weight: bold;
margin-left: 20px;
}
.classwz3 {
font-size: 12px;
margin-left: 20px;
color: #b8b8b8;
}
.divmap {
width: 100%;
height: 500px;
margin-top: -15px;
}
.ebikelingjianclass {
width: 33%;
}
.chetoubox {
margin: 10px;
border-radius: 10px;
padding: 10px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3)
}
.cheleft {
width: 30%;
}
.cheimage image {
width: 60px;
height: 70px;
margin-top: 30px;
}
.boxlinjian {
text-align: center;
font-size: 12px;
padding-bottom: 12px;
}
.boxlinjian image {
width: 50px;
height: 50px;
border: solid 3px rgb(230, 230, 230);
border-radius: 11px;
background: white;
padding: 7px;
}
.selectImg image {
border: solid 3px rgb(156, 235, 131);
background: rgb(208, 241, 196);
}
</style>