绚火健康

pages/account/index.js

@@ -0,0 +1,78 @@
+ /*
+ * 手太欠
+ * 愿这世界都如故事里一样 美好而动人~
+ */
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        logsArr     : [],      //列表数据
+        score       : '',      //数据
+        page        : {},      //分页信息
+        lodingStats : false,  //加载状态
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+        // 获取账户信息
+        this.accountInfo()
+    },
+
+    /**
+     * 获取账户信息
+     */
+    accountInfo(page) {
+        wx.$api.user.account({
+            page: page
+        }).then(res => {
+            console.log(res.data)
+            let listArr = this.data.logsArr,
+                newData = []
+            if(page == 1 || page == undefined) listArr = []
+            newData = listArr.concat(res.data.logs.data)
+            this.setData({
+                score       : res.data,
+                logsArr     : newData,
+                page        : res.data.logs.page,
+                lodingStats : false
+            })
+            wx.stopPullDownRefresh()
+            
+        }).catch(err => { })
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+        // 获取账户信息
+        this.accountInfo();
+    },
+
+    /**
+     * 上拉加载
+     */
+    onReachBottom(){
+        this.setData({
+            lodingStats: true
+        })
+        let pageNumber = this.data.page.current
+        if(this.data.page.has_more){
+            pageNumber++
+            // 获取账户信息
+            this.accountInfo(pageNumber);
+        }
+    }
+})

pages/account/index.json

@@ -0,0 +1,6 @@
+{
+    "usingComponents": {},
+    "navigationBarBackgroundColor": "#dc3159",
+    "navigationBarTextStyle": "white",
+    "navigationBarTitleText": "我的账户"
+}

pages/account/index.wxml

@@ -0,0 +1,54 @@
+<view class="top">
+    <view class="topSee">
+        <view class="topSee-name">账户余额（元）<image src="/static/icons/see_active.png" mode="widthFix"></image>
+        </view>
+        <view class="topSee-number">{{score.balance}}</view>
+    </view>
+    <view class="topBtn" wx:if="{{score.can_withdraw}}">提现</view>
+</view>
+
+<view class="content">
+    <view class="tab">
+        <view class="tab-item">
+            <view class="tab-name">待发放（元）</view>
+            <view class="tab-number">{{score.frozen}}</view>
+        </view>
+        <view class="tab-item">
+            <view class="tab-name">总收入（元）</view>
+            <view class="tab-number">{{score.all_in}}</view>
+        </view>
+    </view>
+</view>
+
+<view class="detailed active">
+    <view class="listTitle">
+        收益明细
+    </view>
+    <view class="list" wx:if="{{logsArr.length > 0}}">
+        <view class="list-item" wx:for="{{logsArr}}" wx:key="logsArr">
+            <view class="item-top">
+                <view class="item-name">
+                    当月贡献发放
+                </view>
+                <view class="item-time">
+                    2023-05-22
+                </view>
+            </view>
+            <view class="item-number">
+                +100
+            </view>
+        </view>
+        <view class="pagesLoding" wx:if="{{lodingStats}}">
+            <block wx:if="{{page.has_more}}">
+                <image class="pagesLoding-icon" src="/static/icon/refresh_loding.gif" mode="widthFix"></image>加载中...
+            </block>
+            <block wx:else>
+                没有更多了~
+            </block>
+        </view>
+    </view>
+    <view class="pages-no" wx:else>
+        <image src="/static/imgs/cont_null.png" mode="widthFix"></image>
+        <view>暂无数据</view>
+    </view>
+</view>

pages/account/index.wxss

@@ -0,0 +1,126 @@
+page {
+    background-color: #f6f6f6;
+}
+
+.top {
+    background-image: linear-gradient(to bottom, #dc3159, #f46284);
+    color: #ffffff;
+    padding: 40rpx 40rpx 120rpx;
+    box-sizing: border-box;
+    display: flex;
+}
+
+.topSee {
+    flex: 1;
+}
+
+.topSee-name {
+    display: flex;
+    line-height: 40rpx;
+}
+
+.topSee-name image {
+    width: 34rpx;
+    margin: 5rpx 20rpx;
+    filter: grayscale(100%);
+    -webkit-filter: grayscale(100%);
+    filter: brightness(0%) invert(100%);
+    -webkit-filter: brightness(0%) invert(100%);
+}
+
+.topSee-number {
+    font-size: 60rpx;
+    margin-top: 20rpx;
+    letter-spacing: 2rpx;
+}
+
+.topBtn {
+    background-color: #ffffff;
+    display: inline-block;
+    color: #da2b54;
+    padding: 0 50rpx;
+    border-radius: 80rpx;
+    height: 68rpx;
+    line-height: 68rpx;
+    margin-top: 40rpx;
+}
+
+.content {
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    margin-top: -70rpx;
+}
+
+.tab {
+    background-color: #ffffff;
+    border-radius: 20rpx;
+    padding: 40rpx 10rpx;
+    box-sizing: border-box;
+    display: flex;
+}
+
+.tab-item {
+    text-align: center;
+    flex: 2;
+}
+
+.tab-number {
+    font-size: 44rpx;
+    margin-top: 20rpx;
+}
+
+.listTitle {
+    padding: 30rpx 30rpx 0;
+    font-weight: 600;
+    box-sizing: border-box;
+    font-size: 32rpx;
+}
+
+.list {
+    padding: 30rpx;
+    box-sizing: border-box;
+}
+
+.list-item {
+    background-color: #fff;
+    border-radius: 20rpx;
+    margin-bottom: 30rpx;
+    padding: 30rpx;
+    box-sizing: border-box;
+    display: flex;
+}
+
+.item-top {
+    flex: 1;
+}
+
+.item-name {
+    font-size: 30rpx;
+}
+
+.item-number {
+    color: #da2b54;
+    font-weight: 600;
+    font-size: 38rpx;
+    line-height: 90rpx;
+}
+
+.item-time {
+    color: #999999;
+    font-size: 28rpx;
+    margin-top: 15rpx;
+}
+
+/* 暂无数据 */
+.pages-no {
+    background-color: #fff;
+    margin-top: 30rpx;
+    text-align: center;
+    padding: 120rpx 0;
+    color: #6d6d6d;
+    font-size: 28rpx;
+}
+
+.pages-no image {
+    width: 180rpx;
+}