Commit d82b1748a7caefc41efd248a34f3963680210f1a

Authored by fengtao
1 parent 467ad8c3

refractor:重构组态列表,之前的分页有问题

1 <template> 1 <template>
2 <view class="status-page"> 2 <view class="status-page">
3 - <f-navbar navbarType="2" @leftClick="leftClick">  
4 - <view class="u-flex search-top" slot="left"> 3 + <view style="margin-left:15rpx;background-color: #f8f9fa;position:fixed;top:0rpx;z-index: 99999;">
  4 + <view style="height:35rpx;background-color: #f8f9fa;"></view>
  5 + <view class="u-flex search-top">
5 <view class="search-main"><u--input @change="inputChanged" prefixIcon="search" placeholder="请输入组态名称" border="surround" shape="circle"></u--input></view> 6 <view class="search-main"><u--input @change="inputChanged" prefixIcon="search" placeholder="请输入组态名称" border="surround" shape="circle"></u--input></view>
6 </view> 7 </view>
7 - </f-navbar> 8 + </view>
  9 + <view style="height:35rpx"></view>
8 <!-- 公共组件-每个页面必须引入 --> 10 <!-- 公共组件-每个页面必须引入 -->
9 <public-module></public-module> 11 <public-module></public-module>
  12 + <!-- 自带分页组件 -->
10 <mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"> 13 <mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
11 - <view class="status-container">  
12 - <view @click="openConfigDetail(item.id)" v-for="(item, index) in list" :key="index" class="status-item u-flex">  
13 - <view style="cursor: pointer;" class="item-image"><image class="image" :src="item.icon || defaultConfigImage"></image></view>  
14 - <view class="item-text">  
15 - <text class="text">{{ item.name }}</text> 14 + <view class="configuation-container">
  15 + <view class="configuation-item">
  16 + <view @click="openConfigDetail(item.id)" v-for="(item, index) in list" :key="index" class="item">
  17 + <image class="image" :src="item.icon || defaultConfigImage"></image>
  18 + <text class="name">{{ item.name }}</text>
16 </view> 19 </view>
17 </view> 20 </view>
18 </view> 21 </view>
19 </mescroll-body> 22 </mescroll-body>
  23 + <!-- 自带分页组件 -->
  24 + <view style="height: 60rpx;"></view>
20 </view> 25 </view>
21 </template> 26 </template>
22 27
23 <script> 28 <script>
24 -import fNavbar from '@/components/module/f-navbar/f-navbar';  
25 import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'; 29 import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
26 30
27 export default { 31 export default {
28 - components: {  
29 - fNavbar  
30 - },  
31 mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件) 32 mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
32 data() { 33 data() {
33 return { 34 return {
  35 + defaultConfigImage: '../../../static/test.png',
34 page: { 36 page: {
35 num: 0, 37 num: 0,
36 size: 10 38 size: 10
@@ -41,7 +43,6 @@ export default { @@ -41,7 +43,6 @@ export default {
41 upOption: { 43 upOption: {
42 auto: false // 不自动加载 44 auto: false // 不自动加载
43 }, 45 },
44 - defaultConfigImage: '../../../static/test.png',  
45 list: [] 46 list: []
46 }; 47 };
47 }, 48 },
@@ -87,17 +88,18 @@ export default { @@ -87,17 +88,18 @@ export default {
87 this.page.num += 1; 88 this.page.num += 1;
88 this.loadData(this.page.num); 89 this.loadData(this.page.num);
89 }, 90 },
90 - loadData(pageNo, T) { 91 + loadData(pageNo, organizationV) {
91 let httpData = { 92 let httpData = {
92 page: pageNo, 93 page: pageNo,
93 pageSize: 10, 94 pageSize: 10,
94 - name: T 95 + name: organizationV
95 }; 96 };
96 uni.$u.http 97 uni.$u.http
97 .get('/yt/configuration/center', { params: httpData, custom: { load: false } }) 98 .get('/yt/configuration/center', { params: httpData, custom: { load: false } })
98 .then(res => { 99 .then(res => {
99 uni.stopPullDownRefresh(); 100 uni.stopPullDownRefresh();
100 this.mescroll.endByPage(res.items.length, res.total); 101 this.mescroll.endByPage(res.items.length, res.total);
  102 + this.cameraTotal = res.total;
101 if (pageNo == 1) { 103 if (pageNo == 1) {
102 this.list = res.items; 104 this.list = res.items;
103 } else { 105 } else {
@@ -10,36 +10,35 @@ @@ -10,36 +10,35 @@
10 margin-top: -34rpx; 10 margin-top: -34rpx;
11 } 11 }
12 } 12 }
13 -}  
14 -.status-container {  
15 - width: 700rpx;  
16 - height: 250rpx;  
17 - display: flex;  
18 - flex-wrap: wrap;  
19 - align-content: space-between;  
20 - justify-content: space-between;  
21 - flex-direction: row;  
22 - .status-item {  
23 - width: 300rpx;  
24 - height: 250rpx;  
25 - margin: 23rpx;  
26 - background-color: #ffffff;  
27 - border-radius: 20px;  
28 - flex-direction: column;  
29 - justify-content: space-between;  
30 - .item-image {  
31 - margin-top: 38rpx;  
32 - .image {  
33 - width: 198rpx;  
34 - height: 119rpx;  
35 - }  
36 - }  
37 - .item-text {  
38 - position: relative;  
39 - top: -25rpx;  
40 - .text {  
41 - color: #333333;  
42 - font-size: 14px; 13 + .configuation-container {
  14 + .configuation-item {
  15 + width: 750rpx;
  16 + display: flex;
  17 + justify-content: space-between;
  18 + flex-wrap: wrap;
  19 + margin: 58rpx 0rpx 0rpx 6rpx;
  20 + .item {
  21 + width: 330rpx;
  22 + height: 288rpx;
  23 + background-color: #fff;
  24 + border-radius: 10px;
  25 + display: flex;
  26 + align-items: center;
  27 + justify-content: center;
  28 + flex-direction: column;
  29 + margin: 0rpx 43rpx 35rpx 0rpx;
  30 + .image {
  31 + width: 200rpx;
  32 + height: 144rpx;
  33 + }
  34 + .name {
  35 + font-size: 14px;
  36 + font-family: PingFangSC-Regular, PingFang SC;
  37 + font-weight: 400;
  38 + color: #333333;
  39 + line-height: 20px;
  40 + margin-top: 29rpx;
  41 + }
43 } 42 }
44 } 43 }
45 } 44 }