From aab3819a9d210ff2e961916161a2d932d7b927eb Mon Sep 17 00:00:00 2001
From: qiaomu <3520484422@qq.com>
Date: Wed, 8 May 2024 14:25:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90=E7=94=B5?=
=?UTF-8?q?=E8=B4=B9=E8=B4=A6=E5=8D=95=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
app.json | 5 +-
components/navigator/index.wxss | 1 -
pages/billDetail/index.js | 121 ++++++++++++++++++++++++++++++--
pages/billDetail/index.json | 11 ++-
pages/billDetail/index.wxml | 111 ++++++++++++++++++++++++++++-
pages/billDetail/index.wxss | 98 +++++++++++++++++++++++++-
pages/billList/index.js | 28 +-------
pages/rechargeRecord/index.wxss | 6 +-
service/report.js | 8 +++
9 files changed, 345 insertions(+), 44 deletions(-)
create mode 100644 service/report.js
diff --git a/app.json b/app.json
index 13da7c7..c97a109 100644
--- a/app.json
+++ b/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/billDetail/index"
-
+ "pages/updateInvoice/index"
],
"tabBar": {
"list": [
diff --git a/components/navigator/index.wxss b/components/navigator/index.wxss
index 74c0570..0dfa18f 100644
--- a/components/navigator/index.wxss
+++ b/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;
diff --git a/pages/billDetail/index.js b/pages/billDetail/index.js
index 896e558..9adfedf 100644
--- a/pages/billDetail/index.js
+++ b/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: tenement } = wx.getStorageSync('tenement')
+ const { id = "R00053677580943361", time = "2023-10" } = options;
+ 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}`
- // url: `http://localhost:3000/?report=${report}&tenement=${tenement}`
+ id, time, detail, meters: detail?.meters?.map(item => {
+ 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}`,
+ })
+ }
+ }
})
},
-
/**
* 生命周期函数--监听页面初次渲染完成
*/
diff --git a/pages/billDetail/index.json b/pages/billDetail/index.json
index 8835af0..89c5808 100644
--- a/pages/billDetail/index.json
+++ b/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"
}
\ No newline at end of file
diff --git a/pages/billDetail/index.wxml b/pages/billDetail/index.wxml
index dafb758..ea0d1c1 100644
--- a/pages/billDetail/index.wxml
+++ b/pages/billDetail/index.wxml
@@ -1,4 +1,109 @@
-
-
-
\ No newline at end of file
+
+
+
+
+
+
+ 所属园区：
+
+ {{ detail.park.name }}
+
+
+
+ 用电地址：
+
+ {{ detail.tenement.address }}
+
+
+
+ 账单周期：
+
+ {{ detail.comprehensive.startDate }} 至 {{ detail.comprehensive.endDate }}
+
+
+ 下载
+
+
+
+
+ 本期账单
+
+
+
+ 本期用电量
+ {{ detail.comprehensive.consumption }} 千瓦时
+
+
+
+
+ 本期电单价
+ {{ detail.comprehensive.price }} 元
+
+
+
+
+ 本期电费
+ {{ detail.comprehensive.total }} 元
+
+
+
+
+ 电费构成
+
+
+
+ （本月电量+本月线损电量）*电单价+摊薄公摊电费+摊薄调整电费
+
+
+ 电量明细
+
+
+
+
+ 电表地址
+ {{item.address}}
+
+
+ 起码
+ {{item.startNumber}}
+
+
+ 止码
+ {{item.endNumber}}
+
+
+ 倍率
+ {{item.displayRatio}}
+
+
+
+
+ 用电量
+ {{item.overall.amount}}
+
+
+
+ 线损电量
+ {{item.loss.amount}}
+
+
+ 公摊电量
+ {{item.publicAmount}}
+
+
+ 合计电量
+ {{item.finalAmount}}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/billDetail/index.wxss b/pages/billDetail/index.wxss
index ae6f84d..a988dbc 100644
--- a/pages/billDetail/index.wxss
+++ b/pages/billDetail/index.wxss
@@ -1 +1,97 @@
-/* pages/billDetail/index.wxss */
\ No newline at end of file
+/* 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;
+}
\ No newline at end of file
diff --git a/pages/billList/index.js b/pages/billList/index.js
index 2412005..3e7d64b 100644
--- a/pages/billList/index.js
+++ b/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({
- // 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}`,
- })
- }
- }
+ wx.navigateTo({
+ url: '/pages/billDetail/index?id=' + report,
})
},
/**
diff --git a/pages/rechargeRecord/index.wxss b/pages/rechargeRecord/index.wxss
index 8ac98d3..8e1a19d 100644
--- a/pages/rechargeRecord/index.wxss
+++ b/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-weight: 600;
+ font-size: 40rpx;
+ font-weight: 500;
margin-right: 30rpx;
}
diff --git a/service/report.js b/service/report.js
new file mode 100644
index 0000000..cc12aff
--- /dev/null
+++ b/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}`);
+}
\ No newline at end of file