xcx 4 anni fa
parent
commit
63e55c3311

+ 0
- 2
package.json Vedi File

@@ -40,14 +40,12 @@
40 40
     "@tarojs/react": "3.0.14",
41 41
     "@tarojs/runtime": "3.0.14",
42 42
     "@tarojs/taro": "3.0.14",
43
-    "@tarojs/taro-weapp": "^2.2.10",
44 43
     "react": "^16.10.0",
45 44
     "react-dom": "^16.10.0"
46 45
   },
47 46
   "devDependencies": {
48 47
     "@babel/core": "^7.8.0",
49 48
     "@tarojs/mini-runner": "3.0.14",
50
-    "@tarojs/plugin-babel": "^2.2.10",
51 49
     "@tarojs/webpack-runner": "3.0.14",
52 50
     "@types/react": "^16.0.0",
53 51
     "@types/webpack-env": "^1.13.6",

+ 12
- 12
project.config.json Vedi File

@@ -2,33 +2,33 @@
2 2
 	"miniprogramRoot": "dist/",
3 3
 	"projectname": "miniapp",
4 4
 	"description": "",
5
-	"appid": "touristappid",
5
+	"appid": "wx1d9348230d6a0da6",
6 6
 	"setting": {
7 7
 		"urlCheck": true,
8
+		"scopeDataCheck": false,
9
+		"coverView": true,
8 10
 		"es6": false,
9
-		"enhance": false,
10 11
 		"postcss": false,
12
+		"compileHotReLoad": false,
11 13
 		"preloadBackgroundData": false,
12 14
 		"minified": false,
15
+		"autoAudits": false,
13 16
 		"newFeature": false,
14
-		"coverView": true,
17
+		"uglifyFileName": false,
18
+		"uploadWithSourceMap": true,
19
+		"useIsolateContext": true,
15 20
 		"nodeModules": false,
16
-		"autoAudits": false,
21
+		"enhance": false,
22
+		"useCompilerModule": false,
23
+		"userConfirmedUseCompilerModuleSwitch": false,
17 24
 		"showShadowRootInWxmlPanel": true,
18
-		"scopeDataCheck": false,
19
-		"uglifyFileName": false,
20 25
 		"checkInvalidKey": true,
21 26
 		"checkSiteMap": true,
22
-		"uploadWithSourceMap": true,
23
-		"compileHotReLoad": false,
24 27
 		"babelSetting": {
25 28
 			"ignore": [],
26 29
 			"disablePlugins": [],
27 30
 			"outputPath": ""
28
-		},
29
-		"useIsolateContext": true,
30
-		"useCompilerModule": false,
31
-		"userConfirmedUseCompilerModuleSwitch": false
31
+		}
32 32
 	},
33 33
 	"compileType": "miniprogram",
34 34
 	"simulatorType": "wechat",

+ 14
- 2
src/assets/css/iconfont.css
File diff suppressed because it is too large
Vedi File


+ 22
- 6
src/assets/css/iconfont.less
File diff suppressed because it is too large
Vedi File


+ 15
- 15
src/pages/ShouYe/index.jsx Vedi File

@@ -1,6 +1,6 @@
1 1
 import React, { Component } from 'react'
2 2
 import NavHeader from '../../components/NavHeader/index'
3
-import { Swiper, SwiperItem } from '@tarojs/components'
3
+import { Swiper, SwiperItem, Text } from '@tarojs/components'
4 4
 import '../../assets/css/reset.less'
5 5
 import '../../assets/css/iconfont.less'
6 6
 import './index.less'
@@ -71,7 +71,7 @@ export default class Index extends Component {
71 71
           <view className='AdvLayer' style={{ display: ShowAdvLayer ? 'block' : 'none' }}>
72 72
             <view className='centerLabel'>
73 73
               <image mode='aspectFit' src={TestImg}></image>
74
-              <text className='iconfont iconguanbi'></text>
74
+              <Text className='iconfont iconguanbi'></Text>
75 75
             </view>
76 76
           </view>
77 77
 
@@ -86,7 +86,7 @@ export default class Index extends Component {
86 86
                 <view>
87 87
 
88 88
                   {/* 欢迎词 */}
89
-                  <text className='Welcome'>欢迎来到远道智慧社区!</text>
89
+                  <Text className='Welcome'>欢迎来到远道智慧社区!</Text>
90 90
 
91 91
                   {/* banner */}
92 92
                   <view className='BannerContainer'>
@@ -114,8 +114,8 @@ export default class Index extends Component {
114 114
                         <view key={`Nav-${index}`} className='flex-item'>
115 115
                           <view>
116 116
                             <view className='centerLabel'>
117
-                              <text className={`iconfont ${item.icon}`}></text>
118
-                              <text>{item.name}</text>
117
+                              <Text className={`iconfont ${item.icon}`}></Text>
118
+                              <Text>{item.name}</Text>
119 119
                             </view>
120 120
                           </view>
121 121
                         </view>
@@ -127,8 +127,8 @@ export default class Index extends Component {
127 127
                   <view className='HotActivityContainer'>
128 128
                     <view>
129 129
                       <view className='Title'>
130
-                        <text>热门活动</text>
131
-                        <text className='iconfont icongengduo'></text>
130
+                        <Text>热门活动</Text>
131
+                        <Text className='iconfont icongengduo'></Text>
132 132
                       </view>
133 133
                       <view className='Activity'>
134 134
                         <image className='centerLabel' mode='aspectFill' src={TestImg}></image>
@@ -140,14 +140,14 @@ export default class Index extends Component {
140 140
                   <view className='OwnerContainer'>
141 141
                     <view>
142 142
                       <view className='Title'>
143
-                        <text>业主专区</text>
143
+                        <Text>业主专区</Text>
144 144
                       </view>
145 145
                       <view className='OwnerList flex-h'>
146 146
                         {
147 147
                           OwnerList.map((item, index) => (
148 148
                             <view className='flex-item' key={`Owners-${index}`}>
149
-                              <text className={`iconfont ${item.icon}`}></text>
150
-                              <text>{item.name}</text>
149
+                              <Text className={`iconfont ${item.icon}`}></Text>
150
+                              <Text>{item.name}</Text>
151 151
                             </view>
152 152
                           ))
153 153
                         }
@@ -159,9 +159,9 @@ export default class Index extends Component {
159 159
                   <view className='NewsContainer'>
160 160
                     <view>
161 161
                       <view className='Title flex-h'>
162
-                        <text className='flex-item'>热门资讯</text>
163
-                        <text>查看全部</text>
164
-                        <text className='iconfont iconjiantouright'></text>
162
+                        <Text className='flex-item'>热门资讯</Text>
163
+                        <Text>查看全部</Text>
164
+                        <Text className='iconfont iconjiantouright'></Text>
165 165
                       </view>
166 166
                       <view className='List'>
167 167
                         {
@@ -171,8 +171,8 @@ export default class Index extends Component {
171 171
                                 <image mode='aspectFill' src={item.img} className='centerLabel'></image>
172 172
                               </view>
173 173
                               <view className='flex-item'>
174
-                                <text>{item.title}</text>
175
-                                <text>{item.desc}</text>
174
+                                <Text>{item.title}</Text>
175
+                                <Text>{item.desc}</Text>
176 176
                               </view>
177 177
                             </view>
178 178
                           ))

+ 113
- 0
src/pages/WoDe/index.css Vedi File

@@ -0,0 +1,113 @@
1
+.WoDe {
2
+  width: 100%;
3
+  height: 100%;
4
+  position: relative;
5
+  background: #fff;
6
+}
7
+.WoDe .WoDeContent {
8
+  width: 100%;
9
+  position: relative;
10
+  overflow: hidden;
11
+}
12
+.WoDe .WoDeContent > .TopBg {
13
+  width: 400vw;
14
+  height: 400vw;
15
+  position: relative;
16
+  overflow: hidden;
17
+  border-radius: 100%;
18
+  margin-left: -150vw;
19
+  margin-top: -340vw;
20
+}
21
+.WoDe .WoDeContent > .TopBg > .ColorBg {
22
+  width: 100%;
23
+  position: absolute;
24
+  left: 0;
25
+  bottom: 0;
26
+  height: 60vw;
27
+  z-index: 1;
28
+  background-image: linear-gradient(#F35844, #ff8d61);
29
+}
30
+.WoDe .WoDeContent > .TopBg > .UserInfo {
31
+  position: absolute;
32
+  left: 50%;
33
+  transform: translateX(-50%);
34
+  -webkit-transform: translateX(-50%);
35
+  bottom: 60px;
36
+  z-index: 2;
37
+  width: 100vw;
38
+  align-items: center;
39
+}
40
+.WoDe .WoDeContent > .TopBg > .UserInfo > .Icon {
41
+  width: 196px;
42
+  height: 196px;
43
+  border-radius: 100%;
44
+  position: relative;
45
+  overflow: hidden;
46
+  background-color: #fff;
47
+  margin-right: 40px;
48
+  margin-left: 30px;
49
+}
50
+.WoDe .WoDeContent > .TopBg > .UserInfo > .Icon > image {
51
+  width: 100%;
52
+  height: 100%;
53
+}
54
+.WoDe .WoDeContent > .TopBg > .UserInfo > .flex-item {
55
+  position: relative;
56
+  overflow: hidden;
57
+}
58
+.WoDe .WoDeContent > .TopBg > .UserInfo > .flex-item > text {
59
+  display: block;
60
+  white-space: nowrap;
61
+  font-size: 30px;
62
+  color: #333;
63
+  line-height: 40px;
64
+  overflow: hidden;
65
+  text-overflow: ellipsis;
66
+}
67
+.WoDe .WoDeContent > .TopBg > .UserInfo > .flex-item > text:first-child {
68
+  font-size: 34px;
69
+  margin-bottom: 30px;
70
+}
71
+.WoDe .WoDeContent > .TopBg > .UserInfo > text {
72
+  font-size: 30px;
73
+  line-height: 58px;
74
+  border: 2px solid #000;
75
+  border-radius: 8px;
76
+  padding: 0 20px;
77
+  margin-right: 30px;
78
+}
79
+.WoDe .WoDeContent > .UserTab {
80
+  padding: 30px 0;
81
+  margin-top: 20px;
82
+  position: relative;
83
+  overflow: hidden;
84
+}
85
+.WoDe .WoDeContent > .UserTab > .Line {
86
+  width: 100%;
87
+  height: 20px;
88
+  background-color: #f8f8f8;
89
+}
90
+.WoDe .WoDeContent > .UserTab > .flex-h {
91
+  padding: 0 30px;
92
+  align-items: center;
93
+}
94
+.WoDe .WoDeContent > .UserTab > .flex-h > text {
95
+  font-size: 44px;
96
+  color: #F35844;
97
+  margin-right: 20px;
98
+}
99
+.WoDe .WoDeContent > .UserTab > .flex-h > view {
100
+  align-items: center;
101
+  border-bottom: 2px solid #f8f8f8;
102
+}
103
+.WoDe .WoDeContent > .UserTab > .flex-h > view > text {
104
+  font-size: 32px;
105
+  color: #999;
106
+  line-height: 100px;
107
+  margin-left: 20px;
108
+  overflow: hidden;
109
+}
110
+.WoDe .WoDeContent > .UserTab > .flex-h > view > text:first-child {
111
+  margin-left: 0;
112
+  color: #333;
113
+}

+ 76
- 0
src/pages/WoDe/index.jsx Vedi File

@@ -1,10 +1,26 @@
1 1
 import React, { Component } from 'react'
2
+import NavHeader from '../../components/NavHeader/index'
2 3
 import '../../assets/css/reset.less'
3 4
 import '../../assets/css/iconfont.less'
4 5
 import './index.less'
5 6
 
6 7
 export default class WoDe extends Component {
7 8
 
9
+  state = {
10
+    IsPull: false,
11
+    UserTab: [
12
+      { icon: 'iconrenzheng1', name: '业主认证', id: 1 },
13
+      { icon: 'iconjifenguize', name: '积分明细', id: 2 },
14
+      { icon: 'iconjiaofei', name: '物业缴费', id: 3 },
15
+      { icon: 'iconfuwu1', name: '物业服务', id: 4 }
16
+    ],
17
+    MoreUserTab: [
18
+      { icon: 'iconerweima', name: '推荐二维码', id: 5 },
19
+      { icon: 'iconfenxiang', name: '推荐分享', id: 6 },
20
+      { icon: 'iconhuodong', name: '参与活动', id: 7 }
21
+    ]
22
+  }
23
+
8 24
   componentWillMount () { }
9 25
 
10 26
   componentDidMount () { }
@@ -15,10 +31,70 @@ export default class WoDe extends Component {
15 31
 
16 32
   componentDidHide () { }
17 33
 
34
+  OnRefresh () { // 页面下拉刷新
35
+    this.setState({
36
+      IsPull: true
37
+    }, () => {
38
+      window.setTimeout(() => {
39
+        this.setState({
40
+          IsPull: false
41
+        })
42
+      }, 1000)
43
+    })
44
+  }
45
+
18 46
   render () {
47
+    const { IsPull, UserTab, MoreUserTab } = this.state
19 48
     return (
20 49
       <view className='WoDe'>
50
+        <NavHeader BgColor='none' Title='我的' IsFixed={true}></NavHeader>
51
+        <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='#F35844'>
52
+          <view className='WoDeContent'>
53
+
54
+            {/* 顶部背景图 */}
55
+            <view className='TopBg'>
56
+              <view className='ColorBg'></view>
57
+              <view className='UserInfo flex-h'>
58
+                <view className='Icon'>
59
+                  <image mode='aspectFill' src={null} class='centerLabel'></image>
60
+                </view>
61
+                <view className='flex-item'>
62
+                  <text>徐慧慧</text>
63
+                  <text>13613949434</text>
64
+                </view>
65
+                <text>签到</text>
66
+              </view>
67
+            </view>
68
+
69
+            {/* 用户选项 */}
70
+            <view className='UserTab'>
71
+              {
72
+                UserTab.map((item, index) => (
73
+                  <view key={`UserTab-${index}`} className='flex-h'>
74
+                    <text className={`iconfont ${item.icon}`}></text>
75
+                    <view className='flex-h flex-item'>
76
+                      <text className='flex-item'>{item.name}</text>
77
+                      <text className='iconfont iconjiantouright'></text>
78
+                    </view>
79
+                  </view>
80
+                ))
81
+              }
82
+              <view className='Line'></view>
83
+              {
84
+                MoreUserTab.map((item, index) => (
85
+                  <view key={`UserTab-${index}`} className='flex-h'>
86
+                    <text className={`iconfont ${item.icon}`}></text>
87
+                    <view className='flex-h flex-item'>
88
+                      <text className='flex-item'>{item.name}</text>
89
+                      <text className='iconfont iconjiantouright'></text>
90
+                    </view>
91
+                  </view>
92
+                ))
93
+              }
94
+            </view>
21 95
 
96
+          </view>
97
+        </scroll-view>
22 98
       </view>
23 99
     )
24 100
   }

+ 130
- 0
src/pages/WoDe/index.less Vedi File

@@ -0,0 +1,130 @@
1
+.WoDe {
2
+  width: 100%;
3
+  height: 100%;
4
+  position: relative;
5
+  background: #fff;
6
+
7
+  .WoDeContent {
8
+    width: 100%;
9
+    position: relative;
10
+    overflow: hidden;
11
+
12
+    >.TopBg {
13
+      width: 400vw;
14
+      height: 400vw;
15
+      position: relative;
16
+      overflow: hidden;
17
+      border-radius: 100%;
18
+      margin-left: -150vw;
19
+      margin-top: -340vw;
20
+
21
+      >.ColorBg {
22
+        width: 100%;
23
+        position: absolute;
24
+        left: 0;
25
+        bottom: 0;
26
+        height: 60vw;
27
+        z-index: 1;
28
+        background-image: linear-gradient(#F35844, rgba(255, 141, 97, 1, 0.5));
29
+      }
30
+
31
+      >.UserInfo {
32
+        position: absolute;
33
+        left: 50%;
34
+        transform: translateX(-50%);
35
+        -webkit-transform: translateX(-50%);
36
+        bottom: 60px;
37
+        z-index: 2;
38
+        width: 100vw;
39
+        align-items: center;
40
+
41
+        >.Icon {
42
+          width: 196px;
43
+          height: 196px;
44
+          border-radius: 100%;
45
+          position: relative;
46
+          overflow: hidden;
47
+          background-color: #fff;
48
+          margin-right: 40px;
49
+          margin-left: 30px;
50
+
51
+          >image {
52
+            width: 100%;
53
+            height: 100%;
54
+          }
55
+        }
56
+
57
+        >.flex-item {
58
+          position: relative;
59
+          overflow: hidden;
60
+
61
+          >text {
62
+            display: block;
63
+            white-space: nowrap;
64
+            font-size: 30px;
65
+            color: #333;
66
+            line-height: 40px;
67
+            overflow: hidden;
68
+            text-overflow: ellipsis;
69
+
70
+            &:first-child {
71
+              font-size: 34px;
72
+              margin-bottom: 30px;
73
+            }
74
+          }
75
+        }
76
+
77
+        >text {
78
+          font-size: 30px;
79
+          line-height: 58px;
80
+          border: 2px solid #000;
81
+          border-radius: 8px;
82
+          padding: 0 20px;
83
+          margin-right: 30px;
84
+        }
85
+      }
86
+    }
87
+
88
+    >.UserTab {
89
+      padding: 30px 0;
90
+      margin-top: 20px;
91
+      position: relative;
92
+      overflow: hidden;
93
+
94
+      >.Line {
95
+        width: 100%;
96
+        height: 20px;
97
+        background-color: #f8f8f8;
98
+      }
99
+
100
+      >.flex-h {
101
+        padding: 0 30px;
102
+        align-items: center;
103
+
104
+        >text {
105
+          font-size: 44px;
106
+          color: #F35844;
107
+          margin-right: 20px;
108
+        }
109
+
110
+        >view {
111
+          align-items: center;
112
+          border-bottom: 2px solid #f8f8f8;
113
+
114
+          >text {
115
+            font-size: 32px;
116
+            color: #999;
117
+            line-height: 100px;
118
+            margin-left: 20px;
119
+            overflow: hidden;
120
+
121
+            &:first-child {
122
+              margin-left: 0;
123
+              color: #333;
124
+            }
125
+          }
126
+        }
127
+      }
128
+    }
129
+  }
130
+}

+ 15
- 1
yarn.lock Vedi File

@@ -5975,6 +5975,11 @@ kleur@^3.0.0:
5975 5975
   resolved "https://registry.npm.taobao.org/kleur/download/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
5976 5976
   integrity sha1-p5yezIbuHOP6YgbRIWxQHxR/wH4=
5977 5977
 
5978
+klona@^2.0.4:
5979
+  version "2.0.4"
5980
+  resolved "https://registry.npm.taobao.org/klona/download/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
5981
+  integrity sha1-e7Hjr/sMuGJFR+9+j2cI6i4538A=
5982
+
5978 5983
 known-css-properties@^0.6.0:
5979 5984
   version "0.6.1"
5980 5985
   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:
5989 5994
     loader-utils "^1.1.0"
5990 5995
     pify "^4.0.1"
5991 5996
 
5997
+less-loader@^7.1.0:
5998
+  version "7.1.0"
5999
+  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"
6000
+  integrity sha1-lY1B6G194Ly0kHEe4PI1qp3Flqo=
6001
+  dependencies:
6002
+    klona "^2.0.4"
6003
+    loader-utils "^2.0.0"
6004
+    schema-utils "^3.0.0"
6005
+
5992 6006
 less@3.11.1:
5993 6007
   version "3.11.1"
5994 6008
   resolved "https://registry.npm.taobao.org/less/download/less-3.11.1.tgz#c6bf08e39e02404fe6b307a3dfffafdc55bd36e2"
@@ -6006,7 +6020,7 @@ less@3.11.1:
6006 6020
     request "^2.83.0"
6007 6021
     source-map "~0.6.0"
6008 6022
 
6009
-less@^3.10.3:
6023
+less@^3.10.3, less@^3.12.2:
6010 6024
   version "3.12.2"
6011 6025
   resolved "https://registry.npm.taobao.org/less/download/less-3.12.2.tgz#157e6dd32a68869df8859314ad38e70211af3ab4"
6012 6026
   integrity sha1-FX5t0ypohp34hZMUrTjnAhGvOrQ=