简柏林 / thingskit-app · Commits

Commit 237a38c99d7dd48fc43ca8347a0ba250d9f1b5e8

Authored by fengtao
1 parent 1e273dd3

feat：新增组态功能，查看组态详情

Inline Side-by-side
Showing 4 changed files with 128 additions and 31 deletions
@@ -2,60 +2,112 @@ @@ -2,60 +2,112 @@
2 <view class="status-page"> 2 <view class="status-page">
3 <f-navbar navbarType="2" @leftClick="leftClick"> 3 <f-navbar navbarType="2" @leftClick="leftClick">
4 <view class="u-flex search-top" slot="left"> 4 <view class="u-flex search-top" slot="left">
5 - <view class="search-main"><u--input prefixIcon="search" placeholder="请输入组态名称" border="surround" shape="circle"></u--input></view> 5 + <view class="search-main"><u--input @change="inputChanged" prefixIcon="search" placeholder="请输入组态名称" border="surround" shape="circle"></u--input></view>
6 </view> 6 </view>
7 </f-navbar> 7 </f-navbar>
8 <!-- 公共组件-每个页面必须引入 --> 8 <!-- 公共组件-每个页面必须引入 -->
9 <public-module></public-module> 9 <public-module></public-module>
10 - <view class="status-container">  
11 - <view @click="openStatusDetail(item.id)" v-for="(item, index) in list" :key="index" class="status-item u-flex">  
12 - <view class="item-image"><image class="image" :src="item.icon"></image></view>  
13 - <view class="item-text">  
14 - <text class="text">{{ item.name }}</text> 10 + <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>
  16 + </view>
15 </view> 17 </view>
16 </view> 18 </view>
17 - </view>  
18 - <f-tabbar></f-tabbar> 19 + </mescroll-body>
19 </view> 20 </view>
20 </template> 21 </template>
21 22
22 <script> 23 <script>
23 -import fTabbar from '@/components/module/f-tabbar/f-tabbar';  
24 import fNavbar from '@/components/module/f-navbar/f-navbar'; 24 import fNavbar from '@/components/module/f-navbar/f-navbar';
  25 +import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
25 26
26 export default { 27 export default {
27 components: { 28 components: {
28 - fTabbar,  
29 fNavbar 29 fNavbar
30 }, 30 },
  31 + mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
31 data() { 32 data() {
32 return { 33 return {
33 - list: [  
34 - {  
35 - id: 1,  
36 - name: '智慧办公室1',  
37 - icon: '../../../static/test.png'  
38 - },  
39 - {  
40 - id: 2,  
41 - name: '智慧办公室2',  
42 - icon: '../../../static/test.png'  
43 - }  
44 - ] 34 + page: {
  35 + num: 0,
  36 + size: 10
  37 + },
  38 + downOption: {
  39 + auto: true //是否在初始化后,自动执行downCallback; 默认true
  40 + },
  41 + upOption: {
  42 + auto: false // 不自动加载
  43 + },
  44 + defaultConfigImage: '../../../static/test.png',
  45 + list: []
45 }; 46 };
46 }, 47 },
47 onLoad() { 48 onLoad() {
48 // 隐藏原生的tabbar 49 // 隐藏原生的tabbar
49 uni.hideTabBar(); 50 uni.hideTabBar();
  51 + uni.setStorageSync('getConfiguration', {
  52 + isConfiguration: false
  53 + });
  54 + },
  55 + onUnload() {
  56 + uni.setStorageSync('getConfiguration', {
  57 + isConfiguration: false
  58 + });
  59 + uni.removeStorageSync('getConfiguration');
50 }, 60 },
51 methods: { 61 methods: {
  62 + inputChanged(e) {
  63 + this.page.num = 1;
  64 + this.loadData(1, e);
  65 + },
52 leftClick() { 66 leftClick() {
53 return false; 67 return false;
54 }, 68 },
55 - openStatusDetail(e) { 69 + onBackPress() {
  70 + console.log('返回');
  71 + return true; // 阻止返回 不阻止就不写或者用uni.navigateBack({ delta: 1 })返回
  72 + },
  73 + openConfigDetail(e) {
56 uni.navigateTo({ 74 uni.navigateTo({
57 - url: 'configurationDetail' 75 + url: 'configurationDetail?configId=' + e
58 }); 76 });
  77 + },
  78 + /*下拉刷新的回调 */
  79 + downCallback() {
  80 + //联网加载数据
  81 + this.page.num = 1;
  82 + this.loadData(1);
  83 + },
  84 + /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
  85 + upCallback() {
  86 + //联网加载数据
  87 + this.page.num += 1;
  88 + this.loadData(this.page.num);
  89 + },
  90 + loadData(pageNo, T) {
  91 + let httpData = {
  92 + page: pageNo,
  93 + pageSize: 10,
  94 + name: T
  95 + };
  96 + uni.$u.http
  97 + .get('/yt/configuration/center', { params: httpData, custom: { load: false } })
  98 + .then(res => {
  99 + uni.stopPullDownRefresh();
  100 + this.mescroll.endByPage(res.items.length, res.total);
  101 + if (pageNo == 1) {
  102 + this.list = res.items;
  103 + } else {
  104 + this.list = this.list.concat(res.items);
  105 + }
  106 + })
  107 + .catch(e => {
  108 + //联网失败, 结束加载
  109 + this.mescroll.endErr();
  110 + });
59 } 111 }
60 } 112 }
61 }; 113 };
@@ -2,24 +2,66 @@ @@ -2,24 +2,66 @@
2 <view class="content"> 2 <view class="content">
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
5 - <f-tabbar :isFillHeight="false"></f-tabbar> 5 + <web-view :src="showConfiguration" bindload="bindload" binderror="binderror"></web-view>
6 </view> 6 </view>
7 </template> 7 </template>
8 8
9 <script> 9 <script>
10 -import fTabbar from '@/components/module/f-tabbar/f-tabbar';  
11 export default { 10 export default {
12 - components: {  
13 - fTabbar  
14 - },  
15 data() { 11 data() {
16 - return {}; 12 + return {
  13 + showConfiguration: '',
  14 + defauleConfigImage: 'https://dev.thingskit.com',
  15 + params: ''
  16 + };
17 }, 17 },
18 onLoad(e) { 18 onLoad(e) {
  19 + uni.setStorageSync('getConfiguration', {
  20 + isConfiguration: true
  21 + });
  22 + if (e.configId !== null) {
  23 + this.params = e.configId;
  24 + this.requestUrl(this.params);
  25 + }
19 // 隐藏原生的tabbar 26 // 隐藏原生的tabbar
20 uni.hideTabBar(); 27 uni.hideTabBar();
  28 + },
  29 + onShow() {
  30 + uni.setStorageSync('getConfiguration', {
  31 + isConfiguration: true
  32 + });
  33 + },
  34 + onUnload() {
  35 + uni.setStorageSync('getConfiguration', {
  36 + isConfiguration: false
  37 + });
  38 + uni.removeStorageSync('config');
  39 + },
  40 + methods: {
  41 + // 网页加载成功时候触发此事件
  42 + bindload(res) {
  43 + console.log(res, res.detail);
  44 + },
  45 + // 网页加载失败的时候触发此事件
  46 + binderror(err) {
  47 + console.log(err, err.detail);
  48 + },
  49 + async requestUrl(e) {
  50 + const httpData = {
  51 + configurationId: e,
  52 + lightbox: 1
  53 + };
  54 + const getUrl = await uni.$u.http.get('/', { params: httpData, custom: { load: false } });
  55 + const pathUrl = uni.getStorageSync('config');
  56 + this.showConfiguration = pathUrl.baseURL + '/' + '?' + 'configurationId=' + e + '&' + 'lightbox=' + 1;
  57 + }
21 } 58 }
22 }; 59 };
23 </script> 60 </script>
24 61
25 -<style lang="scss" scoped></style> 62 +<style lang="scss" scoped>
  63 +.content {
  64 + background: #f8f9fa;
  65 + min-height: 100vh;
  66 +}
  67 +</style>
1 .status-page { 1 .status-page {
  2 + background: #f8f9fa;
2 padding: 15rpx 15rpx; 3 padding: 15rpx 15rpx;
  4 + min-height: 100vh;
3 .search-top { 5 .search-top {
4 justify-content: space-between; 6 justify-content: space-between;
5 flex-direction: row; 7 flex-direction: row;
6 .search-main { 8 .search-main {
7 width: 700rpx; 9 width: 700rpx;
  10 + margin-top: -34rpx;
8 } 11 }
9 } 12 }
10 } 13 }

32 KB | W: | H:

4.63 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin