优化

pagesA/checkout/detail/detail.vue

@@ -10,6 +10,7 @@ import { detail } from '@/api/mz/contract';
     <!-- 基本信息卡片 -->
     <view class="info-card">
       <view class="room-title">{{ info.roomNamePath }}</view>
+      <view style="border-bottom: 2rpx dashed #e5e5e5; margin: 24rpx 0"></view>
       <view class="info-row"
         ><text class="label">居住人</text>{{ info.graduateName }}</view
       >
@@ -63,6 +64,7 @@ import { detail } from '@/api/mz/contract';
           border="none"
         />
       </view>
+      <view style="border-bottom: 2rpx solid #e5e5e5; margin: 24rpx 0"></view>
       <view class="meter-row">
         <text class="meter-label">电表数</text>
         <u-input
@@ -97,9 +99,19 @@ import { detail } from '@/api/mz/contract';
         multiple
         :maxCount="10"
         uploadIconColor="#12c3c3"
-        uploadText="点击上传"
         :previewImage="true"
       >
+        <view class="custom-upload-btn">
+          <view class="icon-box">
+            <image
+              class="camera-icon"
+              src="/static/img/camera-icon.png"
+              mode="aspectFill"
+            ></image>
+          </view>
+
+          <view class="upload-tips">最多10个</view>
+        </view>
       </u-upload>
     </view>
     <!-- 提交按钮 -->
@@ -256,6 +268,9 @@ export default {
         energyMeterValue: this.energyMeterValue || "",
       };
       this.handleTempSave(params);
+      uni.navigateTo({
+        url: "/pages/tabBar/work",
+      });
       uni.showToast({ title: "提交成功", icon: "success" });
     },
   },
@@ -282,6 +297,7 @@ export default {
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
   position: relative;
   z-index: 2;
+  margin-bottom: 24rpx;
 }
 .room-title {
   font-weight: bold;
@@ -289,13 +305,16 @@ export default {
   margin-bottom: 16rpx;
 }
 .info-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
   font-size: 28rpx;
-  color: #222;
-  margin-bottom: 8rpx;
 }
 .label {
   color: #888;
   margin-right: 24rpx;
+  min-width: 120rpx; /* 固定宽度，保证对齐 */
+  text-align: right;
 }
 .section-card {
   background: #fff;
@@ -311,13 +330,13 @@ export default {
 .device-row {
   display: flex;
   align-items: center;
-  padding: 0 24rpx;
+  padding: 12rpx 0rpx;
   min-height: 64rpx;
   border-bottom: 1px solid #f2f2f2;
 }
 .device-label {
   width: 160rpx;
-  color: #222;
+  color: #68758b;
   font-size: 28rpx;
   margin-right: 24rpx;
 }
@@ -340,13 +359,26 @@ export default {
   width: 160rpx;
   height: 160rpx;
   background: #fafafa;
-  border: 2rpx dashed #e5e5e5;
+  border: 2rpx solid #f0f0f0;
   border-radius: 16rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin: 0 16rpx 0 0;
+  margin: 20rpx 16rpx 0 0;
+}
+.icon-box {
+  width: 60rpx;
+  height: 60rpx;
+  background: #ceeced;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.camera-icon {
+  width: 36rpx;
+  height: 36rpx;
 }
 .upload-tips {
   color: #bbb;

pagesA/force/index/index.vue

@@ -20,6 +20,7 @@
         <view class="info-card">
           <u-form-item label="姓名" prop="name" required>
             <text style="text-align: right">{{ baseInfo.graduateName }}</text>
+
             <!-- <u-input
               v-model="baseInfo.graduateName"
               placeholder="请输入姓名"
@@ -28,8 +29,10 @@
               :disabled="true"
             /> -->
           </u-form-item>
+          <view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view>
           <u-form-item label="房间" prop="room" required>
             <text style="text-align: right">{{ roomAllPath }}</text>
+
             <!-- <u-input
               v-model="roomAllPath"
               placeholder="请输入房间"
@@ -38,9 +41,10 @@
               :disabled="true"
             /> -->
           </u-form-item>
-
+          <view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view>
           <u-form-item label="手机号" prop="phone" required>
             <text style="text-align: right">{{ baseInfo.telephone }}</text>
+
             <!-- <u-input
               v-model="baseInfo.telephone"
               placeholder="请输入手机号"
@@ -49,6 +53,7 @@
               :disabled="true"
             /> -->
           </u-form-item>
+          <view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view>
           <u-form-item
             label="退房日期"
             prop="leaveDate"
@@ -99,9 +104,19 @@
             multiple
             :maxCount="10"
             uploadIconColor="#12c3c3"
-            uploadText="点击上传"
             :previewImage="true"
           >
+            <view class="custom-upload-btn">
+              <view class="icon-box">
+                <image
+                  class="camera-icon"
+                  src="/static/img/camera-icon.png"
+                  mode="aspectFill"
+                ></image>
+              </view>
+
+              <view class="upload-tips">点击上传</view>
+            </view>
           </u-upload>
         </view>
         <view class="submit-box">
@@ -328,7 +343,7 @@ export default {
 }
 .label-des {
   color: #68758b;
-  font-size: 32rpx;
+  font-size: 30rpx;
   margin: 20rpx 0;
 }
 .custom-desc-textarea {
@@ -340,7 +355,36 @@ export default {
   min-height: 500rpx !important;
   box-sizing: border-box;
 }
-
+.custom-upload-btn {
+  width: 160rpx;
+  height: 160rpx;
+  background: #fafafa;
+  border: 2rpx solid #f0f0f0;
+  border-radius: 16rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 20rpx 16rpx 0 0;
+}
+.icon-box {
+  width: 60rpx;
+  height: 60rpx;
+  background: #ceeced;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.camera-icon {
+  width: 36rpx;
+  height: 36rpx;
+}
+.upload-tips {
+  color: #bbb;
+  font-size: 24rpx;
+  margin-top: 8rpx;
+}
 /* u-upload自定义按钮样式（如需更改） */
 .u-upload__wrap__button {
   background: #f7f8fa !important;
@@ -363,6 +407,6 @@ export default {
 }
 ::v-deep .u-form-item__body__left__content__label span {
   color: #68758b;
-  font-size: 32rpx;
+  font-size: 30rpx;
 }
 </style>

pagesA/release/detail/detail.vue

@@ -8,23 +8,45 @@
         <view class="room-title">{{ userInfo.roomNamePath }}</view>
         <view class="status-text">待释放</view>
       </view>
-      <view class="checkout-date-row">退房日期：{{ userInfo.checkoutTime }}</view>
+      <view class="checkout-date-row"
+        >退房日期：{{ userInfo.checkoutTime }}</view
+      >
     </view>
     <view class="clean-card">
       <text class="clean-label">房间卫生<text class="required">*</text></text>
       <u-radio-group v-model="cleaned" class="clean-radio-group">
-        <u-radio v-for="item in cleanOptions" :key="item.value" :label="item.label" :name="item.value"
+        <u-radio
-          activeColor="#0DC6C6" :custom-style="'margin-right: 40rpx;'"></u-radio>
+          v-for="item in cleanOptions"
+          :key="item.value"
+          :label="item.label"
+          :name="item.value"
+          activeColor="#0DC6C6"
+          :custom-style="'margin-right: 40rpx;'"
+        ></u-radio>
       </u-radio-group>
     </view>
     <!-- 设备检查 -->
     <view class="section-card">
       <view class="section-title">设备检查</view>
-      <view v-for="(item, idx) in roomDetail.facilitiesCheckResults" :key="item.name" class="device-row">
+      <view
+        v-for="(item, idx) in roomDetail.facilitiesCheckResults"
+        :key="item.name"
+        class="device-row"
+      >
         <text class="device-label">{{ item.facilityName }}</text>
-        <u-radio-group v-model="item.checkResult" placement="row" @change="onDeviceChange(idx, $event)">
+        <u-radio-group
-          <u-radio :custom-style="'margin-right:36rpx;'" activeColor="#0DC6C6" v-for="opt in statusOptions"
+          v-model="item.checkResult"
-            :key="opt.value" :label="opt.label" :name="opt.value"></u-radio>
+          placement="row"
+          @change="onDeviceChange(idx, $event)"
+        >
+          <u-radio
+            :custom-style="'margin-right:36rpx;'"
+            activeColor="#0DC6C6"
+            v-for="opt in statusOptions"
+            :key="opt.value"
+            :label="opt.label"
+            :name="opt.value"
+          ></u-radio>
         </u-radio-group>
       </view>
     </view>
@@ -32,40 +54,79 @@
     <!-- 其他说明 -->
     <view class="section-card">
       <view class="section-title">其他说明</view>
-      <u-textarea v-model="value" :formatter="formatter" ref="textarea" placeholder="请输入内容（不超过500字）" maxlength="500"
+      <u-textarea
-        height="150" border="none" custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;"></u-textarea>
+        v-model="value"
-
+        :formatter="formatter"
+        ref="textarea"
+        placeholder="请输入内容（不超过500字）"
+        maxlength="500"
+        height="150"
+        border="none"
+        custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;"
+      ></u-textarea>
     </view>
     <!-- 图片/视频上传区域 -->
     <view class="section-card">
       <view class="section-title">图片/视频</view>
       <!-- #ifdef MP-WEIXIN -->
-      <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="10"
+      <u-upload
-        uploadIconColor="#12c3c3" uploadText="点击上传" :previewImage="true" accept="media">
+        :fileList="fileList"
+        @afterRead="afterRead"
+        @delete="deletePic"
+        multiple
+        :maxCount="10"
+        uploadIconColor="#12c3c3"
+        uploadText="点击上传"
+        :previewImage="true"
+        accept="media"
+      >
       </u-upload>
       <!-- #endif -->
       <!-- #ifdef H5 -->
-      <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="10"
+      <u-upload
-        uploadIconColor="#12c3c3" uploadText="点击上传" :previewImage="true" accept="image/*,video/*">
+        :fileList="fileList"
+        @afterRead="afterRead"
+        @delete="deletePic"
+        multiple
+        :maxCount="10"
+        uploadIconColor="#12c3c3"
+        :previewImage="true"
+        accept="image/*,video/*"
+      >
+        <view class="custom-upload-btn">
+          <view class="icon-box">
+            <image
+              class="camera-icon"
+              src="/static/img/camera-icon.png"
+              mode="aspectFill"
+            ></image>
+          </view>
+
+          <view class="upload-tips">点击上传</view>
+        </view>
       </u-upload>
       <!-- #endif -->
     </view>
     <!-- 提交按钮 -->
     <view class="submit-btn-wrap">
-      <u-button type="primary" :custom-style="btnStyle" shape="circle" @click="onSubmit">提交</u-button>
+      <u-button
+        type="primary"
+        :custom-style="btnStyle"
+        shape="circle"
+        @click="onSubmit"
+        >提交</u-button
+      >
     </view>
   </view>
 </template>
 
 <script>
-import { getRoomCheckRecDetail, releaseRoom } from "../../../common/api"
+import { getRoomCheckRecDetail, releaseRoom } from "../../../common/api";
-import {
+import { uploadImage } from "../../../pages/api";
-  uploadImage,
-} from "../../../pages/api"
 export default {
   data() {
     return {
-      roomId: '', // 房间ID
+      roomId: "", // 房间ID
       userInfo: {}, // 用户信息
       roomDetail: {}, // 房间详情
       btnStyle:
@@ -79,13 +140,20 @@ export default {
         { name: "茶几", status: "完好" },
         { name: "桌椅", status: "完好" },
       ],
-      statusOptions: [{ label: "完好", value: 0 }, { label: "破损", value: 1 }, { label: "丢失", value: 2 }],
+      statusOptions: [
+        { label: "完好", value: 0 },
+        { label: "破损", value: 1 },
+        { label: "丢失", value: 2 },
+      ],
       waterMeter: 3245.1,
       electricMeter: 2672.6,
       remark: "",
       value: "", // 其他说明的文本内容
       fileList: [],
-      cleanOptions: [{ label: "已打扫", value: "1" }, { label: "未打扫", value: "0" }],
+      cleanOptions: [
+        { label: "已打扫", value: "1" },
+        { label: "未打扫", value: "0" },
+      ],
       cleaned: "1",
     };
   },
@@ -99,7 +167,7 @@ export default {
       try {
         this.userInfo = JSON.parse(options.userInfo);
       } catch (e) {
-        console.error('解析userInfo失败:', e);
+        console.error("解析userInfo失败:", e);
       }
     }
 
@@ -146,17 +214,21 @@ export default {
       }
       console.log(this.fileList);
 
-      this.fileList = this.fileList.map(v => ({ url: v.url, name: v.name, type: v.type }));
+      this.fileList = this.fileList.map((v) => ({
+        url: v.url,
+        name: v.name,
+        type: v.type,
+      }));
     },
     // 获取房间详情
     async getRoomDetail() {
       try {
         uni.showLoading({
-          title: '加载中...'
+          title: "加载中...",
         });
         console.log(this.roomId);
         const res = await getRoomCheckRecDetail({
-          roomId: this.roomId
+          roomId: this.roomId,
         });
 
         if (res && res.code === 200) {
@@ -165,15 +237,15 @@ export default {
           this.updatePageData();
         } else {
           uni.showToast({
-            title: res?.msg || '获取房间详情失败',
+            title: res?.msg || "获取房间详情失败",
-            icon: 'none'
+            icon: "none",
           });
         }
       } catch (error) {
-        console.error('获取房间详情失败:', error);
+        console.error("获取房间详情失败:", error);
         uni.showToast({
-          title: '获取房间详情失败',
+          title: "获取房间详情失败",
-          icon: 'none'
+          icon: "none",
         });
       } finally {
         uni.hideLoading();
@@ -210,44 +282,44 @@ export default {
         uni.showToast({ title: "请选择房间卫生状态", icon: "none" });
         return;
       }
-      
+
       // if (!this.roomDetail.facilitiesCheckResults || this.roomDetail.facilitiesCheckResults.length === 0) {
       //   uni.showToast({ title: "请完成设备检查", icon: "none" });
       //   return;
       // }
-      
+
       // 检查设备检查是否都已完成
-      // const unfinishedDevices = this.roomDetail.facilitiesCheckResults.filter(item => 
+      // const unfinishedDevices = this.roomDetail.facilitiesCheckResults.filter(item =>
       //   item.checkResult === undefined || item.checkResult === null
       // );
       // if (unfinishedDevices.length > 0) {
       //   uni.showToast({ title: "请完成所有设备检查", icon: "none" });
       //   return;
       // }
-      
+
       // if (!this.value || this.value.trim() === '') {
       //   uni.showToast({ title: "请输入其他说明", icon: "none" });
       //   return;
       // }
-      
+
       // if (!this.fileList || this.fileList.length === 0) {
       //   uni.showToast({ title: "请上传图片或视频", icon: "none" });
       //   return;
       // }
-      
+
       let parm = {
         roomId: this.roomId,
         facilitiesCheckResults: this.roomDetail.facilitiesCheckResults,
         cleaned: this.cleaned,
         facilitiesCheckDesc: this.value,
         facilitiesCheckImages: this.fileList,
-      }
+      };
 
-      const res = await releaseRoom(parm)
+      const res = await releaseRoom(parm);
       if (res.code === 200) {
         uni.showToast({ title: "提交成功", icon: "success" });
         setTimeout(() => {
-          uni.navigateBack()
+          uni.navigateBack();
         }, 1000);
       } else {
         uni.showToast({ title: res.msg, icon: "none" });
@@ -360,15 +432,27 @@ export default {
   width: 160rpx;
   height: 160rpx;
   background: #fafafa;
-  border: 2rpx dashed #e5e5e5;
+  border: 2rpx solid #f0f0f0;
   border-radius: 16rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin: 0 16rpx 0 0;
+  margin: 20rpx 16rpx 0 0;
+}
+.icon-box {
+  width: 60rpx;
+  height: 60rpx;
+  background: #ceeced;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.camera-icon {
+  width: 36rpx;
+  height: 36rpx;
 }
-
 .upload-tips {
   color: #bbb;
   font-size: 24rpx;