首页加下拉刷新，公告显示问题；报修优化

wuye-manager-uniapp/pageSubPack/fault-reporting/fault-reporting.vue

@@ -2,7 +2,9 @@
   <view class="form-container">
     <!-- 维修项目展示 -->
     <view class="form-item">
-      <text class="label">维修项目</text>
+      <view class="label">
+        	<text class="required">*</text>维修项目
+      </view>
       <view class="value" @click="goBackSelect">
         <view>
           <text v-if="!repairProject">请选择项目</text>
@@ -14,34 +16,43 @@
 
     <!-- 标题输入 -->
     <view class="form-item">
-      <text class="label">标题</text>
-      <!-- <input type="text" placeholder="请输入问题标题" v-model="form.title" /> -->
+        <text class="label">标题</text>
       <uni-easyinput
         v-model="form.title"
-        placeholder="请输入内容"
+        placeholder="请输入标题(最多30字符)"
         :inputBorder="false"
+        maxlength="30"
       ></uni-easyinput>
     </view>
 
     <!-- 问题描述 -->
     <view class="form-item-wenti">
-      <text class="label">问题描述</text>
-      <!-- <textarea placeholder="请输入问题内容" v-model="form.desc" rows="5" ></textarea> -->
-      <uni-easyinput
+      <!-- <text class="label">问题描述</text> -->
+      <view class="label">
+        	<text class="required">*</text>问题描述
+      </view>
+      <view class="textarea-wrap">
+      	<textarea v-model="form.desc" placeholder="请描述你的问题（最多200字）" maxlength="200" class="desc-textarea" />
+      	<text class="char-count">{{ form.desc.length }}/200</text>
+      </view>
+ <!--     <uni-easyinput
         v-model="form.desc"
         placeholder="请描述你的问题"
         type="textarea"
-      ></uni-easyinput>
+      ></uni-easyinput> -->
     </view>
 
     <!-- 手机号 -->
     <view class="form-item">
-      <text class="label">手机号</text>
+      <view class="label">
+          <text class="required">*</text>手机号
+      </view>
       <uni-easyinput
         type="number"
         v-model="form.phone"
         placeholder="请输入手机号"
         :inputBorder="false"
+        maxlength="11"
       ></uni-easyinput>
     </view>
 
@@ -60,7 +71,7 @@
           <!-- <uni-icons type="close" size="16" @click="deleteImage(index)"></uni-icons> -->
         </view>
         <!-- 上传按钮 -->
-        <view class="upload-btn" @click="chooseImage" v-if="form.images.length < 3">
+        <view class="upload-btn" @click="chooseImage" v-if="form.images.length < 9">
           <uni-icons type="plusempty" size="24"></uni-icons>
           <!-- <text>上传照片</text> -->
         </view>
@@ -69,6 +80,9 @@
 
     <!-- 提交按钮 -->
     <button class="submit-btn" @click="submitForm">提交</button>
+
+    <!-- 提交时遮罩，禁止页面点击 -->
+    <view class="submit-mask" v-if="submitting"></view>
   </view>
 </template>
 
@@ -90,6 +104,9 @@ const form = ref({
   images: [] // 图片列表
 })
 
+// 防止重复点击
+const submitting = ref(false)
+
 
 // ==========方法========
 // 页面加载
@@ -122,10 +139,10 @@ const goBackSelect = () => {
 // 选择图片
 const chooseImage = () => {
   // 计算还能选几张
-  const remainCount = 3 - form.value.images.length
+  const remainCount = 9 - form.value.images.length
   if (remainCount <= 0) {
     uni.showToast({
-      title: '最多只能上传3张图片',
+      title: '最多只能上传9张图片',
       icon: 'none'
     })
     return
@@ -171,15 +188,13 @@ const deleteImage = index => {
 
 // 表单提交
 const submitForm = async () => {
+  // 防止重复提交
+  if (submitting.value) return
   // 表单校验
   if (!repairProject.value) {
     uni.showToast({ title: '请选择维修项目', icon: 'none' })
     return
   }
-  if (!form.value.title) {
-    uni.showToast({ title: '请输入问题标题', icon: 'none' })
-    return
-  }
   if (!form.value.desc) {
     uni.showToast({ title: '请输入问题描述', icon: 'none' })
     return
@@ -189,6 +204,7 @@ const submitForm = async () => {
     return
   }
   // 提交数据
+  submitting.value = true
   uni.showLoading({ title: '提交中...' ,mask:true})
   try {
     // 先上传图片
@@ -219,6 +235,7 @@ const submitForm = async () => {
   } catch (e) {
     uni.showToast({ title:  e.msg || '网络异常', icon: 'none' })
   } finally {
+    submitting.value = false
     uni.hideLoading()
   }
 
@@ -244,11 +261,15 @@ const submitForm = async () => {
   border-bottom: 1px solid #eee;
 }
 .label {
-  width: 140rpx;
+  width: 180rpx;
   font-size: 28rpx;
   color: #333;
   line-height: 80rpx;
 }
+.required {
+	color: red;
+	margin-right: 4rpx;
+}
 
 .value {
   flex: 1;
@@ -259,6 +280,27 @@ const submitForm = async () => {
   display: flex;
   justify-content: space-between;
 }
+.textarea-wrap {
+  flex: 1;
+  position: relative;
+}
+.desc-textarea {
+  width: 100%;
+  height: 160rpx;
+  font-size: 28rpx;
+  padding: 10rpx 0;
+  box-sizing: border-box;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 5px;
+}
+.char-count {
+  position: absolute;
+  right: 10rpx;
+  bottom: 10rpx;
+  font-size: 24rpx;
+  color: #999;
+}
 .input,
 .textarea {
   font-size: 14px;
@@ -318,4 +360,12 @@ const submitForm = async () => {
   line-height: 44px;
   font-size: 16px;
 }
+.submit-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+}
 </style>