<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 formRef = ref()
|
const rules = ref({
|
facilityCode: {
|
rules:[
|
{required: true,errorMessage: '请扫描设备二维码获取'}]
|
},
|
userPhone: {
|
rules:[
|
{required: true,errorMessage: '请输入您的手机号'},
|
{pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确'}
|
]
|
},
|
type: {
|
rules:[
|
{required: true,errorMessage: '请选择设备类型'}]
|
},
|
describe: {
|
rules:[
|
{required: true,errorMessage: '请输入故障内容'},
|
{maxLength:200,errorMessage: '请输入故障内容'},
|
]
|
},
|
})
|
const typeList = ref([
|
{text:'温度',value:1},
|
{text:'水压',value:2},
|
{text:'网络',value:3},
|
{text:'缺液',value:4},
|
{text:'流量计',value:5},
|
{text:'其他',value:6},
|
])
|
const uploadList = ref(['','',''])
|
const uploadListForm = 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
|
uploadListForm.value[val]= 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) {
|
let code = res.result.split('=')[1]
|
form.value.facilityCode = code
|
console.log('条码内容：' + res.result,'code',code);
|
}
|
});
|
}
|
async function submit(){
|
formRef.value.validate().then(async() =>{
|
form.value.url = uploadListForm.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">请填写故障信息</view>
|
<view class="info-box">
|
<view class="form-box">
|
<uni-forms ref="formRef" :model="form" :rules="rules" label-width=100>
|
<uni-forms-item label="设备号：" name="facilityCode">
|
<view class="form-item">
|
<input v-model="form.facilityCode" placeholder="请扫描设备二维码获取" />
|
<image class="scan-img" @click="toScan()" src="../../static/images/addCard/code.svg" alt=""></image>
|
</view>
|
</uni-forms-item>
|
<uni-forms-item label="联系方式：" name="userPhone">
|
<input v-model="form.userPhone" placeholder="请输入您的手机号" />
|
</uni-forms-item>
|
<uni-forms-item label="问题类型：" name="type">
|
<uni-data-select v-model="form.type" :localdata="typeList"></uni-data-select>
|
</uni-forms-item>
|
<uni-forms-item label="问题描述：" name="describe">
|
<input type="textarea" v-model="form.describe" placeholder="请输入故障内容" />
|
</uni-forms-item>
|
</uni-forms>
|
</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" mode="aspectFit"></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);
|
input{
|
height:100%;
|
line-height:100%;
|
}
|
.form-item{
|
height:100%;
|
line-height:100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
.scan-img{
|
width:56rpx;
|
height:56rpx;
|
}
|
}
|
}
|
.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>
|
