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 | 160 ++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 108 insertions(+), 52 deletions(-)
diff --git a/pages/infoBreakdown/index.vue b/pages/infoBreakdown/index.vue
index ecaec78..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({
@@ -42,28 +73,41 @@
}
});
}
- 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)
+
+ function toScan(){
+ // 调用二维码扫描接口
+ uni.scanCode({
+ scanType: ['qrCode'],
+ success: function (res) {
+ console.log('条码内容：' + res.result);
+ form.value.facilityCode = res.result
}
- })
+ });
+ }
+ async function submit(){
+ 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>
@@ -71,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 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>
@@ -100,6 +142,7 @@
<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>
@@ -145,22 +188,26 @@
.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;
- image{
- margin-left:60rpx;
- width:50rpx;
- height:50rpx;
+ justify-content: space-around;
+ .scan-img{
+ width:56rpx;
+ height:56rpx;
}
}
}
.upload-box{
.upload-title{
- color: #5b93dc;
- margin: 10rpx 20rpx 0;
+ color: #6a717e;
+ margin-top: 10rpx;
}
.upload-img{
display: flex;
@@ -174,9 +221,16 @@
border-radius:20rpx;
border:1rpx dashed #b7d4ff;
margin-bottom: 10rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
image{
- width:180rpx;
- height:180rpx;
+ width:170rpx;
+ height:170rpx;
+ }
+ .default-img{
+ width:120rpx;
+ height:120rpx;
}
}
}
@@ -192,6 +246,8 @@
left: calc(50% - 35%);
text-align: center;
border-radius:50rpx;
+ color: #5b93dc;
+ letter-spacing:5rpx;
}
}
}
--
Gitblit v1.9.3