280 lines
8.4 KiB
Vue
280 lines
8.4 KiB
Vue
<!-- 上报异常 -->
|
||
<template>
|
||
<!-- end -->
|
||
<view class="pageBox">
|
||
<!-- title -->
|
||
<DetailsNav :title="title"></DetailsNav>
|
||
<!-- 取件状态列表 -->
|
||
<view class="container">
|
||
<view class="delayedCont">
|
||
<view class="lineBoder">
|
||
<text>异常时间</text>
|
||
<text v-if="type == 'details'">{{ exceptionsDeta.time }}</text>
|
||
<!-- <text v-else class="label">请选择</text> -->
|
||
<uni-datetime-picker
|
||
v-else
|
||
type="datetime"
|
||
v-model="exceptionsDeta.time"
|
||
:clear-icon="false"
|
||
/>
|
||
</view>
|
||
<view class="lineBoder">
|
||
<text>上报位置</text>
|
||
<text v-if="type == 'details'">{{ exceptionsDeta.province }}</text>
|
||
<text v-else class="label">请选择</text>
|
||
</view>
|
||
<view class="lineBoder">
|
||
<text>异常类型</text>
|
||
<text v-if="type == 'details'">{{ exceptionsDeta.type }}</text>
|
||
<view v-else class="label">
|
||
<Select :options="typeOptions"></Select>
|
||
</view>
|
||
</view>
|
||
<view v-if="type == 'details'" class="lineBoder noborder">
|
||
<view class="" style="width: 100%">
|
||
<view>
|
||
<text>异常描述</text>
|
||
</view>
|
||
<view>
|
||
<text class="desc">{{ exceptionsDeta.description }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="lineBoder">
|
||
<view class="" style="width: 100%">
|
||
<text>异常描述</text>
|
||
<textarea
|
||
class="textInput"
|
||
v-model="formData.delayReason"
|
||
placeholder-style="color:#818181"
|
||
placeholder="请输入异常描述"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="delayedCont">
|
||
<view :class="{ upPicCont: true, setBottom: type == 'details' }">
|
||
<view class="title">上传图片（最多6张）</view>
|
||
<view v-if="type == 'details'" class="exceptionImages">
|
||
<image
|
||
class="exceptionImage"
|
||
v-for="(item, index) in exceptionsDeta.images"
|
||
:src="item"
|
||
key="index"
|
||
mode=""
|
||
></image>
|
||
</view>
|
||
<uni-file-picker
|
||
v-else
|
||
v-model="imageValue"
|
||
fileMediatype="image"
|
||
mode="grid"
|
||
@select="select"
|
||
@progress="progress"
|
||
@success="success"
|
||
@fail="fail"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- end -->
|
||
<view class="footCont positionBot" style="justify-content: center">
|
||
<view class="footBut" style="width: 400rpx; flex: initial">
|
||
<text class="button" @click="exceptionHandle()">提交</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from 'vue';
|
||
// 导入接口
|
||
import { Exception, ExceptionDetails } from '@/pages/api/index.js';
|
||
// 导入组件
|
||
import DetailsNav from '@/components/DetailsNav/index.vue';
|
||
import Select from '@/components/Select/index.vue';
|
||
// 主体部分
|
||
|
||
// ------定义变量------
|
||
const imageValue = ref([]); // 上次图片
|
||
const type = ref('add'); // 类型
|
||
const title = ref('上报异常'); // 标题
|
||
const exceptionId = ref(''); // 异常的id - 详情
|
||
const exceptionsDeta = ref({});
|
||
// 类型
|
||
const typeOptions = [
|
||
{ title: '发动机启动困难', value: '1' },
|
||
{ title: '不着车，漏油', value: '2' },
|
||
{ title: '照明失灵', value: '3' },
|
||
{ title: '有异常响动', value: '4' },
|
||
{ title: '排烟异常、温度异常', value: '5' },
|
||
{ title: '其他问题', value: '6' },
|
||
];
|
||
|
||
// 提交数据
|
||
const formData = ref({
|
||
id: '',
|
||
delayTime: '',
|
||
delayReason: '',
|
||
});
|
||
// ------生命周期------
|
||
onMounted(() => {
|
||
const pages = getCurrentPages();
|
||
const currentPage = pages[pages.length - 1].$page.options;
|
||
if (Object.keys(currentPage).length > 0) {
|
||
type.value = 'details';
|
||
title.value = '异常详情';
|
||
exceptionId.value = currentPage.exceptionId;
|
||
getDetails();
|
||
} else {
|
||
type.value = 'add';
|
||
title.value = '上报异常';
|
||
}
|
||
});
|
||
// ------定义方法------
|
||
// 上报异常
|
||
const exceptionHandle = async () => {
|
||
// 网络慢的时候添加按钮loading
|
||
let times = setTimeout(() => {
|
||
uni.showLoading({
|
||
title: 'loading',
|
||
mask:true
|
||
});
|
||
}, 500);
|
||
// 上报异常
|
||
await Exception(formData)
|
||
.then((res) => {
|
||
if (res.code === 200) {
|
||
// 操作成功后清除loading
|
||
setTimeout(function () {
|
||
uni.hideLoading();
|
||
}, 500);
|
||
clearTimeout(times);
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
duration: 1000,
|
||
icon: 'none',
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/pages/index/index',
|
||
});
|
||
}, 500);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none',
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {});
|
||
};
|
||
|
||
// 获取异常详情数据
|
||
async function getDetails() {
|
||
await ExceptionDetails({ exceptionId: exceptionId })
|
||
.then((res) => {
|
||
if (res.code === 200) {
|
||
const data = res.data;
|
||
data.images = [
|
||
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2411191727687.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=8fed835d7336cac9b3fedb170766a678',
|
||
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F03%2F26%2FB1371.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645178&t=07a6e8bcc05b75d3dd86c369c70f7274',
|
||
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F03%2F26%2FB2154.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=54afc59b141abad9f7799f005e20c944',
|
||
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2019%2F05%2F08211345608033.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=c8a2aa7a7bd874381fbb98bc4223e6fe',
|
||
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F03%2F26%2FB1365.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=55b411cc1ad4aea58cef44fe11438f72',
|
||
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2019%2F04%2F07090912704156.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=fa6d42ffb721c66f1e42548895a64e89',
|
||
];
|
||
exceptionsDeta.value = res.data;
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none',
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {});
|
||
}
|
||
|
||
// 获取上传状态
|
||
function select(e) {
|
||
console.log('选择文件：', e);
|
||
}
|
||
// 获取上传进度
|
||
function progress(e) {
|
||
console.log('上传进度：', e);
|
||
}
|
||
|
||
// 上传成功
|
||
function success(e) {
|
||
console.log('上传成功');
|
||
}
|
||
|
||
// 上传失败
|
||
function fail(e) {
|
||
console.log('上传失败：', e);
|
||
}
|
||
</script>
|
||
<style src="./index.scss" lang="scss"></style>
|
||
<style lang="scss">
|
||
@import url('@/styles/theme.scss');
|
||
.delayedCont {
|
||
background-color: var(--neutral-color-white);
|
||
margin: 30rpx;
|
||
padding: 30rpx 30rpx 40rpx 30rpx;
|
||
border-radius: 20rpx;
|
||
font-size: var(--font-size-14);
|
||
.lineBoder {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 40rpx 0;
|
||
border-bottom: solid 1px var(--neutral-color-cancel);
|
||
.label {
|
||
color: var(--neutral-color-font);
|
||
}
|
||
}
|
||
.noborder {
|
||
border: none;
|
||
}
|
||
.desc {
|
||
display: inline-block;
|
||
padding-top: 40rpx;
|
||
}
|
||
.textInput {
|
||
font-size: var(--font-size-14);
|
||
background-color: var(--neutral-color-cancel);
|
||
width: 100%;
|
||
border-radius: 20rpx;
|
||
margin-top: 40rpx;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.butCont {
|
||
width: 60%;
|
||
margin: 40rpx auto 0 auto;
|
||
}
|
||
.exceptionImages {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
.exceptionImage {
|
||
width: 26vw;
|
||
height: 26vw;
|
||
margin-bottom: 3vw;
|
||
}
|
||
}
|
||
.setBottom {
|
||
margin-bottom: 0;
|
||
}
|
||
::v-deep .uni-input-placeholder {
|
||
text-align: right;
|
||
}
|
||
}
|
||
.positionBot {
|
||
position: fixed;
|
||
width: 100%;
|
||
bottom: 0;
|
||
}
|
||
</style>
|