init
This commit is contained in:
quantulr
9
miniprogram/pages/index/index.json
Normal file
9
miniprogram/pages/index/index.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"t-fab": "tdesign-miniprogram/fab/fab",
|
||||
"t-collapse": "tdesign-miniprogram/collapse/collapse",
|
||||
"t-collapse-panel": "tdesign-miniprogram/collapse-panel/collapse-panel",
|
||||
"statistics-card": "/components/statistics-card"
|
||||
},
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
118
miniprogram/pages/index/index.scss
Normal file
118
miniprogram/pages/index/index.scss
Normal file
@ -0,0 +1,118 @@
|
||||
/* pages/index/index.wxss */
|
||||
page {
|
||||
padding: 32rpx 0;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.home-page {
|
||||
.t-fab {
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #ccc;
|
||||
margin: 36rpx 32rpx;
|
||||
}
|
||||
.list {
|
||||
margin: 0 32rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 32rpx;
|
||||
.card {
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
position: relative;
|
||||
// aspect-ratio: 1/1;
|
||||
min-height: 300rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 18rpx;
|
||||
padding: 18rpx;
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: -24rpx;
|
||||
right: -24rpx;
|
||||
}
|
||||
.field {
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
.indicator {
|
||||
margin-top: 12rpx;
|
||||
height: 24rpx;
|
||||
width: 8rpx;
|
||||
background-color: #ea7e41;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.content {
|
||||
margin-top: 6rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
font-size: large;
|
||||
}
|
||||
.value {
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(1) {
|
||||
.indicator {
|
||||
background-color: #ea7e41;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
.indicator {
|
||||
background-color: #12b3a8;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
.indicator {
|
||||
background-color: #dc7d85;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(4) {
|
||||
.indicator {
|
||||
background-color: #e0d2fd;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(5) {
|
||||
.indicator {
|
||||
background-color: #dc7d85;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shake {
|
||||
animation: shake-crazy 1s infinite linear;
|
||||
}
|
||||
}
|
||||
.to-login {
|
||||
height: 40vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake-crazy {
|
||||
0% {
|
||||
transform: translate(0px, 0px) rotate(0deg);
|
||||
}
|
||||
17% {
|
||||
transform: translate(0.2px, 0.2px) rotate(2deg);
|
||||
}
|
||||
34% {
|
||||
transform: translate(-0.2px, -0.2px) rotate(-2deg);
|
||||
}
|
||||
51% {
|
||||
transform: translate(0px, -0.3px) rotate(0deg);
|
||||
}
|
||||
68% {
|
||||
transform: translate(0.2px, -0.2px) rotate(2deg);
|
||||
}
|
||||
85% {
|
||||
transform: translate(-0.2px, 0.2px) rotate(-2deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0px, 0.3px) rotate(0deg);
|
||||
}
|
||||
}
|
||||
210
miniprogram/pages/index/index.ts
Normal file
210
miniprogram/pages/index/index.ts
Normal file
@ -0,0 +1,210 @@
|
||||
import { getDict } from "../../api/dict";
|
||||
import {
|
||||
deleteFinance,
|
||||
getFinanceList,
|
||||
getStatistics,
|
||||
} from "../../api/finance";
|
||||
|
||||
// pages/index/index.ts
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
authToken: undefined,
|
||||
statistics: {
|
||||
amount: {
|
||||
label: "账户余额",
|
||||
value: 0,
|
||||
},
|
||||
income: {
|
||||
label: "当月入账",
|
||||
value: 0,
|
||||
},
|
||||
expenditure: {
|
||||
label: "当月出账",
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
loading: false,
|
||||
total: 0,
|
||||
completed: false,
|
||||
deleteIndex: -1,
|
||||
list: [],
|
||||
types: [],
|
||||
},
|
||||
async getList() {
|
||||
this.setData({
|
||||
loading: true,
|
||||
});
|
||||
const { queryParams } = this.data;
|
||||
try {
|
||||
const resp: any = await getFinanceList(queryParams);
|
||||
let completed = false;
|
||||
if (
|
||||
Math.ceil(resp.total / this.data.queryParams.pageSize) ==
|
||||
this.data.queryParams.pageNum
|
||||
) {
|
||||
completed = true;
|
||||
}
|
||||
this.setData({
|
||||
completed,
|
||||
total: resp.total,
|
||||
list: resp.rows,
|
||||
});
|
||||
if (!completed) {
|
||||
this.setData({
|
||||
["queryParams.pageNum"]: this.data.queryParams.pageNum + 1,
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
this.setData({
|
||||
loading: false,
|
||||
});
|
||||
},
|
||||
async getStatisticsDetail() {
|
||||
const resp: any = await getStatistics();
|
||||
this.setData({
|
||||
['statistics.amount.value']: resp.data.amount,
|
||||
['statistics.income.value']: resp.data.income,
|
||||
['statistics.expenditure.value']: resp.data.expenditure,
|
||||
});
|
||||
},
|
||||
handleAddAffairs() {
|
||||
wx.navigateTo({
|
||||
url: "/pages/add-finance/add-finance",
|
||||
fail(err) {
|
||||
console.log(err);
|
||||
},
|
||||
});
|
||||
},
|
||||
handleUpdateFinance(e: any) {
|
||||
const financeId = e.currentTarget.dataset.financeId;
|
||||
wx.navigateTo({
|
||||
url: `/pages/add-finance/add-finance?financeId=${financeId}`,
|
||||
});
|
||||
},
|
||||
getTypeOptions() {
|
||||
getDict("finance_type").then((resp: any) => {
|
||||
const options =
|
||||
resp.data?.map((el: any) => ({
|
||||
label: el.dictLabel,
|
||||
value: el.dictValue,
|
||||
})) ?? [];
|
||||
this.setData({
|
||||
types: options,
|
||||
});
|
||||
});
|
||||
},
|
||||
handleLongTap(e: any) {
|
||||
console.log(e);
|
||||
const { deleteIndex } = this.data;
|
||||
const index = parseInt(e.currentTarget.dataset.index);
|
||||
|
||||
let resultIndex;
|
||||
if (deleteIndex == index) {
|
||||
resultIndex = -1;
|
||||
} else {
|
||||
resultIndex = index;
|
||||
}
|
||||
this.setData({
|
||||
deleteIndex: resultIndex,
|
||||
});
|
||||
},
|
||||
handleDeleteFinance(e: any) {
|
||||
const { financeId } = e.currentTarget.dataset;
|
||||
deleteFinance(financeId).then(() => {
|
||||
const { list } = this.data;
|
||||
this.setData({
|
||||
list: list.filter((el: any) => el.financeId !== financeId),
|
||||
deleteIndex: -1,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
loadMore() {
|
||||
const { loading, completed } = this.data;
|
||||
if (loading || completed) {
|
||||
return;
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
toLogin() {
|
||||
wx.switchTab({
|
||||
url: "/pages/login/login",
|
||||
});
|
||||
},
|
||||
loadPageData() {
|
||||
const authToken = getApp().globalData.authToken;
|
||||
this.setData({
|
||||
authToken,
|
||||
});
|
||||
if (!authToken) return;
|
||||
this.getList();
|
||||
this.getTypeOptions();
|
||||
this.getStatisticsDetail();
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
this.loadPageData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {},
|
||||
async handleRefresh() {
|
||||
this.setData({
|
||||
["queryParams.pageNum"]: 1,
|
||||
completed: false,
|
||||
loading: false,
|
||||
total: 0,
|
||||
list: [],
|
||||
});
|
||||
await this.getList();
|
||||
await this.getStatisticsDetail();
|
||||
wx.stopPullDownRefresh();
|
||||
},
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
this.handleRefresh();
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
console.log("reach bottom");
|
||||
|
||||
this.loadMore();
|
||||
},
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {},
|
||||
});
|
||||
52
miniprogram/pages/index/index.wxml
Normal file
52
miniprogram/pages/index/index.wxml
Normal file
@ -0,0 +1,52 @@
|
||||
<!--pages/index/index.wxml-->
|
||||
<t-message id="t-message" />
|
||||
<wxs module="times" src="../../utils/time.wxs" />
|
||||
<wxs module="dict" src="../../utils/dict.wxs" />
|
||||
<view class="home-page">
|
||||
<t-fab class="float-button" icon="add" aria-label="增加" bind:click="handleAddAffairs" />
|
||||
<statistics-card statistics-data="{{statistics}}" />
|
||||
<view class="divider"></view>
|
||||
<view wx:if="{{authToken}}" class="list">
|
||||
<view wx:for="{{list}}" wx:key="account" data-finance-id="{{item.financeId}}" bind:longpress="handleLongTap" data-index="{{index}}" bind:tap="handleUpdateFinance" class="{{ index === deleteIndex ? 'card shake' : 'card' }}">
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">事项</text>
|
||||
<text class="value">{{item.event}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">类别</text>
|
||||
<text class="value">{{dict.getDictLabel(item.type, types)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">时间</text>
|
||||
<text class="value">{{times.formatDate(item.date) || "-"}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">对方账户</text>
|
||||
<text class="value">{{item.oppositeCompany}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="field">
|
||||
<view class="indicator"></view>
|
||||
<view class="content">
|
||||
<text class="title">金额</text>
|
||||
<text class="value">{{item.amount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<t-icon wx:if="{{index === deleteIndex}}" name="close-circle-filled" color="red" size="56rpx" data-finance-id="{{item.financeId}}" data-index="{{index}}" catchtap="handleDeleteFinance" class="close-button"></t-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:else class="to-login">
|
||||
<t-button icon="login" theme="primary" bind:tap="toLogin">前往登录</t-button>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user