初步完成电费账单列表

app.json

@@ -1,6 +1,7 @@
 {
   "pages": [
     "pages/home/index",
+    "pages/billDetail/index",
     "pages/billList/index",
     "pages/electricQuery/index",
     "pages/rechargeRecord/index",
@@ -20,9 +21,7 @@
     "pages/editInvoice/index",
     "pages/rechargeDetail/index",
     "pages/agreements/index",
-    "pages/updateInvoice/index",
+    "pages/updateInvoice/index"
-    "pages/billDetail/index"
-
   ],
   "tabBar": {
     "list": [

components/navigator/index.wxss

@@ -3,7 +3,6 @@
   overflow: hidden;
   display: flex;
   align-items: flex-end;
-  position: relative;
   background-color: var(--deep-green);
   color: #fff;
   position: fixed;

pages/billDetail/index.js

@@ -1,3 +1,9 @@
+import { getReportDetail } from "../../service/report";
+import { alertInfo } from "../../utils/index";
+import request from '../../utils/request'
+import * as echarts from '../../components/echarts/echarts';
+const { OK } = request
+
 // pages/billDetail/index.js
 Page({
 
@@ -5,21 +11,124 @@ Page({
    * 页面的初始数据
    */
   data: {
+    id: "",
+    time: "",
+    detail: {},
+    meters: [],
+    header1: [
+      { key: 'address', title: '电表地址' },
+      { title: '起码',renderBody: (item) => { return item?.startNumber } },
+      { title: '止码',renderBody: (item) => { return item?.endNumber } },
+      { title: '倍率',renderBody: (item) => { return item?.displayRatio } },
+    ],
+    header2: [
+      { title: '用电量', renderBody: (item) => item?.overall?.amount },
+      { title: '线损电量',renderBody: (item) => item?.loss?.amount },
+      { title: '公摊电量',renderBody: (item) => item?.publicAmount },
+      { title: '合计电量',renderBody: (item) => { 
         
+      } },
+    ]
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    const { id: report } = options;
+    const { id = "R00053677580943361", time = "2023-10" } = options;
-    const { id: tenement } = wx.getStorageSync('tenement')
+    this.init(id, time);
+  },
+  async init(id, time) {
+    const { code, message, detail } = await getReportDetail(id)
+    if (code !== OK) {
+      alertInfo(message)
+      return;
+    }
     this.setData({
-      url: `https://zgd.hbhcbn.com/h5/?report=${report}&tenement=${tenement}`
+      id, time, detail, meters: detail?.meters?.map(item => {
-      // url: `http://localhost:3000/?report=${report}&tenement=${tenement}`
+        const finalAmount = Number(item?.overall?.amount || 0) + Number(item?.loss?.amount || 0) + Number(item?.publicAmount || 0)
+        item.finalAmount = Number(finalAmount).toFixed(2)
+        return item;
+      })
+    })
+    const option = {
+      tooltip: {
+        trigger: 'item'
+      },
+      legend: {
+        top: 10,
+        left: 'center'
+      },
+      label: {
+        alignTo: 'edge',
+        formatter: '{name|{b}}\n{value|{c} }',
+        minMargin: 5,
+        edgeDistance: 10,
+        lineHeight: 15,
+        rich: {
+          time: {
+            fontSize: 10,
+            color: '#999'
+          }
+        }
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: '50%',
+          data: [
+            { value: 18.3, name: '本期线损电量', itemStyle: { color: 'rgb(104,187,196)' } },
+            { value: 187.56, name: '本期用电量', itemStyle: { color: 'rgb(80,135,236)' } },
+  
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }
+      ]
+    };
+    this.init_pieCharts(option);
+  },
+  init_pieCharts: function(options) {
+    this.selectComponent('#echarts').init((canvas, width, height) => {
+      // 初始化图表
+      const pieChart = echarts.init(canvas, null, {
+        width: width,
+        height: height
+      });
+      
+      pieChart.setOption(options);
+      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
+      return pieChart;
+    });
+  },
+  download() {
+    const { id: tenement } = wx.getStorageSync('tenement')
+    const { id } = this.data;
+    wx.showModal({
+      title: '提示',
+      content: '为了您更好的体验，请复制链接，通过浏览器打开下载',
+      showCancel: true,
+      cancelText: '关闭',
+      confirmText: '复制链接',
+
+      complete: (res) => {
+        if (res.cancel) {
+          
+        }
+    
+        if (res.confirm) {
+          wx.setClipboardData({
+            data: `https://zgd.hbhcbn.com/h5/?report=${id}&tenement=${tenement}`,
+          })
+        }
+      }
     })
   },
-
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

pages/billDetail/index.json

@@ -1,3 +1,12 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "navigator": "/components/navigator/index",
+    "avatar": "/components/avatar/index",
+    "van-row": "@vant/weapp/row/index",
+    "van-col": "@vant/weapp/col/index",
+    "echarts": "/components/echarts/ec-canvas",
+    "table": "/components/table/table",
+    "van-button": "@vant/weapp/button/index"
+  },
+  "navigationStyle": "custom"
 }

pages/billDetail/index.wxml

@@ -1,4 +1,109 @@
 <!--pages/billDetail/index.wxml-->
-<view>
+<navigator title="{{ time }}电费账单" canBack="{{true}}" />
-  <web-view src="{{url}}"/>
+<view class="title">
+  <avatar text="{{detail.tenement.shortName}}"  />
+  <view class="titleContent">
+    <view class="park">
+      <view class="label">
+        所属园区：
+      </view>
+      <view class="value"> {{ detail.park.name }} </view>
+    </view>
+    <view class="address">
+      <view class="label">
+        用电地址：
+      </view>
+      <view class="value"> {{ detail.tenement.address }} </view>
+    </view>
+    <view class="time">
+      <view class="label">
+        账单周期：
+      </view>
+      <view class="value"> {{ detail.comprehensive.startDate }} 至 {{  detail.comprehensive.endDate }} </view>
+    </view>
+  </view>
+  <van-button type="info" size="small" class="download" bind:click="download">下载</van-button>
 </view>
+
+<view class="wrapper">
+  <view class="line"></view>
+  <view class="contentTitle"> 本期账单 </view>
+  <van-row gutter="10">
+    <van-col span="8">
+      <view class="colContent">
+        <view class="colContentTitle">本期用电量</view>
+        <view class="colContentValue"> {{ detail.comprehensive.consumption }} 千瓦时 </view>
+      </view>
+    </van-col>
+    <van-col span="8">
+      <view class="colContent">
+        <view class="colContentTitle">本期电单价</view>
+        <view class="colContentValue"> {{ detail.comprehensive.price }} 元 </view>
+      </view>
+    </van-col>
+    <van-col span="8">
+      <view class="colContent">
+        <view class="colContentTitle">本期电费</view>
+        <view class="colContentValue"> {{ detail.comprehensive.total }} 元 </view>
+      </view>
+    </van-col>
+  </van-row>
+  <view class="line"></view>
+  <view class="contentTitle"> 电费构成 </view>
+  <echarts 
+    style="width:200rpx;height:200rpx;" 
+    id="echarts" 
+    class='mychart-bar' 
+    canvas-id="mychart-bar" 
+    ec="{{ ec }}"    
+    forceUseOldCanvas="{{true}}"
+  >
+  </echarts>
+  <view class="tooltip">
+    （本月电量+本月线损电量）*电单价+摊薄公摊电费+摊薄调整电费
+  </view>
+  <view class="line"></view>
+  <view class="contentTitle"> 电量明细 </view>
+  <view class="tableWrapper" wx:for="{{meters}}">
+    <view style="margin: 20rpx 0; background-color: #fff;">
+      <van-row custom-style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
+        <van-col span="6">
+          <view class="tableTitle"> 电表地址 </view>
+          <view class="tableContent"> {{item.address}} </view>
+        </van-col>
+        <van-col span="6">
+          <view class="tableTitle"> 起码 </view>
+          <view class="tableContent"> {{item.startNumber}} </view>
+        </van-col>
+        <van-col span="6">
+          <view class="tableTitle"> 止码 </view>
+          <view class="tableContent"> {{item.endNumber}} </view>
+        </van-col>
+        <van-col span="6">
+          <view class="tableTitle"> 倍率 </view>
+          <view class="tableContent"> {{item.displayRatio}} </view>
+        </van-col>
+      </van-row>
+      <van-row>
+        <van-col span="6">
+          <view class="tableTitle"> 用电量 </view>
+          <view class="tableContent"> {{item.overall.amount}} </view>
+
+        </van-col>
+        <van-col span="6">
+          <view class="tableTitle"> 线损电量 </view>
+          <view class="tableContent"> {{item.loss.amount}} </view>
+        </van-col>
+        <van-col span="6">
+          <view class="tableTitle"> 公摊电量 </view>
+          <view class="tableContent"> {{item.publicAmount}} </view>
+        </van-col>
+        <van-col span="6">
+          <view class="tableTitle"> 合计电量 </view>
+          <view class="tableContent"> {{item.finalAmount}} </view>
+        </van-col>
+      </van-row>
+    </view>
+  </view>
+</view>
+<view style="height: 20rpx;"></view>

pages/billDetail/index.wxss

@@ -1 +1,97 @@
 /* pages/billDetail/index.wxss */
+.title {
+  padding: 30rpx;
+  box-sizing: border-box;
+  background: linear-gradient(to bottom, rgb(76,151,131), rgb(167,203,193) );
+  display: flex;
+  align-items: center;
+  position: sticky;
+  top: 66px;
+  z-index: 99;
+}
+
+.titleContent {
+  margin-left: 30rpx;
+  font-size: 32rpx;
+}
+
+.titleContent .park, .titleContent .address, .titleContent .time {
+  display: flex;
+}
+
+.titleContent .address, .titleContent .time {
+  margin-top: 20rpx;
+}
+
+.titleContent .label {
+  width: 170rpx;
+}
+
+.titleContent .value {
+  flex: 1;
+}
+
+.line {
+  height: 0.5rpx; 
+  background-color: rgba(5, 5, 5, 0.06);
+  margin-top: 30rpx;
+  margin-bottom: 20rpx;
+}
+
+page {
+  background-color: var(--transparent-green);
+}
+
+.contentTitle {
+  font-size: 34rpx;
+  font-weight: 600;
+  margin-top: 10rpx;
+  margin-bottom: 30rpx;
+}
+
+.colContent {
+  background-color: #fff;
+  border-radius: 24rpx;
+  font-size: 30rpx;
+}
+
+.colContentTitle {
+  padding: 30rpx 0;
+  text-align: center;
+  font-weight: 500;
+}
+.colContentValue {
+  padding-bottom: 30rpx;
+  text-align: center;
+  overflow: hidden;
+}
+
+.tooltip {
+  font-size: 30rpx;
+  color: rgb(136, 132, 132);
+}
+
+.tableTitle {
+  background-color: rgb(242,242,242);
+  font-size: 30rpx;
+  text-align: center;
+  padding: 6rpx 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.tableContent {
+  font-size: 30rpx;
+  text-align: center;
+  padding: 6rpx 10rpx;
+  width: 100%;
+  background-color: #fff;
+  box-sizing: border-box;
+  flex: 1;
+}
+
+.download {
+  position: absolute;
+  top: 20rpx;
+  right: 20rpx;
+}

pages/billList/index.js

@@ -33,32 +33,8 @@ Page({
   },
   jumpToDetail(e) {
     const { id: report } = e.currentTarget.dataset
-    const { id: tenement } = wx.getStorageSync('tenement')
+    wx.navigateTo({
-    // wx.navigateTo({
+      url: '/pages/billDetail/index?id=' + report,
-    //   url: '/pages/billDetail/index?id=' + report,
-    // })
-    // const { id: tenement } = wx.getStorageSync('tenement')
-    // wx.navigateTo({
-    //   url: `https://zgd.hbhcbn.com/h5/?report=${report}&tenement=${tenement}`,
-    // })
-    wx.showModal({
-      title: '提示',
-      content: '为了您更好的体验，请复制链接，通过浏览器打开下载',
-      showCancel: true,
-      cancelText: '关闭',
-      confirmText: '复制链接',
-
-      complete: (res) => {
-        if (res.cancel) {
-          
-        }
-    
-        if (res.confirm) {
-          wx.setClipboardData({
-            data: `https://zgd.hbhcbn.com/h5/?report=${report}&tenement=${tenement}`,
-          })
-        }
-      }
     })
   },
   /**

pages/rechargeRecord/index.wxss

@@ -32,15 +32,15 @@
   border-bottom: 0;
 }
 .code {
-  font-size: 36rpx;
+  font-size: 34rpx;
 }
 .time {
   margin-top: 16rpx;
   font-size: 28rpx;
 }
 .money {
-  font-size: 42rpx;
+  font-size: 40rpx;
-  font-weight: 600;
+  font-weight: 500;
   margin-right: 30rpx;
 }
 

service/report.js

@@ -0,0 +1,8 @@
+import apis from '../utils/request';
+const { GET, POST, PUT, DELETE } = apis
+
+// 获取电费账单
+export const getReportDetail = async function(id) {
+  const tenement = wx.getStorageSync('tenement')
+  return await GET(`/report/${id}/tenement/${tenement?.id}`);
+}