静态页面

src/app.config.js

@@ -1,6 +1,5 @@
 export default {
   pages: [
-    'pages/WoDe/GeRenXinXi/index', // 我的-个人信息
     'pages/ShouYe/index', // tab-首页
     'pages/ShouYe/HuoDong/index', // 首页-活动
     'pages/ShouYe/ZiXun/index', // 首页-资讯
@@ -19,8 +18,16 @@ export default {
     'pages/HuoDong/ZiXunDetail/index', // 活动-资讯详情
 
     'pages/FuLi/index', // tab-福利
+    'pages/FuLi/ShangPinXiangQing/index', // 福利-商品详情
+    'pages/FuLi/ShangPinDuiHuan/index', // 福利-商品兑换
 
     'pages/WoDe/index', // tab-我的
+    'pages/WoDe/GeRenXinXi/index', // 我的-个人信息
+    'pages/WoDe/YeZhuRenZheng/index', // 我的-业主认证
+    'pages/WoDe/YeZhuShenHe/index', // 我的-业主审核
+    'pages/WoDe/WoDeHuoDong/index', // 我的-我的活动
+    'pages/WoDe/TuiJianErWeiMa/index', // 我的-推荐二维码
+    'pages/WoDe/TuiJianFenXiang/index', // 我的-推荐分享
   ],
   tabBar: {
     color: '#666666',

src/components/CustomHeader/index.css

@@ -0,0 +1,25 @@
+.CustomHeader {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+}
+.CustomHeader > text.Back {
+  display: inline-block;
+  position: absolute;
+  z-index: 2;
+  color: #fff;
+  font-size: 40px;
+  left: 30px;
+  top: 0;
+}
+.CustomHeader > text.Title {
+  display: block;
+  font-size: 32px;
+  color: #fff;
+  text-indent: 30px;
+  padding-bottom: 20px;
+  position: relative;
+  z-index: 1;
+  text-align: center;
+}

src/components/CustomHeader/index.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function CustomHeader (props) {
+
+  const [MarginTop, setMarginTop] = useState(0)
+  const [LineHeight, setLineHeight] = useState(0)
+  const { BgColor = '#fff', IsFixed = false, Title = '香颂蔚澜' } = props
+
+  if (MarginTop === 0) {
+    setMarginTop(Taro.getMenuButtonBoundingClientRect().top)
+  }
+  if (LineHeight === 0) {
+    setLineHeight(Taro.getMenuButtonBoundingClientRect().height)
+  }
+
+  return (
+    <view className='CustomHeader' style={{ background: BgColor, position: IsFixed ? 'absolute' : 'relative' }}>
+      <text className='iconfont iconjiantouleft Back' style={{ top: `${MarginTop}px`, lineHeight: `${LineHeight}px` }} onClick={() => { Taro.navigateBack() }}></text>
+      <text className='Title' style={{ marginTop: `${MarginTop}px`, lineHeight: `${LineHeight}px` }}>{Title}</text>
+    </view>
+  )
+}

src/components/CustomHeader/index.less

@@ -0,0 +1,29 @@
+.CustomHeader {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+
+  >text {
+    &.Back {
+      display: inline-block;
+      position: absolute;
+      z-index: 2;
+      color: #fff;
+      font-size: 40px;
+      left: 30px;
+      top: 0;
+    }
+
+    &.Title {
+      display: block;
+      font-size: 32px;
+      color: #fff;
+      text-indent: 30px;
+      padding-bottom: 20px;
+      position: relative;
+      z-index: 1;
+      text-align: center;
+    }
+  }
+}

src/components/PrizeListItem/index.jsx

@@ -1,41 +1,27 @@
-import React, { Component } from 'react'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class PrizeListItem extends Component {
-
-  state = {
-    TestImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg'
-  }
-
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    const { TestImg } = this.state
-    return (
-      <view className='PrizeListItem'>
-        <view className='Img'>
-          <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
-        </view>
-        <view className='Info'>
-          <text>沙发垫欧式轻奢</text>
-          <view className='flex-h'>
-            <text className='Count'>70</text>
-            <text className='flex-item'>人已兑换</text>
-            <text className='Num'>30000</text>
-            <text>积分</text>
-          </view>
+export default function PrizeListItem (props) {
+
+  const [TestImg] = useState('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg')
+
+  return (
+    <view className='PrizeListItem' onClick={() => { Taro.navigateTo({ url: `/pages/FuLi/ShangPinXiangQing/index?id=` }) }}>
+      <view className='Img'>
+        <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+      </view>
+      <view className='Info'>
+        <text>沙发垫欧式轻奢</text>
+        <view className='flex-h'>
+          <text className='Count'>70</text>
+          <text className='flex-item'>人已兑换</text>
+          <text className='Num'>30000</text>
+          <text>积分</text>
         </view>
-      </view >
-    )
-  }
+      </view>
+    </view >
+  )
 }

src/pages/FuLi/ShangPinDuiHuan/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '商品兑换'
+}

src/pages/FuLi/ShangPinDuiHuan/index.css

@@ -0,0 +1,123 @@
+.ShangPinDuiHuan {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #f8f8f8;
+}
+.ShangPinDuiHuan > .Info {
+  position: relative;
+  overflow: hidden;
+  padding: 0 30px;
+  min-height: 100vh;
+  z-index: 1;
+}
+.ShangPinDuiHuan > .Info > .Item {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 12px;
+  margin-top: 30px;
+}
+.ShangPinDuiHuan > .Info > .Item > .Img {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  overflow: hidden;
+  background: #ccc;
+}
+.ShangPinDuiHuan > .Info > .Item > .Img > image {
+  width: 100%;
+  height: 100%;
+}
+.ShangPinDuiHuan > .Info > .Item > .flex-item {
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+}
+.ShangPinDuiHuan > .Info > .Item > .flex-item > text {
+  width: 100%;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 28px;
+  font-weight: bold;
+  line-height: 40px;
+}
+.ShangPinDuiHuan > .Info > .Item > .flex-item > .Num {
+  font-size: 0;
+  white-space: nowrap;
+  margin-top: 16px;
+}
+.ShangPinDuiHuan > .Info > .Item > .flex-item > .Num > text {
+  display: inline-block;
+  font-size: 24px;
+  line-height: 40px;
+  vertical-align: middle;
+}
+.ShangPinDuiHuan > .Info > .Item > .flex-item > .Num > text:first-child {
+  color: #971C21;
+}
+.ShangPinDuiHuan > .Info > .Item > .flex-item > .flex-h {
+  align-items: center;
+  margin-top: 16px;
+}
+.ShangPinDuiHuan > .Info > .Item > .flex-item > .flex-h > text {
+  font-size: 24px;
+  color: #999;
+  line-height: 40px;
+}
+.ShangPinDuiHuan > .Info > .Item > .flex-item > .flex-h > text:first-child {
+  color: #F35844;
+}
+.ShangPinDuiHuan > .Info > .Item > .flex-item > .flex-h > .EditNum {
+  font-size: 0;
+  white-space: nowrap;
+  border: 2px solid #ccc;
+  border-radius: 6px;
+}
+.ShangPinDuiHuan > .Info > .Item > .flex-item > .flex-h > .EditNum > text {
+  display: inline-block;
+  font-size: 30px;
+  color: #333;
+  line-height: 40px;
+  width: 50px;
+  text-align: center;
+}
+.ShangPinDuiHuan > .Info > .Item > .flex-item > .flex-h > .EditNum > input {
+  width: 80px;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 24px;
+  text-align: center;
+  line-height: 40px;
+  height: 40px;
+  border: 2px solid #ccc;
+  border-top: none;
+  border-bottom: none;
+}
+.ShangPinDuiHuan > .Info > .InfoBottom {
+  width: 100%;
+  height: 158px;
+}
+.ShangPinDuiHuan > .BottomBtn {
+  padding: 30px;
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+  margin-top: -158px;
+}
+.ShangPinDuiHuan > .BottomBtn > text {
+  width: 100%;
+  font-size: 34px;
+  color: #fff;
+  line-height: 98px;
+  background: #ccc;
+  border-radius: 98px;
+  text-align: center;
+  display: block;
+}
+.ShangPinDuiHuan > .BottomBtn > text.active {
+  background: #F35844;
+}

src/pages/FuLi/ShangPinDuiHuan/index.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react'
+import { Current } from '@tarojs/taro'
+import { Input } from '@tarojs/components'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function ShangPinDuiHuan (props) {
+
+  const CurrnetId = Current.router.params.id
+
+  return (
+    <view className='ShangPinDuiHuan'>
+      <view className='Info'>
+        <view className='Item flex-h'>
+          <view className='Img'>
+            <image mode='aspectFill' src={null} className='centerLabel'></image>
+          </view>
+          <view className='flex-item'>
+            <text>沙发垫欧式轻奢</text>
+            <view className='Num'>
+              <text>78</text>
+              <text>人已兑换</text>
+            </view>
+            <view className='flex-h'>
+              <text>80000</text>
+              <text>积分</text>
+              <view className='flex-item'></view>
+              <view className='EditNum flex-h'>
+                <text className='iconfont iconjian'></text>
+                <Input></Input>
+                <text className='iconfont iconjia1'></text>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view className='InfoBottom'></view>
+      </view>
+      <view className='BottomBtn'>
+        <text className='active'>确认兑换</text>
+      </view>
+    </view>
+  )
+}

src/pages/FuLi/ShangPinDuiHuan/index.less

@@ -0,0 +1,142 @@
+.ShangPinDuiHuan {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #f8f8f8;
+
+  >.Info {
+    position: relative;
+    overflow: hidden;
+    padding: 0 30px;
+    min-height: 100vh;
+    z-index: 1;
+
+    >.Item {
+      position: relative;
+      overflow: hidden;
+      background: #fff;
+      border-radius: 12px;
+      margin-top: 30px;
+
+      >.Img {
+        width: 200px;
+        height: 200px;
+        position: relative;
+        overflow: hidden;
+        background: #ccc;
+
+        >image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      >.flex-item {
+        padding: 20px;
+        position: relative;
+        overflow: hidden;
+
+        >text {
+          width: 100%;
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 28px;
+          font-weight: bold;
+          line-height: 40px;
+        }
+
+        >.Num {
+          font-size: 0;
+          white-space: nowrap;
+          margin-top: 16px;
+
+          >text {
+            display: inline-block;
+            font-size: 24px;
+            line-height: 40px;
+            vertical-align: middle;
+
+            &:first-child {
+              color: #971C21;
+            }
+          }
+        }
+
+        >.flex-h {
+          align-items: center;
+          margin-top: 16px;
+
+          >text {
+            font-size: 24px;
+            color: #999;
+            line-height: 40px;
+
+            &:first-child {
+              color: #F35844;
+            }
+          }
+
+          >.EditNum {
+            font-size: 0;
+            white-space: nowrap;
+            border: 2px solid #ccc;
+            border-radius: 6px;
+
+            >text {
+              display: inline-block;
+              font-size: 30px;
+              color: #333;
+              line-height: 40px;
+              width: 50px;
+              text-align: center;
+            }
+
+            >input {
+              width: 80px;
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 24px;
+              text-align: center;
+              line-height: 40px;
+              height: 40px;
+              border: 2px solid #ccc;
+              border-top: none;
+              border-bottom: none;
+            }
+          }
+        }
+      }
+    }
+
+    >.InfoBottom {
+      width: 100%;
+      height: 158px;
+    }
+  }
+
+  >.BottomBtn {
+    padding: 30px;
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+    margin-top: -158px;
+
+    >text {
+      width: 100%;
+      font-size: 34px;
+      color: #fff;
+      line-height: 98px;
+      background: #ccc;
+      border-radius: 98px;
+      text-align: center;
+      display: block;
+
+      &.active {
+        background: #F35844;
+      }
+    }
+  }
+}

src/pages/FuLi/ShangPinXiangQing/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '商品详情'
+}

src/pages/FuLi/ShangPinXiangQing/index.css

@@ -0,0 +1,105 @@
+.ShangPinXiangQing {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #f8f8f8;
+}
+.ShangPinXiangQing > .Info {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+}
+.ShangPinXiangQing > .Info > .Img {
+  width: 100%;
+  padding-bottom: 50%;
+  background: #ccc;
+  position: relative;
+  overflow: hidden;
+}
+.ShangPinXiangQing > .Info > .Img > image {
+  width: 100%;
+  height: 100%;
+}
+.ShangPinXiangQing > .Info > .Title {
+  padding: 20px 30px;
+  position: relative;
+  overflow: hidden;
+}
+.ShangPinXiangQing > .Info > .Title > text {
+  display: block;
+  width: 100%;
+  font-size: 32px;
+  color: #333;
+  font-weight: bold;
+  line-height: 40px;
+}
+.ShangPinXiangQing > .Info > .flex-h {
+  padding: 0 30px 20px;
+  align-items: center;
+}
+.ShangPinXiangQing > .Info > .flex-h > text {
+  font-size: 28px;
+  color: #666;
+  line-height: 40px;
+}
+.ShangPinXiangQing > .Info > .flex-h > text:first-child {
+  color: #F35844;
+}
+.ShangPinXiangQing > .Info > .flex-h > text.flex-item {
+  color: #999;
+}
+.ShangPinXiangQing > .Info > .flex-h > text:last-child {
+  color: #971C21;
+}
+.ShangPinXiangQing > .Detail {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  margin-top: 20px;
+}
+.ShangPinXiangQing > .Detail > .Title {
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  padding: 30px 0;
+}
+.ShangPinXiangQing > .Detail > .Title > .Line {
+  height: 2px;
+  background: rgba(0, 0, 0, 0.08);
+  z-index: 1;
+  position: absolute;
+  left: 30px;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+}
+.ShangPinXiangQing > .Detail > .Title > text {
+  display: inline-block;
+  background: #fff;
+  padding: 0 40px;
+  line-height: 40px;
+  z-index: 2;
+  font-size: 28px;
+  color: #666;
+  position: relative;
+}
+.ShangPinXiangQing > .Detail > .BottomBtn {
+  padding: 30px;
+  position: relative;
+  overflow: hidden;
+}
+.ShangPinXiangQing > .Detail > .BottomBtn > text {
+  width: 100%;
+  font-size: 34px;
+  color: #fff;
+  line-height: 98px;
+  background: #ccc;
+  border-radius: 98px;
+  text-align: center;
+  display: block;
+}
+.ShangPinXiangQing > .Detail > .BottomBtn > text.active {
+  background: #F35844;
+}

src/pages/FuLi/ShangPinXiangQing/index.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import Taro, { Current } from '@tarojs/taro'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function ShangPinXiangQing (props) {
+
+  const CurrnetId = Current.router.params.id
+
+  return (
+    <view className='ShangPinXiangQing'>
+      <view className='Info'>
+        <view className='Img'>
+          <image mode='aspectFill' src={null} className='centerLabel'></image>
+        </view>
+        <view className='Title'>
+          <text>筷子置物架收纳盒</text>
+        </view>
+        <view className='flex-h'>
+          <text>3000</text>
+          <text className='flex-item'>积分</text>
+          <text>剩余数量</text>
+          <text>22</text>
+        </view>
+      </view>
+      <view className='Detail'>
+        <view className='Title'>
+          <view className='Line'></view>
+          <text>产品详情</text>
+        </view>
+        <view className='BottomBtn'>
+          <text className='active' onClick={() => { Taro.navigateTo({ url: `/pages/FuLi/ShangPinDuiHuan/index` }) }}>立即兑换</text>
+        </view>
+      </view>
+    </view>
+  )
+}

src/pages/FuLi/ShangPinXiangQing/index.less

@@ -0,0 +1,121 @@
+.ShangPinXiangQing {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #f8f8f8;
+
+  >.Info {
+    position: relative;
+    overflow: hidden;
+    background: #fff;
+
+    >.Img {
+      width: 100%;
+      padding-bottom: 50%;
+      background: #ccc;
+      position: relative;
+      overflow: hidden;
+
+      >image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    >.Title {
+      padding: 20px 30px;
+      position: relative;
+      overflow: hidden;
+
+      >text {
+        display: block;
+        width: 100%;
+        font-size: 32px;
+        color: #333;
+        font-weight: bold;
+        line-height: 40px;
+      }
+    }
+
+    >.flex-h {
+      padding: 0 30px 20px;
+      align-items: center;
+
+      >text {
+        font-size: 28px;
+        color: #666;
+        line-height: 40px;
+
+        &:first-child {
+          color: #F35844;
+        }
+
+        &.flex-item {
+          color: #999;
+        }
+
+        &:last-child {
+          color: #971C21;
+        }
+      }
+    }
+  }
+
+  >.Detail {
+    position: relative;
+    overflow: hidden;
+    background: #fff;
+    margin-top: 20px;
+
+    >.Title {
+      position: relative;
+      overflow: hidden;
+      text-align: center;
+      padding: 30px 0;
+
+      >.Line {
+        height: 2px;
+        background: rgba(0, 0, 0, 0.08);
+        z-index: 1;
+        position: absolute;
+        left: 30px;
+        right: 30px;
+        top: 50%;
+        transform: translateY(-50%);
+        -webkit-transform: translateY(-50%);
+      }
+
+      >text {
+        display: inline-block;
+        background: #fff;
+        padding: 0 40px;
+        line-height: 40px;
+        z-index: 2;
+        font-size: 28px;
+        color: #666;
+        position: relative;
+      }
+    }
+
+    >.BottomBtn {
+      padding: 30px;
+      position: relative;
+      overflow: hidden;
+
+      >text {
+        width: 100%;
+        font-size: 34px;
+        color: #fff;
+        line-height: 98px;
+        background: #ccc;
+        border-radius: 98px;
+        text-align: center;
+        display: block;
+        &.active {
+          background: #F35844;
+        }
+      }
+    }
+  }
+}

src/pages/WoDe/GeRenXinXi/index.css

@@ -0,0 +1,43 @@
+.GeRenXinXi {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background: #f8f8f8;
+  overflow: hidden;
+}
+.GeRenXinXi > .Form {
+  padding: 0 30px;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  margin-top: 20px;
+}
+.GeRenXinXi > .Form > .flex-h {
+  align-items: center;
+  border-top: 2px solid rgba(0, 0, 0, 0.08);
+}
+.GeRenXinXi > .Form > .flex-h:first-child {
+  border: none;
+}
+.GeRenXinXi > .Form > .flex-h > text {
+  font-size: 28px;
+  color: #999;
+  line-height: 40px;
+  padding: 32px 0;
+}
+.GeRenXinXi > .Form > .flex-h > text:first-child {
+  color: #333;
+  margin-right: 40px;
+}
+.GeRenXinXi > .Form > .flex-h > .UserIcon {
+  width: 60px;
+  height: 60px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 100%;
+  background: #ccc;
+}
+.GeRenXinXi > .Form > .flex-h > .UserIcon > image {
+  width: 100%;
+  height: 100%;
+}

src/pages/WoDe/GeRenXinXi/index.jsx

@@ -7,7 +7,40 @@ export default function GeRenXinXi (props) {
 
   return (
     <view className='GeRenXinXi'>
-      
+      <view className='Form'>
+        <view className='flex-h'>
+          <text className='flex-item'>头像</text>
+          <view className='UserIcon'>
+            <image mode='aspectFill' src={null}></image>
+          </view>
+        </view>
+        <view className='flex-h'>
+          <text className='flex-item'>姓名</text>
+          <text>三十而已</text>
+        </view>
+        <view className='flex-h'>
+          <text className='flex-item'>性别</text>
+          <text>女</text>
+        </view>
+        <view className='flex-h'>
+          <text className='flex-item'>联系电话</text>
+          <text>13648041829</text>
+        </view>
+      </view>
+      <view className='Form'>
+        <view className='flex-h'>
+          <text className='flex-item'>身份</text>
+          <text>业主</text>
+        </view>
+        <view className='flex-h'>
+          <text className='flex-item'>联系电话</text>
+          <text>13648041829</text>
+        </view>
+        <view className='flex-h'>
+          <text>房产</text>
+          <text className='flex-item'>南京市雨花台区安德门大姐56号凤翔山庄3区1栋3单元3楼309</text>
+        </view>
+      </view>
     </view>
   )
 }

src/pages/WoDe/GeRenXinXi/index.less

@@ -3,4 +3,47 @@
   min-height: 100%;
   position: relative;
   background: #f8f8f8;
+  overflow: hidden;
+
+  >.Form {
+    padding: 0 30px;
+    position: relative;
+    overflow: hidden;
+    background: #fff;
+    margin-top: 20px;
+
+    >.flex-h {
+      align-items: center;
+      border-top: 2px solid rgba(0, 0, 0, 0.08);
+      &:first-child {
+        border: none;
+      }
+
+      >text {
+        font-size: 28px;
+        color: #999;
+        line-height: 40px;
+        padding: 32px 0;
+
+        &:first-child {
+          color: #333;
+          margin-right: 40px;
+        }
+      }
+
+      >.UserIcon {
+        width: 60px;
+        height: 60px;
+        position: relative;
+        overflow: hidden;
+        border-radius: 100%;
+        background: #ccc;
+
+        >image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
 }

src/pages/WoDe/TuiJianErWeiMa/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationStyle: 'custom',
+  navigationBarTextStyle: 'white'
+}

src/pages/WoDe/TuiJianErWeiMa/index.css

@@ -0,0 +1,7 @@
+.TuiJianErWeiMa {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background: #f8f8f8;
+  overflow: hidden;
+}

src/pages/WoDe/TuiJianErWeiMa/index.jsx

@@ -0,0 +1,15 @@
+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
+import CustomHeader from '@/components/CustomHeader/index'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function TuiJianErWeiMa (props) {
+
+  return (
+    <view className='TuiJianErWeiMa'>
+      <CustomHeader IsFixed={true} BgColor='none' Title='推荐二维码'></CustomHeader>
+    </view>
+  )
+}

src/pages/WoDe/TuiJianErWeiMa/index.less

@@ -0,0 +1,7 @@
+.TuiJianErWeiMa {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background: #f8f8f8;
+  overflow: hidden;
+}

src/pages/WoDe/TuiJianFenXiang/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationStyle: 'custom',
+  navigationBarTextStyle: 'white'
+}

src/pages/WoDe/TuiJianFenXiang/index.css

@@ -0,0 +1,7 @@
+.TuiJianFenXiang {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background: #f8f8f8;
+  overflow: hidden;
+}

src/pages/WoDe/TuiJianFenXiang/index.jsx

@@ -0,0 +1,15 @@
+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
+import CustomHeader from '@/components/CustomHeader/index'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function TuiJianFenXiang (props) {
+
+  return (
+    <view className='TuiJianFenXiang'>
+      <CustomHeader IsFixed={true} BgColor='none' Title='推荐分享'></CustomHeader>
+    </view>
+  )
+}

src/pages/WoDe/TuiJianFenXiang/index.less

@@ -0,0 +1,7 @@
+.TuiJianFenXiang {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background: #f8f8f8;
+  overflow: hidden;
+}

src/pages/WoDe/WoDeHuoDong/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '我的活动'
+}

src/pages/WoDe/WoDeHuoDong/index.css

@@ -0,0 +1,20 @@
+.WoDeHuoDong {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #f8f8f8;
+  overflow: hidden;
+}
+.WoDeHuoDong .Content {
+  padding: 0 30px;
+  position: relative;
+  overflow: hidden;
+}
+.WoDeHuoDong .Content > .ListItem {
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 30px;
+}
+.WoDeHuoDong .Content > .ListItem:first-child {
+  margin-top: 30px;
+}

src/pages/WoDe/WoDeHuoDong/index.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import ActivityListItem from '@/components/ActivityListItem/index'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function WoDeHuoDong (props) {
+
+  const [IsPull, setIsPull] = useState(false)
+  const [ActivityList, setActivityList] = useState(['', '', '', '', '', '', ''])
+
+  const OnRefresh = () => {
+    setIsPull(true)
+    window.setTimeout(() => {
+      setIsPull(false)
+    }, 1000)
+  }
+
+  return (
+    <view className='WoDeHuoDong'>
+      <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} refresher-triggered={IsPull} refresher-background='none'>
+
+        <view className='Content Activity'>
+          {
+            ActivityList.map((item, index) => (
+              <view className='ListItem' key={`ActivityItem-${index}`}>
+                <ActivityListItem Data={item}></ActivityListItem>
+              </view>
+            ))
+          }
+        </view>
+
+      </scroll-view>
+    </view>
+  )
+}

src/pages/WoDe/WoDeHuoDong/index.less

@@ -0,0 +1,22 @@
+.WoDeHuoDong {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #f8f8f8;
+  overflow: hidden;
+
+  .Content {
+    padding: 0 30px;
+    position: relative;
+    overflow: hidden;
+
+    >.ListItem {
+      position: relative;
+      overflow: hidden;
+      margin-bottom: 30px;
+      &:first-child {
+        margin-top: 30px;
+      }
+    }
+  }
+}

src/pages/WoDe/YeZhuRenZheng/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '业主认证'
+}

src/pages/WoDe/YeZhuRenZheng/index.css

@@ -0,0 +1,59 @@
+.YeZhuRenZheng {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.YeZhuRenZheng > .Form {
+  padding: 0 30px;
+  position: relative;
+  overflow: hidden;
+  min-height: 100vh;
+  z-index: 1;
+}
+.YeZhuRenZheng > .Form > .flex-h {
+  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+  align-items: center;
+}
+.YeZhuRenZheng > .Form > .flex-h > text {
+  font-size: 28px;
+  color: #333;
+  line-height: 100px;
+}
+.YeZhuRenZheng > .Form > .flex-h > text:first-child {
+  font-size: 50px;
+  color: #F35844;
+  width: 80px;
+}
+.YeZhuRenZheng > .Form > .flex-h > text:last-child {
+  line-height: 60px;
+  padding: 0 20px;
+  border-radius: 8px;
+  border: 2px solid #ccc;
+  color: #ccc;
+}
+.YeZhuRenZheng > .Form > .flex-h > text:last-child.active {
+  color: #F35844;
+  border-color: #F35844;
+}
+.YeZhuRenZheng > .Form > .flex-h > input {
+  font-size: 28px;
+  color: #333;
+}
+.YeZhuRenZheng > .BottomBtn {
+  padding: 0 30px;
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+  margin-top: -164px;
+}
+.YeZhuRenZheng > .BottomBtn > text {
+  display: block;
+  width: 100%;
+  font-size: 32px;
+  color: #fff;
+  background: #F35844;
+  border-radius: 12px;
+  line-height: 84px;
+  text-align: center;
+}

src/pages/WoDe/YeZhuRenZheng/index.jsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import { Input } from '@tarojs/components'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function YeZhuRenZheng (props) {
+
+  return (
+    <view className='YeZhuRenZheng'>
+      <view className='Form'>
+        <view className='flex-h'>
+          <text className='iconfont iconxingming'></text>
+          <Input className='flex-item' placeholder='请输入您的姓名'></Input>
+        </view>
+        <view className='flex-h'>
+          <text className='iconfont iconshenfenzheng'></text>
+          <Input type='idcard' className='flex-item' placeholder='请输入您的身份证号码'></Input>
+        </view>
+        <view className='flex-h'>
+          <text className='iconfont iconshouji'></text>
+          <Input type='idcard' className='flex-item' placeholder='请输入您的手机号码'></Input>
+        </view>
+        <view className='flex-h'>
+          <text className='iconfont iconyanzhengma'></text>
+          <Input type='idcard' className='flex-item' placeholder='请输入验证码'></Input>
+          <text className='active'>获取验证码</text>
+        </view>
+        <view className='flex-h'>
+          <text className='iconfont iconmenpaihao'></text>
+          <Input className='flex-item' placeholder='请输入小区楼栋单元门牌号'></Input>
+        </view>
+      </view>
+      <view className='BottomBtn'>
+        <text>提交</text>
+      </view>
+    </view>
+  )
+}

src/pages/WoDe/YeZhuRenZheng/index.less

@@ -0,0 +1,68 @@
+.YeZhuRenZheng {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  overflow: hidden;
+
+  >.Form {
+    padding: 0 30px;
+    position: relative;
+    overflow: hidden;
+    min-height: 100vh;
+    z-index: 1;
+
+    >.flex-h {
+      border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+      align-items: center;
+
+      >text {
+        font-size: 28px;
+        color: #333;
+        line-height: 100px;
+
+        &:first-child {
+          font-size: 50px;
+          color: #F35844;
+          width: 80px;
+        }
+
+        &:last-child {
+          line-height: 60px;
+          padding: 0 20px;
+          border-radius: 8px;
+          border: 2px solid #ccc;
+          color: #ccc;
+
+          &.active {
+            color: #F35844;
+            border-color: #F35844;
+          }
+        }
+      }
+
+      >input {
+        font-size: 28px;
+        color: #333;
+      }
+    }
+  }
+
+  >.BottomBtn {
+    padding: 0 30px;
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+    margin-top: -164px;
+
+    >text {
+      display: block;
+      width: 100%;
+      font-size: 32px;
+      color: #fff;
+      background: #F35844;
+      border-radius: 12px;
+      line-height: 84px;
+      text-align: center;
+    }
+  }
+}

src/pages/WoDe/YeZhuShenHe/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '业主审核'
+}

src/pages/WoDe/YeZhuShenHe/index.css

@@ -0,0 +1,151 @@
+.YeZhuShenHe {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background: #f8f8f8;
+  overflow: hidden;
+}
+.YeZhuShenHe > .ShenHeContent {
+  position: relative;
+  overflow: hidden;
+  min-height: 100vh;
+  z-index: 1;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus {
+  position: relative;
+  overflow: hidden;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.Checking > .Status,
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.Pass > .Status {
+  padding: 40px 30px;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.Checking > .Status > text,
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.Pass > .Status > text {
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: 28px;
+  color: #666;
+  line-height: 40px;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.Checking > .Status > text:first-child,
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.Pass > .Status > text:first-child {
+  font-size: 100px;
+  line-height: 100px;
+  color: #77A5F0;
+  margin-bottom: 20px;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.Checking > .Info,
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.Pass > .Info {
+  padding: 10px 30px;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  margin-top: 20px;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.Checking > .Info > .flex-h,
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.Pass > .Info > .flex-h {
+  align-items: flex-start;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.Checking > .Info > .flex-h > text,
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.Pass > .Info > .flex-h > text {
+  font-size: 30px;
+  color: #333;
+  line-height: 40px;
+  padding: 10px 0;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.Pass > .Status > text:first-child {
+  color: #2ed61a;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.NoPass > .Status {
+  padding: 40px 30px;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.NoPass > .Status > text {
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: 28px;
+  color: #F35844;
+  line-height: 40px;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.NoPass > .Status > text:first-child {
+  font-size: 100px;
+  line-height: 100px;
+  margin-bottom: 20px;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.NoPass > .Info {
+  padding: 0 30px;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  margin-top: 20px;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.NoPass > .Info > .flex-h {
+  align-items: center;
+  border-top: 2px solid rgba(0, 0, 0, 0.08);
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.NoPass > .Info > .flex-h:first-child {
+  border: none;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.NoPass > .Info > .flex-h > text {
+  font-size: 30px;
+  color: #333;
+  line-height: 40px;
+  padding: 30px 0;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.YeZhuShenHe > .ShenHeContent > .CheckStatus.NoPass > .Info > .flex-h > text:first-child {
+  font-size: 28px;
+  color: #999;
+}
+.YeZhuShenHe > .ShenHeContent > .OtherTab {
+  background: #fff;
+  padding: 0 30px;
+  margin-top: 20px;
+}
+.YeZhuShenHe > .ShenHeContent > .OtherTab > .flex-h {
+  align-items: center;
+  border-top: 2px solid rgba(0, 0, 0, 0.08);
+}
+.YeZhuShenHe > .ShenHeContent > .OtherTab > .flex-h:first-child {
+  border: none;
+}
+.YeZhuShenHe > .ShenHeContent > .OtherTab > .flex-h > text {
+  font-size: 36px;
+  color: #999;
+  line-height: 100px;
+}
+.YeZhuShenHe > .ShenHeContent > .OtherTab > .flex-h > text:first-child {
+  font-size: 32px;
+  color: #333;
+}
+.YeZhuShenHe > .ShenHeContent > .ContentBottom {
+  width: 100%;
+  height: 250px;
+}
+.YeZhuShenHe > .BottomBtn {
+  padding: 0 30px 20px;
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+  margin-top: -164px;
+}
+.YeZhuShenHe > .BottomBtn > text {
+  display: block;
+  width: 100%;
+  font-size: 32px;
+  color: #fff;
+  background: #F35844;
+  border-radius: 12px;
+  line-height: 84px;
+  text-align: center;
+}

src/pages/WoDe/YeZhuShenHe/index.jsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function YeZhuShenHe (props) {
+
+  const [Status, setStatus] = useState(1)
+
+  return (
+    <view className='YeZhuShenHe'>
+      <view className='ShenHeContent'>
+
+        {/* 审核中 */}
+        {
+          Status - 0 === 0 &&
+          <view className='CheckStatus Checking'>
+            <view className='Status'>
+              <text className='iconfont iconshenhezhong'></text>
+              <text>审核中</text>
+              <text>请等待物业或户主审核</text>
+            </view>
+
+            <view className='Info'>
+              <view className='flex-h'>
+                <text>身份：</text>
+                <text className='flex-item'>户主</text>
+              </view>
+              <view className='flex-h'>
+                <text>房产：</text>
+                <text className='flex-item'>金科蓝湾小区  一区  六栋  一单元  六楼</text>
+              </view>
+            </view>
+          </view>
+        }
+
+        {/* 审核通过 */}
+        {
+          Status - 0 === 1 &&
+          <view className='CheckStatus Pass'>
+            <view className='Status'>
+              <text className='iconfont iconyitongguo'></text>
+              <text>审核通过</text>
+            </view>
+
+            <view className='Info'>
+              <view className='flex-h'>
+                <text>身份：</text>
+                <text className='flex-item'>户主</text>
+              </view>
+              <view className='flex-h'>
+                <text>房产：</text>
+                <text className='flex-item'>金科蓝湾小区  一区  六栋  一单元  六楼</text>
+              </view>
+            </view>
+          </view>
+        }
+
+        {/* 审核未通过 */}
+        {
+          Status - 0 === 2 &&
+          <view className='CheckStatus NoPass'>
+            <view className='Status'>
+              <text className='iconfont iconweitongguo'></text>
+              <text>审核未通过</text>
+            </view>
+
+            <view className='Info'>
+              <view className='flex-h'>
+                <text>审核人</text>
+                <text className='flex-item'>物业</text>
+              </view>
+              <view className='flex-h'>
+                <text>原因</text>
+                <text className='flex-item'>信息填写不完善</text>
+              </view>
+            </view>
+
+            <view className='Info'>
+              <view className='flex-h'>
+                <text>身份</text>
+                <text className='flex-item'>户主</text>
+              </view>
+              <view className='flex-h'>
+                <text>房产</text>
+                <text className='flex-item'>金科蓝湾小区  一区  六栋  一单元  六楼</text>
+              </view>
+            </view>
+          </view>
+        }
+
+        <view className='OtherTab'>
+          <view className='flex-h'>
+            <text className='flex-item'>联系物业</text>
+            <text className='iconfont iconjiantouright'></text>
+          </view>
+          <view className='flex-h'>
+            <text className='flex-item'>删除当前资料</text>
+            <text className='iconfont iconjiantouright'></text>
+          </view>
+          <view className='flex-h'>
+            <text className='flex-item'>关联其他房产</text>
+            <text className='iconfont iconjiantouright'></text>
+          </view>
+        </view>
+
+        <view className='ContentBottom'></view>
+
+      </view>
+
+      {/* 审核未通过 */}
+      {
+        Status - 0 === 2 &&
+        <view className='BottomBtn'>
+          <text>重新认证</text>
+        </view>
+      }
+    </view>
+  )
+}

src/pages/WoDe/YeZhuShenHe/index.less

@@ -0,0 +1,180 @@
+.YeZhuShenHe {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background: #f8f8f8;
+  overflow: hidden;
+
+  >.ShenHeContent {
+    position: relative;
+    overflow: hidden;
+    min-height: 100vh;
+    z-index: 1;
+
+    >.CheckStatus {
+      position: relative;
+      overflow: hidden;
+
+      &.Checking,
+      &.Pass {
+        >.Status {
+          padding: 40px 30px;
+          position: relative;
+          overflow: hidden;
+          background: #fff;
+
+          >text {
+            display: block;
+            width: 100%;
+            text-align: center;
+            font-size: 28px;
+            color: #666;
+            line-height: 40px;
+
+            &:first-child {
+              font-size: 100px;
+              line-height: 100px;
+              color: #77A5F0;
+              margin-bottom: 20px;
+            }
+          }
+        }
+
+        >.Info {
+          padding: 10px 30px;
+          position: relative;
+          overflow: hidden;
+          background: #fff;
+          margin-top: 20px;
+
+          >.flex-h {
+            align-items: flex-start;
+
+            >text {
+              font-size: 30px;
+              color: #333;
+              line-height: 40px;
+              padding: 10px 0;
+            }
+          }
+        }
+      }
+
+      &.Pass {
+        >.Status {
+          >text {
+            &:first-child {
+              color: #2ed61a;
+            }
+          }
+        }
+      }
+
+      &.NoPass {
+
+        >.Status {
+          padding: 40px 30px;
+          position: relative;
+          overflow: hidden;
+          background: #fff;
+
+          >text {
+            display: block;
+            width: 100%;
+            text-align: center;
+            font-size: 28px;
+            color: #F35844;
+            line-height: 40px;
+
+            &:first-child {
+              font-size: 100px;
+              line-height: 100px;
+              margin-bottom: 20px;
+            }
+          }
+        }
+
+        >.Info {
+          padding: 0 30px;
+          position: relative;
+          overflow: hidden;
+          background: #fff;
+          margin-top: 20px;
+
+          >.flex-h {
+            align-items: center;
+            border-top: 2px solid rgba(0, 0, 0, 0.08);
+            &:first-child {
+              border: none;
+            }
+
+            >text {
+              font-size: 30px;
+              color: #333;
+              line-height: 40px;
+              padding: 30px 0;
+              text-align: right;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+
+              &:first-child {
+                font-size: 28px;
+                color: #999;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    >.OtherTab {
+      background: #fff;
+      padding: 0 30px;
+      margin-top: 20px;
+
+      >.flex-h {
+        align-items: center;
+        border-top: 2px solid rgba(0, 0, 0, 0.08);
+
+        &:first-child {
+          border: none;
+        }
+
+        >text {
+          font-size: 36px;
+          color: #999;
+          line-height: 100px;
+
+          &:first-child {
+            font-size: 32px;
+            color: #333;
+          }
+        }
+      }
+    }
+    >.ContentBottom {
+      width: 100%;
+      height: 250px;
+    }
+  }
+
+  >.BottomBtn {
+    padding: 0 30px 20px;
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+    margin-top: -164px;
+
+    >text {
+      display: block;
+      width: 100%;
+      font-size: 32px;
+      color: #fff;
+      background: #F35844;
+      border-radius: 12px;
+      line-height: 84px;
+      text-align: center;
+    }
+  }
+}

src/pages/WoDe/index.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import NavHeader from '@/components/NavHeader/index'
+import Taro from '@tarojs/taro'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
@@ -9,21 +10,21 @@ export default function WoDe (props) {
   const [IsPull, setIsPull] = useState(false)
 
   const [UserTab, setUserTab] = useState([
-    { icon: 'iconrenzheng1', name: '业主认证', id: 1 },
-    { icon: 'iconjifenguize', name: '积分明细', id: 2 },
-    { icon: 'iconjiaofei', name: '物业缴费', id: 3 },
-    { icon: 'iconfuwu1', name: '物业服务', id: 4 }
+    { icon: 'iconrenzheng1', name: '业主认证', id: 1, router: '/pages/WoDe/YeZhuRenZheng/index' },
+    { icon: 'iconjifenguize', name: '积分明细', id: 2, router: null },
+    { icon: 'iconjiaofei', name: '物业缴费', id: 3, router: null },
+    { icon: 'iconfuwu1', name: '物业服务', id: 4, router: null }
   ])
 
   const [MoreUserTab, setMoreUserTab] = useState([
-    { icon: 'iconerweima', name: '推荐二维码', id: 5 },
-    { icon: 'iconfenxiang', name: '推荐分享', id: 6 },
-    { icon: 'iconhuodong', name: '参与活动', id: 7 }
+    { icon: 'iconerweima', name: '推荐二维码', id: 5, router: '/pages/WoDe/TuiJianErWeiMa/index' },
+    { icon: 'iconfenxiang', name: '推荐分享', id: 6, router: '/pages/WoDe/TuiJianFenXiang/index' },
+    { icon: 'iconhuodong', name: '参与活动', id: 7, router: '/pages/WoDe/WoDeHuoDong/index' }
   ])
 
   const OnRefresh = () => { // 页面下拉刷新
     setIsPull(true)
-    
+
     const t = setTimeout(() => {
       setIsPull(false)
       clearTimeout(t)
@@ -40,10 +41,10 @@ export default function WoDe (props) {
           <view className='TopBg'>
             <view className='ColorBg'></view>
             <view className='UserInfo flex-h'>
-              <view className='Icon'>
+              <view className='Icon' onClick={() => { Taro.navigateTo({ url: '/pages/WoDe/GeRenXinXi/index' }) }}>
                 <image mode='aspectFill' src={null} class='centerLabel'></image>
               </view>
-              <view className='flex-item'>
+              <view className='flex-item' onClick={() => { Taro.navigateTo({ url: '/pages/WoDe/GeRenXinXi/index' }) }}>
                 <text>徐慧慧</text>
                 <text>13613949434</text>
               </view>
@@ -55,7 +56,7 @@ export default function WoDe (props) {
           <view className='UserTab'>
             {
               UserTab.map((item, index) => (
-                <view key={`UserTab-${index}`} className='flex-h'>
+                <view key={`UserTab-${index}`} className='flex-h' onClick={() => { Taro.navigateTo({ url: item.router }) }}>
                   <text className={`iconfont ${item.icon}`}></text>
                   <view className='flex-h flex-item'>
                     <text className='flex-item'>{item.name}</text>
@@ -67,7 +68,7 @@ export default function WoDe (props) {
             <view className='Line'></view>
             {
               MoreUserTab.map((item, index) => (
-                <view key={`UserTab-${index}`} className='flex-h'>
+                <view key={`UserTab-${index}`} className='flex-h' onClick={() => { Taro.navigateTo({ url: item.router }) }}>
                   <text className={`iconfont ${item.icon}`}></text>
                   <view className='flex-h flex-item'>
                     <text className='flex-item'>{item.name}</text>