新增页面

app.json

@@ -1,7 +1,7 @@
 {
   "pages": [
-    "pages/FirstBangDing/FirstBangDing",
     "pages/homepage/homepage",
+    "pages/FirstBangDing/FirstBangDing",
     "pages/huhaobangding/huhaobangding",
     "pages/lijijiaofei/lijijiaofei",
     "pages/zhangdanlist/zhangdanlist",
@@ -13,7 +13,9 @@
     "pages/huhaoguanli/huhaoguanli",
     "pages/tousujianyi/tousujianyi",
     "pages/tousujianyiSuccess/tousujianyiSuccess",
-    "pages/mine/mine"
+    "pages/mine/mine",
+    "pages/tousujianyiList/tousujianyiList",
+    "pages/baoxiuList/baoxiuList"
   ],
   "tabBar": {
     "color": "rgba(182, 189, 205, 1)",

pages/baoxiuList/baoxiuList.js

@@ -0,0 +1,212 @@
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    noticeList: [
+      {
+        id: 1,
+        address: '安平镇安坪村安平小区12栋304室',
+        content: '水表漏水 11111',
+        contact: '张三',
+        phone: '13800138000',
+        date: '2024-03-15',
+        type: '水表漏水',
+        hasAttachment: true,
+        attachments: [
+          '/static_file/background.png',
+          '/static_file/card.png'
+        ],
+        isReplied: true,
+        replyTime: '2025-3-12 12:10',
+        replyContent: '建议增加线上开票功能，线下开票太麻烦了'
+      },
+      {
+        id: 2,
+        address: '安平镇安坪村安平小区12栋305室',
+        content: '水管漏水 2222',
+        contact: '李四',
+        phone: '13900139000',
+        date: '2024-03-14',
+        type: '水表漏水',
+        hasAttachment: false,
+        attachments: [],
+        isReplied: false,
+        replyTime: '',
+        replyContent: ''
+      },
+      {
+        id: 3,
+        address: '安平镇安坪村安平小区12栋306室',
+        content: '3333',
+        contact: '王五',
+        phone: '13700137000',
+        date: '2024-03-13',
+        type: '水表漏水',
+        hasAttachment: true,
+        attachments: [
+          '/static_file/add.png'
+        ],
+        isReplied: true,
+        replyTime: '2025-3-10 09:30',
+        replyContent: '已经对相关人员进行培训，感谢您的反馈'
+      }
+    ],
+    imageList: [], // 存储图片路径的数组
+    showCustomPreview: false, // 是否显示自定义预览
+    currentPreviewImages: [], // 当前预览的图片数组
+    currentPreviewIndex: 0 // 当前预览的图片索引
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.getNoticeList()
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+
+  // 获取列表数据
+  getNoticeList() {
+    // wx.request({
+    //   url: 'YOUR_API_URL',
+    //   success: (res) => {
+    //     this.setData({
+    //       noticeList: res.data
+    //     })
+    //   }
+    // })
+  },
+
+  previewImage: function(e) {
+    // 获取当前点击项的id
+    const id = e.currentTarget.dataset.id;
+    // 根据id找到对应的投诉建议项
+    const item = this.data.noticeList.find(item => item.id === id);
+    // 确保有附件
+    if (item && item.hasAttachment && item.attachments.length > 0) {
+      this.setData({
+        showCustomPreview: true,
+        currentPreviewImages: item.attachments,
+        currentPreviewIndex: 0
+      });
+    } else {
+      console.log('没有找到附件或附件为空');
+    }
+  },
+
+  // 关闭预览
+  closePreview: function() {
+    this.setData({
+      showCustomPreview: false
+    });
+  },
+
+  // 切换预览图片
+  changePreviewImage: function(e) {
+    const direction = e.currentTarget.dataset.direction;
+    let newIndex = this.data.currentPreviewIndex;
+    
+    if (direction === 'prev') {
+      newIndex = newIndex > 0 ? newIndex - 1 : this.data.currentPreviewImages.length - 1;
+    } else {
+      newIndex = newIndex < this.data.currentPreviewImages.length - 1 ? newIndex + 1 : 0;
+    }
+    
+    this.setData({
+      currentPreviewIndex: newIndex
+    });
+  },
+
+  // 防止点击图片内容时关闭预览
+  preventBubble: function() {
+    return;
+  },
+
+  // 跳转到详情页
+  goToDetail(e) {
+    const id = e.currentTarget.dataset.id;
+    const item = this.data.noticeList.find(item => item.id === id);
+    
+    // 统一使用预览模式，传递isReplied参数
+    wx.navigateTo({
+      url: `/pages/baoxiudj/baoxiudj?id=${id}&mode=preview&isReplied=${item.isReplied ? 'true' : 'false'}`
+    });
+  },
+
+  // 跳转到表单页
+  goToForm() {
+    wx.navigateTo({
+      url: '/pages/baoxiudj/baoxiudj'
+    })
+  },
+
+  // 返回上一页
+  goBack() {
+    wx.navigateBack()
+  },
+
+  // 假设您从服务器获取数据的函数
+  getDataFromServer: function() {
+    // 示例：从服务器获取数据
+    wx.request({
+      url: 'your_api_url',
+      success: (res) => {
+        // 假设返回的数据中包含图片数组
+        const images = res.data.images || [];
+        this.setData({
+          imageList: images
+        });
+      }
+    });
+  }
+})

pages/baoxiuList/baoxiuList.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+} 

pages/baoxiuList/baoxiuList.wxml

@@ -0,0 +1,72 @@
+<view class="container">
+  <!-- 返回按钮 -->
+  <view class="custom-nav">
+    <view class="fixed-back" bindtap="goBack">←</view>
+    <view class="nav-title">我的报修</view>
+  </view>
+
+  <scroll-view scroll-y="true" class="notice-list">
+    <block wx:for="{{noticeList}}" wx:key="id">
+      <view class="notice-item" bindtap="goToDetail" data-id="{{item.id}}">
+        <view class="notice-content">
+          <view class="notice-title">{{item.content}}</view>
+          <view class="notice-info">
+            <text>{{item.contact}}/{{item.phone}}</text>
+            <text>{{item.date}}</text>
+          </view>
+        </view>
+        <!-- 预览图按钮，仅当有附件时显示 -->
+        <view class="preview" wx:if="{{item.hasAttachment}}" catchtap="previewImage" data-id="{{item.id}}">
+          <image class="preview-icon" src="/static_file/yl.png"></image>
+          <text class="preview-text">预览图</text>
+        </view>
+        <!-- 已回复标识 -->
+        <image wx:if="{{item.isReplied}}" class="replied-stamp" src="/static_file/spSuccess.png"></image>
+      </view>
+    </block>
+  </scroll-view>
+
+  <!-- 添加按钮 -->
+  <view class="add-button" bindtap="goToForm">
+    <image src="/static_file/add.png" mode="aspectFit"></image>
+  </view>
+
+  <!-- 图片列表 -->
+  <view class="image-container">
+    <block wx:for="{{imageList}}" wx:key="index">
+      <image 
+        src="{{item}}" 
+        mode="aspectFill" 
+        bindtap="previewImage" 
+        data-index="{{index}}"
+        class="preview-image"
+      ></image>
+    </block>
+  </view>
+
+  <!-- 自定义图片预览组件 -->
+  <view class="custom-preview-container" wx:if="{{showCustomPreview}}" bindtap="closePreview">
+    <view class="custom-preview-content" catchtap="preventBubble">
+      <image 
+        class="preview-image" 
+        src="{{currentPreviewImages[currentPreviewIndex]}}" 
+        mode="aspectFit"
+      ></image>
+      
+      <view class="preview-controls">
+        <view class="preview-arrow left-arrow" catchtap="changePreviewImage" data-direction="prev">
+          <text class="arrow-text">《</text>
+        </view>
+        <view class="preview-arrow right-arrow" catchtap="changePreviewImage" data-direction="next">
+          <text class="arrow-text">》</text>
+        </view>
+      </view>
+      
+      <view class="preview-counter">
+        {{currentPreviewIndex + 1}}/{{currentPreviewImages.length}}
+      </view>
+      
+      <view class="close-button" catchtap="closePreview">×</view>
+    </view>
+  </view>
+</view>

pages/baoxiuList/baoxiuList.wxss

@@ -0,0 +1,224 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.custom-nav {
+  display: flex;
+  align-items: center;
+  height: 90rpx;
+  margin-bottom: 20rpx;
+  background-color: #2E82FF;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  padding: 0 20rpx;
+  padding-top: 44px; 
+}
+
+.fixed-back {
+  font-size: 40rpx;
+  text-align: center;
+  color: #fff;
+}
+
+.nav-title {
+  flex: 1;
+  text-align: center;
+  font-size: 34rpx;
+  color: #fff;
+}
+
+.notice-list {
+  width: 100%;
+  height: calc(100vh - 120rpx);
+  padding: 20rpx;
+  padding-top: 180rpx; 
+  box-sizing: border-box;
+}
+
+.notice-item {
+  position: relative;
+  background: #fff;
+  border-radius: 12rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.notice-content {
+  flex: 1;
+  margin-right: 20rpx;
+  margin-bottom: 16rpx;
+  width: 90%;
+}
+
+.notice-title {
+  font-size: 34rpx;
+  font-weight: 90%;
+  margin-bottom: 16rpx;
+  color: #333;
+  height: 96rpx;
+  line-height: 48rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.notice-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 30rpx;
+  color: rgba(100, 108, 128, 1);
+  background-color: rgba(250, 250, 250, 1);
+  padding: 12rpx 16rpx;
+  border-radius: 8rpx;
+  margin-top: 10rpx;
+  width: 100%;
+}
+
+.preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  right: 30rpx;
+  top: 30rpx;
+  width: 10%;
+}
+
+.preview-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.preview-text {
+  font-size: 24rpx;
+  color: #666;
+  margin-top: 8rpx;
+}
+
+.replied-stamp {
+  position: absolute;
+  width: 220rpx;
+  height: 220rpx;
+  right: 70rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.8;
+}
+
+.add-button {
+  position: fixed;
+  right: 40rpx;
+  bottom: 40rpx;
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.add-button image {
+  width: 120rpx;
+  height: 120rpx;
+}
+
+.image-container {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10rpx;
+}
+
+.preview-image {
+  width: 220rpx;
+  height: 220rpx;
+  margin: 10rpx;
+  border-radius: 8rpx;
+}
+
+.custom-preview-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.custom-preview-content {
+  width: 90%;
+  height: 70%;
+  position: relative;
+}
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+
+.preview-controls {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  transform: translateY(-50%);
+}
+
+.preview-arrow {
+  width: 80rpx;
+  height: 80rpx;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.arrow-text {
+  color: white;
+  font-size: 36rpx;
+}
+
+.preview-counter {
+  position: absolute;
+  bottom: -60rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  color: white;
+  font-size: 28rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 10rpx 20rpx;
+  border-radius: 30rpx;
+}
+
+.close-button {
+  position: absolute;
+  top: -80rpx;
+  right: 0;
+  width: 60rpx;
+  height: 60rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 40rpx;
+}
+

pages/baoxiudj/baoxiudj.js

@@ -9,11 +9,35 @@ Page({
     imageList: [],
     showNotification: true,
     countDown: 3,
-    isFormValid: false
+    isFormValid: false,
+    isPreviewMode: false,
+    replyTime: '',
+    replyContent: '',
+    id: '',
+    mode: '',
+    isReplied: false,
   },
 
   onLoad: function(options) {
-    this.startCountDown();
+    const isReplied = options.isReplied === 'true';
+    
+    if (options.mode === 'preview') {
+      this.setData({
+        isPreviewMode: true,
+        showNotification: false,
+        id: options.id,
+        mode: options.mode,
+        isReplied: isReplied
+      });
+      this.loadPreviewData(options.id);
+    } else {
+      this.startCountDown();
+      this.setData({
+        id: options.id || '',
+        mode: options.mode || '',
+        isReplied: isReplied
+      });
+    }
   },
 
   startCountDown: function() {
@@ -176,6 +200,88 @@ Page({
       return;
     }
     
+    if (!this.validatePhone(this.data.phone)) {
+      wx.showToast({
+        title: '请输入正确的手机号',
+        icon: 'none'
+      });
+      return;
+    }
+    
+    const submitData = {
+      address: this.data.address,
+      contact: this.data.contact,
+      phone: this.data.phone,
+      repairType: this.data.repairType,
+      description: this.data.description,
+      images: this.data.imageList
+    };
+    
+    console.log('提交的数据:', submitData);
+    
+    wx.showLoading({
+      title: '提交中...',
+    });
+    
+    setTimeout(() => {
+      wx.hideLoading();
+      wx.showToast({
+        icon: 'success',
+        duration: 2000,
+        success: function() {
+          setTimeout(() => {
+            wx.navigateTo({
+              url: '/pages/baoxiuSuccess/baoxiuSuccess',
+            });
+          }, 2000);
+        }
+      });
+    }, 1500);
+  },
+
+  loadPreviewData: function(id) {
+    wx.showLoading({
+      title: '加载中...',
+    });
+    
+    // 从上一个页面获取数据
+    const pages = getCurrentPages();
+    const prevPage = pages[pages.length - 2]; // 获取上一个页面
+    
+    if (prevPage && prevPage.data && prevPage.data.noticeList) {
+      // 根据id查找对应的报修项
+      const item = prevPage.data.noticeList.find(item => item.id == id);
+      
+      if (item) {
+        this.setData({
+          address: item.address || '', 
+          contact: item.contact || '',
+          phone: item.phone || '',
+          repairType: item.type || '',
+          description: item.content || '',
+          imageList: item.hasAttachment ? item.attachments : [],
+          replyTime: item.isReplied ? item.replyTime : '',
+          replyContent: item.isReplied ? item.replyContent : ''
+        });
+      }
+    }
+    
+    wx.hideLoading();
+  },
+
+  submitForm: function() {
+    if (this.data.isPreviewMode) {
+      return;
+    }
+    
+    if (!this.checkFormValidity()) {
+      wx.showToast({
+        title: '请填写完整信息',
+        icon: 'none'
+      });
+      return;
+    }
+    
     if (!this.validatePhone(this.data.phone)) {
       wx.showToast({
         title: '请输入正确的手机号',
@@ -228,4 +334,4 @@ Page({
       }
     })
   }
-}); 
+}); 

pages/baoxiudj/baoxiudj.wxml

@@ -1,10 +1,10 @@
 <view class="container4">
-  
+
 
   <!-- 返回按钮 -->
   <view class="custom-nav">
     <view class="fixed-back" bindtap="goBack">←</view>
-    <view class="nav-title">报修登记</view>
+    <view class="nav-title">{{isPreviewMode ? '报修详情' : '报修登记'}}</view>
   </view>
 
   <!-- 第一个卡片：地址、联系人、联系电话 -->
@@ -16,36 +16,36 @@
     </view>
     <view class="divider"></view>
     <view class="bill-row">
-      <text>联系人<text class="required">*</text></text>
-      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputContact" value="{{contact}}" data-field="contact" />
+      <text>联系人<text class="required" wx:if="{{!isPreviewMode}}">*</text></text>
+      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputContact" value="{{contact}}" data-field="contact" disabled="{{isPreviewMode}}" />
     </view>
     <view class="divider"></view>
     <view class="bill-row">
-      <text>联系电话<text class="required">*</text></text>
-      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputPhone" value="{{phone}}" type="number" maxlength="11" data-field="phone" />
+      <text>联系电话<text class="required" wx:if="{{!isPreviewMode}}">*</text></text>
+      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputPhone" value="{{phone}}" type="number" maxlength="11" data-field="phone" disabled="{{isPreviewMode}}" />
     </view>
   </view>
 
   <!-- 第二个卡片：报修类型 -->
-  <view class="bill-card" bindtap="showRepairTypeSelector">
+  <view class="bill-card" bindtap="{{!isPreviewMode ? 'showRepairTypeSelector' : ''}}">
     <view class="bill-row">
-      <text>报修类型<text class="required">*</text></text>
+      <text>报修类型<text class="required" wx:if="{{!isPreviewMode}}">*</text></text>
       <view class="selector-value">
         <text class="{{repairType ? 'input-text' : 'placeholder-style'}}">{{repairType || '请选择'}}</text>
-        <text class="arrow">></text>
+        <text class="arrow" wx:if="{{!isPreviewMode}}">></text>
       </view>
     </view>
   </view>
 
   <!-- 第三个卡片：故障说明 -->
   <view class="bill-card">
-    <view class="card-title">故障说明<text class="required">*</text></view>
+    <view class="card-title">故障说明<text class="required" wx:if="{{!isPreviewMode}}">*</text></view>
     <view class="solid-divider"></view>
     <view class="fault-description">
-      <textarea class="input-text" placeholder="请输入描述说明..." placeholder-class="placeholder-style" bindinput="inputDescription" value="{{description}}" data-field="description"></textarea>
+      <textarea class="input-text" placeholder="请输入描述说明..." placeholder-class="placeholder-style" bindinput="inputDescription" value="{{description}}" data-field="description" disabled="{{isPreviewMode}}"></textarea>
     </view>
     <view class="upload-section">
-      <view class="upload-btn-container solid-border">
+      <view class="upload-btn-container solid-border" wx:if="{{!isPreviewMode}}">
         <view class="upload-btn" bindtap="chooseImage">
           <view class="plus-icon">+</view>
         </view>
@@ -54,20 +54,32 @@
         <block wx:for="{{imageList}}" wx:key="index">
           <view class="image-item">
             <image src="{{item.tempFilePath}}" mode="aspectFill" bindtap="previewImage" data-index="{{index}}"></image>
-            <view class="delete-icon" catchtap="deleteImage" data-index="{{index}}">×</view>
+            <view class="delete-icon" catchtap="deleteImage" data-index="{{index}}" wx:if="{{!isPreviewMode}}">×</view>
           </view>
         </block>
       </view>
     </view>
-    <view class="upload-tip" wx:if="{{imageList.length < 10}}">
+    <view class="upload-tip" wx:if="{{imageList.length < 10 && !isPreviewMode}}">
     </view>
   </view>
 
-  <!-- 提交按钮 -->
-  <button class="submit-btn {{isFormValid ? '' : 'disabled'}}" bindtap="submitRepair">提交</button>
-  
-  <!-- 报修须知弹窗 -->
-  <view class="notification-modal" wx:if="{{showNotification}}">
+  <!-- 回复信息卡片，仅在预览模式下显示且有回复内容时 -->
+  <view class="bill-card" wx:if="{{isPreviewMode && isReplied}}">
+    <view class="bill-rownew">
+      <text>回复时间</text>
+      <view class="reply-timenew">{{replyTime}}</view>
+    </view>
+    <view class="solid-divider"></view>
+    <view class="card-title">回复说明</view>
+    <view class="solid-divider"></view>
+    <view class="reply-content">{{replyContent}}</view>
+  </view>
+
+  <!-- 提交按钮，仅在非预览模式下显示 -->
+  <button class="submit-btn" bindtap="submitForm" wx:if="{{!isPreviewMode}}">提交</button>
+
+  <!-- 报修须知弹窗，仅在非预览模式下显示 -->
+  <view class="notification-modal" wx:if="{{showNotification && !isPreviewMode}}">
     <view class="notification-content">
       <view class="notification-title">报修须知</view>
       <view class="notification-divider"></view>

pages/baoxiudj/baoxiudj.wxss

@@ -45,6 +45,13 @@
   box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
   position: relative;
 }
+.bill-rownew {
+  display: flex;
+  font-size: 32rpx;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10rpx 0;
+}
 
 /* 第一个卡片额外的顶部间距 */
 .first-card {
@@ -55,7 +62,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20rpx 0; 
+  padding: 20rpx 0;
 }
 
 .bill-row-address {
@@ -80,14 +87,18 @@
   font-weight: 500;
   margin-bottom: 10rpx;
 }
-
+.reply-timenew {
+  font-size: 32rpx;
+  color: #666;
+  padding: 10rpx;
+}
 .input-right {
   text-align: right;
   width: 60%;
 }
 
 .input-text {
-  color: rgba(104, 108, 128, 1); 
+  color: rgba(104, 108, 128, 1);
 }
 
 .placeholder-style {
@@ -190,19 +201,6 @@
   font-size: 24rpx;
 }
 
-.submit-btn {
-  width: 90%;
-  height: 45px;
-  background-color: #0080ff;
-  color: white;
-  border-radius: 22.5px;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 30px auto;
-}
-
 .submit-btn.disabled {
   opacity: 0.7;
 }
@@ -268,4 +266,4 @@
 .required {
   color: #ff4d4f;
   margin-left: 4rpx;
-}
+}

pages/homepage/homepage.js

@@ -17,7 +17,7 @@ Page({
       accountNumber: "",
       address: ""
     },
-    
+
     // 账单信息
     billInfo: {
       totalAmount: 0,  // 总计应缴
@@ -66,6 +66,7 @@ Page({
   },
 
   onLoad() {
+    // debugger;
     let refresh= app.globalData.refresh;
     if(refresh==1){
       wx.showLoading({
@@ -76,6 +77,7 @@ Page({
         return;
       }
       const _this = this;
+      // debugger;
       wx.request({
         url: app.globalData.interfaceUrls.homePageInfo+app.globalData.currentAccountInfo.usernumber,
         method: 'GET',
@@ -88,6 +90,7 @@ Page({
         success (res) {
           wx.hideLoading();
           let apiReturnData=res.data;
+          // debugger;
           _this.setData({
             billInfo:{
               totalAmount:apiReturnData.data.duFees,  // 总计应缴
@@ -109,9 +112,9 @@ Page({
     }
   },
   onShow() {
-   
+
   },
- 
+
   // 切换水表
   handleSwitchMeter() {
     wx.navigateTo({
@@ -130,9 +133,9 @@ Page({
   handleFunctionClick(e) {
     const index = e.currentTarget.dataset.index
     const item = this.data.functionList[index]
-  
+
     if (item && item.url) {
-      wx.navigateTo({ 
+      wx.navigateTo({
         url: item.url,
         fail: function(err) {
           console.error('页面跳转失败:', err)
@@ -172,11 +175,60 @@ Page({
       url: '/pages/lijijiaofei/lijijiaofei',
     })
   },
-  
+
   // 跳转到通知公告列表页面
   goToNoticeList: function() {
     wx.navigateTo({
       url: '/pages/tongzhiList/tongzhiList'
     })
+  },
+
+  // 跳转到通知详情页面
+  goToNoticeDetail: function() {
+    const currentNotice = this.data.noticeList[this.data.currentIndex];
+    // 将整个通知对象序列化并编码
+    const noticeData = encodeURIComponent(JSON.stringify({
+      id: currentNotice.id,
+      title: currentNotice.title,
+      content: currentNotice.content,
+      date: currentNotice.date,
+      type: currentNotice.type,
+      source: currentNotice.source
+    }));
+
+    wx.navigateTo({
+      url: `/pages/tzxq/tzxq?noticeData=${noticeData}`
+    });
+  },
+
+  onReady: function() {
+    this.startNoticeScroll();
+  },
+
+  startNoticeScroll: function() {
+    const content = this.data.noticeList[this.data.currentIndex].content;
+    const title = this.data.noticeList[this.data.currentIndex].title;
+    const duration = (title.length + content.length) * 0.3;
+
+    this.setData({
+      scrollDuration: duration,
+      isScrolling: true
+    });
+  },
+
+  onScrollComplete: function() {
+    this.setData({
+      isScrolling: false
+    });
+
+    // 等待1秒后切换到下一条
+    setTimeout(() => {
+      const nextIndex = (this.data.currentIndex + 1) % this.data.noticeList.length;
+      this.setData({
+        currentIndex: nextIndex
+      }, () => {
+        this.startNoticeScroll();
+      });
+    }, 500);
   }
 })

pages/homepage/homepage.wxml

@@ -21,20 +21,20 @@
           <text class="value">{{userInfo.accountNumber}}</text>
         </view>
 
-        <view class="info-row">
+        <view class="info-row address-row">
           <text class="label">住址信息</text>
-          <text class="value">{{userInfo.address}}</text>
+          <text class="value address-value">{{userInfo.address}}</text>
         </view>
       </view>
 
     </view>
-    
+
     <!-- 票据式分割线 -->
     <view class="card-divider"></view>
-    
+
     <!-- 水费金额信息卡片 -->
     <view class="amount-card">
-      
+
       <!-- 水费金额信息 -->
       <view class="amount-section">
         <!-- 左侧水滴背景图 -->
@@ -49,10 +49,10 @@
               <text class="number">{{billInfo.waterUsage}}</text>
               <text class="label">用水量(m³)</text>
             </view>
-            
+
             <!-- 添加分隔线 -->
             <view class="detail-divider"></view>
-            
+
             <view class="detail-item">
               <text class="number blue">{{billInfo.balance}}</text>
               <text class="label">账号余额(元)</text>
@@ -63,6 +63,22 @@
 
       <!-- 充值缴费按钮 -->
       <button class="pay-btn" bindtap="goToPayment">立即缴费</button>
+
+      <!-- 通知轮播区域 -->
+      <view class="notice-bar">
+        <view class="notice-icon">
+          <image src="/static_file/speaker.png" mode="aspectFit"></image>
+        </view>
+        <view class="notice-swiper-container">
+          <view class="notice-content {{isScrolling ? 'scrolling' : ''}}"
+                bindanimationend="onScrollComplete"
+                bindtap="goToNoticeDetail"
+                style="animation-duration: {{scrollDuration}}s;">
+            <text class="notice-title">{{noticeList[currentIndex].title}}:</text>
+            <text>{{noticeList[currentIndex].content}}</text>
+          </view>
+        </view>
+      </view>
     </view>
   </view>
 
@@ -86,4 +102,4 @@
       <image class="activity-image" src="{{activity.imageUrl}}" mode="aspectFill"></image>
     </view>
   </view>
-</view>
+</view>

pages/homepage/homepage.wxss

@@ -37,6 +37,8 @@
 
 .user-info-section {
   padding: 10rpx;
+  display: flex;
+  flex-direction: column;
 }
 
 .info-row {
@@ -242,9 +244,10 @@
   padding: 30rpx;
   position: relative;
   width: 100%;
-  height: 220rpx;
+  min-height: 220rpx;
+  height: auto;
   box-sizing: border-box;
-  overflow: hidden;
+  overflow: visible;
   margin: 0;
   top: 0;
   border-bottom: none;
@@ -293,4 +296,87 @@
   width: 100%;
   box-sizing: border-box;
   border-top: none;
+}
+
+/* 通知轮播样式 */
+.notice-bar {
+  display: flex;
+  align-items: center;
+  padding: 0 20rpx;
+  border-radius: 30rpx;
+  margin: 20rpx 0 10rpx;
+  height: 50rpx;
+  overflow: hidden;
+}
+
+.notice-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: 10rpx;
+  width: 30rpx;
+  height: 40rpx;
+}
+
+.notice-icon image {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.notice-icon text {
+  font-size: 26rpx;
+  color: #333;
+  white-space: nowrap;
+}
+
+.notice-swiper-container {
+  flex: 1;
+  height: 50rpx;
+  overflow: hidden;
+  position: relative;
+}
+
+.notice-content {
+  display: flex;
+  align-items: center;
+  font-size: 28rpx;
+  color: rgba(104, 108, 128, 1);
+  line-height: 50rpx;
+  white-space: nowrap;
+  position: absolute;
+  left: 0;
+  transform: translateX(100%);
+}
+
+.notice-content.scrolling {
+  animation: marquee linear forwards;
+}
+
+@keyframes marquee {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+.notice-title {
+  color: rgba(104, 108, 128, 1);
+  margin-right: 10rpx;
+}
+
+.address-row {
+  align-items: flex-start !important;
+  min-height: 20rpx;
+  margin-bottom: 10rpx;
+}
+
+.address-value {
+  flex: 1;
+  word-break: break-all;
+  white-space: normal;
+  line-height: 1.4;
+  padding-right: 10rpx;
+  font-size: 28rpx;
 }

pages/mine/mine.wxml

@@ -1,59 +1,56 @@
 <view class="page-container">
-  <!-- 背景和用户信息部分 -->
-  <view class="container">
-    <!-- 顶部导航以及背景 -->
-    <view class="header">
-      <image class="background" src="{{images.background}}" mode="widthFix" />
-    </view>
+  <!-- 顶部背景 -->
+  <view class="header">
+    <image class="background" src="{{images.background}}" mode="widthFix" />
+  </view>
+
+  <view style="height: 200rpx; background-color: #4285f4;"></view>
 
-    <view style="height: 200rpx; background-color: #4285f4;"></view>
-
-    <!-- 用户信息 -->
-    <view class="user-info-container">
-      <view class="user-info">
-        <view class="user-name">{{userInfo.name}}</view>
-        <view class="user-id">
-          <image src="/static_file/hh.png" class="id-icon"></image>
-          <text>{{userInfo.id}}</text>
-        </view>
-        <view class="user-address">
-          <image src="/static_file/location.png" class="address-icon"></image>
-          <text>{{userInfo.address}}</text>
-        </view>
+  <!-- 用户信息 -->
+  <view class="user-info-container">
+    <view class="user-info">
+      <view class="user-name">{{userInfo.name}}</view>
+      <view class="user-id">
+        <image src="/static_file/hh.png" class="id-icon"></image>
+        <text>{{userInfo.id}}</text>
+      </view>
+      <view class="user-address">
+        <image src="/static_file/location.png" class="address-icon"></image>
+        <text>{{userInfo.address}}</text>
       </view>
     </view>
   </view>
 
   <!-- 功能选择框 -->
-  <view class="function-list">
+  <view class="function-content">
     <!-- 第一组：缴费记录和账单查询 -->
     <view class="function-group">
       <view class="function-item" bindtap="navigateTo" data-url="/pages/payment/payment">
         <text class="function-text">缴费记录</text>
         <image class="arrow-icon" src="/static_file/arrow.png"></image>
       </view>
-      
+
       <view class="divider"></view>
-      
+
       <view class="function-item" bindtap="navigateTo" data-url="/pages/bill/bill">
         <text class="function-text">账单查询</text>
         <image class="arrow-icon" src="/static_file/arrow.png"></image>
       </view>
     </view>
-    
+
     <!-- 第二组：我的报修和我的建议 -->
     <view class="function-group">
-      <view class="function-item" bindtap="navigateTo" data-url="/pages/repair/repair">
+      <view class="function-item" bindtap="navigateTo" data-url="/pages/baoxiuList/baoxiuList">
         <text class="function-text">我的报修</text>
         <image class="arrow-icon" src="/static_file/arrow.png"></image>
       </view>
-      
+
       <view class="divider"></view>
-      
-      <view class="function-item" bindtap="navigateTo" data-url="/pages/suggestion/suggestion">
+
+      <view class="function-item" bindtap="navigateTo" data-url="/pages/tousujianyiList/tousujianyiList">
         <text class="function-text">我的建议</text>
         <image class="arrow-icon" src="/static_file/arrow.png"></image>
       </view>
     </view>
   </view>
-</view> 
+</view>

pages/mine/mine.wxss

@@ -2,6 +2,8 @@
   position: relative;
   min-height: 100vh;
   background-color: #f5f5f5;
+  display: flex;
+  flex-direction: column;
 }
 
 .container {
@@ -54,7 +56,7 @@
   justify-content: space-between;
   align-items: flex-start;
   padding: 0rpx 30rpx;
-  top: -230rpx;
+  margin-top: -230rpx;
   width: 100%;
   box-sizing: border-box;
 }
@@ -132,13 +134,10 @@
 }
 
 /* 功能选择框样式 */
-.function-list {
+.function-content {
   width: 100%;
   padding: 0 30rpx;
   box-sizing: border-box;
-  position: absolute;
-  top: 400rpx;
-  left: 0;
   z-index: 100;
 }
 
@@ -174,4 +173,4 @@
   width: 20rpx;
   height: 30rpx;
   color: rgba(51, 51, 51, 1);
-}
+}

pages/tongzhiList/tongzhiList.wxss

@@ -17,7 +17,7 @@
   right: 0;
   z-index: 1000;
   padding: 0 20rpx;
-  padding-top: 44px; 
+  padding-top: 44px;
 }
 
 .fixed-back {
@@ -36,8 +36,8 @@
 .notice-list {
   flex: 1;
   padding: 20rpx 40rpx;
-  border-radius: 16px;
-  padding-top: 105px; 
+  border-radius: 32px;
+  padding-top: 190rpx;
 }
 
 .notice-item {
@@ -100,4 +100,4 @@
   color: #999;
   padding: 20rpx 0;
   margin-bottom: 20rpx;
-}
+}

pages/tousujianyi/tousujianyi.js

@@ -10,12 +10,30 @@ Page({
     showNotification: true,
     countDown: 3,
     isFormValid: false,
-    category: '投诉'
+    category: '投诉',
+    isPreviewMode: false,
+    title: '',
+    content: '',
+    replyTime: '',
+    replyContent: ''
   },
 
   onLoad: function(options) {
     this.startCountDown();
-    this.checkFormValidity();
+    
+    // 检查是否是预览模式
+    if (options.mode === 'preview') {
+      const id = options.id;
+      // 获取数据
+      this.getDataById(id);
+      // 设置为预览模式
+      this.setData({
+        isPreviewMode: true
+      });
+    } else {
+      // 非预览模式才检查表单有效性
+      this.checkFormValidity();
+    }
   },
 
   startCountDown: function() {
@@ -222,5 +240,30 @@ Page({
 
   submitRepair: function() {
     this.submitForm();
+  },
+
+  // 根据ID获取数据
+  getDataById: function(id) {
+    // 这里应该是从服务器获取数据
+    // 但为了演示，我们从本地数据中获取
+    const pages = getCurrentPages();
+    const prevPage = pages[pages.length - 2]; // 获取上一个页面
+    
+    if (prevPage && prevPage.data.noticeList) {
+      const item = prevPage.data.noticeList.find(item => item.id == id);
+      
+      if (item) {
+        this.setData({
+          category: item.title.includes('投诉') ? '投诉' : '建议',
+          description: item.content,
+          content: item.content,
+          contact: item.contact,
+          phone: item.phone,
+          imageList: item.attachments || [],
+          replyTime: item.replyTime,
+          replyContent: item.replyContent
+        });
+      }
+    }
   }
-}); 
+}); 

pages/tousujianyi/tousujianyi.wxml

@@ -1,5 +1,5 @@
 <view class="container4">
-  
+
 
   <!-- 返回按钮 -->
   <view class="custom-nav">
@@ -11,7 +11,7 @@
   <view class="bill-card first-card">
     <view class="bill-row">
       <text>分类</text>
-      <view class="radio-group">
+      <view class="radio-group" wx:if="{{!isPreviewMode}}">
         <radio-group bindchange="radioChange">
           <label class="radio">
             <radio value="投诉" checked="{{category === '投诉'}}" />投诉
@@ -21,29 +21,30 @@
           </label>
         </radio-group>
       </view>
+      <view wx:else class="preview-text">{{category || '投诉'}}</view>
     </view>
     <view class="divider"></view>
     <view class="bill-row">
-      <text>联系人<text class="required">*</text></text>
-      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputContact" value="{{contact}}" data-field="contact" />
+      <text>联系人<text class="required" wx:if="{{!isPreviewMode}}">*</text></text>
+      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputContact" value="{{contact}}" data-field="contact" disabled="{{isPreviewMode}}" />
     </view>
     <view class="divider"></view>
     <view class="bill-row">
-      <text>联系电话<text class="required">*</text></text>
-      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputPhone" value="{{phone}}" type="number" maxlength="11" data-field="phone" />
+      <text>联系电话<text class="required" wx:if="{{!isPreviewMode}}">*</text></text>
+      <input class="input-right input-text" placeholder="请输入" placeholder-class="placeholder-style" bindinput="inputPhone" value="{{phone}}" type="number" maxlength="11" data-field="phone" disabled="{{isPreviewMode}}" />
     </view>
   </view>
 
 
   <!-- 第三个卡片：内容说明 -->
   <view class="bill-card">
-    <view class="card-title">内容说明<text class="required">*</text></view>
+    <view class="card-title">内容说明<text class="required" wx:if="{{!isPreviewMode}}">*</text></view>
     <view class="solid-divider"></view>
     <view class="fault-description">
-      <textarea class="input-text" placeholder="请输入描述说明..." placeholder-class="placeholder-style" bindinput="inputDescription" value="{{description}}" data-field="description"></textarea>
+      <textarea class="input-text" placeholder="请输入描述说明..." placeholder-class="placeholder-style" bindinput="inputDescription" value="{{description || content}}" data-field="description" disabled="{{isPreviewMode}}"></textarea>
     </view>
     <view class="upload-section">
-      <view class="upload-btn-container solid-border">
+      <view class="upload-btn-container solid-border" wx:if="{{!isPreviewMode && imageList.length < 10}}">
         <view class="upload-btn" bindtap="chooseImage">
           <view class="plus-icon">+</view>
         </view>
@@ -52,17 +53,29 @@
         <block wx:for="{{imageList}}" wx:key="index">
           <view class="image-item">
             <image src="{{item.tempFilePath}}" mode="aspectFill" bindtap="previewImage" data-index="{{index}}"></image>
-            <view class="delete-icon" catchtap="deleteImage" data-index="{{index}}">×</view>
+            <view class="delete-icon" catchtap="deleteImage" data-index="{{index}}" wx:if="{{!isPreviewMode}}">×</view>
           </view>
         </block>
       </view>
     </view>
-    <view class="upload-tip" wx:if="{{imageList.length < 10}}">
+    <view class="upload-tip" wx:if="{{imageList.length < 10 && !isPreviewMode}}">
       最多可上传10张图片，单张不超过10M
     </view>
   </view>
 
-  <!-- 提交按钮 -->
-  <button class="submit-btn {{!isFormValid ? 'disabled' : ''}}" bindtap="submitForm">提交</button>
+  <!-- 回复信息卡片，仅在预览模式下显示 -->
+  <view class="bill-card" wx:if="{{isPreviewMode && replyContent}}">
+    <view class="bill-rownew">
+      <text>回复时间</text>
+      <view class="reply-timenew">{{replyTime}}</view>
+    </view>
+    <view class="solid-divider"></view>
+    <view class="card-title">回复说明</view>
+    <view class="solid-divider"></view>
+    <view class="reply-content">{{replyContent}}</view>
+  </view>
+
+  <!-- 提交按钮，仅在非预览模式下显示 -->
+  <button class="submit-btn" bindtap="submitForm" wx:if="{{!isPreviewMode}}">提交</button>
 
 </view>

pages/tousujianyi/tousujianyi.wxss

@@ -41,7 +41,7 @@
   background-color: #fff;
   border-radius: 16rpx;
   padding: 30rpx;
-  margin-bottom: 20rpx;
+  margin-bottom: 10rpx;
   box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
   position: relative;
 }
@@ -55,7 +55,14 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20rpx 0; 
+  padding: 20rpx 0;
+}
+.bill-rownew {
+  display: flex;
+  font-size: 32rpx;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10rpx 0;
 }
 
 .bill-row-address {
@@ -97,6 +104,7 @@
   color: #333;
   font-weight: 500;
   margin-bottom: 10rpx;
+  padding: 10rpx 0;
 }
 
 .input-right {
@@ -105,7 +113,7 @@
 }
 
 .input-text {
-  color: rgba(104, 108, 128, 1); 
+  color: rgba(104, 108, 128, 1);
 }
 
 .placeholder-style {
@@ -224,3 +232,50 @@
 .submit-btn.disabled {
   opacity: 0.7;
 }
+
+.reply-item {
+  background-color: #f8f8f8;
+  border-radius: 8rpx;
+  margin-top: 20rpx;
+}
+
+.reply-time {
+  font-size: 28rpx;
+  color: #666;
+  padding: 20rpx;
+}
+.reply-timenew {
+  font-size: 32rpx;
+  color: #666;
+  padding: 10rpx;
+}
+.reply-content {
+  font-size: 30rpx;
+  color: #333;
+  padding: 20rpx;
+  line-height: 1.5;
+}
+
+.preview-text {
+  color: rgba(104, 108, 128, 1);
+  font-size: 28rpx;
+}
+
+.reply-content {
+  font-size: 28rpx;
+  color: #333;
+  padding: 10rpx 0;
+  line-height: 1.5;
+}
+
+.reply-time {
+  font-size: 28rpx;
+  color: rgba(104, 108, 128, 1);
+  text-align: right;
+}
+
+/* 禁用状态的输入框样式 */
+input[disabled], textarea[disabled] {
+  color: #333;
+  background-color: transparent;
+}

pages/tousujianyiList/tousujianyiList.js

@@ -0,0 +1,216 @@
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    noticeList: [
+      {
+        id: 1,
+        title: '关于小区健身器材维修的建议关于小区健身器材维修的建议关于小区健身器材维修的建议',
+        content: '建议对小区内的健身器材进行定期维护和检修',
+        contact: '张三',
+        phone: '13800138000',
+        date: '2024-03-15',
+        hasAttachment: true,
+        attachments: [
+          '/static_file/background.png',
+          '/static_file/card.png'
+        ],
+        isReplied: true,
+        replyTime: '2025-3-12 12:10',
+        replyContent: '建议增加线上开票功能，线下开票太麻烦了'
+      },
+      {
+        id: 2,
+        title: '关于增设充电桩的投诉',
+        content: '小区电动车充电设施不足，希望能够增加充电桩',
+        contact: '李四',
+        phone: '13900139000',
+        date: '2024-03-14',
+        hasAttachment: false,
+        attachments: [],
+        isReplied: false,
+        replyTime: '',
+        replyContent: ''
+      },
+      {
+        id: 3,
+        title: '物业服务态度问题反馈',
+        content: '反映部分物业人员服务态度需要改进',
+        contact: '王五',
+        phone: '13700137000',
+        date: '2024-03-13',
+        hasAttachment: true,
+        attachments: [
+          '/static_file/add.png'
+        ],
+        isReplied: true,
+        replyTime: '2025-3-10 09:30',
+        replyContent: '已经对相关人员进行培训，感谢您的反馈'
+      }
+    ],
+    imageList: [], // 存储图片路径的数组
+    showCustomPreview: false, // 是否显示自定义预览
+    currentPreviewImages: [], // 当前预览的图片数组
+    currentPreviewIndex: 0 // 当前预览的图片索引
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.getNoticeList()
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+
+  // 获取列表数据
+  getNoticeList() {
+    // wx.request({
+    //   url: 'YOUR_API_URL',
+    //   success: (res) => {
+    //     this.setData({
+    //       noticeList: res.data
+    //     })
+    //   }
+    // })
+  },
+
+  previewImage: function(e) {
+    // 获取当前点击项的id
+    const id = e.currentTarget.dataset.id;
+    // 根据id找到对应的投诉建议项
+    const item = this.data.noticeList.find(item => item.id === id);
+    // 确保有附件
+    if (item && item.hasAttachment && item.attachments.length > 0) {
+      this.setData({
+        showCustomPreview: true,
+        currentPreviewImages: item.attachments,
+        currentPreviewIndex: 0
+      });
+    } else {
+      console.log('没有找到附件或附件为空');
+    }
+  },
+
+  // 关闭预览
+  closePreview: function() {
+    this.setData({
+      showCustomPreview: false
+    });
+  },
+
+  // 切换预览图片
+  changePreviewImage: function(e) {
+    const direction = e.currentTarget.dataset.direction;
+    let newIndex = this.data.currentPreviewIndex;
+    
+    if (direction === 'prev') {
+      newIndex = newIndex > 0 ? newIndex - 1 : this.data.currentPreviewImages.length - 1;
+    } else {
+      newIndex = newIndex < this.data.currentPreviewImages.length - 1 ? newIndex + 1 : 0;
+    }
+    
+    this.setData({
+      currentPreviewIndex: newIndex
+    });
+  },
+
+  // 防止点击图片内容时关闭预览
+  preventBubble: function() {
+    return;
+  },
+
+  // 跳转到详情页
+  goToDetail(e) {
+    const id = e.currentTarget.dataset.id
+    const item = this.data.noticeList.find(item => item.id === id);
+    
+    if (item.isReplied) {
+      // 如果已回复，跳转到预览页面
+      wx.navigateTo({
+        url: `/pages/tousujianyi/tousujianyi?id=${id}&mode=preview`
+      })
+    } else {
+      // 如果未回复，跳转到普通详情页
+      wx.navigateTo({
+        url: `/pages/tousujianyiDetail/tousujianyiDetail?id=${id}`
+      })
+    }
+  },
+
+  // 跳转到表单页
+  goToForm() {
+    wx.navigateTo({
+      url: '/pages/tousujianyi/tousujianyi'
+    })
+  },
+
+  // 返回上一页
+  goBack() {
+    wx.navigateBack()
+  },
+
+  // 假设您从服务器获取数据的函数
+  getDataFromServer: function() {
+    // 示例：从服务器获取数据
+    wx.request({
+      url: 'your_api_url',
+      success: (res) => {
+        // 假设返回的数据中包含图片数组
+        const images = res.data.images || [];
+        this.setData({
+          imageList: images
+        });
+      }
+    });
+  }
+})

pages/tousujianyiList/tousujianyiList.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+} 

pages/tousujianyiList/tousujianyiList.wxml

@@ -0,0 +1,72 @@
+<view class="container">
+  <!-- 返回按钮 -->
+  <view class="custom-nav">
+    <view class="fixed-back" bindtap="goBack">←</view>
+    <view class="nav-title">我的建议</view>
+  </view>
+
+  <scroll-view scroll-y="true" class="notice-list">
+    <block wx:for="{{noticeList}}" wx:key="id">
+      <view class="notice-item" bindtap="goToDetail" data-id="{{item.id}}">
+        <view class="notice-content">
+          <view class="notice-title">{{item.title}}</view>
+          <view class="notice-info">
+            <text>{{item.contact}}/{{item.phone}}</text>
+            <text>{{item.date}}</text>
+          </view>
+        </view>
+        <!-- 预览图按钮，仅当有附件时显示 -->
+        <view class="preview" wx:if="{{item.hasAttachment}}" catchtap="previewImage" data-id="{{item.id}}">
+          <image class="preview-icon" src="/static_file/yl.png"></image>
+          <text class="preview-text">预览图</text>
+        </view>
+        <!-- 已回复标识 -->
+        <image wx:if="{{item.isReplied}}" class="replied-stamp" src="/static_file/spSuccess.png"></image>
+      </view>
+    </block>
+  </scroll-view>
+
+  <!-- 添加按钮 -->
+  <view class="add-button" bindtap="goToForm">
+    <image src="/static_file/add.png" mode="aspectFit"></image>
+  </view>
+
+  <!-- 图片列表 -->
+  <view class="image-container">
+    <block wx:for="{{imageList}}" wx:key="index">
+      <image 
+        src="{{item}}" 
+        mode="aspectFill" 
+        bindtap="previewImage" 
+        data-index="{{index}}"
+        class="preview-image"
+      ></image>
+    </block>
+  </view>
+
+  <!-- 自定义图片预览组件 -->
+  <view class="custom-preview-container" wx:if="{{showCustomPreview}}" bindtap="closePreview">
+    <view class="custom-preview-content" catchtap="preventBubble">
+      <image 
+        class="preview-image" 
+        src="{{currentPreviewImages[currentPreviewIndex]}}" 
+        mode="aspectFit"
+      ></image>
+      
+      <view class="preview-controls">
+        <view class="preview-arrow left-arrow" catchtap="changePreviewImage" data-direction="prev">
+          <text class="arrow-text">《</text>
+        </view>
+        <view class="preview-arrow right-arrow" catchtap="changePreviewImage" data-direction="next">
+          <text class="arrow-text">》</text>
+        </view>
+      </view>
+      
+      <view class="preview-counter">
+        {{currentPreviewIndex + 1}}/{{currentPreviewImages.length}}
+      </view>
+      
+      <view class="close-button" catchtap="closePreview">×</view>
+    </view>
+  </view>
+</view>

pages/tousujianyiList/tousujianyiList.wxss

@@ -0,0 +1,224 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.custom-nav {
+  display: flex;
+  align-items: center;
+  height: 90rpx;
+  margin-bottom: 20rpx;
+  background-color: #2E82FF;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  padding: 0 20rpx;
+  padding-top: 44px; 
+}
+
+.fixed-back {
+  font-size: 40rpx;
+  text-align: center;
+  color: #fff;
+}
+
+.nav-title {
+  flex: 1;
+  text-align: center;
+  font-size: 34rpx;
+  color: #fff;
+}
+
+.notice-list {
+  width: 100%;
+  height: calc(100vh - 120rpx);
+  padding: 20rpx;
+  padding-top: 180rpx; 
+  box-sizing: border-box;
+}
+
+.notice-item {
+  position: relative;
+  background: #fff;
+  border-radius: 12rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.notice-content {
+  flex: 1;
+  margin-right: 20rpx;
+  margin-bottom: 16rpx;
+  width: 90%;
+}
+
+.notice-title {
+  font-size: 34rpx;
+  font-weight: 90%;
+  margin-bottom: 16rpx;
+  color: #333;
+  height: 96rpx;
+  line-height: 48rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.notice-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 30rpx;
+  color: rgba(100, 108, 128, 1);
+  background-color: rgba(250, 250, 250, 1);
+  padding: 12rpx 16rpx;
+  border-radius: 8rpx;
+  margin-top: 10rpx;
+  width: 100%;
+}
+
+.preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  right: 30rpx;
+  top: 30rpx;
+  width: 10%;
+}
+
+.preview-icon {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.preview-text {
+  font-size: 24rpx;
+  color: #666;
+  margin-top: 8rpx;
+}
+
+.replied-stamp {
+  position: absolute;
+  width: 220rpx;
+  height: 220rpx;
+  right: 70rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.8;
+}
+
+.add-button {
+  position: fixed;
+  right: 40rpx;
+  bottom: 40rpx;
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.add-button image {
+  width: 120rpx;
+  height: 120rpx;
+}
+
+.image-container {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10rpx;
+}
+
+.preview-image {
+  width: 220rpx;
+  height: 220rpx;
+  margin: 10rpx;
+  border-radius: 8rpx;
+}
+
+.custom-preview-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.custom-preview-content {
+  width: 90%;
+  height: 70%;
+  position: relative;
+}
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+
+.preview-controls {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  transform: translateY(-50%);
+}
+
+.preview-arrow {
+  width: 80rpx;
+  height: 80rpx;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.arrow-text {
+  color: white;
+  font-size: 36rpx;
+}
+
+.preview-counter {
+  position: absolute;
+  bottom: -60rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  color: white;
+  font-size: 28rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 10rpx 20rpx;
+  border-radius: 30rpx;
+}
+
+.close-button {
+  position: absolute;
+  top: -80rpx;
+  right: 0;
+  width: 60rpx;
+  height: 60rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 40rpx;
+}
+

pages/tousujianyiSuccess/tousujianyiSuccess.wxml

@@ -1,10 +1,10 @@
 <view class="container">
-  
+
 
   <!-- 返回按钮 -->
   <view class="custom-nav">
     <view class="fixed-back" bindtap="returnHome">←</view>
-    <view class="nav-title">报修登记</view>
+    <view class="nav-title">投诉建议</view>
   </view>
 
   <!-- 成功提示内容 -->
@@ -16,7 +16,7 @@
 
   <!-- 底部按钮 -->
   <view class="bottom-buttons">
-    <view class="continue-btn" bindtap="continueBaoxiu">继续报修</view>
+    <view class="continue-btn" bindtap="continueBaoxiu">继续投诉</view>
     <view class="return-btn" bindtap="returnHome">返回首页</view>
   </view>
 </view>

pages/zhangdanlist/zhangdanlist.js

@@ -39,6 +39,7 @@ Page({
       title: '获取中...',
       mask: true,
     });
+      // debugger;
       wx.request({
         url: app.globalData.interfaceUrls.billList,
         method: 'POST',
@@ -55,6 +56,7 @@ Page({
         success (res) {
           wx.hideLoading();
           let apiReturnData=res.data;
+          // debugger;
           _this.setData({
             billList:apiReturnData.data,
           })