大厅界面优化

config/dev.js

@@ -9,8 +9,8 @@ module.exports = {
   mini: {},
   h5: {
     devServer: {
-      //host: '0.0.0.0',
+      host: '0.0.0.0',
-      host: '192.168.110.53',
+      // host: '192.168.110.53',
       // host: '192.168.3.102',
       port: 10086,
       // 设置代理来解决 H5 请求的跨域问题

src/api/proto.js

@@ -2346,8 +2346,12 @@ export const api = $root.api = (() => {
          * @interface ILobbyTable
          * @property {number|null} [tableNo] LobbyTable tableNo
          * @property {number|null} [playerNum] LobbyTable playerNum
-         * @property {number|null} [robotNum] LobbyTable robotNum
          * @property {Array.<api.ILobbyPlayer>|null} [players] LobbyTable players
+         * @property {number|null} [playerLimit] LobbyTable playerLimit
+         * @property {number|null} [texasType] LobbyTable texasType
+         * @property {number|null} [bigBland] LobbyTable bigBland
+         * @property {number|null} [limitInAmount] LobbyTable limitInAmount
+         * @property {number|null} [stage] LobbyTable stage
          */
 
         /**
@@ -2383,20 +2387,52 @@ export const api = $root.api = (() => {
         LobbyTable.prototype.playerNum = 0;
 
         /**
-         * LobbyTable robotNum.
+         * LobbyTable players.
-         * @member {number} robotNum
+         * @member {Array.<api.ILobbyPlayer>} players
          * @memberof api.LobbyTable
          * @instance
          */
-        LobbyTable.prototype.robotNum = 0;
+        LobbyTable.prototype.players = $util.emptyArray;
 
         /**
-         * LobbyTable players.
+         * LobbyTable playerLimit.
-         * @member {Array.<api.ILobbyPlayer>} players
+         * @member {number} playerLimit
          * @memberof api.LobbyTable
          * @instance
          */
-        LobbyTable.prototype.players = $util.emptyArray;
+        LobbyTable.prototype.playerLimit = 0;
+
+        /**
+         * LobbyTable texasType.
+         * @member {number} texasType
+         * @memberof api.LobbyTable
+         * @instance
+         */
+        LobbyTable.prototype.texasType = 0;
+
+        /**
+         * LobbyTable bigBland.
+         * @member {number} bigBland
+         * @memberof api.LobbyTable
+         * @instance
+         */
+        LobbyTable.prototype.bigBland = 0;
+
+        /**
+         * LobbyTable limitInAmount.
+         * @member {number} limitInAmount
+         * @memberof api.LobbyTable
+         * @instance
+         */
+        LobbyTable.prototype.limitInAmount = 0;
+
+        /**
+         * LobbyTable stage.
+         * @member {number} stage
+         * @memberof api.LobbyTable
+         * @instance
+         */
+        LobbyTable.prototype.stage = 0;
 
         /**
          * Creates a new LobbyTable instance using the specified properties.
@@ -2426,11 +2462,19 @@ export const api = $root.api = (() => {
                 writer.uint32(/* id 1, wireType 0 =*/8).int32(message.tableNo);
             if (message.playerNum != null && Object.hasOwnProperty.call(message, "playerNum"))
                 writer.uint32(/* id 2, wireType 0 =*/16).int32(message.playerNum);
-            if (message.robotNum != null && Object.hasOwnProperty.call(message, "robotNum"))
-                writer.uint32(/* id 3, wireType 0 =*/24).int32(message.robotNum);
             if (message.players != null && message.players.length)
                 for (let i = 0; i < message.players.length; ++i)
                     $root.api.LobbyPlayer.encode(message.players[i], writer.uint32(/* id 4, wireType 2 =*/34).fork()).ldelim();
+            if (message.playerLimit != null && Object.hasOwnProperty.call(message, "playerLimit"))
+                writer.uint32(/* id 5, wireType 0 =*/40).int32(message.playerLimit);
+            if (message.texasType != null && Object.hasOwnProperty.call(message, "texasType"))
+                writer.uint32(/* id 6, wireType 0 =*/48).int32(message.texasType);
+            if (message.bigBland != null && Object.hasOwnProperty.call(message, "bigBland"))
+                writer.uint32(/* id 7, wireType 0 =*/56).int32(message.bigBland);
+            if (message.limitInAmount != null && Object.hasOwnProperty.call(message, "limitInAmount"))
+                writer.uint32(/* id 8, wireType 0 =*/64).int32(message.limitInAmount);
+            if (message.stage != null && Object.hasOwnProperty.call(message, "stage"))
+                writer.uint32(/* id 9, wireType 0 =*/72).int32(message.stage);
             return writer;
         };
 
@@ -2473,16 +2517,32 @@ export const api = $root.api = (() => {
                         message.playerNum = reader.int32();
                         break;
                     }
-                case 3: {
-                        message.robotNum = reader.int32();
-                        break;
-                    }
                 case 4: {
                         if (!(message.players && message.players.length))
                             message.players = [];
                         message.players.push($root.api.LobbyPlayer.decode(reader, reader.uint32()));
                         break;
                     }
+                case 5: {
+                        message.playerLimit = reader.int32();
+                        break;
+                    }
+                case 6: {
+                        message.texasType = reader.int32();
+                        break;
+                    }
+                case 7: {
+                        message.bigBland = reader.int32();
+                        break;
+                    }
+                case 8: {
+                        message.limitInAmount = reader.int32();
+                        break;
+                    }
+                case 9: {
+                        message.stage = reader.int32();
+                        break;
+                    }
                 default:
                     reader.skipType(tag & 7);
                     break;
@@ -2524,9 +2584,6 @@ export const api = $root.api = (() => {
             if (message.playerNum != null && message.hasOwnProperty("playerNum"))
                 if (!$util.isInteger(message.playerNum))
                     return "playerNum: integer expected";
-            if (message.robotNum != null && message.hasOwnProperty("robotNum"))
-                if (!$util.isInteger(message.robotNum))
-                    return "robotNum: integer expected";
             if (message.players != null && message.hasOwnProperty("players")) {
                 if (!Array.isArray(message.players))
                     return "players: array expected";
@@ -2536,6 +2593,21 @@ export const api = $root.api = (() => {
                         return "players." + error;
                 }
             }
+            if (message.playerLimit != null && message.hasOwnProperty("playerLimit"))
+                if (!$util.isInteger(message.playerLimit))
+                    return "playerLimit: integer expected";
+            if (message.texasType != null && message.hasOwnProperty("texasType"))
+                if (!$util.isInteger(message.texasType))
+                    return "texasType: integer expected";
+            if (message.bigBland != null && message.hasOwnProperty("bigBland"))
+                if (!$util.isInteger(message.bigBland))
+                    return "bigBland: integer expected";
+            if (message.limitInAmount != null && message.hasOwnProperty("limitInAmount"))
+                if (!$util.isInteger(message.limitInAmount))
+                    return "limitInAmount: integer expected";
+            if (message.stage != null && message.hasOwnProperty("stage"))
+                if (!$util.isInteger(message.stage))
+                    return "stage: integer expected";
             return null;
         };
 
@@ -2555,8 +2627,6 @@ export const api = $root.api = (() => {
                 message.tableNo = object.tableNo | 0;
             if (object.playerNum != null)
                 message.playerNum = object.playerNum | 0;
-            if (object.robotNum != null)
-                message.robotNum = object.robotNum | 0;
             if (object.players) {
                 if (!Array.isArray(object.players))
                     throw TypeError(".api.LobbyTable.players: array expected");
@@ -2567,6 +2637,16 @@ export const api = $root.api = (() => {
                     message.players[i] = $root.api.LobbyPlayer.fromObject(object.players[i]);
                 }
             }
+            if (object.playerLimit != null)
+                message.playerLimit = object.playerLimit | 0;
+            if (object.texasType != null)
+                message.texasType = object.texasType | 0;
+            if (object.bigBland != null)
+                message.bigBland = object.bigBland | 0;
+            if (object.limitInAmount != null)
+                message.limitInAmount = object.limitInAmount | 0;
+            if (object.stage != null)
+                message.stage = object.stage | 0;
             return message;
         };
 
@@ -2588,19 +2668,31 @@ export const api = $root.api = (() => {
             if (options.defaults) {
                 object.tableNo = 0;
                 object.playerNum = 0;
-                object.robotNum = 0;
+                object.playerLimit = 0;
+                object.texasType = 0;
+                object.bigBland = 0;
+                object.limitInAmount = 0;
+                object.stage = 0;
             }
             if (message.tableNo != null && message.hasOwnProperty("tableNo"))
                 object.tableNo = message.tableNo;
             if (message.playerNum != null && message.hasOwnProperty("playerNum"))
                 object.playerNum = message.playerNum;
-            if (message.robotNum != null && message.hasOwnProperty("robotNum"))
-                object.robotNum = message.robotNum;
             if (message.players && message.players.length) {
                 object.players = [];
                 for (let j = 0; j < message.players.length; ++j)
                     object.players[j] = $root.api.LobbyPlayer.toObject(message.players[j], options);
             }
+            if (message.playerLimit != null && message.hasOwnProperty("playerLimit"))
+                object.playerLimit = message.playerLimit;
+            if (message.texasType != null && message.hasOwnProperty("texasType"))
+                object.texasType = message.texasType;
+            if (message.bigBland != null && message.hasOwnProperty("bigBland"))
+                object.bigBland = message.bigBland;
+            if (message.limitInAmount != null && message.hasOwnProperty("limitInAmount"))
+                object.limitInAmount = message.limitInAmount;
+            if (message.stage != null && message.hasOwnProperty("stage"))
+                object.stage = message.stage;
             return object;
         };
 

src/app.scss

@@ -1,6 +1,13 @@
 
 @import "@nutui/nutui-react-taro/dist/style.css";
-
+body,html,h2,h3,button,input,ul,li{
+  margin: 0;
+  padding: 0;
+  color: #666;
+}
+ul,li {
+  list-style: none;
+}
 body {
   font-size: 16px;
   max-width: 800Px;
@@ -14,3 +21,23 @@ body {
   --nutui-brand-color-start: #1BCE7D;
   --nutui-brand-color-end: #1BCE7D;
 }
+a {
+  color: #2d2e2f;
+  outline: none;
+	text-decoration: none;
+}
+a:link {
+	text-decoration: none;
+}
+a:visited {
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: none;
+}
+a:active {
+	text-decoration: none;
+}
+a:focus {
+	text-decoration: none;
+}

src/assets/icon/github.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1680332705030" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2745" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1023.560892 524.587752c0 114.331752-32.549236 217.148443-97.647709 308.450075-65.047295 91.301632-149.132822 154.455339-252.205404 189.512299-11.975662 2.303012-20.778286 0.716493-26.305515-4.759558a27.584966 27.584966 0 0 1-8.342021-20.471218V853.150798c0-44.166653-11.566238-76.511177-34.647536-96.982394a446.272549 446.272549 0 0 0 68.32269-12.282731c20.16415-5.476051 41.044792-14.329852 62.590748-26.612583a187.311643 187.311643 0 0 0 53.992837-45.446104c14.432209-18.014672 26.203159-41.914819 35.312851-71.751618 9.109692-29.8368 13.664538-64.074912 13.664538-102.765514 0-55.118754-17.554069-102.049021-52.61103-140.739623 16.376974-41.454216 14.636921-87.872703-5.373695-139.357815-12.436265-4.094244-30.399759-1.535341-53.941659 7.523172a355.17563 355.17563 0 0 0-61.311297 30.041513l-25.333132 16.376974a462.137743 462.137743 0 0 0-127.945112-17.707604 462.137743 462.137743 0 0 0-127.945111 17.758782 589.571074 589.571074 0 0 0-28.301459-18.424096c-11.77095-7.31846-30.34858-16.069906-55.681713-26.305515-25.281954-10.235609-44.422543-13.306292-57.31941-9.212048-19.498835 51.433935-21.085354 97.852421-4.606024 139.306637-35.108139 38.690602-52.713386 85.620869-52.713386 140.739623 0 38.690602 4.606024 72.826357 13.715716 102.458445 9.109692 29.58091 20.778286 53.481057 34.954605 71.700441a180.658498 180.658498 0 0 0 53.634591 45.753172c21.545957 12.282731 42.477777 21.18771 62.641926 26.612583 20.215328 5.527229 42.989557 9.621472 68.32269 12.333909-17.758781 16.376974-28.659705 39.867697-32.651593 70.369811a129.941055 129.941055 0 0 1-29.990334 10.235609 184.087426 184.087426 0 0 1-37.974109 3.428929c-14.688099 0-29.171485-4.913092-43.654872-14.688099-14.432209-9.826185-26.766117-24.053681-37.001726-42.682489a109.162769 109.162769 0 0 0-32.293346-35.517563c-13.101579-9.109692-24.104859-14.585743-33.009839-16.376974l-13.306292-2.047122c-9.314404 0-15.762838 1.023561-19.345301 3.070683-3.582463 2.047122-4.606024 4.606024-3.326572 7.83024a37.769397 37.769397 0 0 0 5.987831 9.570295 49.182101 49.182101 0 0 0 8.700267 8.188487l4.606024 3.377751c9.826185 4.606024 19.447657 13.255114 29.017952 25.998447 9.570294 12.743333 16.581686 24.360749 20.982998 34.80107l6.653146 15.71166c5.783119 17.298179 15.558126 31.320963 29.376197 42.017174 13.766894 10.747389 28.659705 17.554069 44.627255 20.471218 15.96755 2.968327 31.423319 4.606024 46.316131 4.810736 14.841633 0.204712 27.22672-0.562958 37.001726-2.405368l15.302235-2.712436c0 17.298179 0.102356 37.564685 0.358247 60.799517l0.307068 36.848192c0 8.188487-2.86597 15.046345-8.700268 20.471218-5.731941 5.527229-14.636921 7.113748-26.612583 4.810736-103.072582-35.056961-187.158109-98.261846-252.205404-189.512299C32.549236 741.736195 0 638.919504 0 524.587752c0-95.191163 22.876586-182.910331 68.629758-263.31104a516.028224 516.028224 0 0 1 186.288082-190.894106A491.309228 491.309228 0 0 1 511.780446 0.012795a491.309228 491.309228 0 0 1 256.913784 70.369811 516.028224 516.028224 0 0 1 186.236905 190.894106C1000.684306 341.626242 1023.560892 429.447767 1023.560892 524.587752z" fill="#3d3d3d" p-id="2746"></path></svg>

src/components/style/title.scss

@@ -105,8 +105,9 @@
     .title-avatar-wrap {
       width: 48px;
       height: 48px;
-      display: flex;
+      // display: flex;
-      flex-direction: row;
+      // flex-direction: row;
+      position: relative;
     }
     .avatar {
       width: 41px;
@@ -116,6 +117,54 @@
       border-radius: 50%;
       margin-top: 2px;
     }
+    .menus {
+      position: absolute;
+      z-index: 10;
+      top: 47px;
+      right: -14px;
+      // overflow: hidden;
+      // background-color: #1BCE7D;
+      // width: 100px;
+      // padding: 5px 5px;
+      // height: 40px;
+      border-bottom-left-radius: 6px;
+      border-end-end-radius: 6px;
+      overflow: hidden;
+      box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.3);
+      display: flex;
+      flex-direction: column;
+    }
+    .menus-hide {
+      display: none;
+    }
+    .menu-item {
+      width: 90px;
+      position: relative;
+
+      &:not(:first-child) {
+        // content: " ";
+        // position: absolute;
+        // width: 80px;
+        // height: 1px;
+        // background-color: #000;
+        border-top: 1px solid #D8D8D8;
+      }
+    }
+    .menu-item-btn {
+      text-align: center;
+      color: #3D3D3D;
+      font-size: 12px;
+      line-height: 30px;
+      padding: 3px 0;
+      box-sizing: content-box;
+      // background-color: #FFF;
+      border-radius: 0;
+      &::after {
+        content: none;
+        border: 0;
+        border-radius: 0;
+      }
+    }
   }
 }
 

src/components/title.jsx

@@ -1,21 +1,32 @@
 import React from 'react';
 import cnames from 'classnames';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
-import { View, Text, Image } from '@tarojs/components';
+import { switchMenuVisible } from '@/store/app';
-import { Menu, MenuItem } from '@nutui/nutui-react-taro';
+import { View, Text, Image, Button } from '@tarojs/components';
-import { navigateBack, showToast } from '@/utils/application';
+// import { Menu, MenuItem } from '@nutui/nutui-react-taro';
-import websocket from '@/api/websocket'
+import { navigateBack, redirectTo, showToast } from '@/utils/application';
-import left from '@/assets/icon/left-1.svg';
+import websocket from '@/api/websocket';
-import './style/title.scss';
+import { reqLeaveTable }  from '@/api/wsapi';
+import { isIn } from '@/utils/collect';
 
+import left from '@/assets/icon/left-1.svg';
 import coinIcon from '@/assets/icon/coin-3.svg'
+import './style/title.scss';
+import { removeStorage } from '@/utils/storage';
 
 function Title(props) {
-  const {username, nickname, avatar, defaultAvatar, balance, status: netStatus, ttl} = useSelector(state => ({
+  const {
-    ...state.user, ...state.conn
+      username, avatar, defaultAvatar,
+     balance, status: netStatus, ttl,
+     routeName, menuVisible
+  } = useSelector(state => ({
+    ...state.user, ...state.conn, ...state.app
   }));
+
   const { leftSolt, leftIcon, onLeftClick, rightSolt } = props;
 
+  const dispatch = useDispatch();
+
   function reconnectNet(netStatus) {
     if (netStatus === 1) {
       console.log('reconnect net.')
@@ -23,6 +34,26 @@ function Title(props) {
     }
   }
 
+  function handleLeaveTable() {
+    dispatch(switchMenuVisible())
+    reqLeaveTable()
+      .then(res => {
+        console.log('leave', res);
+        redirectTo({url: '/pages/lobby/lobby'})
+      })
+      .catch(err => {
+        showToast({title: err})
+        console.log('leave err', err)
+      })
+  }
+
+  function handleLogout() {
+    dispatch(switchMenuVisible())
+    removeStorage('_t');
+    redirectTo({url: '/pages/login/login'});
+    websocket.closeConn();
+  }
+
   return (
     <View>
       <View className={props.bgColor ? "page-top bgc" : "page-top"}>
@@ -58,7 +89,19 @@ function Title(props) {
             </View>
             {
               rightSolt || <View className='title-avatar-wrap'>
-                <Image className='avatar' src={avatar || defaultAvatar} />
+                <View onClick={() => dispatch(switchMenuVisible())}><Image className='avatar' src={avatar || defaultAvatar} /></View>
+                <View className={cnames('menus',{'menus-hide': !menuVisible})}>
+                  {
+                    isIn(routeName, 'table') && <View className="menu-item">
+                      <Button onClick={handleLeaveTable} className="menu-item-btn">退出牌桌</Button>
+                    </View>
+                  }
+                  {
+                    isIn(routeName, 'lobby', 'new_table') && <View className="menu-item">
+                      <Button onClick={handleLogout} className="menu-item-btn">退出登录</Button>
+                    </View>
+                  }
+                </View>
               </View>
             }
           </View>

src/pages/lobby/lobby.jsx

@@ -1,27 +1,29 @@
 import React, { Component } from 'react'
 import { connect } from "react-redux";
-import { View, Button, Image } from '@tarojs/components'
+import { View, Text, Button, Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
+import cnames from 'classnames';
 import { setBalance } from '@/store/user';
+import { setRouteName } from '@/store/app';
 
-import './lobby.scss'
 import { navigateTo, redirectTo, showToast } from '@/utils/application'
 import { reqLobbyView, reqJoinTable, reqAccountBalance } from '@/api/wsapi'
 import { addMsgListen, removeMsgListener } from '@/api/websocket'
 import Title from '@/components/title'
-import coin1 from '@/assets/coin-1.png'
+import coin1 from '@/assets/coin-0.svg'
 import robotIcon from '@/assets/icon/robot-1.svg'
 import plusIcon from '@/assets/icon/plus-2.svg';
 import refreshIcon from '@/assets/icon/refresh-fill.svg';
+import coinIcon from '@/assets/icon/coin-1.svg';
 
-import cnames from 'classnames';
+import './lobby.scss'
+import { isIn } from '@/utils/collect';
 
 class Lobby extends Component {
   constructor(props) {
     super(props)
     this.state = {
       tables: [],
-      defaultAvatar: "https://img0.baidu.com/it/u=2477829979,2171947490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
       lobbyLoading: false,
       gameType: [
         {value: 1, text: '', checked: false},
@@ -32,12 +34,15 @@ class Lobby extends Component {
     this.circleElePos = [{x:16,y:8},{x:70,y:-3},{x:110,y:28},{x:115,y:70},{x:80,y:105},{x:20,y:100},{x:-2,y:60}];
   }
 
-
   componentWillUnmount() {
     // 取消监听消息
     removeMsgListener('api.ResLobbyFresh');
   }
 
+  componentDidShow() {
+    this.props.setRouteName('lobby');
+  }
+
   componentDidMount() {
     // 有新桌面创建消息监听
     addMsgListen('api.ResLobbyFresh', this.handleReqLobbyView);
@@ -117,7 +122,9 @@ class Lobby extends Component {
         <View className="tab">
           {
             this.state.tables.map((table, i) => (
+              <View className='tab-box'>
                 <View key={table.tableNo} className="tab-wrap" onClick={this.handleJoinTable.bind(this, table)}>
+                  <View className="tab-no">#{table.tableNo}</View>
                   <View className="circle-wrap">
                     <View className="circle-inner"><Image className="inner-coin" src={coin1} /></View>
                     {
@@ -129,15 +136,24 @@ class Lobby extends Component {
                         }}>
                           <Image
                             className={cnames("circle-avatar", {'circle-icon': player.robot || !player.id})}
-                        src={player.robot ? robotIcon : !player.id ? plusIcon : ((player.avatar && `/api/gm/avatar/${player.avatar}`) || this.state.defaultAvatar)}
+                            src={player.robot ? robotIcon : !player.id ? plusIcon : ((player.avatar && `/api/gm/avatar/${player.avatar}`) || this.props.defaultAvatar)}
                           />
                         </View>
                       ))
                     }
                   </View>
                   <View className="tab-no-wrap">
-                <View className="tab-no">#10013</View>
+                    <View className={cnames("tab-sc tab-sc-1", {
-                <View className="tab-sc">5/7</View>
+                      'tab-sc-1-full': table.playerNum === table.playerLimit,
+                      'tab-sc-1-gaming': !isIn(table.stage, 1, 7),
+                      })}
+                    >{!isIn(table.stage, 1, 7) ? '进行中' : `[${table.playerNum}/${table.playerLimit}]`}</View>
+                    <View className={cnames("tab-sc tab-sc-2", {'tab-sc-2-nolimit': table.texasType === 3})}>{table.texasType === 3 ? '无限注' : '限注'}</View>
+                    <View className="tab-sc tab-sc-3">
+                      <Image className="tab-sc-3-icon" src={coinIcon} />
+                      <Text>{table.bigBland}/{table.limitInAmount}</Text>
+                    </View>
+                  </View>
                 </View>
               </View>
             ))
@@ -146,15 +162,20 @@ class Lobby extends Component {
           <View key="tab-wrap" className="tab-wrap"></View>
         </View>
         <View className="bottom-btn-wrap">
-          <Button className="bottom-btn" onClick={() => navigateTo({url: '/pages/new_table/new_table'})}>创建新牌桌</Button>
+          <Button className="bottom-btn" onClick={() => navigateTo({url: '/pages/new_table/new_table'})}>新牌桌</Button>
         </View>
       </View>
     )
   }
 }
 
+const mapStateToProps = state => ({
+  defaultAvatar: state.user.defaultAvatar
+});
+
 const mapDispatchToProps = dispatch => ({
-  setBalance: b => dispatch(setBalance(b))
+  setBalance: b => dispatch(setBalance(b)),
+  setRouteName: () => dispatch(setRouteName('lobby')),
 });
 
-export default connect(() =>({}), mapDispatchToProps)(Lobby)
+export default connect(mapStateToProps, mapDispatchToProps)(Lobby)

src/pages/lobby/lobby.scss

@@ -20,18 +20,27 @@
 .tab {
   // padding: 0 0 0 21px;
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-between;
-  flex-wrap:wrap;
+  flex-wrap: wrap;
-
+  .tab-box {
+    flex: 0 0 50%;
+    display: flex;
+    justify-content: center;
+  }
   .tab-wrap {
     width: 150px;
-    margin: 20px 10px;
+    margin: 0 0 20px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    // align-items: center;
   }
   .circle-wrap {
     height: 140px;
     width: 140px;
     // background-color: yellowgreen;
     border-radius: 50%;
+    align-self: center;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -41,8 +50,8 @@
 
   }
   .inner-coin {
-    height: 80px;
+    height: 76px;
-    width: 80px;
+    width: 76px;
     border-radius: 50%;
   }
   .circle-item {
@@ -89,21 +98,61 @@
 
 .tab-no-wrap {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
 }
-
 .tab-no,.tab-sc {
+  width: 60px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 12px;
+  color: #FFF;
+  background-color: #EE914E;
+  text-align: center;
+  border-radius: 5px;
+}
+.tab-no {
+  font-weight: bold;
+}
+.tab-sc {
+  width: 60px;
+  &:not(:first-child) {
+    margin-left: 3px;
+  }
+}
+.tab-sc-1 {
+  width: 50px;
+  background-color: #1BCE7D;
+}
+.tab-sc-1-full {
+  background-color: #EED87D;
+}
+.tab-sc-1-gaming {
+  background-color: #D8D8D8;
+}
+.tab-sc-2 {
+  background-color: #99ADCB;
+}
+.tab-sc-2-nolimit {
+  background-color: #CAC28B;
+}
+.tab-sc-3 {
+  width: 80px !important;
+  background-color: #51AEFA;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 2px;
+}
+.tab-sc-3-icon {
+  width: 13px;
+  height: 13px;
+}
+ .aaa {
   width: 71px;
   height: 20px;
   background-color: #EE914E;
   border-radius: 16px;
-  font-size: 12px;
-  color: #FFF;
   text-align: center;
   line-height: 20px;
 }
 
-.tab-sc {
-  width: 57px;
-  margin-left: 5px;
-}

src/pages/login/login.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react'
 import { View, Text, Input, Image, Button, Label } from '@tarojs/components'
 import Taro from '@tarojs/taro';
+// import { useDispatch } from 'react-redux';
+// import { setRouteName } from '@/store/app';
 //import { Progress } from '@nutui/nutui-react-taro';
 //import { Form, Input, TextArea, Cell, Button, Row, Col, Image } from '@nutui/nutui-react-taro';
 import ws from '@/api/websocket'
@@ -9,6 +11,7 @@ import { doLogin, fetchOpMap, fetchRouteWs } from '@/api/api'
 import { redirectTo, showToast } from '@/utils/application'
 import iconUser from '@/assets/icon/user-3-fill.svg'
 import iconLock from '@/assets/icon/lock-2-fill.svg'
+import iconGithub from '@/assets/icon/github.svg'
 import abIcon from '@/assets/icon/a-b.svg'
 import { removeStorage, setStorage } from '@/utils/storage';
 
@@ -16,6 +19,8 @@ import { removeStorage, setStorage } from '@/utils/storage';
   登录 -> 大厅 -> 新桌面 -> 进桌面 -> profile(弹窗)
 */
 function Login() {
+    // useDispatch()(setRouteName('login'));
+
     const [state, setState] = useState({
       username: '',
       password: '',
@@ -74,15 +79,17 @@ function Login() {
           <Image className='captcha' src={captcha.src} width="107" height="36"
             onClick={() => setCaptcha({...captcha, src: captcha.origin + '?t=' + Math.random()})} />
         </View>
-        <View>
+        <View className="submit-btn-wrap">
           <Button className='submit-btn' loading={submitLoding} onClick={handleSubmit}>START</Button>
         </View>
-        <View className='title-line' style={{
+        <View className="footer-wrap">
-          'textAlign': 'center',
+          <View className='footer-line'><Text className='title-3'>新用户自动注册</Text></View>
-          'marginTop': Taro.pxTransform(12),
+          <View className='footer-line'><Text className='title-3'>{'【仅供娱乐禁止赌博】'}</Text></View>
-          'color': '#3d3d3d',
+          <a className='footer-line footer-line-github' href='https://github.com/tangmingyou/texas-poker-bk' target="_blank">
-          }}
+            <Image className="footer-github" src={iconGithub} />
-        ><Text className='title-2'>新用户自动注册</Text></View>
+            <Text className='title-3'>github</Text>
+          </a>
+        </View>
         <View style={{display: 'none'}}>
           <Button type="primary" style={{width: '160px'}} onClick={handleSubmit}>提交</Button>
           <Button type="primary" style={{width: '160px'}} onClick={() => {Taro.navigateTo({url:'/pages/lobby/lobby'})}}>跳转</Button>

src/pages/login/login.scss

@@ -11,16 +11,40 @@
     width: 359px;
     margin: 0 auto;
   }
-
+  .footer-wrap {
+    margin-top: 12px;
+  }
+  .footer-line {
+    //padding: 6px 39px;
+    width: 359px;
+    margin: 0 auto;
+    text-align: center;
+    color: #3d3d3d;
+  }
+  .footer-line-github {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+    text-decoration: underline;
+  }
+  .footer-github {
+    width: 15px;
+    height: 15px;
+    margin-right: 5px;
+  }
   .title-1 {
     font-size: 36px;
     color: #EE914E;
     font-weight: bold;
   }
-
   .title-2 {
     font-size: 14px;
   }
+  .title-3 {
+    font-size: 12px;
+  }
 
   .input-wrap {
     display: flex;
@@ -59,7 +83,10 @@
     padding: 0 0;
     margin-left: 14px;
   }
-
+  .submit-btn-wrap {
+    display: flex;
+    justify-content: center;
+  }
   .submit-btn {
     width: 360px;
     height: 42px;

src/pages/new_table/new_table.jsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 import { View, Text, Image, Button } from '@tarojs/components'
 import { Range, Radio } from '@nutui/nutui-react-taro';
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
+import { setRouteName } from '@/store/app';
 import Taro from '@tarojs/taro';
 
 import { redirectTo } from '@/utils/application'
@@ -15,6 +16,8 @@ import closeIcon from '@/assets/icon/close-1.svg'
 import addIcon from '@/assets/icon/add-2.svg'
 
 function NewTable() {
+  useDispatch()(setRouteName('new_table'));
+
   const {username, nickname, avatar} = useSelector(state => state.user);
   const [submitLoading, setSubmitLoading] = useState(false);
   const [choosingPlace, setChoosingPlace] = useState(-1);

src/pages/table/table.jsx

@@ -3,6 +3,7 @@ import { View, Text, Image, Input, Button } from '@tarojs/components'
 import { connect } from 'react-redux'
 import cnames from 'classnames'
 import { setBalance } from '@/store/user';
+import { setRouteName } from '@/store/app';
 
 import {
   reqGameFullStatus, reqKickOutTable, reqLeaveTable,
@@ -92,6 +93,10 @@ class Table extends Component {
     }
   }
 
+  componentDidShow() {
+    this.props.setRouteName();
+  }
+
   componentWillUnmount() {
     // 取消监听消息
     removeMsgListener('api.ResGameFullStatus');
@@ -673,7 +678,8 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  setBalance: b => dispatch(setBalance(b))
+  setBalance: b => dispatch(setBalance(b)),
+  setRouteName: () => dispatch(setRouteName('table'))
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Table)

src/pages/table/table.scss

@@ -446,7 +446,7 @@
     display: flex;
     justify-content: center;
     flex-wrap: nowrap;
-    margin: 33px 26px 0 26px;
+    margin: 33px auto 0 auto;
   }
 
   .desktop-wrap {}

src/store/app.js

@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const appSlice = createSlice({
+  name: 'conn',
+  initialState: {
+    routeName: '',
+    menuVisible: false, // 是否显示title avatar下的menus
+  },
+  reducers: {
+    setRouteName: (state, {payload}) => {
+      state.routeName = payload
+    },
+    switchMenuVisible: state => {
+      state.menuVisible = !state.menuVisible
+    },
+  }
+})
+
+export default appSlice
+
+export const { setRouteName, switchMenuVisible } = appSlice.actions

src/store/index.js

@@ -2,6 +2,7 @@ import { configureStore, createSlice } from '@reduxjs/toolkit'
 
 import connSlice from '@/store/conn'
 import userSlice from '@/store/user'
+import appSlice from '@/store/app'
 
 const counterSlice = createSlice({
     name: 'counter',
@@ -22,6 +23,7 @@ const store = configureStore({
         counter: counterSlice.reducer,
         conn: connSlice.reducer,
         user: userSlice.reducer,
+        app: appSlice.reducer,
     }
 })