切换账户

src/pages/TobeShop/index.jsx

@@ -12,9 +12,6 @@ import image from '@/assets/icons/ProCard/8kb.jpg'
 import food from '@/assets/icons/ProCard/food.png'
 import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
 import { Button, Icon, Text, Textarea } from '@tarojs/components'
-
-
-
 import './style.less'
 
 

src/pages/index/index.config.js

@@ -3,7 +3,11 @@ export default {
   navigationStyle: 'custom',
   styleIsolation: 'shared',
   usingComponents: {
-    "mp-tabbar": "weui-miniprogram/tabbar/tabbar",    
-    "mp-tabs": "../../../components/tabs/index"
+    "mp-tabbar": "weui-miniprogram/tabbar/tabbar",
+    "mp-tabs": "../../../components/tabs/index",
+    "mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group",
+    "mp-checkbox": "weui-miniprogram/checkbox/checkbox",
+    "mp-cells": "weui-miniprogram/cells/cells",
+    "mp-dialog": "weui-miniprogram/dialog/dialog"
   }
 }

src/pages/index/tabs/Mine.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
+
+import { useState } 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 awaitPay from '@/assets/icons/UserCenter/awaitPay.png'
@@ -12,19 +13,38 @@ import HomeLogo from '@/assets/icons/UserCenter/HomeLogo.png'
 import ContactMe from '@/assets/icons/UserCenter/ContactMe.png'
 import collect from '@/assets/icons/UserCenter/collect.png'
 import Rules from '@/assets/icons/UserCenter/Rules.png'
-import Userrrrrrr from '@/assets/icons/ProCard/8kb.jpg'
+import UserImages from '@/assets/icons/ProCard/8kb.jpg'
+import cutoverUser from '@/assets/icons/UserCenter/cutoverUser.png'
+import touristON from '@/assets/icons/UserCenter/touristON.png'
+import touristOFF from '@/assets/icons/UserCenter/touristOFF.png'
+import hotelBossON from '@/assets/icons/UserCenter/hotelBossON.png'
+import hotelBossOFF from '@/assets/icons/UserCenter/hotelBossOFF.png'
+import shopBossON from '@/assets/icons/UserCenter/shopBossON.png'
+import shopBossOFF from '@/assets/icons/UserCenter/shopBossOFF.png'
 import './MineCss/style.less'
 
 
 
 export default withLayout((props) => {
   const { router, person } = props
+  const [showCutover, setShowCutover] = useState(false)
 
   // // 我的行程 
   // const HomeLogo = () => {
   //   Taro.navigateTo({ url: '/pages/MineUserAll/Rules/index' })
   // }
 
+
+  const ShowMoldeOn = () => {
+    setShowCutover(true)
+  }
+  const ok = () => {
+    setShowCutover(false)
+  }
+
+
+
+
   // 待支付
   const handleTobePaid = () => {
     Taro.navigateTo({ url: '/pages/MineUserAll/AllOrder/index?tabJump=1' })
@@ -60,17 +80,43 @@ export default withLayout((props) => {
     Taro.navigateTo({ url: '/pages/MineUserAll/Rules/index' })
   }
 
+
   return !person.phone ? <AuthPage /> : (
     <scroll-view scroll-y style='height: 77vh;' >
       <view className='User-box'>
+        {/* 身份切换 */}
+        <Popup show={showCutover} maskClosable={false}>
+          <view className='User-box-sths' >
+            <view className='User-box-selectUser'>请选择身份：</view>
+            <view className='User-box-tourist'>
+              <image className='Ubs-tourist-image' src={touristON} />
+              <text className='Ubs-tourist-text'>游客</text>
+            </view>
+            <view className='User-box-hotelBoss'>
+              <image className='Ubs-hotelBoss-image' src={hotelBossOFF} />
+              <text className='Ubs-hotelBoss-text'>民宿老板</text>
+
+            </view>
+            <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={Userrrrrrr} className='User-photos' />
+            <image src={UserImages} className='User-photos' />
           </view>
           <view className='User-info-all'>
             <view className='User-name'>福西西<image className='User-sex' src={boy} /></view>
             <view className='User-phone'>136****9434</view>
           </view>
+          {/* 切换身份 */}
+          <view onClick={ShowMoldeOn} className='User-info-cutover'>
+            <image className='User-info-cutover-image' src={cutoverUser} />
+          </view>
         </view>
         {/* 用户信息结束 */}
         <view className='buy-list-box'>

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

@@ -1,5 +1,64 @@
+
+
 .User-box {
   width: 100%;
+  .User-box-sths{
+    display: flex;
+    margin: 40px 0  60px 0;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    .User-box-selectUser{
+      width: 100%;
+      font-size: 32px;
+      font-weight: bold;
+      color: #202020;
+      line-height: 32px;
+      margin: 60px 0 70px  0;
+      text-align: left;
+    }
+    .User-box-tourist{
+      display: inline-block;
+
+       .Ubs-tourist-image{
+        width: 86px;
+        height: 86px;
+  
+      }
+      .Ubs-tourist-text{
+        display: block;
+        font-size: 30px;
+        font-weight: bold;
+        color:#202020;
+      }
+    }
+    .User-box-hotelBoss{
+      display: inline-block;
+      .Ubs-hotelBoss-image{
+        width: 86px;
+        height: 86px;
+      }
+      .Ubs-hotelBoss-text{
+        display: block;
+        font-size: 30px;
+        font-weight: bold;
+        color: #999999;
+      }
+    }
+    .User-box-shopBoss{
+      .Ubs-shopBoss-image{
+        width: 86px;
+        height: 86px;
+      }
+      .Ubs-shopBoss-text{
+        display: block;
+        font-size: 30px;
+        font-weight: bold;
+        color: #999999;
+      }
+    }
+
+  }
+
   .User-info {
     width: 90%;
     align-items: center;
@@ -37,6 +96,20 @@
         line-height: 48px;
       }
     }
+    .User-info-cutover{
+      width: 62px;
+      height: 62px;
+      align-items: center;
+      display: flex;
+      position: relative;
+      left: 8em;
+      .User-info-cutover-image{
+        width: 36px;
+        height: 36px;
+        margin: 0 auto;
+
+      }
+    }
   }
 
   .buy-list-box {

src/pages/test/index.config.js

@@ -1,4 +1,4 @@
 export default {
-    navigationBarTitleText: '测试页',
-    navigationStyle: 'custom',
-  }
+  navigationBarTitleText: '测试页',
+  navigationStyle: 'custom',
+}