<script setup>
|
import { ref } from 'vue'
|
import { BASE_URL } from '../../config/baseUrl';
|
import {infoBreakdownApi} from '../../api/index.js'
|
const form = ref({
|
facilityCode:'',
|
userPhone:'',
|
type:'',//故障类型(1水压 2温度 3网络 4缺液 5流量计 6其他)
|
describe:'',
|
url:'',
|
})
|
const test = ref()
|
const uploadList = ref(['','',''])
|
function uploadImg(val){
|
uni.chooseImage({
|
success: async(res) =>{
|
//建立表单，请求参数传表单形式
|
let fileForm = {
|
file1:res.tempFiles,
|
path:'qingyuan'
|
}
|
uni.uploadFile({
|
url:BASE_URL+ '/file/upload',
|
filePath:res.tempFilePaths[0],
|
name: 'file',
|
formData:fileForm,
|
success: (success) => {
|
console.log('success',success);
|
let dataObj = JSON.parse(success.data)
|
uploadList.value[val]= BASE_URL + '/upload' + dataObj.data.newFileName
|
console.log('uploadList.value',uploadList.value)
|
},
|
fail: (err) => {
|
uni.showToast({
|
title: '上传失败，请重试',
|
duration: 2000,
|
icon:'none'
|
});
|
console.log('err',err,res.tempFilePaths[0])
|
}
|
});
|
}
|
});
|
}
|
|
function toScan(){
|
// 调用二维码扫描接口
|
uni.scanCode({
|
scanType: ['qrCode'],
|
success: function (res) {
|
console.log('条码内容：' + res.result);
|
form.value.facilityCode = res.result
|
}
|
});
|
}
|
async function submit(){
|
form.value.url = uploadList.value
|
//去掉数组中空字符串，数组转字符串
|
form.value.url = form.value.url.filter(str => str !== '').join()
|
await infoBreakdownApi(form.value).then((res) =>{
|
if(res.code == 200){
|
uni.showToast({
|
title: '上报成功',
|
duration: 2000,
|
});
|
setTimeout(()=>{
|
form.value = {
|
facilityCode:'',
|
userPhone:'',
|
type:'',
|
describe:'',
|
url:'',
|
}
|
uni.navigateBack()
|
},1000)
|
}
|
})
|
}
|
</script>
|
<template>
|
<view class="container">
|
<navbar title="故障上报"></navbar>
|
<view class="content">
|
<view class="main">
|
<view class="title">请填写故障信息{{test}}</view>
|
<view class="info-box">
|
<view class="form-box">
|
<form>
|
<view class="form-item">
|
<view class="label">设备号：</view>
|
<input class="item-input" v-model="form.facilityCode" name="input" placeholder="请扫描或输入设备号" />
|
<image @click="toScan()" src="../../static/images/addCard/code.png" alt=""></image>
|
</view>
|
<view class="form-item">
|
<view class="label">联系方式：</view>
|
<input class="item-input" v-model="form.userPhone" name="input" placeholder="请输入您的手机号" />
|
</view>
|
<view class="form-item">
|
<view class="label">问题类型：</view>
|
<input class="item-input" name="input" v-model="form.type" placeholder="请输入数字" />
|
</view>
|
<view class="form-item">
|
<view class="label">问题描述：</view>
|
<input class="item-input" name="input" v-model="form.describe" placeholder="请输入故障内容" />
|
</view>
|
</form>
|
</view>
|
<view class="upload-box">
|
<view class="upload-title">选择照片</view>
|
<view class="upload-img">
|
<block v-for="(item,index) in uploadList">
|
<view @click="uploadImg(index)" class="upload-img-item">
|
<image v-if="item" :src="item"></image>
|
<image v-else class="default-img" src="../../static/images/other/img-add.png" alt=""></image>
|
</view>
|
</block>
|
</view>
|
</view>
|
</view>
|
<view class="subBtn" @click="submit">提交信息</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<style lang="scss" scoped>
|
.container{
|
width:100%;
|
height:100vh;
|
.content{
|
width:100%;
|
height:calc(100vh - 176rpx);
|
background:linear-gradient(to top,#FFFFFF,#E8EFFF);
|
padding:50rpx 32rpx 100rpx;
|
box-sizing: border-box;
|
.main{
|
width:100%;
|
height:100%;
|
// background-color: #b7d4ff;
|
background-color: #5b93dc;
|
border-radius:20rpx;
|
padding:40rpx 25rpx 0;
|
box-sizing: border-box;
|
position: relative;
|
.title{
|
margin-bottom:10rpx;
|
font-size:32rpx;
|
color: #FFFFFF;
|
}
|
.info-box{
|
width:100%;
|
// height:800rpx;
|
background-color: #FFFFFF;
|
border-radius:15rpx;
|
padding:30rpx 15rpx;
|
box-sizing: border-box;
|
.form-box{
|
height:500rpx;
|
border-bottom:1rpx solid rgba(90, 128, 218, 0.4);
|
.form-item{
|
display: flex;
|
align-items: center;
|
border-bottom: 1rpx solid rgba(111, 111, 111, 0.1);
|
height:100rpx;
|
.label{
|
width:180rpx;
|
}
|
input{
|
width:340rpx;
|
}
|
image{
|
margin-left:50rpx;
|
width:50rpx;
|
height:50rpx;
|
}
|
}
|
}
|
.upload-box{
|
.upload-title{
|
color: #6a717e;
|
margin-top: 10rpx;
|
}
|
.upload-img{
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
padding:30rpx 14rpx;
|
box-sizing: border-box;
|
.upload-img-item{
|
width: 180rpx;
|
height:180rpx;
|
border-radius:20rpx;
|
border:1rpx dashed #b7d4ff;
|
margin-bottom: 10rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
image{
|
width:170rpx;
|
height:170rpx;
|
}
|
.default-img{
|
width:120rpx;
|
height:120rpx;
|
}
|
}
|
}
|
}
|
}
|
.subBtn{
|
background-color: #e7f1ff;
|
width:70%;
|
height:80rpx;
|
line-height: 80rpx;
|
position: absolute;
|
bottom:100rpx;
|
left: calc(50% - 35%);
|
text-align: center;
|
border-radius:50rpx;
|
color: #5b93dc;
|
letter-spacing:5rpx;
|
}
|
}
|
}
|
}
|
|
</style>
|
