[本时生活h5端]

pages/account/myBalance_list.vue

@@ -0,0 +1,155 @@
+<template>
+    <view>
+        <!-- 收益订单列表 -->
+        <view class="record" v-if="accounts.length > 0">
+            <view class="record-list" v-for="(item, index) in accounts" :key="index">
+                <view class="record-list-cont">
+                    <image class="record-list-img" src="/static/img/balance-icon-02.png"></image>
+                    <view class="record-list-top">
+                        <view class="record-list-left">
+                            <view class="record-list-name">
+                                {{ item.rule.title }}
+                            </view>
+                            <view class="record-list-time">
+                                {{ item.created_at }}
+                            </view>
+                        </view>
+                        <view class="record-list-right">
+                            {{ item.bonus > 0 ? '+' : '' }}{{ item.bonus }}
+                        </view>
+                    </view>
+                </view>
+                <view class="record-list-remark">
+                    {{ item.remark }}
+                </view>
+            </view>
+        </view>
+        <!-- 暂无内容 -->
+        <view class="recommend-hint" v-else>
+            <image src="/static/img/null_icon.png"></image>
+            <view>抱歉，目前暂无内容~</view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { profitsNext } from '@/apis/interfaces/user'
+    export default {
+    	data() {
+    		return {
+                number      : '',           // 账户余额
+                accounts    : '',           // 账户列表
+                page: {
+                    has_more: false
+                },                          // 下一页
+                lodingStats: false          // 数据加载完渲染
+    		}
+    	},
+        onLoad(options) {
+            // 获取账变记录
+            this.accountInfo(options.type, options.id);
+        },
+        methods: {
+            // 账变记录
+            accountInfo(type, id, page) {
+                profitsNext({
+                    order_type: type,
+                    order_id: id,
+                    page: page
+                }).then(res=>{
+                    this.accounts = res          
+                }).catch(err => {});
+            },
+            // 上拉加载
+            onReachBottom(){
+                this.lodingStats = true
+                let pageNumber = this.page.current
+                if(this.page.has_more){
+                    pageNumber++
+                    this.page = pageNumber
+                    this.storesInfo('', pageNumber)
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    /* 记录列表 */
+    .record-list {
+        background-color: #fff;
+        border-radius: 10rpx;
+        padding: 25rpx;
+        box-sizing: border-box;
+        margin-bottom: 30rpx;
+    }
+    
+    .record-list-img {
+        width: 50rpx;
+        height: 50rpx;
+        margin-top: 6rpx;
+    }
+    
+    .record-list-cont {
+        display: flex;
+        width: 100%;
+    }
+    
+    .record-list-top {
+        display: flex;
+        padding-left: 30rpx;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    
+    .record-list-left {
+        flex: 1;
+        margin-right: 20rpx;
+    }
+    
+    .record-list-time {
+        margin-top: 10rpx;
+        font-size: 28rpx;
+        color: #999;
+    }
+    
+    .record-list-right {
+        color: red;
+    }
+    
+    .record-list-remark {
+        color: #333;
+        font-size: 28rpx;
+        margin: 30rpx 0 0;
+        background-color: #f5f5f5;
+        padding: 10rpx 15rpx;
+        display: inline-block;
+        border-radius: 4rpx;
+        position: relative;
+        box-sizing: border-box;
+        &::after {
+            position: absolute;
+            left: 20rpx;
+            top: -14rpx;
+            content: '';
+            width: 0;
+            height: 0;
+            border-left: 14rpx solid transparent;
+            border-right: 14rpx solid transparent;
+            border-bottom: 14rpx solid #f5f5f5;
+        }
+    }
+    
+    /* 暂无内容 */
+    .recommend-hint {
+        text-align: center;
+        color: #999;
+        padding: 100rpx 0;
+        image {
+            width: 200rpx;
+            height: 200rpx;
+            border-radius: 50%;
+            margin-bottom: 20rpx;
+        }
+    }
+</style>