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

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