吃个甘蔗嚼一年 преди 3 години
родител
ревизия
2f6a1baeaf
променени са 3 файла, в които са добавени 131 реда и са изтрити 67 реда
  1. 4
    6
      src/pages/index/tabs/Guide.jsx
  2. 110
    55
      src/pages/index/tabs/Mine.jsx
  3. 17
    6
      src/pages/index/tabs/MineCss/style.less

+ 4
- 6
src/pages/index/tabs/Guide.jsx Целия файл

@@ -24,21 +24,19 @@ const scoreList = new Array(5).fill(0)
24 24
 const score = '3.9'
25 25
 
26 26
 
27
+
27 28
 export default withLayout((props) => {
28 29
   const { router, person } = props
29 30
   const [value, setVaule] = useState('已收藏')
30 31
   const [imageSrc, setImageSrc] = useState(starOn)
31 32
 
32 33
 
33
-
34
-
35
-  const Ac = () => {
34
+  const AddCollect = () => {
36 35
     setImageSrc(starOff)
37 36
     setVaule('加入收藏')
38 37
     // console.log('------------', value);
39 38
 
40 39
   }
41
-
42 40
   const handleClick = () => {
43 41
     Taro.navigateTo({ url: '/pages/test/index' })
44 42
   }
@@ -182,7 +180,7 @@ export default withLayout((props) => {
182 180
                 <image className='title-position' src={position} />
183 181
                 <text className='title-position-image'>南京市/秦淮区</text>
184 182
                 <image className='title-on' src={imageSrc} />
185
-                <text onClick={() => Ac()} className='title-on-text'>{value}</text>
183
+                <text onClick={() => AddCollect()} className='title-on-text'>{value}</text>
186 184
               </view>
187 185
             </view>
188 186
           </view>
@@ -227,7 +225,7 @@ export default withLayout((props) => {
227 225
                 <image className='title-position' src={position} />
228 226
                 <text className='title-position-image'>南京市/秦淮区</text>
229 227
                 <image className='title-on' src={imageSrc} />
230
-                <text onClick={() => Ac()} className='title-on-text'>{value}</text>
228
+                <text onClick={() => AddCollect()} className='title-on-text'>{value}</text>
231 229
               </view>
232 230
             </view>
233 231
           </view>

+ 110
- 55
src/pages/index/tabs/Mine.jsx Целия файл

@@ -1,10 +1,11 @@
1 1
 
2
-import { useState } from 'react'
2
+import { useState, useRef, useEffect } from 'react'
3 3
 import Taro from '@tarojs/taro'
4 4
 import withLayout from '@/layouts'
5 5
 import Popup from '@/components/Popup'
6 6
 import AuthPage from '@/components/AuthPage'
7 7
 import boy from '@/assets/icons/UserCenter/boy.png'
8
+import girl from '@/assets/icons/UserCenter/girl.png'
8 9
 import awaitPay from '@/assets/icons/UserCenter/awaitPay.png'
9 10
 import AllOrder from '@/assets/icons/UserCenter/AllOrder.png'
10 11
 import Refund from '@/assets/icons/UserCenter/Refund.png'
@@ -28,12 +29,32 @@ import './MineCss/style.less'
28 29
 export default withLayout((props) => {
29 30
   const { router, person } = props
30 31
   const [showCutover, setShowCutover] = useState(false)
32
+  // const [userState] = useRef({})
33
+  const [userLogin, setUserLogin] = useState('NotLogin')
34
+
35
+  const [userImage, setUserImage] = useState(UserImages)
36
+  const [userName, setUserName] = useState('请点击登陆')
37
+  const [userSex, setUserSex] = useState(girl)
38
+
39
+
31 40
 
32 41
   // // 我的行程 
33 42
   // const HomeLogo = () => {
34 43
   //   Taro.navigateTo({ url: '/pages/MineUserAll/Rules/index' })
35 44
   // }
36 45
 
46
+  useEffect(() => {
47
+    if (userImage === UserImages) {
48
+      Taro.showToast({
49
+        title: '未登陆,请先登陆',
50
+        icon: 'error',
51
+        duration: 2000
52
+      })
53
+    } else {
54
+      setUserLogin('Login')
55
+    }
56
+  }, [userName, userImage])
57
+
37 58
 
38 59
   const ShowMoldeOn = () => {
39 60
     setShowCutover(true)
@@ -45,6 +66,41 @@ export default withLayout((props) => {
45 66
 
46 67
 
47 68
 
69
+  // 通过getUserProfile获取微信用户信息
70
+  const handleGetUserProfile = () => {
71
+    if (userImage === UserImages && userName === '请点击登陆') {
72
+      Taro.getUserProfile({
73
+        lang: 'zh_CN',
74
+        desc: "获取你的昵称、头像、地区及性别",
75
+        success: res => {
76
+          const avatarUrl = res.userInfo.avatarUrl
77
+          const nickName = res.userInfo.nickName
78
+          const gender = res.userInfo.gender
79
+          setUserImage(avatarUrl)
80
+          setUserName(nickName)
81
+          if (gender === 0) {
82
+
83
+          } else {
84
+            setUserSex(boy)
85
+
86
+          }
87
+          console.log('getUserProfile', res);
88
+
89
+        },
90
+        fail: () => {
91
+          //拒绝授权
92
+          console.error("您拒绝了请求");
93
+          return;
94
+        }
95
+      })
96
+    } else {
97
+
98
+    }
99
+
100
+
101
+  };
102
+  // --------------头-----------
103
+  //#region 
48 104
   // 待支付
49 105
   const handleTobePaid = () => {
50 106
     Taro.navigateTo({ url: '/pages/MineUserAll/AllOrder/index?tabJump=1' })
@@ -79,6 +135,8 @@ export default withLayout((props) => {
79 135
   const handleRules = () => {
80 136
     Taro.navigateTo({ url: '/pages/MineUserAll/Rules/index' })
81 137
   }
138
+  //#endregion
139
+  // --------------尾-----------
82 140
 
83 141
 
84 142
   return !person.phone ? <AuthPage /> : (
@@ -100,76 +158,73 @@ export default withLayout((props) => {
100 158
             <view className='User-box-shopBoss'>
101 159
               <image className='Ubs-shopBoss-image' src={shopBossOFF} />
102 160
               <text className='Ubs-shopBoss-text'>店铺老板</text>
103
-
104 161
             </view>
105 162
           </view>
106
-
107 163
         </Popup>
108 164
         <view className='User-info'>
109 165
           <view className='User-photos-box'>
110
-            <image src={UserImages} className='User-photos' />
166
+            <image src={userImage} className='User-photos' />
111 167
           </view>
112 168
           <view className='User-info-all'>
113
-            <view className='User-name'>福西西<image className='User-sex' src={boy} /></view>
169
+            <view onClick={() => handleGetUserProfile()} className='User-name'>{userName}</view>
114 170
             <view className='User-phone'>136****9434</view>
171
+            <image className='User-sex' src={userSex} />
115 172
           </view>
116 173
           {/* 切换身份 */}
117 174
           <view onClick={ShowMoldeOn} className='User-info-cutover'>
118 175
             <image className='User-info-cutover-image' src={cutoverUser} />
119 176
           </view>
120 177
         </view>
121
-        {/* 用户信息结束 */}
122
-        <view className='buy-list-box'>
123
-          <view className='buy-list-Paybox' onClick={handleTobePaid} >
124
-            <image className='buy-list-PayLogo' src={awaitPay} />
125
-            <view className='buy-list-goPay'>待支付</view>
126
-            <view className='buy-list-OrderNumber'>2笔订单</view>
127
-          </view>
128
-          <view className='buy-list-Paybox ' onClick={handleTobeWritten} >
129
-            <image className='buy-list-PayLogo' src={ToShop} />
130
-            <view className='buy-list-goPay'>待核销</view>
131
-            <view className='buy-list-OrderNumber'>1个订单</view>
132
-          </view>
133
-          <view className='buy-list-Paybox ' onClick={handleAllOrder} >
134
-            <image className='buy-list-PayLogo' src={AllOrder} />
135
-            <view className='buy-list-goPay'>全部订单</view>
136
-            <view className='buy-list-OrderNumber'>查看详情</view>
137
-          </view>
138
-          <view className='buy-list-Paybox ' onClick={handleRefund} >
139
-            <image className='buy-list-PayLogo' src={Refund} />
140
-            <view className='buy-list-goPay'>退款/售后</view>
141
-            <view className='buy-list-OrderNumber'>2笔订单</view>
142
-          </view>
143
-        </view>
144
-        <view className='Badge-box'>
145
-          <view className='Badge-list' onClick={handleHomeLogo}>
146
-            <image className='Badge-list-logo' src={HomeLogo} />
147
-            <text className='Badge-list-titme'> 入住指引</text>
148
-            <text className='Badge-list-gt'>&gt;</text>
178
+        {
179
+          userLogin === 'Login' &&
180
+          <view>
181
+            <view className='buy-list-box'>
182
+              <view className='buy-list-Paybox' onClick={handleTobePaid} >
183
+                <image className='buy-list-PayLogo' src={awaitPay} />
184
+                <view className='buy-list-goPay'>待支付</view>
185
+                <view className='buy-list-OrderNumber'>2笔订单</view>
186
+              </view>
187
+              <view className='buy-list-Paybox ' onClick={handleTobeWritten} >
188
+                <image className='buy-list-PayLogo' src={ToShop} />
189
+                <view className='buy-list-goPay'>待核销</view>
190
+                <view className='buy-list-OrderNumber'>1个订单</view>
191
+              </view>
192
+              <view className='buy-list-Paybox ' onClick={handleAllOrder} >
193
+                <image className='buy-list-PayLogo' src={AllOrder} />
194
+                <view className='buy-list-goPay'>全部订单</view>
195
+                <view className='buy-list-OrderNumber'>查看详情</view>
196
+              </view>
197
+              <view className='buy-list-Paybox ' onClick={handleRefund} >
198
+                <image className='buy-list-PayLogo' src={Refund} />
199
+                <view className='buy-list-goPay'>退款/售后</view>
200
+                <view className='buy-list-OrderNumber'>2笔订单</view>
201
+              </view>
202
+            </view>
203
+            <view className='Badge-box'>
204
+              <view className='Badge-list' onClick={handleHomeLogo}>
205
+                <image className='Badge-list-logo' src={HomeLogo} />
206
+                <text className='Badge-list-titme'> 入住指引</text>
207
+                <text className='Badge-list-gt'>&gt;</text>
208
+              </view>
209
+              <view className='Badge-list' onClick={handleCollect}>
210
+                <image className='Badge-list-logo' src={collect} />
211
+                <text className='Badge-list-titme'> 我的收藏</text>
212
+                <text className='Badge-list-gt'>&gt;</text>
213
+              </view>
214
+              <view className='Badge-list' onClick={handleContactMe}>
215
+                <image className='Badge-list-logo' src={ContactMe} />
216
+                <text className='Badge-list-titme'> 联系我们</text>
217
+                <text className='Badge-list-gt'>&gt;</text>
218
+              </view>
219
+              <view className='Badge-list' onClick={handleRules}>
220
+                <image className='Badge-list-logo' src={Rules} />
221
+                <text className='Badge-list-titme'> 协议声明</text>
222
+                <text className='Badge-list-gt'>&gt;</text>
223
+              </view>
224
+            </view>
149 225
           </view>
150
-          {/* <view className='Badge-list' onClick={handleRules}>
151
-            <image className='Badge-list-logo' src={MyTravel} />
152
-            <text className='Badge-list-titme'> 我的行程</text>
153
-            <text className='Badge-list-gt'>&gt;</text>
154
-          </view> */}
155
-
156 226
 
157
-          <view className='Badge-list' onClick={handleCollect}>
158
-            <image className='Badge-list-logo' src={collect} />
159
-            <text className='Badge-list-titme'> 我的收藏</text>
160
-            <text className='Badge-list-gt'>&gt;</text>
161
-          </view>
162
-          <view className='Badge-list' onClick={handleContactMe}>
163
-            <image className='Badge-list-logo' src={ContactMe} />
164
-            <text className='Badge-list-titme'> 联系我们</text>
165
-            <text className='Badge-list-gt'>&gt;</text>
166
-          </view>
167
-          <view className='Badge-list' onClick={handleRules}>
168
-            <image className='Badge-list-logo' src={Rules} />
169
-            <text className='Badge-list-titme'> 协议声明</text>
170
-            <text className='Badge-list-gt'>&gt;</text>
171
-          </view>
172
-        </view>
227
+        }
173 228
 
174 229
       </view>
175 230
     </scroll-view>

+ 17
- 6
src/pages/index/tabs/MineCss/style.less Целия файл

@@ -63,7 +63,7 @@
63 63
     width: 90%;
64 64
     align-items: center;
65 65
     display: -webkit-flex;
66
-    margin: 60px auto;
66
+    margin: 30px auto;
67 67
     .User-photos-box {
68 68
       display: inline-block;
69 69
       .User-photos {
@@ -74,19 +74,30 @@
74 74
     }
75 75
     .User-info-all {
76 76
       padding-left: 30px;
77
-      width: 200px;
77
+      padding-top: 20px;
78
+      // width: 200px;
78 79
       display: inline-block;
79 80
       .User-name {
80
-        // height: 34px;
81
+        width: 200px;
82
+        white-space: nowrap;
83
+        overflow: hidden;
84
+        text-overflow: ellipsis;
81 85
         font-size: 38px;
82 86
         font-weight: bold;
83 87
         color: #202020;
84
-        line-height: 48px;
88
+        padding-top: 20px;
89
+
85 90
       }
86 91
       .User-sex {
87
-        padding-left: 10px;
92
+        // padding-left: 10px;
93
+        // width: 33px;
94
+        // height: 32px;
88 95
         width: 33px;
89
-        height: 32px;
96
+    height: 32px;
97
+    display: inline-block;
98
+    position: relative;
99
+    left: 200px;
100
+    top: -3em;
90 101
       }
91 102
       .User-phone {
92 103
         // height: 20px;