From 15a55f79a84e5dab670d54a9dc0c6b9133a18441 Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期一, 21 十月 2024 17:29:37 +0800
Subject: [PATCH] 添加更改用户头像，添加故障上报校验
---
pages/infoBreakdown/index.vue | 137 +++++++++++++++++++++++++++------------------
1 files changed, 83 insertions(+), 54 deletions(-)
diff --git a/pages/infoBreakdown/index.vue b/pages/infoBreakdown/index.vue
index 7155b05..3209322 100644
--- a/pages/infoBreakdown/index.vue
+++ b/pages/infoBreakdown/index.vue
@@ -9,7 +9,38 @@
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(['','',''])
function uploadImg(val){
uni.chooseImage({
@@ -54,27 +85,29 @@
});
}
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)
- }
- })
+ if(formRef.value.validate()){
+ 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>
@@ -82,28 +115,26 @@
<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.png" 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>
@@ -157,21 +188,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