project init
This commit is contained in:
6
pages/bill/add/index.js
Normal file
6
pages/bill/add/index.js
Normal file
@@ -0,0 +1,6 @@
|
||||
Page({
|
||||
data: {},
|
||||
onLoad: function (options) {
|
||||
|
||||
}
|
||||
});
|
||||
6
pages/bill/add/index.json
Normal file
6
pages/bill/add/index.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"expenses": "../types/expenses",
|
||||
"transfer": "../types/transfer"
|
||||
}
|
||||
}
|
||||
14
pages/bill/add/index.wxml
Normal file
14
pages/bill/add/index.wxml
Normal file
@@ -0,0 +1,14 @@
|
||||
<t-tabs defaultValue="{{0}}" t-class="custom-tabs" theme="card">
|
||||
<t-tab-panel label="支出" value="0">
|
||||
<expenses/>
|
||||
</t-tab-panel>
|
||||
<t-tab-panel label="收入" value="1">
|
||||
<expenses/>
|
||||
</t-tab-panel>
|
||||
<t-tab-panel label="转账" value="2">
|
||||
<transfer/>
|
||||
</t-tab-panel>
|
||||
<t-tab-panel label="还款" value="3">
|
||||
<transfer changeType="repayment"/>
|
||||
</t-tab-panel>
|
||||
</t-tabs>
|
||||
0
pages/bill/add/index.wxss
Normal file
0
pages/bill/add/index.wxss
Normal file
6
pages/bill/edit/index.js
Normal file
6
pages/bill/edit/index.js
Normal file
@@ -0,0 +1,6 @@
|
||||
Page({
|
||||
data: {},
|
||||
onLoad: function (options) {
|
||||
|
||||
}
|
||||
});
|
||||
6
pages/bill/edit/index.json
Normal file
6
pages/bill/edit/index.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"expenses": "../types/expenses",
|
||||
"transfer": "../types/transfer"
|
||||
}
|
||||
}
|
||||
4
pages/bill/edit/index.wxml
Normal file
4
pages/bill/edit/index.wxml
Normal file
@@ -0,0 +1,4 @@
|
||||
<view class="padding_box">
|
||||
<expenses/>
|
||||
<!-- <transfer/>-->
|
||||
</view>
|
||||
0
pages/bill/edit/index.wxss
Normal file
0
pages/bill/edit/index.wxss
Normal file
29
pages/bill/index.js
Normal file
29
pages/bill/index.js
Normal file
@@ -0,0 +1,29 @@
|
||||
Page({
|
||||
data: {
|
||||
showDeleteConfirm: false,
|
||||
title : "账单名称",
|
||||
money : "2000"
|
||||
},
|
||||
onLoad: function (options) {
|
||||
|
||||
},
|
||||
editBill() {
|
||||
wx.navigateTo({
|
||||
url: './edit/index'
|
||||
})
|
||||
},
|
||||
deleteBill() {
|
||||
this.setData({
|
||||
showDeleteConfirm: true
|
||||
})
|
||||
},
|
||||
onConfirm (e) {
|
||||
wx.navigateBack();
|
||||
this.closeDialog()
|
||||
},
|
||||
closeDialog() {
|
||||
this.setData({
|
||||
showDeleteConfirm: false
|
||||
})
|
||||
}
|
||||
});
|
||||
4
pages/bill/index.json
Normal file
4
pages/bill/index.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
}
|
||||
}
|
||||
37
pages/bill/index.wxml
Normal file
37
pages/bill/index.wxml
Normal file
@@ -0,0 +1,37 @@
|
||||
<view class="space_box view_bg">
|
||||
<view class="inline_box font_large">
|
||||
<image src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-actionsheet.png"/>
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="{{money > 0 ? 't-color-income' : 't-color-expend'}} font_large">{{money > 0 ? "+" + money : money}}</view>
|
||||
</view>
|
||||
<view class="padding_box">
|
||||
<t-divider dashed/>
|
||||
</view>
|
||||
<t-cell title="分类" note="收入/薪资收入">
|
||||
<t-icon name="view-module" slot="left-icon" />
|
||||
</t-cell>
|
||||
<t-cell title="账户" note="负债账户/信用卡">
|
||||
<t-icon name="creditcard" slot="left-icon" />
|
||||
</t-cell>
|
||||
<t-cell title="余额" note="123.43">
|
||||
<t-icon name="root-list" slot="left-icon" />
|
||||
</t-cell>
|
||||
<t-cell title="时间" note="2022/12/32 21:12">
|
||||
<t-icon name="calendar" slot="left-icon" />
|
||||
</t-cell>
|
||||
<view class="bottom_box">
|
||||
<view class="space_box">
|
||||
<t-button theme="danger" variant="outline" block bind:tap="deleteBill">删除</t-button>
|
||||
<t-button theme="primary" variant="outline" block bind:tap="editBill">编辑</t-button>
|
||||
</view>
|
||||
</view>
|
||||
<t-dialog
|
||||
visible="{{showDeleteConfirm}}"
|
||||
title="删除该笔记账?"
|
||||
confirm-btn="{{ { content: '确定', variant: 'base'} }}"
|
||||
cancel-btn="取消"
|
||||
bind:confirm="onConfirm"
|
||||
bind:cancel="closeDialog"
|
||||
>
|
||||
</t-dialog>
|
||||
17
pages/bill/index.wxss
Normal file
17
pages/bill/index.wxss
Normal file
@@ -0,0 +1,17 @@
|
||||
.view_bg {
|
||||
background: #2B2B2B;
|
||||
}
|
||||
image {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
}
|
||||
.bottom_button {
|
||||
position: absolute;
|
||||
width: 96%;
|
||||
bottom:66rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
t-button {
|
||||
width: 50%;
|
||||
}
|
||||
171
pages/bill/types/expenses.js
Normal file
171
pages/bill/types/expenses.js
Normal file
@@ -0,0 +1,171 @@
|
||||
const app = getApp();
|
||||
import ActionSheet, { ActionSheetTheme } from '../../../miniprogram_npm/tdesign-miniprogram/action-sheet/index';
|
||||
let handler = null;
|
||||
const firstGrid = [
|
||||
{
|
||||
label: '红包',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '数码',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '虚拟',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '游戏',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '包包',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '手机',
|
||||
icon: 'refresh',
|
||||
},
|
||||
{
|
||||
label: '话费',
|
||||
icon: 'download',
|
||||
},
|
||||
{
|
||||
label: '技术',
|
||||
icon: 'queue',
|
||||
},
|
||||
];
|
||||
const secondGrid = [
|
||||
{
|
||||
label: '银行卡',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '支付宝',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '微信',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '信用卡',
|
||||
icon: 'star',
|
||||
}
|
||||
];
|
||||
Component({
|
||||
properties: {
|
||||
/* income & out */
|
||||
changeType: {
|
||||
type: String,
|
||||
value: 'income'
|
||||
},
|
||||
},
|
||||
data: {
|
||||
price: '10.2',
|
||||
priceError: false,
|
||||
grid: '',
|
||||
outText: '',
|
||||
inText: '',
|
||||
mode: '',
|
||||
dateVisible: false,
|
||||
date: new Date().getTime(), // 支持时间戳传入
|
||||
dateText: '',
|
||||
// 指定选择区间起始值
|
||||
start: '2000-01-01 00:00:00',
|
||||
end: '2030-09-09 12:12:12',
|
||||
},
|
||||
methods: {
|
||||
onPriceInput(e) {
|
||||
const { priceError } = this.data;
|
||||
const isNumber = /^\d+(\.\d+)?$/.test(e.detail.value);
|
||||
if (priceError === isNumber) {
|
||||
this.setData({
|
||||
priceError: !isNumber,
|
||||
});
|
||||
}
|
||||
},
|
||||
handleMultiAction(e) {
|
||||
const { grid } = e.currentTarget.dataset;
|
||||
this.setData({
|
||||
grid
|
||||
})
|
||||
if (grid == 'type') {
|
||||
handler = ActionSheet.show({
|
||||
theme: ActionSheetTheme.Grid,
|
||||
selector: '#t-action-sheet',
|
||||
context: this,
|
||||
items: firstGrid.concat(
|
||||
new Array(8).fill({
|
||||
label: '标题文字',
|
||||
icon: 'star',
|
||||
}),
|
||||
),
|
||||
});
|
||||
}else {
|
||||
handler = ActionSheet.show({
|
||||
theme: ActionSheetTheme.Grid,
|
||||
selector: '#t-action-sheet',
|
||||
context: this,
|
||||
items: secondGrid.concat(
|
||||
new Array(8).fill({
|
||||
label: '标题文字',
|
||||
icon: 'star',
|
||||
}),
|
||||
),
|
||||
});
|
||||
}
|
||||
},
|
||||
onCancel(){
|
||||
handler.close();
|
||||
},
|
||||
handleSelected(e) {
|
||||
const {grid} = this.data
|
||||
this.setData({
|
||||
[`${grid}Text`]: e.detail.selected.label,
|
||||
});
|
||||
},
|
||||
showPicker(e) {
|
||||
const { mode } = e.currentTarget.dataset;
|
||||
this.setData({
|
||||
mode,
|
||||
[`${mode}Visible`]: true,
|
||||
});
|
||||
},
|
||||
hidePicker() {
|
||||
const { mode } = this.data;
|
||||
this.setData({
|
||||
[`${mode}Visible`]: false,
|
||||
});
|
||||
},
|
||||
onConfirm(e) {
|
||||
const { value } = e.detail;
|
||||
const { mode } = this.data;
|
||||
this.setData({
|
||||
[mode]: value,
|
||||
[`${mode}Text`]: value,
|
||||
});
|
||||
this.hidePicker();
|
||||
},
|
||||
bYesterday () {
|
||||
let preDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 2);
|
||||
this.setData({
|
||||
dateText: app.$utils.formatDate(preDate)
|
||||
})
|
||||
},
|
||||
yesterday() {
|
||||
let preDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
|
||||
this.setData({
|
||||
dateText: app.$utils.formatDate(preDate)
|
||||
})
|
||||
},
|
||||
today () {
|
||||
this.setData({
|
||||
dateText: app.$utils.formatDate(new Date())
|
||||
})
|
||||
},
|
||||
saveBill () {
|
||||
wx.navigateBack();
|
||||
}
|
||||
}
|
||||
});
|
||||
5
pages/bill/types/expenses.json
Normal file
5
pages/bill/types/expenses.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
}
|
||||
}
|
||||
44
pages/bill/types/expenses.wxml
Normal file
44
pages/bill/types/expenses.wxml
Normal file
@@ -0,0 +1,44 @@
|
||||
<t-input
|
||||
label="金额"
|
||||
placeholder="0.00"
|
||||
suffix="元"
|
||||
align="right"
|
||||
type="number"
|
||||
bindchange="onPriceInput"
|
||||
value="{{price}}"
|
||||
tips="{{priceError ? '请输入正确的价格' : ''}}"
|
||||
t-class-tips="tips"
|
||||
/>
|
||||
<t-input label="分类" disabled>
|
||||
<text slot="suffix" class="t-color-input" data-grid="type" bind:tap="handleMultiAction">{{typeText ? typeText : '请选择分类'}}</text>
|
||||
</t-input>
|
||||
<t-input label="账户" disabled>
|
||||
<text slot="suffix" class="t-color-input" data-grid="account" bind:tap="handleMultiAction">{{accountText ? accountText : '请选择账户'}}</text>
|
||||
</t-input>
|
||||
<t-input label="日期" disabled>
|
||||
<text slot="suffix" class="t-color-input" data-mode="date" bind:tap="showPicker">{{dateText ? dateText : '请选择日期'}}</text>
|
||||
</t-input>
|
||||
<view class="right_box">
|
||||
<t-tag size="large" bind:tap="bYesterday" variant="light">前天</t-tag>
|
||||
<view class="placeholder_line"></view>
|
||||
<t-tag size="large" bind:tap="yesterday" variant="light">昨天</t-tag>
|
||||
<view class="placeholder_line"></view>
|
||||
<t-tag size="large" bind:tap="today" variant="light">今天</t-tag>
|
||||
</view>
|
||||
<t-textarea label="备注" placeholder="请输入该账单说明..." maxlength="200" indicator />
|
||||
<view class="view_button">
|
||||
<t-button theme="primary" block bind:tap="saveBill">保存</t-button>
|
||||
</view>
|
||||
<!-- 年月日 -->
|
||||
<t-date-time-picker
|
||||
title="选择日期"
|
||||
visible="{{dateVisible}}"
|
||||
mode="date"
|
||||
defaultValue="{{date}}"
|
||||
format="YYYY-MM-DD"
|
||||
bindchange="onConfirm"
|
||||
bindcancel="hidePicker"
|
||||
start="{{start}}"
|
||||
end="{{end}}"
|
||||
/>
|
||||
<t-action-sheet id="t-action-sheet" bind:selected="handleSelected" bind:cancel="onCancel"/>
|
||||
15
pages/bill/types/expenses.wxss
Normal file
15
pages/bill/types/expenses.wxss
Normal file
@@ -0,0 +1,15 @@
|
||||
.view_button {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.placeholder_line {
|
||||
width: 20rpx;
|
||||
}
|
||||
.right_box {
|
||||
margin: 20rpx 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.t-color-input {
|
||||
color: orange;
|
||||
}
|
||||
154
pages/bill/types/transfer.js
Normal file
154
pages/bill/types/transfer.js
Normal file
@@ -0,0 +1,154 @@
|
||||
const app = getApp();
|
||||
import ActionSheet, { ActionSheetTheme } from '../../../miniprogram_npm/tdesign-miniprogram/action-sheet/index';
|
||||
let handler = null;
|
||||
const firstGrid = [
|
||||
{
|
||||
label: '银行卡',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '支付宝',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '微信',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '信用卡',
|
||||
icon: 'star',
|
||||
}
|
||||
];
|
||||
const secondGrid = [
|
||||
{
|
||||
label: '银行卡',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '支付宝',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '微信',
|
||||
icon: 'star',
|
||||
},
|
||||
{
|
||||
label: '信用卡',
|
||||
icon: 'star',
|
||||
}
|
||||
];
|
||||
Component({
|
||||
properties: {
|
||||
/* normal & repayment */
|
||||
changeType: {
|
||||
type: String,
|
||||
value: 'normal'
|
||||
},
|
||||
},
|
||||
data: {
|
||||
priceError: false,
|
||||
grid: '',
|
||||
typeText: '',
|
||||
accountText: '',
|
||||
mode: '',
|
||||
dateVisible: false,
|
||||
date: new Date().getTime(), // 支持时间戳传入
|
||||
dateText: '',
|
||||
// 指定选择区间起始值
|
||||
start: '2000-01-01 00:00:00',
|
||||
end: '2030-09-09 12:12:12'
|
||||
},
|
||||
methods: {
|
||||
onPriceInput(e) {
|
||||
const { priceError } = this.data;
|
||||
const isNumber = /^\d+(\.\d+)?$/.test(e.detail.value);
|
||||
if (priceError === isNumber) {
|
||||
this.setData({
|
||||
priceError: !isNumber,
|
||||
});
|
||||
}
|
||||
},
|
||||
handleMultiAction(e) {
|
||||
const { grid } = e.currentTarget.dataset;
|
||||
this.setData({
|
||||
grid
|
||||
})
|
||||
if (grid == 'out') {
|
||||
handler = ActionSheet.show({
|
||||
theme: ActionSheetTheme.Grid,
|
||||
selector: '#t-action-sheet',
|
||||
context: this,
|
||||
items: firstGrid.concat(
|
||||
new Array(8).fill({
|
||||
label: '标题文字',
|
||||
icon: 'star',
|
||||
}),
|
||||
),
|
||||
});
|
||||
}else {
|
||||
handler = ActionSheet.show({
|
||||
theme: ActionSheetTheme.Grid,
|
||||
selector: '#t-action-sheet',
|
||||
context: this,
|
||||
items: secondGrid.concat(
|
||||
new Array(8).fill({
|
||||
label: '标题文字',
|
||||
icon: 'star',
|
||||
}),
|
||||
),
|
||||
});
|
||||
}
|
||||
},
|
||||
onCancel(){
|
||||
handler.close();
|
||||
},
|
||||
handleSelected(e) {
|
||||
const {grid} = this.data
|
||||
this.setData({
|
||||
[`${grid}Text`]: e.detail.selected.label,
|
||||
});
|
||||
},
|
||||
showPicker(e) {
|
||||
const { mode } = e.currentTarget.dataset;
|
||||
this.setData({
|
||||
mode,
|
||||
[`${mode}Visible`]: true,
|
||||
});
|
||||
},
|
||||
hidePicker() {
|
||||
const { mode } = this.data;
|
||||
this.setData({
|
||||
[`${mode}Visible`]: false,
|
||||
});
|
||||
},
|
||||
onConfirm(e) {
|
||||
const { value } = e.detail;
|
||||
const { mode } = this.data;
|
||||
this.setData({
|
||||
[mode]: value,
|
||||
[`${mode}Text`]: value,
|
||||
});
|
||||
this.hidePicker();
|
||||
},
|
||||
bYesterday () {
|
||||
let preDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 2);
|
||||
this.setData({
|
||||
dateText: app.$utils.formatDate(preDate)
|
||||
})
|
||||
},
|
||||
yesterday() {
|
||||
let preDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
|
||||
this.setData({
|
||||
dateText: app.$utils.formatDate(preDate)
|
||||
})
|
||||
},
|
||||
today () {
|
||||
this.setData({
|
||||
dateText: app.$utils.formatDate(new Date())
|
||||
})
|
||||
},
|
||||
saveBill () {
|
||||
wx.navigateBack();
|
||||
}
|
||||
}
|
||||
});
|
||||
5
pages/bill/types/transfer.json
Normal file
5
pages/bill/types/transfer.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
}
|
||||
}
|
||||
44
pages/bill/types/transfer.wxml
Normal file
44
pages/bill/types/transfer.wxml
Normal file
@@ -0,0 +1,44 @@
|
||||
<t-input
|
||||
label="金额"
|
||||
placeholder="0.00"
|
||||
suffix="元"
|
||||
align="right"
|
||||
type="number"
|
||||
bindchange="onPriceInput"
|
||||
value="{{price}}"
|
||||
tips="{{priceError ? '请输入正确的价格' : ''}}"
|
||||
t-class-tips="tips"
|
||||
/>
|
||||
<t-input label="{{'repayment' === changeType ? '还款账户' : '转出账户'}}" disabled>
|
||||
<text slot="suffix" class="t-color-input" data-grid="out" bind:tap="handleMultiAction">{{outText ? outText : '请选择账户'}}</text>
|
||||
</t-input>
|
||||
<t-input label="{{'repayment' === changeType ? '负债账户' : '转入账户'}}" disabled>
|
||||
<text slot="suffix" class="t-color-input" data-grid="in" bind:tap="handleMultiAction">{{inText ? inText : '请选择账户'}}</text>
|
||||
</t-input>
|
||||
<t-input label="日期" disabled>
|
||||
<text slot="suffix" class="t-color-input" data-mode="date" bind:tap="showPicker">{{dateText ? dateText : '请选择日期'}}</text>
|
||||
</t-input>
|
||||
<view class="right_box">
|
||||
<t-tag size="large" bind:tap="bYesterday" variant="light">前天</t-tag>
|
||||
<view class="placeholder_line"></view>
|
||||
<t-tag size="large" bind:tap="yesterday" variant="light">昨天</t-tag>
|
||||
<view class="placeholder_line"></view>
|
||||
<t-tag size="large" bind:tap="today" variant="light">今天</t-tag>
|
||||
</view>
|
||||
<t-textarea label="备注" placeholder="请输入该账单说明..." maxlength="200" indicator />
|
||||
<view class="view_button">
|
||||
<t-button theme="primary" block bind:tap="saveBill">保存</t-button>
|
||||
</view>
|
||||
<!-- 年月日 -->
|
||||
<t-date-time-picker
|
||||
title="选择日期"
|
||||
visible="{{dateVisible}}"
|
||||
mode="date"
|
||||
defaultValue="{{date}}"
|
||||
format="YYYY-MM-DD"
|
||||
bindchange="onConfirm"
|
||||
bindcancel="hidePicker"
|
||||
start="{{start}}"
|
||||
end="{{end}}"
|
||||
/>
|
||||
<t-action-sheet id="t-action-sheet" bind:selected="handleSelected" bind:cancel="onCancel"/>
|
||||
15
pages/bill/types/transfer.wxss
Normal file
15
pages/bill/types/transfer.wxss
Normal file
@@ -0,0 +1,15 @@
|
||||
.view_button {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.placeholder_line {
|
||||
width: 20rpx;
|
||||
}
|
||||
.right_box {
|
||||
margin: 20rpx 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.t-color-input {
|
||||
color: orange;
|
||||
}
|
||||
Reference in New Issue
Block a user