完成第一部分

pages/personCenter/billingDetails/billingDetails.js

@@ -0,0 +1,66 @@
+// pages/personCenter/billingDetails/billingDetails.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    items: [null, null, null, null]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/personCenter/billingDetails/billingDetails.json

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

pages/personCenter/billingDetails/billingDetails.wxml

@@ -0,0 +1,19 @@
+<view class="flex-col justify-start page">
+  <view class="flex-col justify-start section">
+    <view class="flex-col section_2">
+      <text class="self-start text">账单明细</text>
+      <view class="flex-col self-stretch">
+        <view class="flex-col list-item" wx:for="{{items}}" wx:for-item="item" wx:for-index="index" wx:key="index">
+          <view class="flex-row justify-between items-baseline">
+            <text class="font text_2">银行卡</text>
+            <text class="font_2">￥2.00</text>
+          </view>
+          <view class="flex-row justify-between items-center group mt-15">
+            <text class="font_4 text_3">2025-10-20 18:45:15</text>
+            <text class="font_3">待审核</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

pages/personCenter/billingDetails/billingDetails.wxss

@@ -0,0 +1,66 @@
+.mt-15 {
+  margin-top: 28.85rpx;
+}
+.page {
+  background-color: #ffffff;
+  width: 100%;
+  overflow: hidden;
+  height: 100%;
+}
+.section {
+  padding: 88.46rpx 0 878.85rpx;
+  background-image: linear-gradient(180deg, #ffa74f -29.4%, #ffffff1a 115.7%);
+}
+.section_2 {
+  margin-left: 50rpx;
+  margin-right: 38.46rpx;
+  padding: 34.62rpx 0 25.77rpx;
+  background-color: #ffffff;
+  border-radius: 26.33rpx;
+  box-shadow: 0rpx 3.85rpx 7.69rpx #00000040;
+}
+.text {
+  margin-left: 30.77rpx;
+  color: #000000;
+  font-size: 30.77rpx;
+  font-family: SourceHanSansCN;
+  line-height: 28.65rpx;
+}
+.list-item {
+  padding: 30.77rpx 15.38rpx 30.77rpx 30.77rpx;
+  border-bottom: solid 1.92rpx #e5e5e5;
+}
+.font {
+  font-size: 26.92rpx;
+  font-family: SourceHanSansCN;
+  line-height: 24.98rpx;
+  color: #000000;
+}
+.text_2 {
+  line-height: 24.88rpx;
+}
+.font_2 {
+  padding-right: 15rpx;
+  font-size: 26.92rpx;
+  font-family: SourceHanSansCN;
+  line-height: 20.44rpx;
+  color: #000000;
+}
+.group {
+  margin-right: 11.54rpx;
+}
+.font_4 {
+  font-size: 23.08rpx;
+  font-family: SourceHanSansCN;
+  line-height: 26.92rpx;
+  color: #949494;
+}
+.text_3 {
+  width: 311.54rpx;
+}
+.font_3 {
+  font-size: 26.92rpx;
+  font-family: SourceHanSansCN;
+  line-height: 24.98rpx;
+  color: #ff5733;
+}