zly/electricity_bill_calc_wx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

调整分包，完成隐私协议（样式待优化）

Browse Source
This commit is contained in:
qiaomu
2024-07-18 14:18:05 +08:00
parent 765b3ad111
commit 00384d7382
1045 changed files with 34254 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
childPackage/pages/billDetail/index.js Normal file
View File

@@ -0,0 +1,202 @@
import { getReportDetail } from "../../../service/report";
import { alertInfo, getPixelRatio } from "../../../utils/index";
import request from '../../../utils/request'
import * as echarts from '../../components/echarts/echarts';
const { OK } = request
// pages/billDetail/index.js
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 = "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({
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)' } },
],
}
]
};
this.init_pieCharts(option);
const that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
statusBarHeight : res.statusBarHeight,
navBarHeight : res.statusBarHeight , // 顶部导航栏高度为 44px
jiaonangheight: wx.getMenuButtonBoundingClientRect().height, // 胶囊高度
jiaonangwidth:wx.getMenuButtonBoundingClientRect().width,
})
},
})
},
init_pieCharts: function(options) {
this.selectComponent('#echarts').init((canvas, width, height) => {
// 初始化图表
const pieChart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: getPixelRatio(),
});
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.confirm) {
const result = wx.getAccountInfoSync();
const { envVersion } = result.miniProgram;
let api = ""
switch (envVersion) {
// 开发版
case 'develop':
wx.setClipboardData({
data: `https://zgd.hbhcbn.com/user-report/?report=${id}&tenement=${tenement}`,
})
break;
// 体验版
case 'trial':
wx.setClipboardData({
data: `https://zgd.hbhcbn.com/user-report/?report=${id}&tenement=${tenement}`,
})
break;
// 正式版
case 'release':
wx.setClipboardData({
data: `https://zgd.hbhcbn.com/user-report-h5/?report=${id}&tenement=${tenement}`,
})
break;
}
}
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

12
childPackage/pages/billDetail/index.json Normal file
View File

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

109
childPackage/pages/billDetail/index.wxml Normal file
View File

@@ -0,0 +1,109 @@
<!--pages/billDetail/index.wxml-->
<navigator title="{{ time }}电费账单" canBack="{{true}}" />
<view class="title" style="top: {{statusBarHeight + 46}}px">
<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:180rpx;"
id="echarts"
class='mychart-bar'
canvas-id="mychart-bar"
ec="{{ ec }}"
forceUseOldCanvas="{{false}}"
>
</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>

96
childPackage/pages/billDetail/index.wxss Normal file
View File

@@ -0,0 +1,96 @@
/* 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;
z-index: 999 !important;
}
.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;
}