feats

project.config.json

@@ -1,8 +1,8 @@
 {
   "miniprogramRoot": "./dist",
-  "projectname": "myApp",
+  "projectname": "源盛设备绑定",
   "description": "xiaofang",
-  "appid": "wx1a0fa56e6d0b78b3",
+  "appid": "wxe44244d1a5ea3364",
   "setting": {
     "urlCheck": true,
     "es6": false,

src/components/layout/index.jsx

@@ -2,13 +2,17 @@ import React from 'react';
 import Taro from '@tarojs/taro';
 import { Tabbar, TabbarItem } from '@antmjs/vantui'
 import { View, Slot } from '@tarojs/components';
+import NavBar from '../navbar';
 import './style.less';
 
+let active = 0;
+
 export default (props) => {
-  const { active } = props;
+  const { className = '', style = {}, custom = true, title = "myApp", showHome = false } = props;
 
   const onTabChange = (e) => {
     const index = e.detail;
+    active = index;
     const tabPage = [
       '/pages/index/index',
       '/pages/mine/index',
@@ -18,10 +22,30 @@ export default (props) => {
     Taro.reLaunch({ url });
   }
 
+  const innerStyle = React.useMemo(() => {
+    if (!custom) return;
+
+    const { windowWidth } = Taro.getSystemInfoSync();
+    const { bottom, right } = Taro.getMenuButtonBoundingClientRect();
+    
+    const gap = windowWidth - right;
+    const navBarHeight = bottom + gap;
+
+    return {
+      paddingTop: `${navBarHeight}px`,
+    }
+  }, [custom]);
+
+  const clsName = `page ${className}`;
+  const sty = { ...style, ...innerStyle };
+
   return (
-    <View className="page">
+    <View className={clsName} style={sty}>
+      {
+        custom && <NavBar title={title} showHome={showHome} />
+      }
       {props.children}
-      <Tabbar active={active} onChange={onTabChange}>
+      <Tabbar active={active} activeColor="#07c160" onChange={onTabChange}>
         <TabbarItem>绑定设备</TabbarItem>
         <TabbarItem>
           我的

src/components/layout/style.less

@@ -3,5 +3,7 @@
   height: 100vh;
   position: relative;
   box-sizing: border-box;
-  padding-bottom: 50PX;
+  padding-bottom: calc(env(safe-area-inset-bottom) + 50PX);
+  overflow: auto;
+  background-image: linear-gradient(rgba(7,193,94, 0.1), transparent);
 }

src/components/navbar/index.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { Icon } from '@antmjs/vantui';
+
+import './style.less'
+
+export default (props) => {
+  const { title, showHome = false } = props;
+
+  const [pgLen, setPgLen] = React.useState(0);
+  const [style1, style2, style3, style4] = React.useMemo(() => {
+    const { statusBarHeight, windowWidth } = Taro.getSystemInfoSync();
+    const { bottom, right, width, height, left, top } = Taro.getMenuButtonBoundingClientRect();
+
+    const gap = windowWidth - right;
+    
+    const wrapperStyle = {
+      paddingTop: `${statusBarHeight}px`,
+      height: `${bottom + gap}px`,
+      width: `${left}px`,
+    }
+
+    const barStyle = {
+      paddingTop: `${top - statusBarHeight}px`,
+      paddingLeft: `${gap}px`,
+      paddingRight: 0,
+      height: `${height}px`,
+      lineHeight: `${height}px`,
+    }
+
+    const navStyle = {
+      width: `${width}px`
+    }
+
+    const titleStype = {
+      padding: `0 ${gap}px`,
+    }
+
+    return [
+      wrapperStyle,
+      barStyle,
+      navStyle,
+      titleStype
+    ]
+  }, []);
+
+  const isBack = pgLen > 1;
+
+  const goHome = () => {
+    Taro.reLaunch({ url: '/pages/index/index' });
+  }
+
+  const goBack = () => {
+    Taro.navigateBack({
+      delta: 1
+    })
+  }
+
+  Taro.useDidShow(() => {
+    const pages = Taro.getCurrentPages();
+    setPgLen(pages ? pages.length : 0);
+  })
+
+  return (
+    <View className="navbar-wrapper" style={style1}>
+      <View className="navabar-container" style={style2}>
+        <View style={style3}>
+          {
+            showHome && <View className="navabar-icon" onClick={goHome}><Icon name="wap-home-o" size={36} /></View>
+          }
+          {
+            isBack && !showHome && <View className="navabar-icon" onClick={goBack}><Icon name="arrow-left" size={36} /></View>
+          }
+        </View>
+        <View style={style4}>{title}</View>
+      </View>
+    </View>
+  )
+}

src/components/navbar/style.less

@@ -0,0 +1,32 @@
+.navbar-wrapper {
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  .navabar-icon {
+    box-sizing: border-box;
+    padding: 0 8px;
+    display: inline-block;
+  }
+
+  .navabar-container {
+    box-sizing: border-box;
+    display: flex;
+
+    & > view {
+      &:first-child {
+        flex: none;
+      }
+  
+      &:last-child {
+        text-align: center;
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 16PX;
+      }
+    }
+  }
+}

src/pages/index/index.config.js

@@ -1,3 +1,5 @@
 export default {
-  navigationBarTitleText: '绑定设备'
+  navigationBarTitleText: '绑定设备',
+  enableShareAppMessage: true,
+  navigationStyle: 'custom'
 }

src/pages/index/index.jsx

@@ -56,13 +56,24 @@ export default (props) => {
         setDisabled(res.status === 1);
       })
     }
-  }, [id])
+  }, [id]);
+
+  // 分享页面
+  Taro.useShareAppMessage(() => {
+    return {
+      title: '源盛设备绑定',
+      imageUrl: 'https://h5.njyunzhi.com/images/nanyang_share.png'
+    }
+  });
+
+  console.log(wx.getMenuButtonBoundingClientRect())
+  console.log(wx.getSystemInfoSync())
 
   return (
-    <Layout active={0}>
+    <Layout active={0} title="绑定设备">
       {
         disabled && <NoticeBar text="车辆信息已入库, 禁止编辑" />
-      }      
+      }
       <Form className="bind-form" form={form} onFinish={onFinish}>
         <FormItem
           required

src/pages/index/index.less

@@ -2,7 +2,7 @@
 .bind-form {
   background: #fff;
   border-radius: 16px;
-  margin: 0 1em;
+  margin: 1em;
   width: calc(100% - 2em);
   overflow: hidden;
 

src/pages/mine/components/List.jsx

@@ -2,7 +2,7 @@ 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 { Cell, Loading, Empty } from '@antmjs/vantui';
 import useRequest from '@/utils/useRequest';
 import { getBoundList } from '@/services/bind';
 import Item from './Item';
@@ -61,16 +61,20 @@ export default (props) => {
 
   return (
     <View>
-      <VirtualList
-        height={height}
-        itemData={list}
-        itemCount={dataLen}
-        itemSize={itemSize}
-        width="100%"
-        onScroll={onScroll}
-      >
-        {Row}
-      </VirtualList>
+      {
+        dataLen < 1 ? <Empty /> : (
+          <VirtualList
+            height={height}
+            itemData={list}
+            itemCount={dataLen}
+            itemSize={itemSize}
+            width="100%"
+            onScroll={onScroll}
+          >
+            {Row}
+          </VirtualList>
+        )
+      }
       {
         loading && <Loading />
       }

src/pages/mine/index.config.js

@@ -1,3 +1,4 @@
 export default {
-  navigationBarTitleText: '我的'
+  navigationBarTitleText: '我的',
+  navigationStyle: 'custom'
 }

src/pages/mine/index.jsx

@@ -9,7 +9,7 @@ import './index.less';
 export default (props) => {
 
   return (
-    <Layout active={1}>
+    <Layout title="我的" showHome>
       <List />
     </Layout>
   )