feats

config/dev.js

@@ -3,7 +3,6 @@ module.exports = {
     NODE_ENV: '"development"'
   },
   defineConstants: {
-    // HOST: '"https://machine.njyunzhi.com"',
     HOST: '"http://192.168.89.147:7083"',
   },
   mini: {},

config/prod.js

@@ -3,8 +3,7 @@ module.exports = {
     NODE_ENV: '"production"'
   },
   defineConstants: {
-    // HOST: '"https://machine.njyunzhi.com"',
-    HOST: '"http://192.168.89.147:7083"',
+    HOST: '"https://dtc.machine.njyunzhi.com"',
   },
   mini: {},
   h5: {

src/app.config.js

@@ -10,13 +10,13 @@ export default {
     navigationBarTitleText: 'WeChat',
     navigationBarTextStyle: 'black'    
   },
-  tabBar: {
-    list: [{
-      pagePath: "pages/index/index",
-      text: "设备绑定"
-    }, {
-      pagePath: "pages/mine/index",
-      text: "我的"
-    }]
-  },
+  // tabBar: {
+  //   list: [{
+  //     pagePath: "pages/index/index",
+  //     text: "设备绑定"
+  //   }, {
+  //     pagePath: "pages/mine/index",
+  //     text: "我的"
+  //   }]
+  // },
 }

src/components/layout/index.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { Tabbar, TabbarItem } from '@antmjs/vantui'
+import { View, Slot } from '@tarojs/components';
+import './style.less';
+
+export default (props) => {
+  const { active } = props;
+
+  const onTabChange = (e) => {
+    const index = e.detail;
+    const tabPage = [
+      '/pages/index/index',
+      '/pages/mine/index',
+    ]
+
+    const url = tabPage[index];
+    Taro.redirectTo({ url });
+  }
+
+  return (
+    <View className="page">
+      {props.children}
+      <Tabbar active={active} onChange={onTabChange}>
+        <TabbarItem>绑定设备</TabbarItem>
+        <TabbarItem>
+          我的
+        </TabbarItem>
+      </Tabbar>
+    </View>
+  )
+}

src/components/layout/style.less

@@ -0,0 +1,7 @@
+.page {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  box-sizing: border-box;
+  padding-bottom: 50PX;
+}

src/pages/index/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
 import Uploader from '@/components/Uploader';
+import Layout from '@/components/layout';
 import { Button, Form, FormItem, Radio, RadioGroup, Icon, Field } from '@antmjs/vantui';
 import { saveBind } from '@/services/bind';
 import useRequest from '@/utils/useRequest';
@@ -35,7 +36,7 @@ export default (props) => {
   }
 
   return (
-    <View>
+    <Layout active={0}>
       <Form className="bind-form" form={form} onFinish={onFinish}>
         <FormItem
           required
@@ -107,6 +108,6 @@ export default (props) => {
           </Button>
         </View>
       </Form>
-    </View>
+    </Layout>
   )
 }

src/pages/mine/components/Item.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { View } from '@tarojs/components';
+import { Row, Col, Image, Icon } from '@antmjs/vantui';
+import './style.less'
+
+export default (props) => {
+  const { data } = props;
+
+  return (
+    <View className="device-card">
+      <View className="device-card-header">
+        <Image
+          width="64px"
+          height="64px"
+          src={data?.machineryThumb}
+        />
+      </View>
+      <View className="device-card-body">        
+        <Row>
+          <Col span={16}>
+            <View className="device-card-title">{ data?.machineryName }</View>
+            <View className="device-card-subtitle">{ data?.deviceNo }</View>
+          </Col>
+          <Col span={8}>
+            <View className="device-card-title">{ data?.userName }</View>
+            <View className="device-card-subtitle">{ data?.phone }</View>
+          </Col>
+        </Row>
+      </View>
+      <View className="device-card-footer">
+        <Icon name="arrow" />
+      </View>
+    </View>
+
+    // <Row>
+    //   <Col span={4}>
+    //   </Col>
+    //   <Col span={10}>
+    //     <View>{ data?.machineryName }</View>
+    //     <View>{ data?.deviceNo }</View>
+    //   </Col>
+    //   <Col span={6}>
+    //     <View>{ data?.userName }</View>
+    //     <View>{ data?.phone }</View>
+    //   </Col>
+    //   <Col span={4}>
+    //   </Col>
+    // </Row>
+  )
+
+  // return (
+  //   <Row>
+  //     <Col span="4">
+  //       { data?.deviceKind === 'feifang' ? '飞防' : '深松' }
+  //     </Col>
+  //     <Col span="6">
+  //       { data?.deviceNo }
+  //     </Col>
+  //     <Col span="10">
+  //       { data?.machineryName }
+  //     </Col>
+  //     <Col span="4">
+  //       { data?.onlineStatus === 1 ? '在线' : '离线' }
+  //     </Col>
+  //   </Row>
+  // )
+}

src/pages/mine/components/List.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import VirtualList from '@tarojs/components/virtual-list';
+import { Cell, Loading } from '@antmjs/vantui';
+import useRequest from '@/utils/useRequest';
+import { getBoundList } from '@/services/bind';
+import Item from './Item';
+
+const Row = (props) => {
+  const { data, index } = props;
+  const item = data[index];
+  const onClick = () => Taro.navigateTo({ url: `/pages/index/index?id=${item.serialNo}` });
+
+  return (
+    <Item data={item} onClick={onClick} />
+  );
+}
+
+export default (props) => {
+
+  const [pageInfo, setPageInfo] = React.useState({ current: 0, size: 10, total: 0, page: 0 });
+  const [list, setList] = React.useState([]);
+  const [loading, request] = useRequest(getBoundList);
+
+  const height = 500;
+  const itemSize = 100;
+  const dataLen = list.length;
+
+  // 所有数据读取完毕
+  const isFinished = pageInfo.current > 0 && pageInfo.current * pageInfo.size >= pageInfo.total;
+
+  const queryData = (params) => {
+    request(params).then(res => {
+      const { records, ...page } = res;
+      if (page.current === 1) {
+        setList(records || []);
+      } else {
+        setList(list.concat(records || []));
+      }
+      setPageInfo(page);
+    }, []);
+  };
+
+  const onScroll = ({scrollDirection, scrollOffset}) => {
+    
+    if (
+      // 数据还有
+      !isFinished &&
+      // 避免重复加载数据
+      !loading &&
+      // 只有往前滚动我们才触发
+      scrollDirection === 'forward' &&
+      // 5 = (列表高度 / 单项列表高度)
+      // 100 = 滚动提前加载量，可根据样式情况调整
+      scrollOffset > ((dataLen - Math.ceil(height / itemSize) ) * itemSize + 100)
+    ) {
+      queryData({ pageNum: pageInfo.current + 1 , pageSize: 10 })
+    }
+  }
+
+  return (
+    <View>
+      <VirtualList
+        height={height}
+        itemData={list}
+        itemCount={dataLen}
+        itemSize={itemSize}
+        width="100%"
+        onScroll={onScroll}
+      >
+        {Row}
+      </VirtualList>
+      {
+        loading && <Loading />
+      }
+      {
+        isFinished && <View className="finish-tip">我是有底线的 ~</View>
+      }
+    </View>
+  )
+}

src/pages/mine/components/style.less

@@ -0,0 +1,54 @@
+
+@height: 64PX;
+.device-card {
+  display: flex;
+  height: @height;
+  padding: 12PX 1em;
+  margin-bottom: 12PX;
+  background-color: #fff;
+  border-bottom: 1px solid #ebedf0;
+
+  .device-card-header {
+    flex: none;
+    width: 64PX;
+    height: @height;
+  }
+
+  .device-card-footer {
+    flex: none;
+    width: 24PX;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    & > view {
+      flex: none;
+    }
+  }
+
+  .device-card-body {
+    flex: 1;
+    box-sizing: border-box;
+    padding: 0 1em;
+    overflow: hidden;
+  }
+
+  .device-card-title, .device-card-subtitle {
+    height: (@height / 2);
+    line-height: (@height / 2);
+  }
+
+  .device-card-title {
+    font-size: 28px;
+    color: rgba(0, 0, 0, 1);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .device-card-subtitle {
+    font-size: 0.8em;
+    color: rgba(0, 0, 0, 0.5);
+  }
+}

src/pages/mine/index.jsx

@@ -1,31 +1,16 @@
-import { Component } from 'react'
-import { View } from '@tarojs/components'
-import { Cell, Row, Col } from '@antmjs/vantui'
-import './index.less'
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { Cell, Row, Col } from '@antmjs/vantui';
+import Layout from '@/components/layout';
+import List from './components/List';
+import './index.less';
 
 export default (props) => {
 
   return (
-    <View>
-      <Cell>
-        <Row>
-          <Col span="4">
-            <View >深松</View>
-          </Col>
-          <Col span="4">
-            <View >012346</View>
-          </Col>
-          <Col span="10">
-            <View >雷肯Smaragd整地机</View>
-          </Col>
-          <Col span="3">
-            <View >离线</View>
-          </Col>
-          <Col span="3">
-            <View >{'>>'}</View>
-          </Col>
-        </Row>
-      </Cell>
-    </View>
+    <Layout active={1}>
+      <List />
+    </Layout>
   )
 }

src/pages/mine/index.less

@@ -1 +1,5 @@
 
+.finish-tip {
+  text-align: center;
+  color: rgba(0, 0, 0, 0.2);
+}

src/services/bind.js

@@ -1,3 +1,5 @@
 import request from "@/utils/request";
 
-export const saveBind = data => request('/tcBind', { method: 'post', data })
+export const saveBind = data => request('/tcBind', { method: 'post', data });
+
+export const getBoundList = params => request('/tcBind', { params });