project init
This commit is contained in:
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