账户模块静态

packageA/account/index.js

@@ -0,0 +1,58 @@
+import {
+  formatTime
+} from "../../utils/getTime";
+
+Page({
+  data: {
+    accountList: [{
+        name: "默认账户",
+        price: 620864.86,
+        xyprice: 100000,
+        kyprice: 100000,
+      },
+      {
+        name: "活动账户",
+        price: -320864.86,
+        xyprice: 100000,
+        kyprice: 9000,
+      },
+      {
+        name: "现金账户",
+        price: -320864.86,
+        xyprice: 180000,
+        kyprice: 50000,
+      },
+      {
+        name: "备用账户",
+        price: -320864.86,
+        xyprice: 100000,
+        kyprice: 30000,
+      }
+    ],
+    active: 0,
+    ymonth: "", //年月
+    dateEnd: "", //日期结束时间
+  },
+  onLoad(options) {
+    let ymonth = formatTime(new Date(), '-').split(" ")[0].slice(0, 7);
+    this.setData({
+      ymonth,
+      dateEnd: ymonth
+    })
+  },
+  /* 切换查看账户 */
+  changeAccount(e) {
+    this.setData({
+      active: e.detail.value || e.detail.current
+    })
+  },
+  /* 切换查看时间 */
+  changeDate(e) {
+    this.setData({
+      ymonth: e.detail.value
+    })
+  },
+  onReady() {
+
+  },
+})

packageA/account/index.json

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

packageA/account/index.scss

@@ -0,0 +1,153 @@
+.head {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100vw;
+    height: 80rpx;
+    background-color: #fff;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+    box-sizing: border-box;
+    font-size: 30rpx;
+    font-weight: bold;
+    padding: 0 30rpx;
+
+    navigator {
+        line-height: 80rpx;
+    }
+
+    .line-1 {
+        max-width: 500rpx;
+    }
+}
+
+.swiper-box {
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+    background-color: #fff;
+    height: 330rpx;
+
+    swiper-item {
+        position: relative;
+        flex-direction: column;
+        background-color: #E9F3FF;
+        width: 100vw;
+        height: 330rpx;
+        overflow: hidden;
+
+        .upper {
+            position: absolute;
+            left: 100rpx;
+            top: 36rpx;
+            z-index: 9;
+
+            .price {
+                font-size: 40rpx;
+                font-weight: bold;
+                color: #43568C;
+                margin-top: 8rpx;
+            }
+        }
+
+        .lower {
+            display: flex;
+            position: absolute;
+            left: 110rpx;
+            top: 190rpx;
+            z-index: 9;
+
+
+            .item {
+                width: 280rpx;
+
+                .price {
+                    font-size: 34rpx;
+                    font-weight: bold;
+                    color: #43568C;
+                    margin-top: 8rpx;
+                }
+            }
+
+        }
+
+        .name {
+            color: #999;
+            font-size: 28rpx;
+        }
+
+        .image {
+            position: absolute;
+            width: 150rpx;
+            height: 110rpx;
+            top: 30rpx;
+            right: 100rpx;
+            z-index: 10;
+        }
+
+        .top {
+            position: relative;
+            width: 100vw;
+            height: 50%;
+            background-color: #E9F3FF;
+            border-radius: 0 0 70rpx 0;
+            z-index: 3;
+        }
+
+        .angle {
+            position: absolute;
+            right: 0;
+            width: 100rpx;
+            height: 100%;
+            background-color: #fff;
+            z-index: 1;
+        }
+
+        .bottom {
+            width: 100vw;
+            height: 50%;
+            background-color: #fff;
+            border-radius: 70rpx 0 0 0;
+            z-index: 3;
+        }
+    }
+}
+
+.total {
+    height: 60rpx;
+    line-height: 60rpx;
+    text-align: center;
+    font-size: 28rpx;
+}
+
+.record {
+    display: flex;
+    align-items: center;
+    width: 100vw;
+    padding: 20rpx 30rpx;
+    background-color: #fff;
+    box-sizing: border-box;
+    border-bottom: 1rpx solid #ddd;
+
+    .content {
+        flex: 1;
+
+        .title {
+            font-size: 26rpx;
+            font-weight: bold;
+            color: #444;
+        }
+
+        .exp {
+            font-size: 24rpx;
+            color: #666;
+            margin-top: 8rpx;
+        }
+    }
+
+    .price {
+        font-weight: bold;
+        color: #DB0D27;
+        font-size: 32rpx;
+    }
+}

packageA/account/index.wxml

@@ -0,0 +1,53 @@
+<view class="head">
+    <picker mode="selector" range='{{accountList}}' range-key='name' value='{{active}}' bindchange='changeAccount'>
+        <navigator class="line-1" url="#">{{accountList[active].name}}</navigator>
+    </picker>
+    <picker mode="date" fields='month' end='dateEnd' bindchange='changeDate'>
+        <navigator url="#">{{ymonth}}月</navigator>
+    </picker>
+</view>
+
+<swiper class="swiper-box" current='{{active}}' circular indicator-dots indicator-active-color='var(--assist)' bindchange='changeAccount'>
+    <swiper-item wx:for="{{accountList}}" wx:key="name">
+        <view class="upper">
+            <view class="name">
+                {{item.name}}(元)
+            </view>
+            <view class="price">
+                {{item.price}}
+            </view>
+        </view>
+        <view class="lower">
+            <view class="item">
+                <view class="name">信用额度(元)</view>
+                <view class="price">
+                    {{item.xyprice}}
+                </view>
+            </view>
+            <view class="item">
+                <view class="name">可用额度(元)</view>
+                <view class="price">
+                    {{item.kyprice}}
+                </view>
+            </view>
+        </view>
+        <image class="image" mode="aspectFill" src="/static/image/qia.png" />
+        <view class="top" />
+        <view class="angle" />
+        <view class="bottom" />
+    </swiper-item>
+</swiper>
+<view class="total">
+    收入总计:100000，支出总计:80650
+</view>
+
+<navigator url="#" class="record" wx:for="{{20}}" wx:key="index">
+    <view class="content">
+        <view class="title">支出-贷款</view>
+        <view class="exp">{{accountList[active].name}}：余额1534{{index}}</view>
+        <view class="exp">{{ymonth}}-{{index+1}}</view>
+    </view>
+    <view class="price">
+        ￥2345.{{index+2}}
+    </view>
+</navigator>