From d470e67ac1997882502b75cbfdaf359626cfaaa8 Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期五, 20 十二月 2024 17:27:07 +0800
Subject: [PATCH] 测试修复小程序问题，添加水控机设备
---
pages/infoBreakdown/index.vue | 144 +++++++++++++++++++++++++++++------------------
1 files changed, 88 insertions(+), 56 deletions(-)
diff --git a/pages/infoBreakdown/index.vue b/pages/infoBreakdown/index.vue
index 7155b05..ac131da 100644
--- a/pages/infoBreakdown/index.vue
+++ b/pages/infoBreakdown/index.vue
@@ -9,8 +9,40 @@
describe:'',
url:'',
})
- const test = ref()
+ //校验
+ 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) =>{
@@ -28,6 +60,7 @@
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) => {
@@ -48,32 +81,35 @@
uni.scanCode({
scanType: ['qrCode'],
success: function (res) {
- console.log('条码内容：' + res.result);
- form.value.facilityCode = res.result
+ let code = res.result.split('=')[1]
+ form.value.facilityCode = code
+ console.log('条码内容：' + res.result,'code',code);
}
});
}
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)
- }
+ 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>
@@ -82,35 +118,33 @@
<navbar title="故障上报"></navbar>
<view class="content">
<view class="main">
- <view class="title">请填写故障信息{{test}}</view>
+ <view class="title">请填写故障信息</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>
+ <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"></image>
+ <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>
@@ -157,21 +191,19 @@
.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;
- 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;
+ justify-content: space-around;
+ .scan-img{
+ width:56rpx;
+ height:56rpx;
}
}
}
--
Gitblit v1.9.3