diff --git a/pages/index/cleanPlan.vue b/pages/index/cleanPlan.vue
index 7a3f323..fad0b18 100644
--- a/pages/index/cleanPlan.vue
+++ b/pages/index/cleanPlan.vue
@@ -74,7 +74,11 @@
       <view class="success-box">
         <view class="box-content">
           <view class="logo">
-            <image   style="width: 100%; height: 100%; " src="/static/images/msg-success.png" alt="" /></image>
+            <image
+              style="width: 100%; height: 100%"
+              src="/static/images/msg-success.png"
+              alt=""
+            />
           </view>
           <view class="content-title">刷卡成功</view>
           <view class="btn-box">
@@ -89,9 +93,15 @@
       <view class="error-box">
         <view class="box-content">
           <view class="logo">
-            <image   style="width: 100%; height: 100%; " src="/static/images/msg-error.png" alt="" /></image>
+            <image
+              style="width: 100%; height: 100%"
+              src="/static/images/msg-error.png"
+              alt=""
+            />
+          </view>
+          <view class="content-title">
+            NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息
           </view>
-          <view class="content-title">刷卡失败</view>
           <view class="btn-box">
             <view class="btn-cancel" @click="errorShow = false">暂不</view>
             <view class="btn-success" @click="exceptionReportFn">异常上报</view>
@@ -191,7 +201,7 @@ export default {
     // 上传图片
     uploadFn() {
       console.log("%c%s", "color:red", "上传图片");
-      
+
       // 先关闭弹窗再跳转
       this.successShow = false;
       uni.navigateTo({
@@ -388,14 +398,14 @@ export default {
     background: linear-gradient(to bottom, #a7dafc, white 60%, white);
     border-radius: 30rpx;
     // border:1px solid red;
-    position:relative;
-    .logo{
-      position:absolute;
-      top:-50rpx;
-      left:50%;
-      transform:translateX(-50%);
-      width:200rpx;
-      height:200rpx;
+    position: relative;
+    .logo {
+      position: absolute;
+      top: -50rpx;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 200rpx;
+      height: 200rpx;
     }
     .content-title {
       position: absolute;
@@ -444,25 +454,27 @@ export default {
   .box-content {
     height: 450rpx;
     background-color: #ffffff;
-    background: linear-gradient(to bottom, #FFEDDF, white 60%, white);
-    border-radius:30rpx;
+    background: linear-gradient(to bottom, #ffeddf, white 60%, white);
+    border-radius: 30rpx;
     // border:1px solid red;
-    position:relative;
-    .logo{
-      position:absolute;
-      top:-50rpx;
-      left:50%;
-      transform:translateX(-50%);
-      width:200rpx;
-      height:200rpx;
+    position: relative;
+    .logo {
+      position: absolute;
+      top: -50rpx;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 200rpx;
+      height: 200rpx;
       // background-color:red;
     }
     .content-title {
       position: absolute;
       top: 40%;
-      width: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 80%;
       color: black;
-      font-size: 40rpx;
+      font-size: 32rpx;
       text-align: center;
     }
     .btn-box {
@@ -482,16 +494,16 @@ export default {
         font-size: 30rpx;
         color: #32353b;
       }
-      .btn-success{
-        width:200rpx;
-        height:70rpx;
-        background-color:#F76590;
-        border-radius:50rpx;
-        display:flex;
-        align-items:center;
-        justify-content:center;
-        font-size:30rpx;
-        color:white;
+      .btn-success {
+        width: 200rpx;
+        height: 70rpx;
+        background-color: #f76590;
+        border-radius: 50rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 30rpx;
+        color: white;
       }
     }
   }
diff --git a/pages/index/list.vue b/pages/index/list.vue
index c7f3047..38a1e80 100644
--- a/pages/index/list.vue
+++ b/pages/index/list.vue
@@ -2,29 +2,58 @@
   <view class="content">
     <view class="top">
       <u-cell-group>
-        <u-cell-item :arrow="false" title="保洁人员" value="小饼"></u-cell-item>
+        <u-cell-item
+          :arrow="false"
+          title="保洁人员"
+          :value="baseInfo.cleaner"
+          :title-style="{
+            color: '#303133',
+            fontSize: '32rpx',
+          }"
+          :value-style="{
+            color: '#303133',
+            fontSize: '32rpx',
+          }"
+        ></u-cell-item>
         <u-cell-item
           :arrow="false"
           title="上报时间"
-          value="2025.4.1"
+          :value="baseInfo.reportTime"
+          :title-style="{
+            color: '#303133',
+            fontSize: '32rpx',
+          }"
+          :value-style="{
+            color: '#303133',
+            fontSize: '32rpx',
+          }"
         ></u-cell-item>
       </u-cell-group>
     </view>
 
-    <view class="title">保洁区域</view>
+    <!-- <view class="title">保洁区域</view> -->
 
     <view class="bottom">
-      <u-form :model="form" :rules="rules" ref="uForm" label-width="200">
+      <u-form
+        :model="form"
+        :rules="rules"
+        ref="uForm"
+        label-width="200"
+        :label-style="{ fontSize: '32rpx' }"
+      >
         <!-- 区域选择（多选） -->
-        <u-form-item label="东大门操场" prop="areas" required>
-          <u-input v-model="form.cleaner" placeholder="请输入故障" />
+        <u-form-item :label="baseInfo.area" prop="areas">
+          <!-- <u-input v-model="form.cleaner" placeholder="请输入故障" /> -->
+          <view style="width: 100%; font-size: 32rpx; text-align: right"
+            >NFC卡损坏</view
+          >
         </u-form-item>
 
         <!-- 备注（文本域） -->
         <u-form-item label="备注" prop="notes" label-position="top">
           <u-input
             v-model="form.notes"
-            placeholder="请输入备注信息"
+            placeholder="请对故障进行描述"
             autoHeight
             maxlength="200"
             count
@@ -33,41 +62,60 @@
         </u-form-item>
 
         <!-- 图片上传 -->
-        <u-form-item
-          label="现场照片"
-          prop="images"
-          required
-          label-position="top"
-        >
-          <u-upload
+        <u-form-item label="图片" prop="images" label-position="top">
+          <!-- <u-upload
             v-model="form.images"
             :max-count="3"
             :previewFullImage="true"
             :multiple="true"
             @afterRead="handleImageUpload"
             @delete="handleImageDelete"
-          ></u-upload>
+          ></u-upload> -->
+          <view v-if="!form.url" class="upload-box" @click="takePhoto">
+            <image
+              src="/static/images/icon-camera.png"
+              mode="aspectFit"
+              style="width: 49rpx; height: 43rpx"
+            />
+          </view>
+
+          <view v-else class="upload-image">
+            <image
+              :src="form.url"
+              mode="aspectFit"
+              style="width: 100%; height: 100%"
+            />
+            <view class="delete-icon" @click="handleDelete">×</view>
+          </view>
         </u-form-item>
       </u-form>
     </view>
 
     <!-- 提交按钮 -->
-    <u-button @click="submitForm" style="margin-top: 40rpx" type="primary"
+    <u-button
+      shape="circle"
+      type="primary"
+      style="margin-top: 40rpx"
+      @click="submitForm"
       >保存</u-button
     >
   </view>
 </template>
 
 <script>
+import { ReportingNFCDanger } from "@/api/apiList";
+
 export default {
   data() {
     return {
+      baseInfo: {
+        cleaner: "小饼", // 保洁人员
+        reportTime: "2025.4.1", // 上报时间
+        area: "东大门操场", // 清洁区域
+      },
       form: {
-        cleaner: "", // 保洁人员
-        reportTime: "", // 上报时间
-        areas: [], // 清洁区域
         notes: "", // 备注
-        images: [], // 图片列表
+        url: "", // 图片
       },
       areaOptions: [
         { label: "东大门操场", value: "east_gate" },
@@ -97,7 +145,7 @@ export default {
             trigger: ["change"],
           },
         ],
-        images: [
+        url: [
           {
             type: "array",
             min: 1,
@@ -122,37 +170,119 @@ export default {
       this.form.images.splice(index, 1);
     },
 
-    // 表单提交
-    submitForm() {
-      this.$refs.uForm.validate().then((valid) => {
-        if (valid) {
-          uni.showToast({
-            title: "提交成功",
-            icon: "success",
-          });
-          // 这里添加实际提交逻辑
-        }
+    // 拍照获取图片
+    takePhoto() {
+      uni.chooseImage({
+        count: 1, // 每次拍摄1张
+        sourceType: ["camera"], // 仅限拍照
+        sizeType: ["compressed"], // 压缩图片
+        success: async (res) => {
+          console.log("拍照成功", res);
+          this.form.url = res.tempFilePaths[0];
+
+          // this.uploadFiles(res.tempFilePaths[0]);
+        },
+        fail: (err) => {
+          uni.showToast({ title: "拍照失败，请重试", icon: "none" });
+        },
       });
     },
+
+    // 删除图片
+    handleDelete() {
+      this.form.url = "";
+    },
+
+    // 表单提交
+    async submitForm() {
+      if (!this.form.url) {
+        uni.showToast({ title: "请上传图片", icon: "none" });
+        return;
+      }
+
+      console.log(this.form);
+
+      return;
+
+      const res = await ReportingNFCDanger({
+        ...this.form,
+
+        // 以下数据待获取
+        id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+        userId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+        reportingTime: "2025-04-10T08:02:40.917Z",
+        note: "string",
+        url: "string",
+        planInfoId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+      });
+
+      if (res.succeed) {
+        console.log(res);
+        uni.showToast({ title: "上报成功", icon: "success" });
+      }
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+page {
+  background-color: #f3f5fa;
+}
 .content {
   height: auto;
-  min-height: 100vh;
+  // min-height: 100vh;
   padding: 24rpx 32rpx;
   background-color: #f3f5fa;
 
-  .bottom,
   .top {
     background: #ffffff;
     border-radius: 22rpx;
-    padding: 0rpx 32rpx;
+    padding: 0rpx 10rpx;
     margin-bottom: 30rpx;
   }
 
+  .bottom {
+    background: #ffffff;
+    border-radius: 22rpx;
+    padding: 0rpx 40rpx;
+    margin-bottom: 30rpx;
+    padding-bottom: 30rpx;
+
+    .upload-box {
+      border: 1px dashed #526fa3;
+      width: 130rpx;
+      height: 130rpx;
+      background-color: #edf2ff;
+      border-radius: 16rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .upload-image {
+      width: 130rpx;
+      height: 130rpx;
+      border-radius: 16rpx;
+
+      position: relative;
+      .delete-icon {
+        position: absolute;
+        right: -10rpx;
+        top: -10rpx;
+        width: 36rpx;
+        height: 36rpx;
+        background: rgba(110, 110, 110, 0.6);
+        border-radius: 50%;
+        color: white;
+        text-align: center;
+        line-height: 36rpx;
+        font-size: 28rpx;
+      }
+    }
+  }
+
   .title {
     font-size: 38rpx;
     color: #1a1a1b;
diff --git a/pages/index/planList.vue b/pages/index/planList.vue
index b979f9f..728bbd8 100644
--- a/pages/index/planList.vue
+++ b/pages/index/planList.vue
@@ -121,7 +121,7 @@ export default {
       planList: [],
     };
   },
-  created() {
+  onShow() {
     this.getPlanList();
   },
   methods: {
diff --git a/pages/index/uploadPhoto.vue b/pages/index/uploadPhoto.vue
index 0814fd6..35100cd 100644
--- a/pages/index/uploadPhoto.vue
+++ b/pages/index/uploadPhoto.vue
@@ -281,7 +281,7 @@ page {
             top: -10rpx;
             width: 36rpx;
             height: 36rpx;
-            background: #6d6d6d;
+            background: rgba(110, 110, 110, 0.6);
             border-radius: 50%;
             color: white;
             text-align: center;