静态页面

package.json

@@ -40,14 +40,12 @@
     "@tarojs/react": "3.0.14",
     "@tarojs/runtime": "3.0.14",
     "@tarojs/taro": "3.0.14",
-    "@tarojs/taro-weapp": "^2.2.10",
     "react": "^16.10.0",
     "react-dom": "^16.10.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
     "@tarojs/mini-runner": "3.0.14",
-    "@tarojs/plugin-babel": "^2.2.10",
     "@tarojs/webpack-runner": "3.0.14",
     "@types/react": "^16.0.0",
     "@types/webpack-env": "^1.13.6",

project.config.json

@@ -2,33 +2,33 @@
 	"miniprogramRoot": "dist/",
 	"projectname": "miniapp",
 	"description": "",
-	"appid": "touristappid",
+	"appid": "wx1d9348230d6a0da6",
 	"setting": {
 		"urlCheck": true,
+		"scopeDataCheck": false,
+		"coverView": true,
 		"es6": false,
-		"enhance": false,
 		"postcss": false,
+		"compileHotReLoad": false,
 		"preloadBackgroundData": false,
 		"minified": false,
+		"autoAudits": false,
 		"newFeature": false,
-		"coverView": true,
+		"uglifyFileName": false,
+		"uploadWithSourceMap": true,
+		"useIsolateContext": true,
 		"nodeModules": false,
-		"autoAudits": false,
+		"enhance": false,
+		"useCompilerModule": false,
+		"userConfirmedUseCompilerModuleSwitch": false,
 		"showShadowRootInWxmlPanel": true,
-		"scopeDataCheck": false,
-		"uglifyFileName": false,
 		"checkInvalidKey": true,
 		"checkSiteMap": true,
-		"uploadWithSourceMap": true,
-		"compileHotReLoad": false,
 		"babelSetting": {
 			"ignore": [],
 			"disablePlugins": [],
 			"outputPath": ""
-		},
-		"useIsolateContext": true,
-		"useCompilerModule": false,
-		"userConfirmedUseCompilerModuleSwitch": false
+		}
 	},
 	"compileType": "miniprogram",
 	"simulatorType": "wechat",

src/pages/ShouYe/index.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import NavHeader from '../../components/NavHeader/index'
-import { Swiper, SwiperItem } from '@tarojs/components'
+import { Swiper, SwiperItem, Text } from '@tarojs/components'
 import '../../assets/css/reset.less'
 import '../../assets/css/iconfont.less'
 import './index.less'
@@ -71,7 +71,7 @@ export default class Index extends Component {
           <view className='AdvLayer' style={{ display: ShowAdvLayer ? 'block' : 'none' }}>
             <view className='centerLabel'>
               <image mode='aspectFit' src={TestImg}></image>
-              <text className='iconfont iconguanbi'></text>
+              <Text className='iconfont iconguanbi'></Text>
             </view>
           </view>
 
@@ -86,7 +86,7 @@ export default class Index extends Component {
                 <view>
 
                   {/* 欢迎词 */}
-                  <text className='Welcome'>欢迎来到远道智慧社区！</text>
+                  <Text className='Welcome'>欢迎来到远道智慧社区！</Text>
 
                   {/* banner */}
                   <view className='BannerContainer'>
@@ -114,8 +114,8 @@ export default class Index extends Component {
                         <view key={`Nav-${index}`} className='flex-item'>
                           <view>
                             <view className='centerLabel'>
-                              <text className={`iconfont ${item.icon}`}></text>
-                              <text>{item.name}</text>
+                              <Text className={`iconfont ${item.icon}`}></Text>
+                              <Text>{item.name}</Text>
                             </view>
                           </view>
                         </view>
@@ -127,8 +127,8 @@ export default class Index extends Component {
                   <view className='HotActivityContainer'>
                     <view>
                       <view className='Title'>
-                        <text>热门活动</text>
-                        <text className='iconfont icongengduo'></text>
+                        <Text>热门活动</Text>
+                        <Text className='iconfont icongengduo'></Text>
                       </view>
                       <view className='Activity'>
                         <image className='centerLabel' mode='aspectFill' src={TestImg}></image>
@@ -140,14 +140,14 @@ export default class Index extends Component {
                   <view className='OwnerContainer'>
                     <view>
                       <view className='Title'>
-                        <text>业主专区</text>
+                        <Text>业主专区</Text>
                       </view>
                       <view className='OwnerList flex-h'>
                         {
                           OwnerList.map((item, index) => (
                             <view className='flex-item' key={`Owners-${index}`}>
-                              <text className={`iconfont ${item.icon}`}></text>
-                              <text>{item.name}</text>
+                              <Text className={`iconfont ${item.icon}`}></Text>
+                              <Text>{item.name}</Text>
                             </view>
                           ))
                         }
@@ -159,9 +159,9 @@ export default class Index extends Component {
                   <view className='NewsContainer'>
                     <view>
                       <view className='Title flex-h'>
-                        <text className='flex-item'>热门资讯</text>
-                        <text>查看全部</text>
-                        <text className='iconfont iconjiantouright'></text>
+                        <Text className='flex-item'>热门资讯</Text>
+                        <Text>查看全部</Text>
+                        <Text className='iconfont iconjiantouright'></Text>
                       </view>
                       <view className='List'>
                         {
@@ -171,8 +171,8 @@ export default class Index extends Component {
                                 <image mode='aspectFill' src={item.img} className='centerLabel'></image>
                               </view>
                               <view className='flex-item'>
-                                <text>{item.title}</text>
-                                <text>{item.desc}</text>
+                                <Text>{item.title}</Text>
+                                <Text>{item.desc}</Text>
                               </view>
                             </view>
                           ))

src/pages/WoDe/index.css

@@ -0,0 +1,113 @@
+.WoDe {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #fff;
+}
+.WoDe .WoDeContent {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.WoDe .WoDeContent > .TopBg {
+  width: 400vw;
+  height: 400vw;
+  position: relative;
+  overflow: hidden;
+  border-radius: 100%;
+  margin-left: -150vw;
+  margin-top: -340vw;
+}
+.WoDe .WoDeContent > .TopBg > .ColorBg {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 60vw;
+  z-index: 1;
+  background-image: linear-gradient(#F35844, #ff8d61);
+}
+.WoDe .WoDeContent > .TopBg > .UserInfo {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  bottom: 60px;
+  z-index: 2;
+  width: 100vw;
+  align-items: center;
+}
+.WoDe .WoDeContent > .TopBg > .UserInfo > .Icon {
+  width: 196px;
+  height: 196px;
+  border-radius: 100%;
+  position: relative;
+  overflow: hidden;
+  background-color: #fff;
+  margin-right: 40px;
+  margin-left: 30px;
+}
+.WoDe .WoDeContent > .TopBg > .UserInfo > .Icon > image {
+  width: 100%;
+  height: 100%;
+}
+.WoDe .WoDeContent > .TopBg > .UserInfo > .flex-item {
+  position: relative;
+  overflow: hidden;
+}
+.WoDe .WoDeContent > .TopBg > .UserInfo > .flex-item > text {
+  display: block;
+  white-space: nowrap;
+  font-size: 30px;
+  color: #333;
+  line-height: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.WoDe .WoDeContent > .TopBg > .UserInfo > .flex-item > text:first-child {
+  font-size: 34px;
+  margin-bottom: 30px;
+}
+.WoDe .WoDeContent > .TopBg > .UserInfo > text {
+  font-size: 30px;
+  line-height: 58px;
+  border: 2px solid #000;
+  border-radius: 8px;
+  padding: 0 20px;
+  margin-right: 30px;
+}
+.WoDe .WoDeContent > .UserTab {
+  padding: 30px 0;
+  margin-top: 20px;
+  position: relative;
+  overflow: hidden;
+}
+.WoDe .WoDeContent > .UserTab > .Line {
+  width: 100%;
+  height: 20px;
+  background-color: #f8f8f8;
+}
+.WoDe .WoDeContent > .UserTab > .flex-h {
+  padding: 0 30px;
+  align-items: center;
+}
+.WoDe .WoDeContent > .UserTab > .flex-h > text {
+  font-size: 44px;
+  color: #F35844;
+  margin-right: 20px;
+}
+.WoDe .WoDeContent > .UserTab > .flex-h > view {
+  align-items: center;
+  border-bottom: 2px solid #f8f8f8;
+}
+.WoDe .WoDeContent > .UserTab > .flex-h > view > text {
+  font-size: 32px;
+  color: #999;
+  line-height: 100px;
+  margin-left: 20px;
+  overflow: hidden;
+}
+.WoDe .WoDeContent > .UserTab > .flex-h > view > text:first-child {
+  margin-left: 0;
+  color: #333;
+}

src/pages/WoDe/index.jsx

@@ -1,10 +1,26 @@
 import React, { Component } from 'react'
+import NavHeader from '../../components/NavHeader/index'
 import '../../assets/css/reset.less'
 import '../../assets/css/iconfont.less'
 import './index.less'
 
 export default class WoDe extends Component {
 
+  state = {
+    IsPull: false,
+    UserTab: [
+      { icon: 'iconrenzheng1', name: '业主认证', id: 1 },
+      { icon: 'iconjifenguize', name: '积分明细', id: 2 },
+      { icon: 'iconjiaofei', name: '物业缴费', id: 3 },
+      { icon: 'iconfuwu1', name: '物业服务', id: 4 }
+    ],
+    MoreUserTab: [
+      { icon: 'iconerweima', name: '推荐二维码', id: 5 },
+      { icon: 'iconfenxiang', name: '推荐分享', id: 6 },
+      { icon: 'iconhuodong', name: '参与活动', id: 7 }
+    ]
+  }
+
   componentWillMount () { }
 
   componentDidMount () { }
@@ -15,10 +31,70 @@ export default class WoDe extends Component {
 
   componentDidHide () { }
 
+  OnRefresh () { // 页面下拉刷新
+    this.setState({
+      IsPull: true
+    }, () => {
+      window.setTimeout(() => {
+        this.setState({
+          IsPull: false
+        })
+      }, 1000)
+    })
+  }
+
   render () {
+    const { IsPull, UserTab, MoreUserTab } = this.state
     return (
       <view className='WoDe'>
+        <NavHeader BgColor='none' Title='我的' IsFixed={true}></NavHeader>
+        <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='#F35844'>
+          <view className='WoDeContent'>
+
+            {/* 顶部背景图 */}
+            <view className='TopBg'>
+              <view className='ColorBg'></view>
+              <view className='UserInfo flex-h'>
+                <view className='Icon'>
+                  <image mode='aspectFill' src={null} class='centerLabel'></image>
+                </view>
+                <view className='flex-item'>
+                  <text>徐慧慧</text>
+                  <text>13613949434</text>
+                </view>
+                <text>签到</text>
+              </view>
+            </view>
+
+            {/* 用户选项 */}
+            <view className='UserTab'>
+              {
+                UserTab.map((item, index) => (
+                  <view key={`UserTab-${index}`} className='flex-h'>
+                    <text className={`iconfont ${item.icon}`}></text>
+                    <view className='flex-h flex-item'>
+                      <text className='flex-item'>{item.name}</text>
+                      <text className='iconfont iconjiantouright'></text>
+                    </view>
+                  </view>
+                ))
+              }
+              <view className='Line'></view>
+              {
+                MoreUserTab.map((item, index) => (
+                  <view key={`UserTab-${index}`} className='flex-h'>
+                    <text className={`iconfont ${item.icon}`}></text>
+                    <view className='flex-h flex-item'>
+                      <text className='flex-item'>{item.name}</text>
+                      <text className='iconfont iconjiantouright'></text>
+                    </view>
+                  </view>
+                ))
+              }
+            </view>
 
+          </view>
+        </scroll-view>
       </view>
     )
   }

src/pages/WoDe/index.less

@@ -0,0 +1,130 @@
+.WoDe {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #fff;
+
+  .WoDeContent {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+
+    >.TopBg {
+      width: 400vw;
+      height: 400vw;
+      position: relative;
+      overflow: hidden;
+      border-radius: 100%;
+      margin-left: -150vw;
+      margin-top: -340vw;
+
+      >.ColorBg {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 60vw;
+        z-index: 1;
+        background-image: linear-gradient(#F35844, rgba(255, 141, 97, 1, 0.5));
+      }
+
+      >.UserInfo {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        -webkit-transform: translateX(-50%);
+        bottom: 60px;
+        z-index: 2;
+        width: 100vw;
+        align-items: center;
+
+        >.Icon {
+          width: 196px;
+          height: 196px;
+          border-radius: 100%;
+          position: relative;
+          overflow: hidden;
+          background-color: #fff;
+          margin-right: 40px;
+          margin-left: 30px;
+
+          >image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        >.flex-item {
+          position: relative;
+          overflow: hidden;
+
+          >text {
+            display: block;
+            white-space: nowrap;
+            font-size: 30px;
+            color: #333;
+            line-height: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            &:first-child {
+              font-size: 34px;
+              margin-bottom: 30px;
+            }
+          }
+        }
+
+        >text {
+          font-size: 30px;
+          line-height: 58px;
+          border: 2px solid #000;
+          border-radius: 8px;
+          padding: 0 20px;
+          margin-right: 30px;
+        }
+      }
+    }
+
+    >.UserTab {
+      padding: 30px 0;
+      margin-top: 20px;
+      position: relative;
+      overflow: hidden;
+
+      >.Line {
+        width: 100%;
+        height: 20px;
+        background-color: #f8f8f8;
+      }
+
+      >.flex-h {
+        padding: 0 30px;
+        align-items: center;
+
+        >text {
+          font-size: 44px;
+          color: #F35844;
+          margin-right: 20px;
+        }
+
+        >view {
+          align-items: center;
+          border-bottom: 2px solid #f8f8f8;
+
+          >text {
+            font-size: 32px;
+            color: #999;
+            line-height: 100px;
+            margin-left: 20px;
+            overflow: hidden;
+
+            &:first-child {
+              margin-left: 0;
+              color: #333;
+            }
+          }
+        }
+      }
+    }
+  }
+}

yarn.lock

@@ -5975,6 +5975,11 @@ kleur@^3.0.0:
   resolved "https://registry.npm.taobao.org/kleur/download/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha1-p5yezIbuHOP6YgbRIWxQHxR/wH4=
 
+klona@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.npm.taobao.org/klona/download/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
+  integrity sha1-e7Hjr/sMuGJFR+9+j2cI6i4538A=
+
 known-css-properties@^0.6.0:
   version "0.6.1"
   resolved "https://registry.npm.taobao.org/known-css-properties/download/known-css-properties-0.6.1.tgz#31b5123ad03d8d1a3f36bd4155459c981173478b"
@@ -5989,6 +5994,15 @@ less-loader@5.0.0, less-loader@^5.0.0:
     loader-utils "^1.1.0"
     pify "^4.0.1"
 
+less-loader@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.npm.taobao.org/less-loader/download/less-loader-7.1.0.tgz?cache=0&sync_timestamp=1605095927771&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fless-loader%2Fdownload%2Fless-loader-7.1.0.tgz#958d41e86d7de0bcb490711ee0f235aa9dc596aa"
+  integrity sha1-lY1B6G194Ly0kHEe4PI1qp3Flqo=
+  dependencies:
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 less@3.11.1:
   version "3.11.1"
   resolved "https://registry.npm.taobao.org/less/download/less-3.11.1.tgz#c6bf08e39e02404fe6b307a3dfffafdc55bd36e2"
@@ -6006,7 +6020,7 @@ less@3.11.1:
     request "^2.83.0"
     source-map "~0.6.0"
 
-less@^3.10.3:
+less@^3.10.3, less@^3.12.2:
   version "3.12.2"
   resolved "https://registry.npm.taobao.org/less/download/less-3.12.2.tgz#157e6dd32a68869df8859314ad38e70211af3ab4"
   integrity sha1-FX5t0ypohp34hZMUrTjnAhGvOrQ=