调整样式

common/utils/format.js

@@ -0,0 +1,11 @@
+  formatMoney(val) {
+     if (val === null || val === undefined || isNaN(val)) return '—';
+   
+     val = Number(val);
+   
+     if (val >= 10000) {
+       return '¥' + (val / 10000).toFixed(2) + '万';
+     }
+   
+     return '¥' + val.toFixed(2);
+   }

pages/center/center.vue

@@ -141,115 +141,120 @@
 </template>
 
 <script>
-	import UCellItemPlus from "../../components/ucellitem/UCellItemPlus.vue";
+import UCellItemPlus from "../../components/ucellitem/UCellItemPlus.vue";
-	import config from "@/common/config.js" // 全局配置文件
+import config from "@/common/config.js";
-	export default {
+
-		components: { UCellItemPlus },
+export default {
-		data() {
+  components: { UCellItemPlus },
-			return {
+
-				avatar:uni.getStorageSync('lifeData').vuex_user.user.avatar.includes(config.staticUrl)?uni.getStorageSync('lifeData').vuex_user.user.avatar:config.staticUrl+uni.getStorageSync('lifeData').vuex_user.user.avatar,
+  data() {
-				show:true,
+    const life = uni.getStorageSync('lifeData') || {}
-				gridList:[
+    const user = (life.vuex_user && life.vuex_user.user) || {}
-				  {name:"我的合同",icon:"../../static/icon/我的合同.png",url:"pages/center/history"},
+
-				  {name:"我的账单",icon:"../../static/icon/我的账单.png",url:"pages/bill/bill"},
+    return {
-				  {name:"我的待付",icon:"../../static/icon/我的待付.png",url:"pages/unpaid/unpaid"},
+      user,   // user 信息放这里即可
-				  {name:"水电缴费",icon:"../../static/icon/水电缴费.png",url:"pages/wae/wae"}
+      show: true,
-				],
+      gridList: [
-				cellList:[
+        {name:"我的合同",icon:"../../static/icon/我的合同.png",url:"pages/center/history"},
-				   {title:"我的租赁资产",icon:"star",function:"goTo",url:"pages/center/myLease"},
+        {name:"我的账单",icon:"../../static/icon/我的账单.png",url:"pages/bill/bill"},
-				   {title:"我的预约",icon:"star",function:"goTo",url:"pages/reserve/reserveRecords"},
+        {name:"我的待付",icon:"../../static/icon/我的待付.png",url:"pages/unpaid/unpaid"},
-				   {title:"缴费记录",icon:"star",function:"goTo",url:"pages/bill/payHistory"},
+        {name:"水电缴费",icon:"../../static/icon/水电缴费.png",url:"pages/wae/wae"}
-				   {title:"水电费明细",icon:"star",function:"goTo",url:"pages/wae/waeRecords"}
+      ],
-				],
+      cellList: [
-			}
+        {title:"我的租赁资产",icon:"star",url:"pages/center/myLease"},
-		},
+        {title:"我的预约",icon:"star",url:"pages/reserve/reserveRecords"},
-		onLoad() {
+        {title:"缴费记录",icon:"star",url:"pages/bill/payHistory"},
-			uni.$on('updateAvatar', (obj) => {
+        {title:"水电费明细",icon:"star",url:"pages/wae/waeRecords"}
-				// 获取数据
+      ]
-				this.updateAvatar();
+    }
-			})
+  },
-		},
+
-		onUnload() {
+  computed: {
-			// 移除监听事件  
+    avatar() {
-			uni.$off('updateAvatar');
+      const life = uni.getStorageSync('lifeData') || {}
-		},
+      const user = (life.vuex_user && life.vuex_user.user) || {}
-		onShow(){
+      const raw = user.avatar || ""
-			// 检查token
+
-			this.checkToken();
+      if (!raw) return "/static/images/default-avatar.png"
-		},
+
-		methods: {
+      return raw.includes(config.staticUrl)
-			logout() {
+        ? raw
-				// 登录成功修改token与用户信息
+        : config.staticUrl + raw
-				this.$u.vuex('vuex_token', '');
+    }
-				this.$u.vuex('vuex_user', {});
+  },
-				this.$u.route('/pages/login/login')
+
-			},
+  onLoad() {
-			profile(){
+    uni.$on('updateAvatar', () => {
-				this.$u.route('/pages/profile/profile')
+      this.updateAvatar();
-			},
+    })
-			toMessage(){
+  },
-				this.$u.route('/pages/message/message')
+
-			},
+  onUnload() {
-			toSetting(){
+    uni.$off('updateAvatar')
-				this.$u.route('/pages/profile/setting')
+  },
-			},
+
-			//拨打固定电话
+  onShow() {
-			callPhoneNumber() {
+    this.checkToken();
-				uni.makePhoneCall({
+  },
-					phoneNumber: "18720989281",
+
-				});
+  methods: {
-			},
+    logout() {
-			problem(){
+      this.$u.vuex('vuex_token', '');
-				this.$u.route({
+      this.$u.vuex('vuex_user', {});
-					url: 'pages/login/problem'
+      this.$u.route('/pages/login/login')
-				})
+    },
-			},
+
-			// 关于作者
+    toMessage() {
-			aboutMe() {
+      this.$u.route('/pages/message/message')
-				this.$u.route('/pages/profile/aboutMe')
+    },
-			},
+
-			toMyLease(){
+    toSetting() {
-				this.$u.route('/pages/center/myLease')
+      this.$u.route('/pages/profile/setting')
-			},
+    },
-			checkToken(){
+
-				// 判断是否有token
+    callPhoneNumber() {
-				let lifeData = uni.getStorageSync('lifeData');
+      uni.makePhoneCall({ phoneNumber: "18720989281" });
-				let token = lifeData.vuex_token
+    },
-				if(!token){
+
-					// 没有token 则跳转到登录
+    aboutMe() {
-					return uni.reLaunch({
+      this.$u.route('/pages/profile/aboutMe')
-						url:'../login/login'
+    },
-					})
+
-				}else{
+    toMyLease() {
-					// 判断Token是否有效
+      this.$u.route('/pages/center/myLease')
-					let url = "/api/profile/isExpiration";
+    },
-					this.$u.get(url,{
+
-						token:token
+    checkToken() {
-					}).then(obj => {
+      let lifeData = uni.getStorageSync('lifeData') || {};
-						if(obj.data){
+      let token = lifeData.vuex_token
-							// 没有token过期则跳转到登录
+
-							return uni.reLaunch({
+      if (!token) {
-								url:'../login/login'
+		console.log("登录态不存在")
-							})
+        return uni.reLaunch({ url:'../login/login' })
-						}
+      }
-					});
+
-				}
+      let url = "/api/profile/isExpiration";
-			},
+      this.$u.get(url,{ token }).then(obj => {
-			code(){
+        if(obj.data){
-				this.$mytip.toast('敬请期待')
+          return uni.reLaunch({ url:'../login/login' })
-			},
+        }
-			clickNav(url){
+      });
-				if(url){
+    },
-					this.$u.route(url);
+
-				}else{
+    clickNav(url){
-					this.$mytip.toast('敬请期待')
+      if(url){
-				}
+        this.$u.route(url);
-			},
+      }else{
-			updateAvatar(){
+        this.$mytip.toast('敬请期待')
-				this.avatar = uni.getStorageSync('lifeData').vuex_user.user.avatar.includes(config.staticUrl)?uni.getStorageSync('lifeData').vuex_user.user.avatar:config.staticUrl+uni.getStorageSync('lifeData').vuex_user.user.avatar
+      }
-			},
+    },
-		}
+
-	}
+    updateAvatar() {
+      // 触发 computed 自动更新
+      this.$forceUpdate()
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>

pages/detail/assetsDetail.vue

@@ -86,7 +86,7 @@
     </u-popup>
 
     <!-- 底部导航栏 -->
-    <assetBottomBar :phone="asset.contact" @reserve="showReserve = true" />
+    <assetBottomBar v-if ="asset.status === 0" :phone="asset.contact" @reserve="showReserve = true" />
   </view>
 </template>
 
@@ -123,6 +123,7 @@ export default {
         images: [],
         remark: '',
         isFavorite: false,
+		status: 0
       },
       markers: [],
     };
@@ -154,6 +155,7 @@ export default {
           ],
           remark: '该资产目前用于办公出租，维护状态良好。',
           isFavorite: false,
+		  status: 1
         };
         this.markers = [
           {

pages/login/login.vue

@@ -1,85 +1,209 @@
 <template>
-  <u-popup v-model="show" mode="bottom" border-radius="20">
+  <view class="login-page">
-    <view class="p-30">
     
-      <view class="text-center u-font-32 u-m-b-20">
+	<!-- 背景视频 -->
+<video
+  class="bg-video"
+  src="/static/login.mp4"
+  autoplay
+  loop
+  muted
+  object-fit="cover"
+  controls="false"
+  show-center-play-btn="false"
+  show-play-btn="false"
+  show-fullscreen-btn="false"
+  show-mute-btn="false"
+  show-status-bar="false"
+  enable-progress-gesture="false"
+/>
+
+    <!-- 遮罩层增强可读性 -->
+   <view class="overlay"></view>
+     <!-- 背景图 -->
+       <!-- <image class="bg-img" :src="currentBg" :class="{ fade: isFading }" mode="aspectFill"></image> -->
+    <!-- 内容层 -->
+    <view class="login-content">
+      <view class="title u-font-36 u-m-b-40">
         微信授权登录
       </view>
 
       <button 
-        class="u-button bg-green text-white"
+        class="login-btn"
         open-type="getPhoneNumber"
         @getphonenumber="onGetPhone"
       >
         使用微信手机号授权登录
       </button>
 
+      <view class="privacy-tip u-m-t-30 u-text-center">
+        登录即同意
+        <text class="link" @click="goPrivacy('user')">《用户协议》</text>
+        及
+        <text class="link" @click="goPrivacy('privacy')">《隐私政策》</text>
+      </view>
     </view>
-  </u-popup>
+  </view>
 </template>
 
 <script>
 export default {
-  data() {
+	  data() {
-    return {
+	    return {
-      show: false
+	      bgImages: [
-    }
+	       '/static/loginbg1.jpg',
-  },
+		   '/static/loginbg2.jpg'
+	      ],
+		        currentIndex: 0,
+		        currentBg: '/static/loginbg1.jpg',
+		        timer: null
+	    }
+	  },
+	   onLoad() {
+	      this.startBgTimer();
+	    },
+	    onUnload() {
+	      clearInterval(this.timer);
+	    },
   methods: {
-    open() {
+	  startBgTimer() {
-      this.show = true
+	        this.timer = setInterval(() => {
-    },
+	          this.currentIndex = (this.currentIndex + 1) % this.bgImages.length;
-
+	          this.currentBg = this.bgImages[this.currentIndex];
-    // 微信授权手机号
+	        }, 2000); // 每 4 秒切换一次
+	      },
     onGetPhone(e) {
-      const { code } = e.detail
+      const { code } = e.detail;
       if (!code) {
-        this.$mytip.toast("授权失败")
+        this.$mytip.toast("授权失败");
-        return
+        return;
       }
-      this.doLogin(code)
+      this.doLogin(code);
     },
-
-    // 登录逻辑
     async doLogin(code) {
-      uni.showLoading({ title: "登录中...", mask: true })
+      uni.showLoading({ title: "登录中...", mask: true });
-
       try {
-        // ① 调后端：通过微信 code => openid + 手机号信息
+        const authRes = await this.$u.get(`/api/weChatAuth?code=${code}`);
-        const authRes = await this.$u.get(`/api/weChatAuth?code=${code}`)
-
-        // authRes: { openid, hasPhone: true/false, phoneList: [...] }
-
         if (!authRes.hasPhone) {
-          // ② 未绑定手机号 → 让用户选择手机号
+          this.showPhoneSelector(authRes.phoneList, authRes.openid);
-          this.showPhoneSelector(authRes.phoneList, authRes.openid)
+          return;
-          return
         }
-
+        await this.loginWithOpenId(authRes.openid);
-        // ③ 已有绑定手机号 → 直接登录
-        await this.loginWithOpenId(authRes.openid)
-
       } catch (err) {
-        this.$mytip.toast("登录失败")
+        this.$mytip.toast("登录失败");
+        uni.switchTab({ url: '/pages/index/index' });
       }
     },
-
-    // 提示选择手机号
     showPhoneSelector(phoneList, openid) {
-      this.show = false
+      this.$emit("choosePhone", { phoneList, openid });
-      this.$emit("choosePhone", { phoneList, openid })
     },
-
-    // 通过 openid 登录
     async loginWithOpenId(openid) {
-      const loginRes = await this.$u.post('/api/weChatLoginByOpenId', { openid })
+      const loginRes = await this.$u.post('/api/weChatLoginByOpenId', { openid });
-
+      this.$u.vuex('vuex_token', loginRes.token);
-      this.$u.vuex('vuex_token', loginRes.token)
+      this.$u.vuex('vuex_user', loginRes.loginUser);
-      this.$u.vuex('vuex_user', loginRes.loginUser)
+      uni.hideLoading();
-
+      uni.switchTab({ url: '/pages/index/index' });
-      uni.hideLoading()
+    },
-      uni.switchTab({ url: '/pages/index/index' })
+    goPrivacy(type) {
+      const url = type === 'user' 
+        ? '/pages/privacy/userAgreement' 
+        : '/pages/privacy/privacyPolicy';
+      uni.navigateTo({ url });
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.login-page {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  
+    .bg-video {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      z-index: -1;
+    }
+  
+    .overlay {
+      position: absolute;
+      top:0;
+      left:0;
+      width:100%;
+      height:100%;
+      background: rgba(0,0,0,0.3);
+      z-index:0;
+    }
+	
+  .bg-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    filter: brightness(0.7) blur(2px);
+    opacity: 1;
+    transition: opacity 0.5s ease;
+  }
+
+  .bg-img.fade {
+    opacity: 0;
+  }
+  .login-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+    max-width: 400rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 1;
+    animation: floatBtn 2s ease-in-out infinite alternate;
+
+    .title {
+      color: #fff;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    .login-btn {
+      width: 100%;
+      height: 80rpx;
+      line-height: 80rpx;
+      font-size: 28rpx;
+      color: #fff;
+      border-radius: 40rpx;
+      background: linear-gradient(90deg, #4CAF50, #07c160);
+      box-shadow: 0 6rpx 12rpx rgba(0,0,0,0.25);
+      text-align: center;
+      margin-top: 20rpx;
+    }
+
+    .privacy-tip {
+      font-size: 24rpx;
+      color: #fff;
+      margin-top: 20rpx;
+      text-align: center;
+
+      .link {
+        color: #ffd700;
+        text-decoration: underline;
+        margin: 0 4rpx;
+      }
+    }
+  }
+}
+
+@keyframes floatBtn {
+  0% { transform: translate(-50%, -50%) translateY(0); }
+  100% { transform: translate(-50%, -50%) translateY(-10rpx); }
+}
+</style>

pages/unpaid/unpaid.vue

@@ -19,12 +19,12 @@
         >
           <!-- 左侧勾选 + 信息 -->
           <view class="bill-left">
-            <u-checkbox
+			<u-checkbox
-              v-model="item.checked"
+                      v-model="item.checked"
-              @change="updateSelected"
+                      @change="toggleCheck(item)"
-              size="32"
+                      size="32"
-              active-color="#007aff"
+                      active-color="#007aff"
-            />
+                    />
             <view class="bill-info">
               <text class="bill-name">{{ item.feeName }}</text>
               <text class="bill-date">缴费截止：{{ item.dueDate }}</text>
@@ -34,12 +34,11 @@
           <!-- 右侧金额 + 支付按钮 -->
           <view class="bill-right">
             <text class="amount">{{ formatMoney(item.amount) }}</text>
-            <u-button
+            <button
-              size="small"
-              type="primary"
               class="pay-btn"
               @click="goPayTest([item])"
-            >去支付</u-button>
+            >去支付
+			</button>
           </view>
         </view>
       </view>
@@ -51,13 +50,16 @@
       <u-loadmore :status="loadStatus" />
     </scroll-view>
 
-    <!-- 底部批量支付栏 -->
+   <!-- 底部批量支付栏 -->
-    <view v-if="selectedBills.length > 0" class="batch-pay-bar">
+   <view v-if="selectedBills.length > 0" class="batch-pay-bar">
-      <text>已选 {{ selectedBills.length }} 项</text>
+     <view class="batch-pay-bar-left"><text>已选 {{ selectedBills.length }} 项</text></view>
-      <u-button type="primary" size="small" @click="goPayTest(selectedBills)">
+      <view class="batch-pay-bar-right">
-        批量缴费
+		  <text class="sumAmount">{{ formatMoney(sumAmount) }}</text>
-      </u-button>
+		  <button  class="bottomPayBtn" color="linear-gradient(90deg, #007aff, #00aaff)" type="primary" size="small" @click="goPayTest(selectedBills)">
-    </view>
+		    批量支付
+		  </button>
+	  </view>
+   </view>
   </view>
 </template>
 
@@ -68,12 +70,15 @@ export default {
       bills: [],
       isRefreshing: false,
       loadStatus: 'more',
+	  sumAmount: 0,
       selectedBills: [], // 勾选的账单集合
     };
   },
   onLoad() {
     this.loadBills();
   },
+  onShow(){
+  },
   methods: {
     loadBills() {
       this.bills = [
@@ -81,7 +86,7 @@ export default {
           id: 'p101',
           feeName: '第一期租金（2024.12.01-2024.12.31）',
           dueDate: '2024-12-15',
-          amount: 3000,
+          amount: 300000,
           checked: false,
         },
         {
@@ -92,9 +97,8 @@ export default {
           checked: false,
         },
       ];
-      this.updateSelected();
+	  this.updateSelected();
     },
-
     refresh() {
       this.isRefreshing = true;
       setTimeout(() => {
@@ -107,16 +111,33 @@ export default {
       this.loadStatus = 'noMore';
     },
 
-    formatMoney(val) {
+   formatMoney(val) {
-      if (!val && val !== 0) return '—';
+     if (val === null || val === undefined || isNaN(val)) return '—';
-      return '¥' + Number(val).toFixed(2);
-    },
    
-    updateSelected() {
+     val = Number(val);
-	  this.selectedBills = [];
+   
-      this.selectedBills = this.bills.filter((item) => item.checked);
+     if (val >= 10000) {
-	  console.log(this.selectedBill.length)
+       return '¥' + (val / 10000).toFixed(2) + '万';
-    },
+     }
+   
+     return '¥' + val.toFixed(2);
+   },
+    toggleCheck(item) {
+	  item.checked = !item.checked;
+	  if(item.checked && !this.selectedBills.some(b => b.id === item.id)) {
+		  this.selectedBills.push(item);
+	  }else{
+		  // 取消勾选时从已选数组移除
+		  this.selectedBills = this.selectedBills.filter(b => b.id !== item.id);
+	  } 
+	      let sumFee = 0;
+		  this.selectedBills.forEach(b => sumFee += b.amount);
+		  this.sumAmount = sumFee;
+	},   
+	   updateSelected() {
+         if (!Array.isArray(this.bills)) return;
+         this.selectedBills = this.bills.filter(b => b.checked);
+       },
     goPayTest(billList) {
    if (!billList || billList.length === 0) return;
 
@@ -191,31 +212,7 @@ export default {
     uni.showToast({ title: '支付请求失败', icon: 'none' });
   }
 },
-  },
-computed: {
-  /** ✅ 已勾选账单列表 */
-  selectedBills() {
-    return this.bills.filter(item => item.checked);
-  },
-
-  /** ✅ 已勾选数量 */
-  selectedCount() {
-    return this.selectedBills.length;
-  },
-
-  /** ✅ 全选状态（双向绑定） */
-  allSelected: {
-    get() {
-      return this.bills.length > 0 && this.selectedBills.length === this.bills.length;
-    },
-    set(val) {
-      // 用 this.$set 保证响应式更新
-      this.bills.forEach((item, index) => {
-        this.$set(this.bills, index, { ...item, checked: val });
-      });
-    }
   }
-}
 };
 </script>
 
@@ -248,7 +245,6 @@ computed: {
   .bill-info {
     display: flex;
     flex-direction: column;
-    margin-left: 12rpx;
 
     .bill-name {
       font-size: 28rpx;
@@ -265,26 +261,31 @@ computed: {
 }
 
 .bill-right {
-  display: flex;
   flex-direction: column;
   align-items: flex-end;
-
+  width: 30%;
   .amount {
+	text-align: center;
     font-size: 28rpx;
-    color: #333;
+	height: 28rpx;
+	line-height: 28rpx;
+    color: #ff7f00;
   }
 
   .pay-btn {
     margin-top: 12rpx;
-    padding: 0 24rpx;
+    padding: 0 40rpx;
     height: 60rpx;
     line-height: 60rpx;
     border-radius: 30rpx; // 圆角
     font-size: 28rpx;
     color: #fff;
-    background-color: #007aff; // 蓝色主色
+	background: linear-gradient(90deg, #007aff, #00aaff);
     text-align: center;
   }
+  .btn-text{
+	  padding-top: 13rpx;
+  }
 }
 
 .batch-pay-bar {
@@ -292,24 +293,41 @@ computed: {
   bottom: 0;
   left: 0;
   right: 0;
-  background: #fff;
+  height: 170rpx;
-  height: 80rpx;
+  padding: 0 30rpx;
-  padding: 0 20rpx;
+  background-color: #fff;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.08);
+  box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08);
   z-index: 999;
+  .batch-pay-bar-left{
+	  font-size: 28rpx;
+	  color: #333;
+  }
  
-  u-button {
+  .batch-pay-bar-right{
-    height: 60rpx;
+	  flex-direction: column;
-    line-height: 60rpx;
+	  align-items: flex-end;
-    padding: 0 30rpx;
+	  .sumAmount{
-    border-radius: 30rpx;
+	  	  font-size: 28rpx;
-    font-size: 28rpx;
+	  	  color: #ff7f00;
-    text-align: center;
+	  }
+	.bottomPayBtn {
+		    margin-top: 12rpx;
+		    height: 60rpx;
+		    line-height: 60rpx;
+		    padding: 0 40rpx;
+		    border-radius: 30rpx;
+		    font-size: 28rpx;
+		    font-weight: bold;
+		    text-align: center;
+			background: linear-gradient(90deg, #007aff, #00aaff);
+	}
   }
 }
+
+
 .empty {
   margin-top: 200rpx;
   text-align: center;

pages/wae/wae.vue

@@ -1,61 +1,65 @@
 <template>
-  <view class="due-page">
+  <view class="pending-bill-page">
-    <!-- 顶部标题 -->
+    <!-- 自定义导航栏 -->
-    <customNavbar title="水电缴费"/>
+    <custom-navbar title="水电缴费" />
 
-    <!-- 内容区 -->
     <scroll-view
       scroll-y
       class="scroll-content"
-      @scrolltolower="loadMore"
       :refresher-enabled="true"
       :refresher-triggered="isRefreshing"
       @refresherrefresh="refresh"
+      @scrolltolower="loadMore"
     >
-      <view v-if="records.length > 0" class="record-list">
+      <view v-if="bills.length > 0">
         <view
-          v-for="item in records"
+          class="bill-item"
+          v-for="item in bills"
           :key="item.id"
-          class="record-card"
         >
-          <!-- 左侧勾选框 -->
+          <!-- 左侧勾选 + 信息 -->
-          <checkbox
+          <view class="bill-left">
-            :value="item.id"
+			<u-checkbox
-            :checked="selectedIds.includes(item.id)"
+                      v-model="item.checked"
-            @change="toggleSelect(item.id)"
+                      @change="toggleCheck(item)"
-            class="check"
+                      size="32"
-          />
+                      active-color="#007aff"
-
+                    />
-          <!-- 账单信息 -->
+            <view class="bill-info">
-          <view class="record-body">
+              <text class="bill-name">{{ item.feeName }}</text>
-            <view class="info">
+              <text class="bill-date">缴费截止：{{ item.dueDate }}</text>
-              <view class="title">{{ item.feeName }}</view>
-              <view class="sub">缴费截止：{{ item.dueDate }}</view>
-            </view>
-
-            <!-- 右侧金额 + 按钮 -->
-            <view class="right">
-              <view class="amount">¥{{ item.amount }}</view>
-              <button class="pay-btn" @click="paySingle(item)">去支付</button>
             </view>
           </view>
-        </view>
 
-        <u-loadmore :status="loadStatus" />
+          <!-- 右侧金额 + 支付按钮 -->
+          <view class="bill-right">
+            <text class="amount">{{ formatMoney(item.amount) }}</text>
+            <button
+              class="pay-btn"
+              @click="goPayTest([item])"
+            >去支付
+			</button>
+          </view>
+        </view>
       </view>
 
       <view v-else class="empty">
-        <u-empty mode="list" text="暂无待缴账单" />
+        <u-empty mode="list" text="暂无水电费账单" />
       </view>
+
+      <u-loadmore :status="loadStatus" />
     </scroll-view>
 
-    <!-- 批量支付底部栏 -->
+   <!-- 底部批量支付栏 -->
-    <view v-if="selectedIds.length > 0" class="bottom-bar">
+   <view v-if="selectedBills.length > 0" class="batch-pay-bar">
-      <view class="bar-content">
+     <view class="batch-pay-bar-left"><text>已选 {{ selectedBills.length }} 项</text></view>
-        <text>已选择 {{ selectedIds.length }} 项</text>
+      <view class="batch-pay-bar-right">
-        <button class="batch-pay-btn" @click="batchPay">批量缴费</button>
+		  <text class="sumAmount">{{ formatMoney(sumAmount) }}</text>
-      </view>
+		  <button  class="bottomPayBtn" color="linear-gradient(90deg, #007aff, #00aaff)" type="primary" size="small" @click="goPayTest(selectedBills)">
-    </view>
+		    批量缴费
+		  </button>
+	  </view>
+   </view>
   </view>
 </template>
 
@@ -63,198 +67,270 @@
 export default {
   data() {
     return {
-      records: [],
+      bills: [],
-      selectedIds: [],
       isRefreshing: false,
-      loadStatus: 'loadmore',
+      loadStatus: 'more',
-      page: 1,
+	  sumAmount: 0,
-      pageSize: 10,
+      selectedBills: [], // 勾选的账单集合
     };
   },
   onLoad() {
-    this.loadRecords();
+    this.loadBills();
+  },
+  onShow(){
   },
   methods: {
-    // 模拟加载账单
+    loadBills() {
-    loadRecords() {
+      this.bills = [
-      this.records = [
+    {
-        {
+            id: 1,
-          id: 1,
+            feeName: '电费（2025.10）',
-          feeName: '电费（2025.10）',
+            dueDate: '2025-11-20',
-          dueDate: '2025-11-20',
+            amount: 120.5,
-          amount: 120.5,
+  		  checked: false
-        },
+          },
-        {
+          {
-          id: 2,
+            id: 2,
-          feeName: '水费（2025.10）',
+            feeName: '水费（2025.10）',
-          dueDate: '2025-11-22',
+            dueDate: '2025-11-22',
-          amount: 60.2,
+            amount: 60.2,
-        },
+  		  checked: false
+          }
       ];
+	  this.updateSelected();
     },
     refresh() {
       this.isRefreshing = true;
       setTimeout(() => {
-        this.loadRecords();
+        this.loadBills();
         this.isRefreshing = false;
       }, 1000);
     },
-    loadMore() {
-      this.loadStatus = 'nomore';
-    },
-    toggleSelect(id) {
-      const idx = this.selectedIds.indexOf(id);
-      if (idx > -1) {
-        this.selectedIds.splice(idx, 1);
-      } else {
-        this.selectedIds.push(id);
-      }
-    },
-    paySingle(item) {
-      uni.showModal({
-        title: '确认支付',
-        content: `确认支付 ¥${item.amount} 吗？`,
-        success: (res) => {
-          if (res.confirm) {
-            this.createOrder([item.id]);
-          }
-        },
-      });
-    },
-    batchPay() {
-      uni.showModal({
-        title: '批量缴费',
-        content: `确认支付 ${this.selectedIds.length} 项账单？`,
-        success: (res) => {
-          if (res.confirm) {
-            this.createOrder(this.selectedIds);
-          }
-        },
-      });
-    },
-    // 模拟调用后端生成支付订单
-    createOrder(ids) {
-      console.log('创建支付订单：', ids);
-      uni.showToast({
-        title: '生成支付订单中...',
-        icon: 'loading',
-      });
 
-      // 模拟延迟 + 支付调用
+    loadMore() {
-      setTimeout(() => {
+      this.loadStatus = 'noMore';
-        uni.showToast({
-          title: '支付成功',
-          icon: 'success',
-        });
-        // 清空选择
-        this.selectedIds = [];
-      }, 1200);
     },
-  },
+
+   formatMoney(val) {
+     if (val === null || val === undefined || isNaN(val)) return '—';
+   
+     val = Number(val);
+   
+     if (val >= 10000) {
+       return '¥' + (val / 10000).toFixed(2) + '万';
+     }
+   
+     return '¥' + val.toFixed(2);
+   },
+    toggleCheck(item) {
+	  item.checked = !item.checked;
+	  if(item.checked && !this.selectedBills.some(b => b.id === item.id)) {
+		  this.selectedBills.push(item);
+	  }else{
+		  // 取消勾选时从已选数组移除
+		  this.selectedBills = this.selectedBills.filter(b => b.id !== item.id);
+	  } 
+	      let sumFee = 0;
+		  this.selectedBills.forEach(b => sumFee += b.amount);
+		  this.sumAmount = sumFee;
+	},   
+	   updateSelected() {
+         if (!Array.isArray(this.bills)) return;
+         this.selectedBills = this.bills.filter(b => b.checked);
+       },
+    goPayTest(billList) {
+   if (!billList || billList.length === 0) return;
+
+  // 模拟后台生成订单返回
+  const order = {
+    timeStamp: String(Date.now()),          // 时间戳
+    nonceStr: Math.random().toString(36).substr(2, 15), // 随机字符串
+    package: 'prepay_id=TEST1234567890',    // 模拟预支付ID
+    signType: 'MD5',
+    paySign: 'TEST_SIGN',                   // 模拟签名
+  };
+
+  // 调用微信支付接口（测试）
+  uni.requestPayment({
+    ...order,
+    success: () => {
+      uni.showToast({ title: '支付成功（测试）', icon: 'success' });
+      // 清空勾选状态
+      billList.forEach(b => b.checked = false);
+      this.updateSelected();
+      // 刷新列表（可选）
+      this.loadBills();
+    },
+    fail: () => {
+      uni.showToast({ title: '支付失败（测试）', icon: 'none' });
+    }
+  });
+ },
+   async goPay(billList) {
+  if (!billList || billList.length === 0) return;
+
+  try {
+    // 1. 请求后台生成订单
+    const res = await uni.request({
+      url: 'https://api.example.com/payments/create',
+      method: 'POST',
+      data: {
+        userId: this.userId,
+        bills: billList.map(b => b.id),
+      }
+    });
+
+    if (res[1].data.code !== 0) {
+      uni.showToast({ title: res[1].data.msg, icon: 'none' });
+      return;
+    }
+
+    const order = res[1].data.data; // 后台返回的支付参数
+
+    // 2. 调用微信支付
+    uni.requestPayment({
+      timeStamp: order.timeStamp,
+      nonceStr: order.nonceStr,
+      package: order.package,
+      signType: order.signType,
+      paySign: order.paySign,
+      success: () => {
+        uni.showToast({ title: '支付成功', icon: 'success' });
+        // 更新勾选状态
+        billList.forEach(b => b.checked = false);
+        this.updateSelected();
+        // 刷新列表
+        this.loadBills();
+      },
+      fail: () => {
+        uni.showToast({ title: '支付失败', icon: 'none' });
+      }
+    });
+
+  } catch (error) {
+    console.error('支付请求失败', error);
+    uni.showToast({ title: '支付请求失败', icon: 'none' });
+  }
+},
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-.due-page {
+.pending-bill-page {
+  background: #f7f8fa;
   min-height: 100vh;
-  background-color: #f5f7fa;
+  padding-top: 175rpx; /* 自定义导航栏高度 */
-  display: flex;
-  flex-direction: column;
-  padding-top: 175rpx;
 }
 
 .scroll-content {
-  flex: 1;
+  padding: 20rpx;
-  padding: 20rpx 20rpx 140rpx;
+  box-sizing: border-box;
 }
 
-.record-list {
+.bill-item {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
-  gap: 20rpx;
+  background: #fff;
+  margin-bottom: 20rpx;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
 }
 
-.record-card {
+.bill-left {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
-  background-color: #fff;
-  border-radius: 16rpx;
-  padding: 24rpx;
-  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.04);
 
-  .check {
+  .bill-info {
-    margin-right: 20rpx;
-  }
-
-  .record-body {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    align-items: center;
-    width: 100%;
-  }
 
-  .info {
+    .bill-name {
-    flex: 1;
+      font-size: 28rpx;
-    .title {
-      font-size: 30rpx;
-      font-weight: 600;
       color: #333;
-      margin-bottom: 10rpx;
+      font-weight: bold;
     }
-    .sub {
+
-      font-size: 26rpx;
+    .bill-date {
-      color: #999;
+      font-size: 24rpx;
+      color: #666;
+      margin-top: 6rpx;
     }
   }
+}
 
-  .right {
+.bill-right {
-    text-align: right;
+  flex-direction: column;
-    .amount {
+  align-items: flex-end;
-      font-size: 32rpx;
+  width: 30%;
-      font-weight: bold;
+   .amount {
-      color: #ff7f00;
+	text-align: center;
-      margin-bottom: 10rpx;
+	font-size: 28rpx;
-    }
+	height: 28rpx;
+	line-height: 28rpx;
+    font-size: 28rpx;
+    color: #ff7f00;
   }
 
   .pay-btn {
-    background: linear-gradient(90deg, #007aff, #00aaff);
+    margin-top: 12rpx;
-    border: none;
+    padding: 0 40rpx;
+    height: 60rpx;
+    line-height: 60rpx;
+    border-radius: 30rpx; // 圆角
+    font-size: 28rpx;
     color: #fff;
-    font-size: 26rpx;
+	background: linear-gradient(90deg, #007aff, #00aaff);
-    border-radius: 36rpx;
+    text-align: center;
-    padding: 10rpx 28rpx;
+  }
+  .btn-text{
+	  padding-top: 13rpx;
   }
 }
 
-.bottom-bar {
+.batch-pay-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
+  height: 170rpx;
+  padding: 0 30rpx;
   background-color: #fff;
-  padding: 20rpx 40rpx;
+  display: flex;
-  box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.08);
+  align-items: center;
-
+  justify-content: space-between;
-  .bar-content {
+  box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08);
-    display: flex;
+  z-index: 999;
-    justify-content: space-between;
+  .batch-pay-bar-left{
-    align-items: center;
+	  font-size: 28rpx;
-    font-size: 28rpx;
+	  color: #333;
-    color: #333;
   }
  
-  .batch-pay-btn {
+  .batch-pay-bar-right{
-    background: linear-gradient(90deg, #007aff, #00aaff);
+	  flex-direction: column;
-    color: #fff;
+	  align-items: flex-end;
-    border: none;
+	  .sumAmount{
-    border-radius: 36rpx;
+	  	  font-size: 28rpx;
-    font-size: 28rpx;
+	  	  color: #ff7f00;
-    padding: 12rpx 40rpx;
+	  }
+	.bottomPayBtn {
+		    margin-top: 12rpx;
+		    height: 60rpx;
+		    line-height: 60rpx;
+		    padding: 0 40rpx;
+		    border-radius: 30rpx;
+		    font-size: 28rpx;
+		    font-weight: bold;
+		    text-align: center;
+			background: linear-gradient(90deg, #007aff, #00aaff);
+	}
   }
 }
 
+
 .empty {
-  margin-top: 100rpx;
+  margin-top: 200rpx;
+  text-align: center;
 }
 </style>