665 lines
15 KiB
Vue
665 lines
15 KiB
Vue
<template>
|
||
<view class="containers">
|
||
<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>
|
||
<view v-show="selectedTab === 'consume'">
|
||
<!-- 审核处理的具体内容 -->
|
||
<scroll-view scroll-y="true" :style="{ height: scrollHeight-145 + 'px' }">
|
||
<view class="content">
|
||
<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 class="nav-panel">
|
||
<uni-goods-nav :fill="true" :options="[]" :buttonGroup="navButtonGroup"
|
||
@buttonClick="navButtonClick" />
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view v-show="selectedTab === 'report'">
|
||
<view class="">
|
||
|
||
<view class="query-selector">
|
||
<view class="query-option" :class="{ 'query-select': selectedOption === option }"
|
||
v-for="(option, index) in options" :key="index" @click="selectOption(option)">
|
||
{{ option }}
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" :style="{ height: scrollHeight-170 + 'px' }">
|
||
|
||
<view v-for="(item,index) in dataList" :key="index">
|
||
<uni-card>
|
||
<uni-forms>
|
||
<view class="flex justify-between" style="margin: 5px 0px;">
|
||
<view class="label">
|
||
用户姓名
|
||
</view>
|
||
<view class="flex justify-between" style="width: 75%;">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.reportUser }}
|
||
</view>
|
||
<view v-if="item.phoneNumber" @click="makeACall(item.phoneNumber)">
|
||
<text style="font-size: 18px; color: orange;"
|
||
class="cuIcon-phone"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex justify-between" style="margin: 5px 0px;">
|
||
<view class="label">
|
||
上报来源
|
||
</view>
|
||
<view class="deepBlackBoldText" style="width: 75%;">
|
||
{{ item.reportSource }}
|
||
</view>
|
||
</view>
|
||
<view class="flex justify-between" style="margin: 5px 0px;">
|
||
<view class="label">
|
||
订单编号
|
||
</view>
|
||
<view v-if="item.orderCode" class="flex justify-between" style="width: 75%;">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.orderCode }}
|
||
</view>
|
||
<view @click="copyOrderCode(item.orderCode)">
|
||
<text style="font-size: 18px; color: orange;"
|
||
class="cuIcon-copy"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex justify-between" style="margin: 5px 0px;">
|
||
<view class="label">
|
||
上报时间
|
||
</view>
|
||
<view class="deepBlackBoldText" style="width: 75%;">
|
||
{{ item.reportAt }}
|
||
</view>
|
||
</view>
|
||
<view class="flex justify-between" style="margin: 5px 0px;">
|
||
<view class="label">
|
||
故障部件
|
||
</view>
|
||
<view class="deepBlackBoldText" style="width: 75%;">
|
||
{{ item.faultPart }}
|
||
</view>
|
||
</view>
|
||
<view class="flex justify-between" style="margin: 5px 0px;">
|
||
<view class="label">
|
||
故障原因
|
||
</view>
|
||
<view class="deepBlackBoldText" style="width: 75%;">
|
||
{{ item.faultDescription }}
|
||
</view>
|
||
</view>
|
||
<view class="flex justify-between" style="margin: 5px 0px;">
|
||
<view class="label">
|
||
上报图片
|
||
</view>
|
||
<view class="deepBlackBoldText" style="width: 75%;">
|
||
<uni-file-picker readonly="true" limit="9"
|
||
:value="formatImageFiles(item.attachmentFiles)"></uni-file-picker>
|
||
</view>
|
||
</view>
|
||
</uni-forms>
|
||
</uni-card>
|
||
<view style="height: 20px;">
|
||
|
||
</view>
|
||
</view>
|
||
</scroll-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';
|
||
import {
|
||
onLoad
|
||
} from '@dcloudio/uni-app';
|
||
const imgPath = config.imgPath;
|
||
const selectedParts = ref([])
|
||
const options = ref(["全部"]);
|
||
const selectedOption = ref("全部");
|
||
const bikeCode = 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 navButtonGroup = [{
|
||
text: '提交',
|
||
backgroundColor: 'rgb(0,120,212)',
|
||
color: '#fff'
|
||
}];
|
||
// 故障部件
|
||
const faultyParts = ref([]);
|
||
|
||
// 获取设备信息
|
||
const scrollHeight = ref(null);
|
||
const selectOption = (option) => {
|
||
selectedOption.value = option;
|
||
if (option == "全部") {
|
||
dataList.value = dataListAll.value;
|
||
} else {
|
||
dataList.value = dataListAll.value.filter(item => item.faultPart.includes(option));
|
||
}
|
||
|
||
};
|
||
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");
|
||
}
|
||
onLoad((options) => {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
const screenHeight = systemInfo.screenHeight;
|
||
const statusBarHeight = systemInfo.statusBarHeight;
|
||
scrollHeight.value = screenHeight - statusBarHeight;
|
||
bikeCode.value = "250306001002";
|
||
loadMoreData();
|
||
})
|
||
onMounted(() => {
|
||
// 获取设备信息
|
||
});
|
||
const formatImageFiles = (data) => {
|
||
let imglist = [];
|
||
data.forEach(res => {
|
||
let map = {
|
||
url: res.fileUrl,
|
||
extname: 'png',
|
||
name: res.fileName
|
||
};
|
||
imglist.push(map);
|
||
})
|
||
return imglist;
|
||
}
|
||
const reportfaults = ref(null);
|
||
const dataList = ref([])
|
||
const dataListAll = ref([]);
|
||
const loadMoreData = () => {
|
||
// 组装参数
|
||
api.callOrdereApi("ebikeUserFaultreport/list?bikeCode=" + bikeCode.value, {}, 'get').then((
|
||
res) => {
|
||
if (res.code == 200) {
|
||
dataListAll.value = res.data;
|
||
updateOptions(res.data, options.value);
|
||
dataList.value = res.data;
|
||
}
|
||
});
|
||
};
|
||
|
||
function updateOptions(dataList, options) {
|
||
dataList.forEach(res => {
|
||
// 判断 faultPart 是否包含 "|"
|
||
if (res.faultPart.includes("|")) {
|
||
// 如果包含 "|", 则拆分成数组
|
||
const components = res.faultPart.split("|");
|
||
// 循环数组
|
||
components.forEach(component => {
|
||
// 判断 options 数组中是否存在该 component
|
||
if (!options.includes(component)) {
|
||
// 如果不存在，则添加
|
||
options.push(component);
|
||
}
|
||
});
|
||
} else {
|
||
// 如果没有 "|", 直接判断是否存在于 options 数组中
|
||
if (!options.includes(res.faultPart)) {
|
||
// 如果不存在，则添加
|
||
options.push(res.faultPart);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 添加故障部件
|
||
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 navButtonClick = (index, content) => {
|
||
if (!checkscan()) {
|
||
return
|
||
}
|
||
uni.showModal({
|
||
title: '确认提交',
|
||
content: '您确定要进行提交操作吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
|
||
|
||
} else if (res.cancel) {
|
||
console.log('用户取消出库');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
const onOk = () => {
|
||
let data = selectedParts.value;
|
||
faultyParts.value = [];
|
||
data.forEach(res => {
|
||
faultyParts.value.push(res);
|
||
})
|
||
popup.value.close("center");
|
||
}
|
||
const maskPhoneNumber = (phoneNumber) => {
|
||
if (!phoneNumber) return '';
|
||
const firstPart = phoneNumber.substring(0, 3);
|
||
const lastPart = phoneNumber.substring(phoneNumber.length - 4);
|
||
const maskedPart = '*'.repeat(phoneNumber.length - 7);
|
||
return firstPart + maskedPart + lastPart;
|
||
}
|
||
|
||
|
||
const makeACall = (phoneNumber) => {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phoneNumber,
|
||
success: () => {},
|
||
fail() {}
|
||
})
|
||
}
|
||
const copyOrderCode = (orderCode) => {
|
||
uni.setClipboardData({
|
||
data: orderCode,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
fail: (error) => {
|
||
uni.showToast({
|
||
title: '复制失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.containers {
|
||
background-color: rgb(241, 241, 241);
|
||
}
|
||
|
||
.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 {
|
||
margin-top: 10px;
|
||
padding-bottom: 70px;
|
||
padding: 10px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.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%;
|
||
}
|
||
|
||
.nav-panel {
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
width: 100%;
|
||
padding-bottom: 20px;
|
||
background-color: #fff;
|
||
z-index: 105;
|
||
}
|
||
|
||
.deepBlackBoldText {
|
||
color: rgb(134 134 134);
|
||
overflow-wrap: break-word;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.uni-card__header {
|
||
font-weight: bold;
|
||
color: #000000;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.label {
|
||
width: 25%;
|
||
font-size: 14px;
|
||
color: black;
|
||
}
|
||
|
||
.query-selector {
|
||
margin: 15px 7px 0px 10px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.query-option {
|
||
padding: 5px 15px;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
background: white;
|
||
margin: 5px 5px;
|
||
border-radius: 3px;
|
||
color: #000000;
|
||
}
|
||
|
||
.query-select {
|
||
color: #ffffff;
|
||
background: rgb(0, 132, 255);
|
||
}
|
||
</style> |