project init

pages/budget/index.js

@@ -0,0 +1,73 @@
+Page({
+    data: {
+        showSetBudget : false,
+        mainMoney: "200.00",
+        changeType: "main",
+        changeItem: 0,
+        currentMoney: "0.00",
+        priceError: false,
+        payTypeList : [
+            {"id":1,"name":"娱乐","money":"2000.00"},
+            {"id":2,"name":"干饭","money":""},
+            {"id":3,"name":"游戏","money":"2000.00"},
+            {"id":4,"name":"其它","money":"400"}
+        ],
+    },
+    onLoad: function (options) {
+
+    },
+    changeBudget(e) {
+        let {type,id} = e.currentTarget.dataset
+        let tCurrentMoney = 0.00;
+        if (type == 'count'){
+            tCurrentMoney = this.data.mainMoney
+        }else {
+            tCurrentMoney = this.data.payTypeList[id - 1].money;
+        }
+        this.setData({
+            showSetBudget: true,
+            changeType: type,
+            changeItem: id,
+            currentMoney: tCurrentMoney
+        })
+    },
+    onPriceInput(e) {
+        this.setData({
+            currentMoney: e.detail.value
+        })
+    },
+    onConfirm (e) {
+        const { priceError } = this.data;
+        const isNumber = /^\d+(\.\d+)?$/.test(this.data.currentMoney);
+        if (priceError === isNumber) {
+            this.setData({
+                priceError: !isNumber,
+            });
+        }
+        if (this.data.priceError) {
+            this.setData({
+                currentMoney: "0.00",
+                priceError: false
+            })
+            return;
+        }
+        if (this.data.changeType == 'count') {
+            this.setData({
+                mainMoney: this.data.currentMoney
+            })
+        }else {
+            let cPayTypeList = this.data.payTypeList
+            let cPayType = cPayTypeList[this.data.changeItem - 1]
+            cPayType.money = this.data.currentMoney;
+            this.setData({
+                payTypeList : cPayTypeList
+            })
+        }
+        this.closeDialog()
+    },
+    closeDialog() {
+        this.setData({
+            showSetBudget: false
+        })
+    }
+});

pages/budget/index.json

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

pages/budget/index.wxml

@@ -0,0 +1,36 @@
+<view class="main_look">
+    <view class="look_content">
+        <view class="pay_look">
+            <view bind:tap="changeBudget" data-type="count" class="inline_box font_big">总预算<t-icon name="tools"/></view>
+        </view>
+        <view class="pay_look">
+            <text class="center_look font_big">{{ mainMoney }}</text>
+        </view>
+        <view class="balance_look">
+            <text>当月使用: {{ 900.00 }}</text>
+            <text>预算剩余: {{ 1200.00 }}</text>
+        </view>
+    </view>
+</view>
+<t-cell wx:for="{{payTypeList}}" wx:key="index"
+        title="{{item.name}}"
+        align="top"
+        image="/image/bill/3.png"
+        note="{{item.money}}"
+        bind:tap="changeBudget"
+        data-type="item"
+        data-id="{{item.id}}"
+>
+    <t-progress wx:if="{{item.money}}" slot="description" percentage="{{25}}" />
+    <text class="error_msg" wx:else slot="description">未设置预算</text>
+</t-cell>
+<t-dialog
+        visible="{{showSetBudget}}"
+        title="设置预算"
+        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/budget/index.wxss

@@ -0,0 +1,28 @@
+.main_look {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 200rpx;
+    background-color: #111111;
+    background-size:100% 100%;
+}
+.look_content {
+    font-weight: bold;
+}
+.pay_look {
+    padding: 0 20rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.balance_look {
+    padding: 20rpx;
+    display: flex;
+    justify-content: space-evenly;
+}
+.t-progress__info {
+    --td-progress-info-dark-color: whitesmoke
+}
+.error_msg {
+    color: #777777;
+}