4/18 样式修改，缴费部分页面按照ui重做
This commit is contained in:
wangyuxin
@@ -1,21 +1,34 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="缴费记录" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
|
||||
:border="false">
|
||||
<uni-nav-bar title="缴费记录" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
<Loading mask="true" click="true" ref="loading"></Loading>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
|
||||
<!-- 累计缴费 -->
|
||||
<view class="total-box">
|
||||
<view class="total-title">累计缴费</view>
|
||||
<view class="total-price">¥800.00</view>
|
||||
|
||||
<view class="top-box">
|
||||
<view class="total-title">累计缴费</view>
|
||||
<view class="total-price">¥800.00</view>
|
||||
</view>
|
||||
<!-- 折线图 Canvas -->
|
||||
<canvas canvas-id="chargeChart" class="chart-canvas"></canvas>
|
||||
<!-- <canvas canvas-id="chargeChart" class="chart-canvas"></canvas> -->
|
||||
|
||||
<view class="chart-box">
|
||||
<!-- 循环6个月柱状图 -->
|
||||
<view class="chart-item" v-for="(item,index) in chartData" :key="index">
|
||||
<!-- 柱子顶部金额文字 -->
|
||||
<view class="chart-label">{{ item.price }}元</view>
|
||||
<!-- 柱状图柱子 -->
|
||||
<view class="chart-bar" :style="{ height: barHeight(item.price) }"></view>
|
||||
<!-- 底部月份文字 -->
|
||||
<view class="chart-month">{{ item.month }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 缴费明细 -->
|
||||
@@ -29,7 +42,7 @@
|
||||
<view class="item-list">
|
||||
<view class="bill-item" v-for="bill in item.list" :key="bill.id">
|
||||
<view class="bill-icon">
|
||||
<text class="icon">{{ bill.icon }}</text>
|
||||
<image class="iconStyle" :src="bill.icon"></image>
|
||||
</view>
|
||||
<view class="bill-info">
|
||||
<view class="name">{{ bill.name }}</view>
|
||||
@@ -59,7 +72,7 @@
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
// 自动按月份分组
|
||||
monthGroups() {
|
||||
let map = {}
|
||||
@@ -78,7 +91,7 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
@@ -96,14 +109,40 @@
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
|
||||
// 折线图数据
|
||||
// 完全对应你图片的数据
|
||||
chartData: [{
|
||||
month: '1月',
|
||||
price: 250
|
||||
},
|
||||
{
|
||||
month: '2月',
|
||||
price: 130
|
||||
},
|
||||
{
|
||||
month: '3月',
|
||||
price: 220
|
||||
},
|
||||
{
|
||||
month: '4月',
|
||||
price: 250
|
||||
},
|
||||
{
|
||||
month: '5月',
|
||||
price: 100
|
||||
},
|
||||
{
|
||||
month: '6月',
|
||||
price: 130
|
||||
}
|
||||
],
|
||||
maxPrice: 250, // 最大值（基准高度）
|
||||
barMaxHeight: 300, // 柱子最大高度rpx
|
||||
// canvas折线图数据
|
||||
chart: {
|
||||
months: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
values: [100, 140, 230, 100, 130, 100]
|
||||
},
|
||||
|
||||
// ====================== 核心：5月6月放在一个list里 ======================
|
||||
billList: [
|
||||
// 5月数据
|
||||
{
|
||||
@@ -112,7 +151,7 @@
|
||||
name: '燃气费',
|
||||
account: '123123123123',
|
||||
amount: 25,
|
||||
icon: ''
|
||||
icon: "/static/propertyImgs/gas.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@@ -120,7 +159,7 @@
|
||||
name: '水费',
|
||||
account: '123123123123',
|
||||
amount: 25,
|
||||
icon: ''
|
||||
icon: "/static/propertyImgs/water.png",
|
||||
},
|
||||
|
||||
// 6月数据
|
||||
@@ -130,7 +169,7 @@
|
||||
name: '燃气费',
|
||||
account: '123123123123',
|
||||
amount: 30,
|
||||
icon: ''
|
||||
icon: "/static/propertyImgs/gas.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
@@ -138,7 +177,7 @@
|
||||
name: '水费',
|
||||
account: '123123123123',
|
||||
amount: 10,
|
||||
icon: ''
|
||||
icon: "/static/propertyImgs/water.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
@@ -146,7 +185,7 @@
|
||||
name: '电费',
|
||||
account: '123123123123',
|
||||
amount: 30,
|
||||
icon: '⚡'
|
||||
icon: "/static/propertyImgs/electric.png",
|
||||
}
|
||||
]
|
||||
|
||||
@@ -156,6 +195,11 @@
|
||||
|
||||
|
||||
methods: {
|
||||
// 计算每个柱子自适应高度（按金额比例换算）
|
||||
barHeight(price) {
|
||||
const height = (price / this.maxPrice) * this.barMaxHeight
|
||||
return `${height}rpx`
|
||||
},
|
||||
drawLineChart() {
|
||||
const ctx = uni.createCanvasContext('chargeChart', this)
|
||||
const canvasPage = uni.getSystemInfoSync();
|
||||
@@ -241,7 +285,7 @@
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f1f6;
|
||||
// background: #f2f1f6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -251,78 +295,94 @@
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||
}
|
||||
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
|
||||
.total-box {
|
||||
padding: 15px;
|
||||
/* margin-bottom: 10px; */
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.top-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.total-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 24px;
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.chart-canvas {
|
||||
width: calc(100vw - 30px);
|
||||
width: calc(100vw - 60rpx);
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
padding: 0 15px;
|
||||
padding: 10rpx 0rpx;
|
||||
}
|
||||
|
||||
.month-group {
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.month-group:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom: 2rpx solid #f2f2f2;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.month-title {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.bill-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 30rpx;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.bill-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0rpx;
|
||||
padding-bottom: 0rpx;
|
||||
}
|
||||
|
||||
.bill-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #e6efff;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
/* background: #e6efff; */
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #4080FF;
|
||||
margin-right: 12px;
|
||||
font-size: 18px;
|
||||
margin-right: 24rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.iconStyle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bill-info {
|
||||
@@ -330,22 +390,68 @@
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.account {
|
||||
font-size: 12px;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.bill-price {
|
||||
font-size: 16px;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}.status-bar{
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
/* 图表外层容器 横向排列 */
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: 444rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
/* padding: 40rpx 20rpx; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 单个柱子单元：垂直排列 文字+柱子+月份 */
|
||||
.chart-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 120rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
/* 顶部金额标签 */
|
||||
.chart-label {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 蓝色圆角柱子 完全还原原图顶部圆角 */
|
||||
.chart-bar {
|
||||
width: 40rpx;
|
||||
background: #3388ff;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
/* 只有顶部圆角！和原图一模一样 */
|
||||
}
|
||||
|
||||
/* 底部月份文字 */
|
||||
.chart-month {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user