审核用户报障
This commit is contained in:
小朱
parent
cabe086516
commit
4d18b3059a
@ -334,6 +334,15 @@
|
||||
"navigationBarTitleText": "手动输入编码"
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
"root": "pages/warehouse/UserReportedFaults",
|
||||
"pages": [{
|
||||
"path": "UserReportedFaults",
|
||||
"style": {
|
||||
"navigationBarTitleText": "审核用户报障"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
],
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
</view>
|
||||
<view class="classwz1">
|
||||
请确定损坏车辆当前位置
|
||||
<span @click="goToSH">去审核</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="classwz2">
|
||||
@ -421,6 +422,11 @@
|
||||
ebikeInfo.value.latitude = res.location.lat;
|
||||
ebikeInfo.value.longitude = res.location.lng;
|
||||
}
|
||||
const goToSH =()=>{
|
||||
uni.navigateTo({
|
||||
url:"/pages/warehouse/UserReportedFaults/UserReportedFaults"
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="flex justify-center bg-white" style="padding: 5px;">
|
||||
<!-- 审核处理 -->
|
||||
<view class="text-center" style="width: 50%;">
|
||||
<view class="wztitle" :class="{ active: selectedTab === 'consume' }" @click="selectTab('consume')">
|
||||
审核处理
|
||||
</view>
|
||||
<view class="selectTop" v-if="selectedTab === 'consume'"></view>
|
||||
</view>
|
||||
<!-- 上报记录 -->
|
||||
<view class="text-center" style="width: 50%;">
|
||||
<view class="wztitle" :class="{ active: selectedTab === 'report' }" @click="selectTab('report')">
|
||||
上报记录
|
||||
</view>
|
||||
<view class="selectTop" v-if="selectedTab === 'report'"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 切换的页面内容 -->
|
||||
<view class="content">
|
||||
<view v-show="selectedTab === 'consume'">
|
||||
<!-- 审核处理的具体内容 -->
|
||||
<view class="card">
|
||||
<view class="card-header">
|
||||
<span class="text-red"> *</span>审核结果
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<uni-data-checkbox v-model="baseFormData.result" :localdata="results" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="card-header flex justify-between">
|
||||
<view>
|
||||
<span class="text-red"> *</span>确认故障部件
|
||||
</view>
|
||||
<view class="addclass" @click="addFaultyPart">
|
||||
+添加
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-textart flex flex-wrap">
|
||||
<view v-for="(part, index) in faultyParts" :key="index" class="">
|
||||
<view class="card-tag">
|
||||
{{ part }}
|
||||
</view>
|
||||
<view class="close-btn" @click="removeFaultyPart(index)">X</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="card-header">
|
||||
<span class="text-red"> *</span>选择报修图片
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<view class="example-body">
|
||||
<uni-file-picker limit="9" @select="selectImg" @delete="delChangeImg"
|
||||
:value="fileLists"></uni-file-picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="card-header">
|
||||
<span class="text-red"> *</span>审核备注
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<uni-easyinput type="textarea" v-model="baseFormData.remark" placeholder="请输入备注内容" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-show="selectedTab === 'report'">
|
||||
<!-- 上报记录的具体内容 -->
|
||||
<view class="card">
|
||||
<!-- 示例内容，可以按需调整 -->
|
||||
<view class="card-header">上报记录内容</view>
|
||||
<view class="card-info">这里展示上报记录的详细信息</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<uni-popup ref="popup" background-color="#fff" :mask-click="false">
|
||||
<view class="fault-parts-container">
|
||||
<view class="fault-parts-title">
|
||||
故障部件
|
||||
</view>
|
||||
<view class="flex flex-wrap">
|
||||
<uni-data-checkbox mode="button" multiple v-model="selectedParts" :localdata="partsList">
|
||||
</uni-data-checkbox>
|
||||
</view>
|
||||
<view class="options-description-title">
|
||||
选项说明
|
||||
</view>
|
||||
<view class="options-description-text">
|
||||
默认勾选上已经上报的故障部件，您可取消勾选或者增加勾选故障部件
|
||||
</view>
|
||||
<view class="action-buttons-container flex justify-between">
|
||||
<button @click="oncancel" style="border: solid 1px;"
|
||||
class="cu-btn line-blue bg-white text-blue">取消</button>
|
||||
<button @click="onOk" class="cu-btn bg-blue text-white">完成</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import * as api from '@/utils/api.js';
|
||||
import config from '@/utils/config';
|
||||
const imgPath = config.imgPath;
|
||||
const selectedParts = ref([])
|
||||
const partsList = ref([{
|
||||
text: '车轮',
|
||||
value: '车轮'
|
||||
},
|
||||
{
|
||||
text: '挡泥板',
|
||||
value: '挡泥板'
|
||||
},
|
||||
{
|
||||
text: '电池',
|
||||
value: '电池'
|
||||
}, {
|
||||
text: '脚撑',
|
||||
value: '脚撑'
|
||||
}, {
|
||||
text: '开关锁',
|
||||
value: '开关锁'
|
||||
}, {
|
||||
text: '链条',
|
||||
value: '链条'
|
||||
}, {
|
||||
text: '前蹬',
|
||||
value: '前蹬'
|
||||
}, {
|
||||
text: '刹车',
|
||||
value: '刹车'
|
||||
}, {
|
||||
text: '转把',
|
||||
value: '转把'
|
||||
}
|
||||
]) // 用于显示的部件列表)
|
||||
// 使用ref来声明选中的标签
|
||||
const selectedTab = ref('consume');
|
||||
// 切换选中的标签
|
||||
const selectTab = (tab) => {
|
||||
selectedTab.value = tab;
|
||||
};
|
||||
const popup = ref(null)
|
||||
|
||||
// 数据模型
|
||||
const baseFormData = ref([]);
|
||||
const results = ref([{
|
||||
text: '属实',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
text: '虚假',
|
||||
value: 1
|
||||
}
|
||||
]);
|
||||
|
||||
// 故障部件
|
||||
const faultyParts = ref([]);
|
||||
|
||||
// 获取设备信息
|
||||
const scrollHeight = ref(null);
|
||||
|
||||
const fileLists = ref([]);
|
||||
const selectImg = (data) => {
|
||||
const file = data.tempFiles[0];
|
||||
api.fileUpload(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 delChangeImg = (res) => {
|
||||
const fileUniqueKey = fileLists.value[res.index].fileUniqueKey;
|
||||
fileLists.value.splice(res.index, 1);
|
||||
api.callEbikeInfo("deletedFile?fileUniqueKey=" + fileUniqueKey, {}, "get");
|
||||
}
|
||||
onMounted(() => {
|
||||
// 获取设备信息
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
const screenHeight = systemInfo.screenHeight;
|
||||
const statusBarHeight = systemInfo.statusBarHeight;
|
||||
scrollHeight.value = screenHeight - statusBarHeight;
|
||||
});
|
||||
|
||||
// 添加故障部件
|
||||
const addFaultyPart = () => {
|
||||
// 这里可以修改成你想要添加的部件内容
|
||||
popup.value.open("center");
|
||||
|
||||
let data=faultyParts.value;
|
||||
selectedParts.value=[];
|
||||
data.forEach(res=>{
|
||||
selectedParts.value.push(res);
|
||||
})
|
||||
};
|
||||
|
||||
// 删除故障部件
|
||||
const removeFaultyPart = (index) => {
|
||||
faultyParts.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const oncancel = () => {
|
||||
popup.value.close("center");
|
||||
}
|
||||
|
||||
const onOk = () => {
|
||||
let data=selectedParts.value;
|
||||
faultyParts.value=[];
|
||||
data.forEach(res=>{
|
||||
faultyParts.value.push(res);
|
||||
})
|
||||
popup.value.close("center");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.selectTop {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: rgb(0, 132, 255);
|
||||
margin-left: 43%;
|
||||
margin-top: 5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: rgb(202, 202, 202);
|
||||
}
|
||||
|
||||
.wztitle {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: rgb(0, 132, 255);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
letter-spacing: 2px;
|
||||
padding: 10px 2px;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-info .ride-info {
|
||||
color: rgb(15, 27, 38);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.card-info .ride-info image {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.corui-ride-in-progress {
|
||||
background-color: rgb(0, 132, 255);
|
||||
color: #fff;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.corui-completed {
|
||||
background-color: rgb(195, 198, 203);
|
||||
color: #fff;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.corui-processing {
|
||||
background-color: rgb(218, 102, 17);
|
||||
color: #fff;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #fff;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card-textart {
|
||||
padding: 15px 10px;
|
||||
background-color: rgb(245, 245, 245);
|
||||
border-radius: 5px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.card-tag {
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
margin: -3px 7px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background-color: #000000;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
font-size: 8px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
margin-left: 58px;
|
||||
margin-top: -26px;
|
||||
}
|
||||
|
||||
.addclass {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
height: 24px;
|
||||
color: rgb(0, 132, 255);
|
||||
background-color: rgb(239, 248, 255);
|
||||
line-height: 24px;
|
||||
border-radius: 5px;
|
||||
border: solid 1px rgb(0, 132, 255);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.fault-parts-container {
|
||||
width: 280px;
|
||||
padding: 20px 10px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.fault-parts-title {
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.options-description-title {
|
||||
|
||||
font-size: 12px;
|
||||
color: black;
|
||||
line-height: 30px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.options-description-text {
|
||||
|
||||
color: rgb(122 122 122);
|
||||
font-size: 10px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.action-buttons-container {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.action-buttons-container button {
|
||||
width: 48%;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user