mine

src/pages/index/tabs/Guide.jsx

@@ -24,21 +24,19 @@ const scoreList = new Array(5).fill(0)
 const score = '3.9'
 
 
+
 export default withLayout((props) => {
   const { router, person } = props
   const [value, setVaule] = useState('已收藏')
   const [imageSrc, setImageSrc] = useState(starOn)
 
 
-
-
-  const Ac = () => {
+  const AddCollect = () => {
     setImageSrc(starOff)
     setVaule('加入收藏')
     // console.log('------------', value);
 
   }
-
   const handleClick = () => {
     Taro.navigateTo({ url: '/pages/test/index' })
   }
@@ -182,7 +180,7 @@ export default withLayout((props) => {
                 <image className='title-position' src={position} />
                 <text className='title-position-image'>南京市/秦淮区</text>
                 <image className='title-on' src={imageSrc} />
-                <text onClick={() => Ac()} className='title-on-text'>{value}</text>
+                <text onClick={() => AddCollect()} className='title-on-text'>{value}</text>
               </view>
             </view>
           </view>
@@ -227,7 +225,7 @@ export default withLayout((props) => {
                 <image className='title-position' src={position} />
                 <text className='title-position-image'>南京市/秦淮区</text>
                 <image className='title-on' src={imageSrc} />
-                <text onClick={() => Ac()} className='title-on-text'>{value}</text>
+                <text onClick={() => AddCollect()} className='title-on-text'>{value}</text>
               </view>
             </view>
           </view>

src/pages/index/tabs/Mine.jsx

@@ -1,10 +1,11 @@
 
-import { useState } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import Taro from '@tarojs/taro'
 import withLayout from '@/layouts'
 import Popup from '@/components/Popup'
 import AuthPage from '@/components/AuthPage'
 import boy from '@/assets/icons/UserCenter/boy.png'
+import girl from '@/assets/icons/UserCenter/girl.png'
 import awaitPay from '@/assets/icons/UserCenter/awaitPay.png'
 import AllOrder from '@/assets/icons/UserCenter/AllOrder.png'
 import Refund from '@/assets/icons/UserCenter/Refund.png'
@@ -28,12 +29,32 @@ import './MineCss/style.less'
 export default withLayout((props) => {
   const { router, person } = props
   const [showCutover, setShowCutover] = useState(false)
+  // const [userState] = useRef({})
+  const [userLogin, setUserLogin] = useState('NotLogin')
+
+  const [userImage, setUserImage] = useState(UserImages)
+  const [userName, setUserName] = useState('请点击登陆')
+  const [userSex, setUserSex] = useState(girl)
+
+
 
   // // 我的行程 
   // const HomeLogo = () => {
   //   Taro.navigateTo({ url: '/pages/MineUserAll/Rules/index' })
   // }
 
+  useEffect(() => {
+    if (userImage === UserImages) {
+      Taro.showToast({
+        title: '未登陆，请先登陆',
+        icon: 'error',
+        duration: 2000
+      })
+    } else {
+      setUserLogin('Login')
+    }
+  }, [userName, userImage])
+
 
   const ShowMoldeOn = () => {
     setShowCutover(true)
@@ -45,6 +66,41 @@ export default withLayout((props) => {
 
 
 
+  // 通过getUserProfile获取微信用户信息
+  const handleGetUserProfile = () => {
+    if (userImage === UserImages && userName === '请点击登陆') {
+      Taro.getUserProfile({
+        lang: 'zh_CN',
+        desc: "获取你的昵称、头像、地区及性别",
+        success: res => {
+          const avatarUrl = res.userInfo.avatarUrl
+          const nickName = res.userInfo.nickName
+          const gender = res.userInfo.gender
+          setUserImage(avatarUrl)
+          setUserName(nickName)
+          if (gender === 0) {
+
+          } else {
+            setUserSex(boy)
+
+          }
+          console.log('getUserProfile', res);
+
+        },
+        fail: () => {
+          //拒绝授权
+          console.error("您拒绝了请求");
+          return;
+        }
+      })
+    } else {
+
+    }
+
+
+  };
+  // --------------头-----------
+  //#region 
   // 待支付
   const handleTobePaid = () => {
     Taro.navigateTo({ url: '/pages/MineUserAll/AllOrder/index?tabJump=1' })
@@ -79,6 +135,8 @@ export default withLayout((props) => {
   const handleRules = () => {
     Taro.navigateTo({ url: '/pages/MineUserAll/Rules/index' })
   }
+  //#endregion
+  // --------------尾-----------
 
 
   return !person.phone ? <AuthPage /> : (
@@ -100,76 +158,73 @@ export default withLayout((props) => {
             <view className='User-box-shopBoss'>
               <image className='Ubs-shopBoss-image' src={shopBossOFF} />
               <text className='Ubs-shopBoss-text'>店铺老板</text>
-
             </view>
           </view>
-
         </Popup>
         <view className='User-info'>
           <view className='User-photos-box'>
-            <image src={UserImages} className='User-photos' />
+            <image src={userImage} className='User-photos' />
           </view>
           <view className='User-info-all'>
-            <view className='User-name'>福西西<image className='User-sex' src={boy} /></view>
+            <view onClick={() => handleGetUserProfile()} className='User-name'>{userName}</view>
             <view className='User-phone'>136****9434</view>
+            <image className='User-sex' src={userSex} />
           </view>
           {/* 切换身份 */}
           <view onClick={ShowMoldeOn} className='User-info-cutover'>
             <image className='User-info-cutover-image' src={cutoverUser} />
           </view>
         </view>
-        {/* 用户信息结束 */}
-        <view className='buy-list-box'>
-          <view className='buy-list-Paybox' onClick={handleTobePaid} >
-            <image className='buy-list-PayLogo' src={awaitPay} />
-            <view className='buy-list-goPay'>待支付</view>
-            <view className='buy-list-OrderNumber'>2笔订单</view>
-          </view>
-          <view className='buy-list-Paybox ' onClick={handleTobeWritten} >
-            <image className='buy-list-PayLogo' src={ToShop} />
-            <view className='buy-list-goPay'>待核销</view>
-            <view className='buy-list-OrderNumber'>1个订单</view>
-          </view>
-          <view className='buy-list-Paybox ' onClick={handleAllOrder} >
-            <image className='buy-list-PayLogo' src={AllOrder} />
-            <view className='buy-list-goPay'>全部订单</view>
-            <view className='buy-list-OrderNumber'>查看详情</view>
-          </view>
-          <view className='buy-list-Paybox ' onClick={handleRefund} >
-            <image className='buy-list-PayLogo' src={Refund} />
-            <view className='buy-list-goPay'>退款/售后</view>
-            <view className='buy-list-OrderNumber'>2笔订单</view>
-          </view>
-        </view>
-        <view className='Badge-box'>
-          <view className='Badge-list' onClick={handleHomeLogo}>
-            <image className='Badge-list-logo' src={HomeLogo} />
-            <text className='Badge-list-titme'> 入住指引</text>
-            <text className='Badge-list-gt'>&gt;</text>
+        {
+          userLogin === 'Login' &&
+          <view>
+            <view className='buy-list-box'>
+              <view className='buy-list-Paybox' onClick={handleTobePaid} >
+                <image className='buy-list-PayLogo' src={awaitPay} />
+                <view className='buy-list-goPay'>待支付</view>
+                <view className='buy-list-OrderNumber'>2笔订单</view>
+              </view>
+              <view className='buy-list-Paybox ' onClick={handleTobeWritten} >
+                <image className='buy-list-PayLogo' src={ToShop} />
+                <view className='buy-list-goPay'>待核销</view>
+                <view className='buy-list-OrderNumber'>1个订单</view>
+              </view>
+              <view className='buy-list-Paybox ' onClick={handleAllOrder} >
+                <image className='buy-list-PayLogo' src={AllOrder} />
+                <view className='buy-list-goPay'>全部订单</view>
+                <view className='buy-list-OrderNumber'>查看详情</view>
+              </view>
+              <view className='buy-list-Paybox ' onClick={handleRefund} >
+                <image className='buy-list-PayLogo' src={Refund} />
+                <view className='buy-list-goPay'>退款/售后</view>
+                <view className='buy-list-OrderNumber'>2笔订单</view>
+              </view>
+            </view>
+            <view className='Badge-box'>
+              <view className='Badge-list' onClick={handleHomeLogo}>
+                <image className='Badge-list-logo' src={HomeLogo} />
+                <text className='Badge-list-titme'> 入住指引</text>
+                <text className='Badge-list-gt'>&gt;</text>
+              </view>
+              <view className='Badge-list' onClick={handleCollect}>
+                <image className='Badge-list-logo' src={collect} />
+                <text className='Badge-list-titme'> 我的收藏</text>
+                <text className='Badge-list-gt'>&gt;</text>
+              </view>
+              <view className='Badge-list' onClick={handleContactMe}>
+                <image className='Badge-list-logo' src={ContactMe} />
+                <text className='Badge-list-titme'> 联系我们</text>
+                <text className='Badge-list-gt'>&gt;</text>
+              </view>
+              <view className='Badge-list' onClick={handleRules}>
+                <image className='Badge-list-logo' src={Rules} />
+                <text className='Badge-list-titme'> 协议声明</text>
+                <text className='Badge-list-gt'>&gt;</text>
+              </view>
+            </view>
           </view>
-          {/* <view className='Badge-list' onClick={handleRules}>
-            <image className='Badge-list-logo' src={MyTravel} />
-            <text className='Badge-list-titme'> 我的行程</text>
-            <text className='Badge-list-gt'>&gt;</text>
-          </view> */}
-
 
-          <view className='Badge-list' onClick={handleCollect}>
-            <image className='Badge-list-logo' src={collect} />
-            <text className='Badge-list-titme'> 我的收藏</text>
-            <text className='Badge-list-gt'>&gt;</text>
-          </view>
-          <view className='Badge-list' onClick={handleContactMe}>
-            <image className='Badge-list-logo' src={ContactMe} />
-            <text className='Badge-list-titme'> 联系我们</text>
-            <text className='Badge-list-gt'>&gt;</text>
-          </view>
-          <view className='Badge-list' onClick={handleRules}>
-            <image className='Badge-list-logo' src={Rules} />
-            <text className='Badge-list-titme'> 协议声明</text>
-            <text className='Badge-list-gt'>&gt;</text>
-          </view>
-        </view>
+        }
 
       </view>
     </scroll-view>

src/pages/index/tabs/MineCss/style.less

@@ -63,7 +63,7 @@
     width: 90%;
     align-items: center;
     display: -webkit-flex;
-    margin: 60px auto;
+    margin: 30px auto;
     .User-photos-box {
       display: inline-block;
       .User-photos {
@@ -74,19 +74,30 @@
     }
     .User-info-all {
       padding-left: 30px;
-      width: 200px;
+      padding-top: 20px;
+      // width: 200px;
       display: inline-block;
       .User-name {
-        // height: 34px;
+        width: 200px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         font-size: 38px;
         font-weight: bold;
         color: #202020;
-        line-height: 48px;
+        padding-top: 20px;
+
       }
       .User-sex {
-        padding-left: 10px;
+        // padding-left: 10px;
+        // width: 33px;
+        // height: 32px;
         width: 33px;
-        height: 32px;
+    height: 32px;
+    display: inline-block;
+    position: relative;
+    left: 200px;
+    top: -3em;
       }
       .User-phone {
         // height: 20px;