账单支持峰谷

pages/billMeterDetail/index.js

@@ -0,0 +1,87 @@
+// pages/billMeterDetail/index.js
+import { getRoundNumber } from "../../utils/index"
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    data: {},
+    headers: [
+      { key: 'type', title: '' },
+      { title: '尖',renderBody: (item) => { return item?.sharp } },
+      { title: '峰',renderBody: (item) => { return item?.peak } },
+      { title: '平',renderBody: (item) => { return item?.flat } },
+      { title: '谷',renderBody: (item) => { return item?.valley } },
+    ],
+    list: []
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    const data =  JSON.parse(options.data) || {}
+    this.setData({
+      data: data,
+      list: [
+        { type: "起码", sharp: data.startSharp, peak: data.startPeak, flat: data.startFlat, valley: data.startValley },
+        { type: "止码", sharp: data.endSharp, peak: data.endPeak, flat: data.endFlat, valley: data.endValley },
+        { type: "退补电量", sharp: data.refundSharp, peak: data.refundPeak, flat: data.refundFlat, valley: data.refundValley },
+        { type: "从表电量", sharp: getRoundNumber(data.nestSharp), peak: getRoundNumber(data.nestPeak), flat: getRoundNumber(data.nestFlat), valley: getRoundNumber(data.nestValley) },
+        { type: "电度电量", sharp: getRoundNumber(data?.critical?.amount), peak: getRoundNumber(data.peak?.amount), flat: getRoundNumber(data.flat?.amount), valley: getRoundNumber(data.valley?.amount) },
+        { type: "分时单价", sharp: data.critical?.price, peak: data.peak?.price, flat: data.flat?.price, valley: data.valley?.price },
+        { type: "电费", sharp: getRoundNumber(data.chargeSharp), peak: getRoundNumber(data.chargePeak), flat: getRoundNumber(data.chargeFlat), valley: getRoundNumber(data.chargeValley) },
+      ]
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/billMeterDetail/index.json

@@ -0,0 +1,10 @@
+{
+  "usingComponents": {
+    "navigator": "/components/navigator/index",
+    "van-row": "@vant/weapp/row/index",
+    "van-col": "@vant/weapp/col/index",
+    "van-field": "@vant/weapp/field/index",
+    "table": "/components/table/table"
+  },
+  "navigationStyle": "custom"
+}

pages/billMeterDetail/index.wxml

@@ -0,0 +1,45 @@
+<!--pages/billMeterDetail/index.wxml-->
+<navigator title="详情" canBack="{{true}}" />
+<view class="contentWrapper">
+    <van-field
+        label="电表编号"
+        readonly="{{true}}"
+        border="{{false}}"
+        custom-style="padding-left: 0; padding-right: 0;"
+        title-width="132rpx"
+        value="{{data.meterNo}}"
+    />
+    <van-field
+        label="电表地址"
+        readonly="{{true}}"
+        custom-style="padding-left: 0; padding-right: 0;"
+        title-width="132rpx"
+        border="{{false}}"
+        value="{{data.address}}"
+    />
+    <van-field
+        label="倍率"
+        readonly="{{true}}"
+        border="{{false}}"
+        custom-style="padding-left: 0; padding-right: 0;"
+        title-width="132rpx"
+        value="{{data.ratio}}"
+    />
+    <view class="table">
+        <table header="{{headers}}" list="{{list}}"  />
+    </view>
+    <view class="total">
+        <van-row>
+            <van-col span="12">
+                <view class="totalNumber">
+                    电度电量：{{data.overall.amount}}
+                </view>
+            </van-col>
+            <van-col span="12">
+                <view class="totalNumber">
+                    电度电费：{{data.overall.fee}}
+                </view>
+            </van-col>
+        </van-row>
+    </view>
+</view>

pages/billMeterDetail/index.wxss

@@ -0,0 +1,22 @@
+/* pages/billMeterDetail/index.wxss */
+.infoItem {
+    word-break: break-all;
+}
+
+.contentWrapper {
+    margin: 20rpx;
+}
+
+.table {
+    border: 1rpx solid rgba(204,204,204,.5);
+    margin-bottom: 40rpx;
+}
+
+.total {
+    padding-top: 30rpx;
+    padding-bottom: 40rpx;
+}
+
+.totalNumber {
+    word-break: break-all;
+}