quanwei
3 days ago 04102f7237efefa744090ed7c25f7b5d0807b679
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<template>
    <view>
        <!-- <view class="top-container">
            <view class="top-tabbar">
                 <view class="cu-bar search" style="width: 100%;">
                     <view class="search-form round">
                         <text class="cuIcon-search"></text>
                         <input type="text" placeholder="搜索" confirm-type="search" @input="searchIcon"></input>
                     </view>
                 </view>
            </view>
        </view> -->
        <!--列表-->
        <scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50"
         @scrolltolower="scrolltolowerFunc">
            <view class="p-0-30 bg-white">
                <view class="border-b p-20-0" v-for="(item,index) in tableData" :key="index">
                    <view class="d-b-c f24">
                        <text>订单号{{ item.order_master.order_no }}</text>
                        <text class="blue"> 已结算</text>
                    </view>
                    <view class="d-b-c mt20">
                        <view class="team-order-photo">
                            <image :src="item.order_master.user.avatarUrl" mode="aspectFill"></image>
                        </view>
                        <view class="flex-1 ml20 f24">
                            <view class="d-b-c">
                                <text class="gray3">{{ item.order_master.user.nickName }}</text>
                                <text class="red">+¥{{ item.commission }}</text>
                            </view>
                            <view class="d-b-c">
                                <text class="gray9">消费金额:¥{{ item.order_master.order_price }}</text>
                                <text class="gray9">{{item.create_time}}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 没有记录 -->
                <view class="d-c-c p30" v-if="tableData.length==0 && !loading">
                    <text class="iconfont icon-wushuju"></text>
                    <text class="cont">亲,暂无相关记录哦</text>
                </view>
                <uni-load-more v-else :loadingType="loadingType"></uni-load-more>
            </view>
        </scroll-view>
 
    </view>
</template>
 
<script>
    import uniLoadMore from "@/components/uni-load-more.vue";
    export default {
        components: {
            uniLoadMore
        },
        data() {
            return {
                /*手机高度*/
                phoneHeight: 0,
                /*可滚动视图区域高度*/
                scrollviewHigh: 0,
                /*状态选中*/
                state_active: -1,
                /*数据列表*/
                tableData: [],
                settled: -1,
                page: 1,
                no_more: false,
                loading: true,
                tableList: [],
                list_rows: 15,
                user_id: 0
            }
        },
        computed: {
            /*加载中状态*/
            loadingType() {
                if (this.loading) {
                    return 1;
                } else {
                    if (this.tableData.length != 0 && this.no_more) {
                        return 2;
                    } else {
                        return 0;
                    }
                }
            }
        },
        mounted() {
            /*初始化*/
            this.init();
            this.user_id = this.getUserId();
            /*获取数据*/
            this.getData();
        },
        methods: {
            /*初始化*/
            init() {
                let self = this;
                uni.getSystemInfo({
                    success(res) {
                        self.phoneHeight = res.windowHeight;
                        
                        let h = self.phoneHeight;
                        self.scrollviewHigh = h;
                        
                        // 计算组件的高度
                        // let view = uni.createSelectorQuery().select('.top-tabbar');
                        // view.boundingClientRect(data => {
                        //     let h = self.phoneHeight - data.height;
                        //     self.scrollviewHigh = h;
                        // }).exec();
                    }
                });
            },
            
            /*获取数据*/
            getData() {
                let self = this;
                self.loading = true;
                self._get('store.delivery/orderlists', {
                    settled: self.state_active,
                    page: self.page || 1,
                    list_rows: self.list_rows,
                }, function(data) {
                    self.loading = false;
                    self.tableData = self.tableData.concat(data.data.list.data);
                    self.last_page = data.data.list.last_page;
                    if (self.last_page <= 1) {
                        self.no_more = true;
                    }
                });
            },
 
            /*切换*/
            stateFunc(e) {
                let self = this;
                if(e!=self.state_active){
                    self.tableData = [];
                    self.page = 1;
                    self.state_active = e;
                    self.getData();
                }
            },
 
            /*可滚动视图区域到底触发*/
            scrolltolowerFunc() {
                let self = this;
                if (self.no_more) {
                    return;
                }
                self.page++;
                if (self.page <= self.last_page) {
                    self.getData();
                } else {
                    self.no_more = true;
                }
            }
        }
    }
</script>
 
<style>
    @import '/pages2/common/main.css';
    @import '/pages2/common/icon.css';
    
    .team-order-photo,
    .team-order-photo image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
    }
</style>