project init

pages/account/detail/index.js

@@ -0,0 +1,72 @@
+const app = getApp();
+Page({
+    data: {
+        showSetMoney: false,
+        currentMoney: 0.00,
+        currentMoneyText: "8754.09",
+        priceError: false,
+        visible : false,
+        dateRangeText : '请选择日期区间',
+        dateRange : [new Date().getTime()- 24 * 60 * 60 * 1000,new Date().getTime()],
+        minDate: new Date().getTime() - 365 * 24 * 60 * 60 * 1000,
+        maxDate: new Date().getTime(),
+        incomeList : [
+            {"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"+4500.00"}
+        ],
+        payList : [
+            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"-35.00"},
+            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"-35.00"},
+            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"-35.00"},
+            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"-35.00"},
+            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"-35.00"},
+            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"-35.00"}
+        ]
+    },
+    onLoad: function (options) {
+    },
+    handleCalendar() {
+        this.setData({ visible: true });
+    },
+    handleConfirm(e) {
+        const { value } = e.detail;
+        console.log(value);
+        let valueText = app.$utils.formatDate(new Date(value[0])) + '至' +
+            (value[1] ? app.$utils.formatDate(new Date(value[1])) : app.$utils.formatDate(new Date()));
+        this.setData({
+            visible: false,
+            dateRange: value,
+            dateRangeText: valueText
+        });
+    },
+
+    showDialog() {
+        this.setData({
+            showSetMoney: true,
+            currentMoney: this.data.currentMoneyText
+        })
+    },
+    onPriceInput(e) {
+        this.setData({
+            currentMoney: e.detail.value
+        })
+    },
+    onConfirm () {
+        const isNumber = /^\d+(\.\d+)?$/.test(this.data.currentMoney);
+        if (!isNumber) {
+            this.setData({
+                priceError: true
+            })
+            return;
+        }
+        this.setData({
+            currentMoneyText: this.data.currentMoney,
+            priceError: false
+        })
+        this.closeDialog()
+    },
+    closeDialog() {
+        this.setData({
+            showSetMoney: false
+        })
+    }
+});

pages/account/detail/index.json

@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "t-collapse": "/miniprogram_npm/tdesign-miniprogram/collapse/collapse",
+    "t-collapse-panel": "/miniprogram_npm/tdesign-miniprogram/collapse/collapse-panel",
+    "t-calendar": "/miniprogram_npm/tdesign-miniprogram/calendar/calendar"
+  }
+}

pages/account/detail/index.wxml

@@ -0,0 +1,57 @@
+<view class="main_look">
+    <view class="look_content">
+        <view class="pay_look">
+            <view data-type="count" class="inline_box font_large">
+                账户余额<t-icon bind:tap="showDialog" name="edit"/>
+            </view>
+        </view>
+        <view class="pay_look">
+            <text class="center_look font_large">{{ currentMoneyText }}</text>
+        </view>
+    </view>
+</view>
+<view class="space_box_no_padding font_big">
+    <text class="t-color-expend">支出{{1203.00}}</text>
+    <text class="t-color-income">收入{{1203.00}}</text>
+</view>
+<view class="padding_box">
+    <t-divider content="{{dateRangeText}}" bind:tap="handleCalendar"/>
+</view>
+<t-collapse theme="card" defaultValue="{{[0]}}" expandMutex expandIcon>
+    <t-collapse-panel header="收入" value="{{0}}">
+        <view wx:if="{{incomeList != null && incomeList.length > 0}}">
+            <t-cell wx:for="{{incomeList}}" wx:key="index"
+                    title="{{item.title}}"
+                    description="{{item.dateTime}} • {{item.from}}"
+                    align="top"
+                    image="/image/bill/4.png"
+                    note="{{item.money}}"
+                    class="t-cell-{{item.type}}"
+                    url="{{'/pages/bill/index?id=' + item.id}}"
+            />
+        </view>
+    </t-collapse-panel>
+    <t-collapse-panel header="支出" value="{{1}}">
+        <t-cell wx:for="{{payList}}" wx:key="index"
+                title="{{item.title}}"
+                description="{{item.dateTime}} • {{item.from}}"
+                align="top"
+                image="/image/bill/4.png"
+                note="{{item.money}}"
+                class="t-cell-{{item.type}}"
+                url="{{'/pages/bill/index?id=' + item.id}}"
+        />
+    </t-collapse-panel>
+</t-collapse>
+<t-calendar visible="{{visible}}" bind:confirm="handleConfirm" value="{{dateRange}}" type="range" max-date="{{maxDate}}" min-date="{{minDate}}" />
+<t-dialog
+        visible="{{showSetMoney}}"
+        title="修改余额"
+        content="请慎重，可能无法收支平衡！"
+        confirm-btn="{{ { content: '确定', variant: 'base'} }}"
+        cancel-btn="取消"
+        bind:confirm="onConfirm"
+        bind:cancel="closeDialog"
+>
+    <t-input bindchange="onPriceInput" value="{{currentMoney}}" tips="{{priceError ? '请输入正确金额' : ''}}" slot="content" type="number" placeholder="0.00"/>
+</t-dialog>

pages/account/detail/index.wxss

@@ -0,0 +1,18 @@
+.main_look {
+    padding: 0 20rpx;
+}
+.look_content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 200rpx;
+    background-color: #111111;
+    background-size:100% 100%;
+    font-weight: bold;
+}
+.pay_look {
+    padding: 0 20rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}