添加更改用户头像，添加故障上报校验

Liuyi

2024-10-21 15a55f79a84e5dab670d54a9dc0c6b9133a18441

 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,6 +85,7 @@
      });
   }
   async function submit(){
      if(formRef.value.validate()){
      form.value.url = uploadList.value
      //去掉数组中空字符串，数组转字符串
      form.value.url = form.value.url.filter(str => str !== '').join()
@@ -71,10 +103,11 @@
                  describe:'',
                  url:'',
               }
               uni.navigateBack()
                  // 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>
                  <uni-forms ref="formRef" :model="form" :rules="rules" label-width=100>
                     <uni-forms-item label="设备号：" name="facilityCode">
                     <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>
                           <input v-model="form.facilityCode" placeholder="请扫描设备二维码获取" />
                           <image class="scan-img" @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-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;
                  }
               }
            }