project init

This commit is contained in:
2023-01-28 14:37:45 +08:00
parent fa1176f658
commit 3a134326e7
83 changed files with 1482 additions and 140 deletions

6
pages/bill/add/index.js Normal file
View File

@@ -0,0 +1,6 @@
Page({
data: {},
onLoad: function (options) {
}
});

View File

@@ -0,0 +1,6 @@
{
"usingComponents": {
"expenses": "../types/expenses",
"transfer": "../types/transfer"
}
}

14
pages/bill/add/index.wxml Normal file
View 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>

View File

6
pages/bill/edit/index.js Normal file
View File

@@ -0,0 +1,6 @@
Page({
data: {},
onLoad: function (options) {
}
});

View File

@@ -0,0 +1,6 @@
{
"usingComponents": {
"expenses": "../types/expenses",
"transfer": "../types/transfer"
}
}

View File

@@ -0,0 +1,4 @@
<view class="padding_box">
<expenses/>
<!-- <transfer/>-->
</view>

View File

29
pages/bill/index.js Normal file
View 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
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {
}
}

37
pages/bill/index.wxml Normal file
View 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
View 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%;
}

View 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();
}
}
});

View File

@@ -0,0 +1,5 @@
{
"component": true,
"usingComponents": {
}
}

View 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"/>

View 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;
}

View 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();
}
}
});

View File

@@ -0,0 +1,5 @@
{
"component": true,
"usingComponents": {
}
}

View 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"/>

View 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;
}