账单详情页面
目录
分析内容
一.模板部分
描述了一个账单详情页面的布局，包含了账单的分类、描述、金额、资产、日期和地址等信息的展示，以及一些操作按钮。。
<template>
<view class="bill-detail-container">
<view class="b-detail-container" v-if="bill.category">
<view class="b-detail-container-content y-f">
<view class="b-detail-container-content-header">
<!-- image class="detail-image" :src="showCategoryIcon(bill.categoryIcon)" / -->
<i :class="['icon', 'iconfont', bill.category.iconPath]"/>
<view class="detail-category">{{ bill.category.name }}</view>
<view class="detail-desc">{{ bill.description }}</view>
</view>
<view class="b-detail-container-content-order-line x-f">
<view class="circle left-circle" />
<view class="order-line"> </view>
<view class="circle right-circle" />
</view>
<view class="b-detail-container-content-info">
<view :class="['detail-amount', amountClass]">
<view class="detail-amount-type">{{
bill.type == 0 ? "-" : "+"
}}</view>
<view class="detail-amount-text">
<view> {{ ShowAmount(bill.amount) }}</view>
<view class="detail-amount-text-char">￥</view>
</view>
</view>
<view class="detail-asset">{{ bill.asset.name }}</view>
<view class="detail-date">{{ FormatDt(bill.time) }}</view>
<view class="detail-address">{{ bill.address }}</view>
</view>
<mb-ba-end-split-line />
</view>
<view class="b-detail-copy" @click="onCopyAndToEdit">再记一笔</view>
<view class="bottom-operate">
<mb-ba-bottom-btn @click="onBtnClick"/> <!-- @rtap="onDel" -->
</view>
</view>
</view>
</template>逐条分析
- <view class="bill-detail-container">: 创建一个类名为bill-detail-container的视图容器，用于包裹整个账单详情的布局。
- <view class="b-detail-container" v-if="bill.category">: 条件渲染一个类名为b-detail-container的视图，只有在bill.category存在时才会渲染。
- <view class="b-detail-container-content y-f">: 创建一个类名为b-detail-container-content的视图，使用y-f类来设置其样式，可能是某种布局方式。
- <view class="b-detail-container-content-header">: 定义了账单详情头部的容器。
- <i :class="['icon', 'iconfont', bill.category.iconPath]"/>: 使用一个i标签来显示分类的图标，图标的类名由bill.category.iconPath动态决定。
- <view class="detail-category">{{ bill.category.name }}</view>: 显示账单分类的名称。
- <view class="detail-desc">{{ bill.description }}</view>: 显示账单的描述。
- <view class="b-detail-container-content-order-line x-f">: 创建一个类名为b-detail-container-content-order-line的视图，用于显示订单线条，x-f可能是用于设置水平布局的样式。
- <view class="circle left-circle" />: 创建一个类名为circle和left-circle的圆形视图，可能是用于装饰。
- <view class="order-line"> </view>: 创建一个类名为order-line的视图，用于显示订单线。
- <view class="circle right-circle" />: 创建另一个圆形视图，可能是用于装饰。
- <view class="b-detail-container-content-info">: 定义了账单详情信息的容器。
- <view :class="['detail-amount', amountClass]">: 动态绑定类名为detail-amount和amountClass的视图，amountClass可能是根据金额的正负动态变化。
- <view class="detail-amount-type">{{ bill.type == 0 ? "-" : "+" }}</view>: 根据bill.type的值显示减号或加号。
- <view class="detail-amount-text">: 显示金额的文本。
- <view class="detail-asset">{{ bill.asset.name }}</view>: 显示资产的名称。
- <view class="detail-date">{{ FormatDt(bill.time) }}</view>: 显示格式化后的账单时间。
- <view class="detail-address">{{ bill.address }}</view>: 显示账单的地址。
- <mb-ba-end-split-line />: 可能是一个自定义组件，用于显示分隔线。
- <view class="b-detail-copy" @click="onCopyAndToEdit">再记一笔</view>: 创建一个按钮，点击时调用onCopyAndToEdit方法，可能用于复制当前账单并编辑。
- <view class="bottom-operate">: 定义了底部操作区域的容器。
- <mb-ba-bottom-btn @click="onBtnClick"/>: 创建一个底部按钮，点击时调用onBtnClick方法。
- </template>: 这是Vue组件的模板部分的结束标签。
二.Vue组件的<script>部分
它定义了组件的数据、生命周期方法和一些行为方法。
<script>
// import { DEL_INDEX_BILL } from "@/store/type";
import { useBillStore } from "@/store/bill";
import currency from "@/common/utils/currency";
import * as datetime from "@/common/utils/datetime";
const bill = useBillStore();
export default {
data() {
return {
id: 0,
amountClass: "expend-color",
bill: {
amountFormat: "0.0",
},
};
},
onLoad(option) {
// console.log('onLoad:', option.id);
this.id = option.id;
},
onShow() {
this.getBillDetail();
},
methods: {
FormatDt(da){
let d = da.substring(0,16).replace('T',' ')
return d + ' ' + datetime.getCurWeek(new Date(d));
},
ShowAmount(n){
return currency(n)
},
showCategoryIcon(p){
if(p)
return "/static/pics/group/" + p + ".svg";
},
// 获取账单详情
getBillDetail() {
this.$api
.billDetail({
id: this.id,
})
.then((res) => {
if (res.data.code === 0) {
let result = res.data.result;
// console.log(result);
this.bill = result;
this.amountClass =
this.bill.type == 0 ? "expend-color" : "income-color";
}
})
.catch((err) => {
this.$tip.error("请求错误！");
});
},
//编辑账单
onBtnClick(e) {
if (e.isLeft) {
uni.navigateTo({
url:'./edit',
routeParams:{
id: this.bill.id
}
})
// this.$Router.push({ name: "bill-edit", params: { id: this.bill.id } });
}
if (e.isLeft==false)
{
let pages = getCurrentPages(); //当前页
let beforePage = pages[pages.length - 2];
let that = this;
this.$tip.choose("是否删除该条账单？", {}, "提示").then(async () => {
that.$api.delBill(this.id).then((res) => {
if (res.data.code === 0) {
// 如果是首页，进行数据处理
// console.log('beforePage:', beforePage);
if (beforePage && beforePage.route === "pages/index/index") {
// console.log("处理数据");
//this.$store.commit(DEL_INDEX_BILL, this.id);
bill.delIndexBill(this.id)
}
// this.$Router.back();
uni.navigateBack()
}
});
})
.catch((err)=>{
});
}
},
// 再来一笔账单
onCopyAndToEdit() {
uni.navigateTo({
url:'./edit',
routeParams:{
copyId: this.bill.id
}
})
//console.log('./edit?copyId='+this.bill.id);
// this.$Router.push({
// name: "bill-edit",
// params: { copyId: this.bill.id },
// });
},
},
};
</script>逐步解析1.导入依赖：
- 导入useBillStore：这是一个Vuex store的辅助函数，用于访问和修改账单相关的数据。
- 导入currency：一个工具函数，用于格式化货币显示。
- 导入datetime：包含日期时间处理的工具函数。
2.const bill = useBillStore();: 创建一个变量bill，通过useBillStore函数来访问账单store。
3.export default { ... }: 定义Vue组件的默认导出。
4.data(): 定义组件的响应式数据对象。
- id: 用于存储账单的ID。
- amountClass: 用于存储金额的颜色类，初始值为expend-color，表示支出。
- bill: 存储账单详情的对象。
5.onLoad(option) { ... }: Vue组件的生命周期钩子，当页面加载时触发。 从传入的option对象中获取id，并赋值给组件的id数据。
生命周期钩子 | Vue.js (vuejs.org)
6.onShow() { ... }: Vue组件的生命周期钩子，当页面显示时触发。 调用getBillDetail方法来获取账单详情。
7.methods: { ... }: 定义组件的方法。
- FormatDt(da) { ... }: 格式化日期时间的方法。
- ShowAmount(n) { ... }: 格式化金额显示的方法。
- showCategoryIcon(p) { ... }: 根据传入的参数生成图标的路径。
8.getBillDetail() { ... }: 获取账单详情的方法。 发送API请求到billDetail接口，获取账单数据。 根据响应结果更新组件的bill数据。 根据账单类型更新amountClass。
9.onBtnClick(e) { ... }: 处理按钮点击事件的方法。 根据点击事件的isLeft属性判断是编辑账单还是删除账单。 如果是编辑，导航到编辑页面，并传递账单ID。 如果是删除，弹出提示并发送API请求删除账单，如果是首页则更新首页数据。
10.onCopyAndToEdit() { ... }: 处理“再来一笔账单”操作的方法。 导航到编辑页面，并传递当前账单ID作为复制的源。
11.组件方法中使用了this.$api，这是一个假设的API调用函数，用于与后端服务通信。
vue中调接口的方式：this.$api、直接调用、axios-CSDN博客
12.组件方法中使用了this.$tip，这是一个假设的提示函数，用于显示操作结果或错误信息。
三.样式部分
它定义了账单详情页面的样式。
<style lang="scss" scope>
.icon{
font-size: 64rpx;
font-weight: 500;
}
.bill-detail-container {
display: flex;
align-items: center;
height: 90%;
.b-detail-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.b-detail-container-content {
justify-content: center;
width: 80%;
background-color: #ffffff;
border-radius: 50rpx 50rpx 0 0;
&-header {
margin-top: 70rpx;
margin-bottom: 30rpx;
text-align: center;
.detail-image {
border-radius: 50%;
height: 120rpx;
width: 120rpx;
}
.detail-category {
margin-top: 3%;
font-size: 50rpx;
font-weight: bold;
}
.detail-desc {
margin-top: 3%;
padding: 0 20rpx;
color: $grey-text-color;
font-size: 30rpx;
}
}
&-order-line {
width: 100%;
.circle {
width: 30rpx;
height: 30rpx;
border-radius: 50%;
background-color: $grey-bright-color;
}
.left-circle {
margin-left: -15rpx;
}
.right-circle {
margin-right: -15rpx;
}
.order-line {
width: 100%;
z-index: 99;
height: 4rpx;
background-image: linear-gradient(
to right,
$grey-bright-color 50%,
$grey-bright-color 50%,
transparent 0%
);
background-size: 28rpx 6rpx;
background-repeat: repeat-x;
}
}
&-info {
margin-top: 30rpx;
margin-bottom: 150rpx;
text-align: center;
.detail-amount {
display: flex;
justify-content: center;
font-size: 60rpx;
&-type {
font-weight: bold;
margin-right: 5rpx;
}
&-text {
display: flex;
align-items: baseline;
font-weight: bold;
margin-bottom: 10rpx;
&-char {
font-size: 40rpx;
}
}
}
.detail-asset {
color: $grey-text-color;
font-size: 30rpx;
}
.detail-date {
margin-top: 26rpx;
color: $grey-text-color;
font-size: 30rpx;
}
.detail-address {
margin-top: 26rpx;
color: $grey-text-color;
font-size: 30rpx;
}
}
&-bottom-line {
width: 100%;
margin-top: -15px;
}
}
.b-detail-copy {
font-weight: bold;
margin-top: 40rpx;
color: $primary-color;
border-bottom: 2rpx solid $primary-color;
padding-bottom: 3rpx;
}
}
.bottom-operate {
width: 100%;
position: absolute;
bottom: 0;
margin-bottom: 40rpx;
}
}
</style>
逐步分析- .icon { ... }: 定义了一个通用的图标样式，设置字体大小为64rpx，字体加粗为500。
- .bill-detail-container { ... }: 定义了账单详情容器的样式，使用Flex布局，垂直居中对齐，高度占可用空间的90%。
- .b-detail-container { ... }: 定义了内部详情容器的样式，为一个Flex列布局，水平和垂直居中对齐，宽度为100%。
- .b-detail-container-content { ... }: 定义了内容区域的样式，宽度为80%，背景颜色为白色，上部圆角为50rpx。
- &-header { ... }: & 表示引用父选择器.b-detail-container-content，定义了头部区域的样式，包括外边距和文本对齐方式。
- .detail-image { ... }: 如果存在.detail-image类，设置为圆形，高度和宽度为120rpx。
- .detail-category { ... }: 设置分类名称的样式，包括上边距、字体大小和加粗。
- .detail-desc { ... }: 设置描述文本的样式，包括上边距、内边距、字体大小和颜色。
- &-order-line { ... }: 再次使用&引用父选择器，定义了订单线条区域的样式。【sass父选择器 &简介以及使用方法】_sass 父级选择器-CSDN博客 【SCSS入门】5、嵌套规则_scss 嵌套-CSDN博客
- .circle { ... }: 定义了圆形点的通用样式，包括尺寸、圆角和背景颜色。
- .left-circle { ... } 和 .right-circle { ... }: 分别定义了左右圆形点的外边距，使它们突出显示。
- .order-line { ... }: 定义了订单线条的样式，使用线性渐变和背景平铺。
- &-info { ... }: 引用父选择器，定义了信息区域的样式，包括外边距、文本对齐和字体大小。【SCSS入门】5、嵌套规则_scss 嵌套-CSDN博客
- .detail-amount { ... }: 定义了金额的样式，使用Flex布局，包括金额类型和文本的样式。
- .detail-asset, .detail-date, .detail-address { ... }: 分别定义了资产名称、日期和地址的样式，包括颜色和字体大小。
- &-bottom-line { ... }: 引用父选择器，定义了内容区域底部线条的宽度和上边距。【SCSS入门】5、嵌套规则_scss 嵌套-CSDN博客
- .b-detail-copy { ... }: 定义了“再记一笔”按钮的样式，包括字体加粗、颜色、下划线和内边距。
- .bottom-operate { ... }: 定义了页面底部操作区域的样式，使用绝对定位，宽度100%，底部外边距。
嵌套规则
变量的使用
【SCSS入门】4、变量的使用_scss变量使用-CSDN博客
扫一扫
2768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
