project init & fix ui

pages/account/index.js

@@ -0,0 +1,11 @@
+Page({
+    data: {},
+    onLoad: function (options) {
+
+    },
+    onShow: function () {
+        if (wx.canIUse('hideHomeButton')) {
+            wx.hideHomeButton()
+        }
+    },
+});

pages/account/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+  },
+  "navigationBarTitleText": "资产"
+}

pages/account/index.wxml

@@ -0,0 +1,2 @@
+账户
+<foot-tab value="label_3"/>

pages/chart/index.js

@@ -0,0 +1,44 @@
+Page({
+    data: {
+        // 指定选择区间起始值
+        start: '2000-01-01 00:00:00',
+        end: '2030-09-09 12:12:12',
+        showDateVisible:false,
+        showDate:'2022-01',
+    },
+    onLoad: function (options) {
+
+    },
+    onShow: function () {
+        if (wx.canIUse('hideHomeButton')) {
+            wx.hideHomeButton()
+        }
+    },
+    showPicker(e) {
+        console.log('12312312')
+        console.log(e.currentTarget.dataset)
+        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;
+        console.log('confim', value);
+        this.setData({
+            [mode]: value
+            // [`${mode}Text`]: value,
+        });
+
+        this.hidePicker();
+    }
+
+});

pages/chart/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+  },
+  "navigationBarTitleText": "统计"
+}

pages/chart/index.wxml

@@ -0,0 +1,38 @@
+<view class="padding_box">
+    <t-divider content="{{showDate}}" data-mode="showDate" bind:tap="showPicker"/>
+</view>
+<t-tabs defaultValue="{{0}}" t-class="custom-tabs" theme="card">
+    <t-tab-panel label="总览" value="0" class="tab_content">
+        <view class="space_box">
+            <text>总资产\n {{1203.00}}</text>
+            <text>总资产\n {{1203.00}}</text>
+            <text>总资产\n {{1203.00}}</text>
+            <text>总资产\n {{1203.00}}</text>
+            <text>总资产\n {{1203.00}}</text>
+        </view>
+    </t-tab-panel>
+    <t-tab-panel label="分类" value="1" class="tab_content">
+        Jodijawoidjwoaidjwaoij
+    </t-tab-panel>
+    <t-tab-panel label="趋势" value="2" class="tab_content">
+
+    </t-tab-panel>
+    <t-tab-panel label="排行" value="3" class="tab_content">
+
+    </t-tab-panel>
+</t-tabs>
+<view class="placeholder"/>
+<foot-tab value="label_2"/>
+<!-- 年月 -->
+<t-date-time-picker
+        title="选择日期"
+        visible="{{showDateVisible}}"
+        mode="month"
+        value="{{showDate}}"
+        format="YYYY-MM"
+        bindchange="onConfirm"
+        bindpick="onColumnChange"
+        bindcancel="hidePicker"
+        start="{{start}}"
+        end="{{end}}"
+/>

pages/chart/index.wxss

@@ -0,0 +1,4 @@
+.tab_content {
+    height: 100%;
+    background: #3C4043 !important;
+}

pages/foot-tab/foot-tab.js

@@ -0,0 +1,81 @@
+// pages/component/foot-tab.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        value: {
+            type: String,
+            value: null
+        }
+    },
+
+    lifetimes: {
+        created() {
+
+        },
+        attached: function () {
+            // 在组件实例进入页面节点树时执行
+        },
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+        },
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        list: [
+            { value: 'label_1', icon: 'home', ariaLabel: '首页' },
+            { value: 'label_2', icon: 'app', ariaLabel: '统计' },
+            { value: 'label_3', icon: 'chat', ariaLabel: '资产' },
+            { value: 'label_4', icon: 'user', ariaLabel: '我的' },
+        ],
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        setIconData(cur){
+            if (cur == 'label_1'){
+                wx.redirectTo({
+                    url: '../index/index'
+                })
+            }
+            if (cur == 'label_2'){
+                wx.redirectTo({
+                    url: '../chart/index'
+                })
+            }
+            if (cur == 'label_3'){
+                wx.redirectTo({
+                    url: '../account/index'
+                })
+            }
+            if (cur == 'label_4'){
+                wx.redirectTo({
+                    url: '../myself/index'
+                })
+            }
+        },
+
+        checkLogin(){
+            // let userInfo = wx.getStorageSync('userInfo');
+            // let token = wx.getStorageSync('userToken');
+            // if (userInfo && token){
+            //     return true;
+            // }else {
+            //     return false;
+            // }
+        },
+
+        onChange(event) {
+            // if (!this.checkLogin()){
+            //     wx.redirectTo({url:"/pages/login/index"});
+            // }
+            this.setIconData(event.detail.value);
+        },
+    }
+})

pages/foot-tab/foot-tab.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "t-tab-bar": "/miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar",
+        "t-tab-bar-item": "/miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar-item"
+    }
+}

pages/foot-tab/foot-tab.wxml

@@ -0,0 +1,11 @@
+<t-tab-bar class="custom-tab-bar" value="{{value}}" bindchange="onChange" shape="round" theme="tag" split="{{false}}">
+  <t-tab-bar-item
+          wx:for="{{list}}"
+          wx:key="index"
+          value="{{item.value}}"
+          icon="{{item.icon}}"
+          ariaLabel="{{item.ariaLabel}}"
+  >
+    {{item.label}}
+  </t-tab-bar-item>
+</t-tab-bar>

pages/foot-tab/foot-tab.wxss

@@ -0,0 +1,4 @@
+/* pages/component/foot-tab.wxss */
+.custom-tab-bar {
+    --td-tab-bar-active-bg: var(--td-color-block-check);
+}

pages/index/index.js

@@ -0,0 +1,25 @@
+Page({
+    data: {
+        progress: 89,
+        todayList: [
+            {"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.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"},
+            {"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) {
+
+    },
+    onShow: function () {
+        if (wx.canIUse('hideHomeButton')) {
+            wx.hideHomeButton()
+        }
+    },
+});

pages/index/index.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "t-progress": "/miniprogram_npm/tdesign-miniprogram/progress/progress"
+  },
+  "navigationBarTitleText": "首页"
+}

pages/index/index.wxml

@@ -0,0 +1,37 @@
+<view class="main_look">
+    <view class="look_content">
+        <view class="pay_look">
+            <text>今日支出\n</text>
+            <text class="font_big">200.00</text>
+        </view>
+        <view class="balance_look">
+            <text>账户余额:2235.20</text>
+            <text>预算余额:300.00</text>
+        </view>
+    </view>
+</view>
+<view class="space_box font_small">
+    <text>当月预算消费情况</text>
+    <view class="inline_box"><t-icon name="tools" size="28rpx"/>调整</view>
+</view>
+<view class="padding_box">
+    <t-progress theme="plump" percentage="{{progress}}" status="{{progress > 80 ? 'error' : 'success' }}" />
+</view>
+<view class="space_box font_small">
+    <text>当月预算:54602.00</text>
+    <text>已消费:777.80</text>
+</view>
+<view class="padding_box">
+    <t-button theme="primary" size="medium" block>记一笔</t-button>
+    <t-divider dashed content="今日记账清单"/>
+<t-cell wx:for="{{todayList}}" wx:key="index"
+        title="{{item.title}}"
+        description="{{item.dateTime}} • {{item.from}}"
+        align="top"
+        image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
+        note="{{item.money}}"
+        class="t_{{item.type}}"
+/>
+</view>
+<view class="placeholder"/>
+<foot-tab value="label_1"/>

pages/index/index.wxss

@@ -0,0 +1,21 @@
+.main_look {
+    margin: 0 20rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 280rpx;
+    background-image: url("https://yigger.cn/covers/default-7.jpeg");
+    background-size:100% 100%;
+}
+.look_content {
+    font-weight: bold;
+}
+.pay_look {
+    padding: 0 20rpx;
+}
+.balance_look {
+    padding: 20rpx;
+    display: flex;
+    justify-content: space-between;
+}
+

pages/myself/index.js

@@ -0,0 +1,11 @@
+Page({
+    data: {},
+    onLoad: function (options) {
+
+    },
+    onShow: function () {
+        if (wx.canIUse('hideHomeButton')) {
+            wx.hideHomeButton()
+        }
+    },
+});

pages/myself/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+  },
+  "navigationBarTitleText": "我的"
+}

pages/myself/index.wxml

@@ -0,0 +1,2 @@
+我的
+<foot-tab value="label_4"/>