小程序角色切换功能

src/components/Landlord/HouseManage/houseManage.jsx

@@ -10,9 +10,6 @@ import './houseManage.less'
 
 
 export default (props) => {
-  const toIncome=()=>{
-    Taro.redirectTo({url:'/pages/landlord/income/income'})
-  }
   return (
     <view>
       <view>

src/components/Landlord/Income/income.jsx

@@ -1,24 +1,64 @@
+import { useState} from 'react'
 import Taro from '@tarojs/taro'
+import Popup from '@/components/Popup'
 import CustomNav from '@/components/CustomNav'
 import './income.less'
 import eyes from '../../../assets/icons/shopKeeper/小眼睛.png'
 import ceyes from '../../../assets/icons/shopKeeper/小眼睛-闭上.png'
 import sImg from '../../../assets/icons/landlord/我的收入2.png'
+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'
 
 
 export default (props) => {
-  const toHouse=()=>{
-    Taro.navigateTo({url:'/pages/landlord/houseManage/houseManage'})
+  const [showCutover, setShowCutover] = useState(false)
+  const ShowMoldeOn = () => {
+    setShowCutover(true)
+  }
+  const ok = () => {
+    setShowCutover(false)
+  }
+  const gotoShop = () => {
+    Taro.redirectTo({ url: '/shop/pages/spread/spreadIndex' })
+  }
+  const gotoPerson = () => {
+    Taro.redirectTo({ url: '/pages/index/index' })
   }
   return (
     <view>
       <view>
         <CustomNav title='十公里' />
       </view>
+      <Popup show={showCutover} maskClosable={false}>
+          <view className='User-box-sths' >
+            <view className='User-box-selectUser'>请选择身份：</view>
+            <view className='User-box-tourist' onClick={gotoPerson}>
+              <image className='Ubs-tourist-image' src={touristOFF} />
+              <text className='Ubs-tourist-text'>游客</text>
+            </view>
+            <view className='User-box-hotelBoss' onClick={ok}>
+              <image className='Ubs-hotelBoss-image' src={hotelBossON} />
+              <text className='Ubs-hotelBoss-text'>民宿老板</text>
+
+            </view>
+            <view className='User-box-shopBoss' onClick={gotoShop}>
+              <image className='Ubs-shopBoss-image' src={shopBossOFF} />
+              <text className='Ubs-shopBoss-text'>店铺老板</text>
+            </view>
+          </view>
+        </Popup>     
       <view style={{ padding: '30rpx', height: '100%' }}>
         <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" style={{ height: 'calc(100vh - 120px)' }}>
           <view className='storexx'>
               <view className='storeName'>店名：<text>Yun咖 云里 咖啡店</text></view>
+              <view onClick={ShowMoldeOn}  className='User-info-cutover'>
+                <image className='User-info-cutover-image' src={cutoverUser} />
+              </view>
               <view className='money'>
                 <view className='sleft'>
                   <view className='lword'>全年收入（税前）</view>

src/components/Landlord/Income/income.less

@@ -1,3 +1,59 @@
+.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: #999999;      
+    }
+  }
+  .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: #202020;
+    }
+  }
+  .User-box-shopBoss{
+    .Ubs-shopBoss-image{
+      width: 86px;
+      height: 86px;
+    }
+    .Ubs-shopBoss-text{
+      display: block;
+      font-size: 30px;
+      font-weight: bold;
+      color:#999999;
+    }
+  }
+
+}
 .storexx{
   text-align: center;
   height: 302px;
@@ -13,7 +69,15 @@
     color: #202020;
     margin-bottom:58px;
   }
-  
+  .User-info-cutover{
+    position: absolute;
+    top: 60px;
+    right: 60px;
+    .User-info-cutover-image{
+      width: 36px;
+      height: 36px;
+    }
+  }
   .sleft{
     float: left;
     .lword{

src/components/spreads/ShopKeeper/shopKeeper.jsx

@@ -1,10 +1,18 @@
 import { React, useState, useEffect, } from 'react'
-import{ Taro,useRouter } from '@tarojs/taro'
+import Taro,{ useRouter } from '@tarojs/taro'
 import CustomNav from '@/components/CustomNav'
+import Popup from '@/components/Popup'
 import eyes from '@/assets/icons/shopKeeper/小眼睛.png'
 import ceyes from '@/assets/icons/shopKeeper/小眼睛-闭上.png'
 import iconsearch from '@/assets/icons/housemantj/search.png'
 import ms from '@/assets/icons/housemantj/ms3.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 './shopKeeper.less'
 
 
@@ -24,24 +32,60 @@ export default (props) => {
     setActiveTab(index)
   }
   const tabs = [
-      {
-        title: '未核销订单',
-      },
-      {
-        title: '已核销订单',  
-      },   
-    ]
-
+    {
+      title: '未核销订单',
+    },
+    {
+      title: '已核销订单',  
+    },   
+  ]
 
+  const [showCutover, setShowCutover] = useState(false)
+  const ShowMoldeOn = () => {
+    setShowCutover(true)
+  }
+  const ok = () => {
+    setShowCutover(false)
+  }
+  const goToHotel = () => {
+    Taro.redirectTo({ url: '/hotel/pages/landlord/landlord' })
+  }
+  const gotoPerson = () => {
+    Taro.redirectTo({ url: '/pages/index/index' })
+  }
   return (
     <view>
       <view>
         <CustomNav title='十公里' />
       </view>
+      <Popup show={showCutover} maskClosable={false}>
+          <view className='User-box-sths' >
+            <view className='User-box-selectUser'>请选择身份：</view>
+            <view className='User-box-tourist' onClick={gotoPerson}>
+              <image className='Ubs-tourist-image' src={touristOFF} />
+              <text className='Ubs-tourist-text'>游客</text>
+            </view>
+            <view className='User-box-hotelBoss' onClick={goToHotel}>
+              <image className='Ubs-hotelBoss-image' src={hotelBossOFF} />
+              <text className='Ubs-hotelBoss-text'>民宿老板</text>
+
+            </view>
+            <view className='User-box-shopBoss' onClick={ok}>
+              <image className='Ubs-shopBoss-image' src={shopBossON} />
+              <text className='Ubs-shopBoss-text'>店铺老板</text>
+
+            </view>
+          </view>
+
+        </Popup>
+        
       <view style={{ padding: '30rpx', height: '100%' }}>
         <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" style={{ height: 'calc(100vh - 120px)' }}>
           <view className='storexx'>
             <view className='storeName'>店名：<text>Yun咖 云里 咖啡店</text></view>
+            <view onClick={ShowMoldeOn}  className='User-info-cutover'>
+              <image className='User-info-cutover-image' src={cutoverUser} />
+            </view>
             <view className='tip'>（计算收入以核销为准）</view>
             <view className='money'>
               <view className='sleft'>

src/components/spreads/ShopKeeper/shopKeeper.less

@@ -1,3 +1,57 @@
+.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: #999999;      
+    }
+  }
+  .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:#202020;
+    }
+  }
+
+}
 .storexx{
   text-align: center;
   height: 342px;
@@ -13,6 +67,15 @@
     color: #202020;
     margin-bottom:27px;
   }
+  .User-info-cutover{
+    position: absolute;
+    top: 60px;
+    right: 60px;
+    .User-info-cutover-image{
+      width: 36px;
+      height: 36px;
+    }
+  }
   .tip{
     height: 23px;
     font-size: 24px;

src/components/spreads/Sparead/spreadMoney.jsx

@@ -1,19 +1,63 @@
+import { useState} from 'react'
+import Taro from '@tarojs/taro'
 import CustomNav from '@/components/CustomNav'
-import './spreadMoney.less'
+import Popup from '@/components/Popup'
 import eyes from '@/assets/icons/shopKeeper/小眼睛.png'
 import ceyes from '@/assets/icons/shopKeeper/小眼睛-闭上.png'
-
+import cutoverUser from '@/assets/icons/UserCenter/cutoverUser.png'
+import touristOFF from '@/assets/icons/UserCenter/touristOFF.png'
+import hotelBossOFF from '@/assets/icons/UserCenter/hotelBossOFF.png'
+import shopBossON from '@/assets/icons/UserCenter/shopBossON.png'
+import './spreadMoney.less'
 
 export default (props) => {
+  const [showCutover, setShowCutover] = useState(false)
+  const ShowMoldeOn = () => {
+    setShowCutover(true)
+  }
+  const ok = () => {
+    setShowCutover(false)
+  }
+  const goToHotel = () => {
+    Taro.redirectTo({ url: '/hotel/pages/landlord/landlord' })
+  }
+  const gotoPerson = () => {
+    Taro.redirectTo({ url: '/pages/index/index' })
+  }
+
   return (
     <view>
       <view>
         <CustomNav title='十公里' />
       </view>
+      <Popup show={showCutover} maskClosable={false}>
+          <view className='User-box-sths' >
+            <view className='User-box-selectUser'>请选择身份：</view>
+            <view className='User-box-tourist' onClick={gotoPerson}>
+              <image className='Ubs-tourist-image' src={touristOFF} />
+              <text className='Ubs-tourist-text'>游客</text>
+            </view>
+            <view className='User-box-hotelBoss' onClick={goToHotel}>
+              <image className='Ubs-hotelBoss-image' src={hotelBossOFF} />
+              <text className='Ubs-hotelBoss-text'>民宿老板</text>
+
+            </view>
+            <view className='User-box-shopBoss' onClick={ok}>
+              <image className='Ubs-shopBoss-image' src={shopBossON} />
+              <text className='Ubs-shopBoss-text'>店铺老板</text>
+
+            </view>
+          </view>
+
+        </Popup>
+     
       <view style={{ padding: '30rpx', height: '100%' }}>
         <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" style={{ height: 'calc(100vh - 120px)' }}>
           <view className='storexx'>
               <view className='storeName'>店名：<text>Yun咖 云里 咖啡店</text></view>
+              <view onClick={ShowMoldeOn}  className='User-info-cutover'>
+                <image className='User-info-cutover-image' src={cutoverUser} />
+              </view>
               <view className='tip'>（计算收入以核销为准）</view>
               <view className='money'>
                 <view className='sleft'>

src/components/spreads/Sparead/spreadMoney.less

@@ -1,3 +1,59 @@
+.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: #999999;      
+    }
+  }
+  .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:#202020;
+    }
+  }
+
+}
 .storexx{
   text-align: center;
   height: 342px;
@@ -13,6 +69,15 @@
     color: #202020;
     margin-bottom:27px;
   }
+  .User-info-cutover{
+    position: absolute;
+    top: 60px;
+    right: 60px;
+    .User-info-cutover-image{
+      width: 36px;
+      height: 36px;
+    }
+  }
   .tip{
     height: 23px;
     font-size: 24px;

src/hotel/pages/landlord/landlord.config.js

@@ -3,6 +3,8 @@ export default {
   navigationStyle: 'custom',
   styleIsolation: 'shared',
   usingComponents: {
-    "mp-tabbar": "weui-miniprogram/tabbar/tabbar"
+    "mp-tabbar": "weui-miniprogram/tabbar/tabbar",
+    "mp-dialog": "weui-miniprogram/dialog/dialog"
+
   }
 }

src/pages/index/tabs/Mine.jsx

@@ -79,7 +79,13 @@ export default withLayout((props) => {
   const handleRules = () => {
     Taro.navigateTo({ url: '/pages/MineUserAll/Rules/index' })
   }
-
+  
+  const goToHotel = () => {
+    Taro.redirectTo({ url: '/hotel/pages/landlord/landlord' })
+  }
+  const goToShop = () => {
+    Taro.redirectTo({ url: '/shop/pages/spread/spreadIndex' })
+  }
 
   return !person.phone ? <AuthPage /> : (
     <scroll-view scroll-y style='height: 77vh;' >
@@ -88,16 +94,16 @@ export default withLayout((props) => {
         <Popup show={showCutover} maskClosable={false}>
           <view className='User-box-sths' >
             <view className='User-box-selectUser'>请选择身份：</view>
-            <view className='User-box-tourist'>
+            <view className='User-box-tourist' onClick={ok}>
               <image className='Ubs-tourist-image' src={touristON} />
               <text className='Ubs-tourist-text'>游客</text>
             </view>
-            <view className='User-box-hotelBoss'>
+            <view className='User-box-hotelBoss' onClick={goToHotel}>
               <image className='Ubs-hotelBoss-image' src={hotelBossOFF} />
               <text className='Ubs-hotelBoss-text'>民宿老板</text>
 
             </view>
-            <view className='User-box-shopBoss'>
+            <view className='User-box-shopBoss' onClick={goToShop}>
               <image className='Ubs-shopBoss-image' src={shopBossOFF} />
               <text className='Ubs-shopBoss-text'>店铺老板</text>
 

src/shop/pages/spread/spreadIndex.config.js

@@ -3,6 +3,7 @@ export default {
   navigationStyle: 'custom',
   usingComponents: {
     "mp-tabbar": "weui-miniprogram/tabbar/tabbar",
-    "mp-tabs": "../../../components/tabs/index"
+    "mp-tabs": "../../../components/tabs/index",
+    "mp-dialog": "weui-miniprogram/dialog/dialog"
   }
 }