static pages

src/app.config.js

@@ -1,8 +1,8 @@
 export default {
   pages: [
+    'pages/lobby/lobby',
     'pages/index/index',
     'pages/login/login',
-    'pages/lobby/lobby',
     'pages/new_table/new_table',
     'pages/table/table',
   ],

src/assets/icon/close-1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_84_00908"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_84_00908)"><g><path d="M12,22C6.477,22,2,17.523,2,12C2,6.477,6.477,2,12,2C17.523,2,22,6.477,22,12C22,17.523,17.523,22,12,22ZM12,10.586L9.172,7.757L7.757,9.172L10.586,12L7.757,14.828L9.172,16.243000000000002L12,13.414L14.828,16.243000000000002L16.243000000000002,14.828L13.414,12L16.243000000000002,9.172L14.828,7.757L12,10.586Z" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>

src/assets/icon/left-1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="37" height="33" viewBox="0 0 37 33"><g style="mix-blend-mode:passthrough"><path d="M35.5,19.125L1.5,19.125L1.5,16.125L35.5,16.125L35.5,19.125ZM13.907,32.5453L-0.5182899999999999,17.7004L13.832,0.537819L16.133499999999998,2.462181L2.65074,18.5872L1.5,17.625L2.57576,16.579700000000003L16.058500000000002,30.4547L13.907,32.5453Z" fill="#EE914E" fill-opacity="1"/></g></svg>

src/assets/icon/user-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30" height="30" viewBox="0 0 30 30"><defs><clipPath id="master_svg0_84_00920"><rect x="0" y="0" width="30" height="30" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_84_00920)"><g><path d="M25,27.5L5,27.5L5,25C5,21.5482,7.798220000000001,18.75,11.25,18.75L18.75,18.75C22.2018,18.75,25,21.5482,25,25L25,27.5ZM15,16.25C10.857859999999999,16.25,7.5,12.8921,7.5,8.75C7.5,4.6078600000000005,10.857859999999999,1.25,15,1.25C19.1421,1.25,22.5,4.6078600000000005,22.5,8.75C22.5,12.8921,19.1421,16.25,15,16.25Z" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>

src/assets/tab-question.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="29" height="29" viewBox="0 0 29 29"><g style="mix-blend-mode:passthrough"><g style="mix-blend-mode:passthrough"><ellipse cx="14.5" cy="14.5" rx="14.5" ry="14.5" fill="#D8D8D8" fill-opacity="1"/></g><g style="mix-blend-mode:passthrough"><path d="M13.12891,16.5352L15.44922,16.5352C15.17969,13.88672,18.47852,13.55273,18.47852,10.74023C18.47852,8.4082,16.83789,7.236330000000001,14.58789,7.236330000000001C12.92969,7.236330000000001,11.58203,7.99219,10.574219,9.14648L12.05078,10.55273C12.73047,9.767579999999999,13.43359,9.375,14.2832,9.375C15.326170000000001,9.375,15.93555,9.972660000000001,15.93555,10.98047C15.93555,12.84375,12.73047,13.53516,13.12891,16.5352ZM14.30078,21.375C15.214839999999999,21.375,15.88281,20.7305,15.88281,19.793C15.88281,18.837899999999998,15.214839999999999,18.1934,14.30078,18.1934C13.39844,18.1934,12.71289,18.837899999999998,12.71289,19.793C12.71289,20.7305,13.38086,21.375,14.30078,21.375Z" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>

src/assets/tab-x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="29" height="29" viewBox="0 0 29 29"><g style="mix-blend-mode:passthrough"><g style="mix-blend-mode:passthrough"><ellipse cx="14.5" cy="14.5" rx="14.5" ry="14.5" fill="#D8D8D8" fill-opacity="1"/></g><g style="mix-blend-mode:passthrough"><path d="M9.269531,22L12.07617,22L13.5,19.0176C13.82227,18.3203,14.12695,17.6113,14.4668,16.791L14.54297,16.791C14.91797,17.6113,15.263670000000001,18.3203,15.58594,19.0176L17.080080000000002,22L20.0332,22L16.28906,15.16797L19.7988,8.5L16.99219,8.5L15.732420000000001,11.30664C15.43945,11.92773,15.152339999999999,12.58398,14.830079999999999,13.42188L14.75977,13.42188C14.361329999999999,12.58398,14.0918,11.92773,13.76953,11.30664L12.43359,8.5L9.462891,8.5L12.99609,15.0625L9.269531,22Z" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>

src/components/style/title.scss

@@ -4,38 +4,48 @@
   z-index: 9999;
   top: 0;
   left: 0;
+  box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.3);
+
   .topHeight {
     width: 100%;
-        height: 88px;
+    height: 46px;
   }
+
   .page-title {
     padding: 0 32px;
-        height: 88px;
+    height: 46px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-weight: bold;
+
     .icon {
-            width: 40px;
+      width: 34px;
-            height: 40px;
+      height: 30px;
-            font-size: 40px;
+      // font-size: 40px;
     }
+
     .title {
-            font-size: 34px;
+      font-size: 18px;
       color: #ffffff;
     }
-        .title1{
+
-            font-size: 34px;
+    .avatar {
-            color: #000000;
+      width: 41px;
+      height: 41px;
+      border-radius: 50%;
+      margin-top: 2px;
     }
+
     .blank {
       width: 48px;
       height: 48px;
     }
   }
 }
+
 .hidden {
-    height: 88px; //176px;
+  height: 46px; //176px;
   width: 100%;
   opacity: 0;
   // background: pink;

src/components/title.jsx

@@ -1,23 +1,23 @@
 import React from 'react'
-import { View } from '@tarojs/components'
+import { View, Text, Image } from '@tarojs/components'
 // import { AtIcon } from 'taro-ui'
 import { Icon } from '@nutui/nutui-react-taro';
 import { navigateBack } from '@/utils/application'
+import left from '@/assets/icon/left-1.svg'
 import './style/title.scss'
 
+import { useSelector } from 'react-redux'
+
 function Title(props) {
+  const {username, nickname, avatar} = useSelector(state => state.user);
   return (
     <View>
       <View className={props.bgColor ? "page-top bgc" : "page-top"}>
         {/* <View className='topHeight'></View> */}
         <View className='page-title'>
-          {
+          <Image className="icon" src={left} onClick={() => navigateBack()} />
-            props.nullBank ?
+          <View className={props.colorStyle ? "title" : "title1"}><Text>{props.title}</Text></View>
-              <View className='blank'></View> :
+          <View className='blank'><Image className='avatar' src={avatar} /></View>
-              <Icon onClick={() => navigateBack()} className='icon' name='rect-left' color={props.colorStyle ? "#ffffff" : "#000000"} />
-          }
-          <View className={props.colorStyle ? "title" : "title1"}>{props.title}</View>
-          <View className='blank'></View>
         </View>
       </View>
       {props.topNull ? '' : <View className='hidden'></View>}

src/pages/lobby/lobby.jsx

@@ -1,5 +1,6 @@
 import React, { Component, useState } from 'react'
-import { View, Text, Button } from '@tarojs/components'
+import { View, Text, Button, Image } from '@tarojs/components'
+import Taro from '@tarojs/taro'
 
 import { useSelector, useDispatch } from 'react-redux'
 
@@ -7,34 +8,97 @@ import './lobby.scss'
 import { increment } from '@/store/index'
 import { fetchOpMap } from '@/api/api'
 import Title from '@/components/title'
-
+import coin1 from '@/assets/coin-1.png'
-// class Lobby extends Component {
+import tabQuestion from '@/assets/tab-question.svg'
-//     constructor(props) {
+import tabX from '@/assets/tab-x.svg'
-//         super(props)
-//         console.log('lobby', props)
-//     }
-//     render() {
-//         return (
-//             <View>
-//                 <Text>Lobby!!</Text>
-//                 <Button>increment</Button>
-//             </View>
-//         )
-//     }
-// }
 
 function Lobby() {
   const count = useSelector((state) => state.counter.value)
+  const user = useSelector((state) => state.user)
+  console.log(user)
   const dispatch = useDispatch()
   fetchOpMap()
     .then(res => { console.log(res) })
     .catch(err => console.log(err))
 
+  const avatar = "https://img0.baidu.com/it/u=2477829979,2171947490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";
+
+  const circleEle = [1,2,3,4,5,6,7];
+  const 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}];
+
   return (
     <View>
-      <Title title="Lobby" bgColor={true}  />
+      <Title title={"Lobby!!" + count} bgColor={true}  />
-      <Text>Lobby!! {count}</Text>
+      <View className="celling"></View>
-      <Button type="primary" onClick={() => dispatch(increment())}>increment</Button>
+      <View className="tab">
+        <View className="tab-wrap">
+          <View className="circle-wrap">
+            <View className="circle-inner"><Image className="inner-coin" src={coin1} /></View>
+            {
+              circleEle.map((_, idx) => (
+                <View key={idx} className="circle-item" style={{
+                  position: 'absolute',
+                  left: Taro.pxTransform(circleElePos[idx].x),
+                  top: Taro.pxTransform(circleElePos[idx].y)
+                }}>
+                  <Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : avatar} />
+                </View>
+              ))
+            }
+          </View>
+          <View className="tab-no-wrap">
+            <View className="tab-no">#10013</View>
+            <View className="tab-sc">5/7</View>
+          </View>
+        </View>
+
+        <View className="tab-wrap">
+          <View className="circle-wrap">
+            <View className="circle-inner"><Image className="inner-coin" src={coin1} /></View>
+            {
+              circleEle.map((_, idx) => (
+                <View key={idx} className="circle-item" style={{
+                  position: 'absolute',
+                  left: Taro.pxTransform(circleElePos[idx].x),
+                  top: Taro.pxTransform(circleElePos[idx].y)
+                }}>
+                  <Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : avatar} />
+                </View>
+              ))
+            }
+          </View>
+          <View className="tab-no-wrap">
+            <View className="tab-no">#10013</View>
+            <View className="tab-sc">5/7</View>
+          </View>
+        </View>
+
+        <View className="tab-wrap">
+          <View className="circle-wrap">
+            <View className="circle-inner"><Image className="inner-coin" src={coin1} /></View>
+            {
+              circleEle.map((_, idx) => (
+                <View key={idx} className="circle-item" style={{
+                  position: 'absolute',
+                  left: Taro.pxTransform(circleElePos[idx].x),
+                  top: Taro.pxTransform(circleElePos[idx].y)
+                }}>
+                  <Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : avatar} />
+                </View>
+              ))
+            }
+          </View>
+          <View className="tab-no-wrap">
+            <View className="tab-no">#10013</View>
+            <View className="tab-sc">5/7</View>
+          </View>
+        </View>
+
+        <View className="tab-wrap"></View>
+      </View>
+      <View className="bottom-btn-wrap">
+        <Button className="bottom-btn" onClick={() => dispatch(increment())}>Create New Table</Button>
+      </View>
     </View>
   )
 }

src/pages/lobby/lobby.scss

@@ -0,0 +1,80 @@
+
+.celling {
+  height: 43px;
+}
+.tab {
+  // padding: 0 0 0 21px;
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap:wrap;
+
+  .tab-wrap {
+    width: 150px;
+    margin: 20px 10px;
+  }
+  .circle-wrap {
+    height: 140px;
+    width: 140px;
+    // background-color: yellowgreen;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+  .circle-inner {
+
+  }
+  .inner-coin {
+    height: 80px;
+    width: 80px;
+    border-radius: 50%;
+  }
+  .circle-avatar {
+    height: 29px;
+    width: 29px;
+    border-radius: 50%;
+  }
+
+}
+.bottom-btn-wrap {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 80px;
+  background-color: #E8E8E8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.bottom-btn {
+  width: 360px;
+  background-color: #EE914E;
+  border-radius: 16px;
+  text-align: center;
+  height: 42px;
+  color: #fff;
+  font-size: 18px;
+}
+
+.tab-no-wrap {
+  display: flex;
+  justify-content: center;
+}
+
+.tab-no,.tab-sc {
+  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,5 +1,5 @@
 import React, { Component, useState } from 'react'
-import { View, Text, Input, Image, Button } from '@tarojs/components'
+import { View, Text, Input, Image, Button, Label } from '@tarojs/components'
 import Taro from '@tarojs/taro';
 //import { Progress } from '@nutui/nutui-react-taro';
 //import { Form, Input, TextArea, Cell, Button, Row, Col, Image } from '@nutui/nutui-react-taro';
@@ -8,6 +8,7 @@ import './login.scss'
 import { fetchOpMap } from '@/api/api'
 import iconUser from '@/assets/icon/user-3-fill.svg'
 import iconLock from '@/assets/icon/lock-2-fill.svg'
+import abIcon from '@/assets/icon/a-b.svg'
 
 /*
   登录 -> 大厅 -> 新桌面 -> 进桌面 -> profile(弹窗)
@@ -25,9 +26,9 @@ function Login(props, ref) {
       password: '',
       captcha: '',
     });
-    const [capatcha, setCapatcha] = useState({
+    const [captcha, setCaptcha] = useState({
-      origin: "http://localhost:9999/api/auth/captcha",
+      origin: "/api/auth/captcha", // http://localhost:9999
-      src: "http://localhost:9999/api/auth/captcha",
+      src: "/api/auth/captcha",
     })
     const usernameChange = (username, e) => {
       if (!e) return;
@@ -60,19 +61,26 @@ function Login(props, ref) {
         <View className='title-line'><Text className='title-2'>Easily add new account or login the current one.</Text></View>
         {/* <Progress percentage="33" /> */}
         <View className='input-wrap'>
-          <Image className='input-icon' src={iconUser} />
+          <Label for="username"><Image className='input-icon' src={iconUser} /></Label>
-          <Input className="input-1" name="username" type="text" defaultValue={state.username}  placeholder="account" leftIcon="dongdong"
+          <Input className="input-1" id="username" name="username" type="text" defaultValue={state.username}  placeholder="account" leftIcon="dongdong"
               onChange={usernameChange}/>
         </View>
         <View className='input-wrap'>
           <Image className='input-icon' src={iconLock} />
-          <Input className='input-1' name="password" type="password" defaultValue={state.password}  placeholder="password"
+          <Input className='input-1' name="password" type="password" password={true} defaultValue={state.password}  placeholder="password"
             onChange={passwordChange}/>
         </View>
-        <View >
+        <View className='input-wrap'>
-          <Image src={capatcha.src} width="107" height="36" onClick={() => setCapatcha({...capatcha, src: capatcha.origin + '?t=' + Math.random()})} />
+          <Image className='input-icon' src={abIcon} />
+          <Input className='input-2' name="captcha" type="text" defaultValue={state.password}  placeholder="captcha"
+            onChange={() => {}}/>
+          <Image className='captcha' src={captcha.src} width="107" height="36"
+            onClick={() => setCaptcha({...captcha, src: captcha.origin + '?t=' + Math.random()})} />
         </View>
         <View>
+          <Button className='submit-btn'>START</Button>
+        </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>
         </View>

src/pages/login/login.scss

@@ -5,14 +5,19 @@
   .ceiling {
     height: 75px;
   }
+
   .title-line {
-        padding: 6px 39px;
+    //padding: 6px 39px;
+    width: 359px;
+    margin: 0 auto;
   }
+
   .title-1 {
     font-size: 36px;
     color: #EE914E;
     font-weight: bold;
   }
+
   .title-2 {
     font-size: 14px;
   }
@@ -23,13 +28,17 @@
     // align-items: center;
     margin: 37.5px 0;
   }
+
   .input-icon {
     margin-right: 16px;
     height: 36px;
     width: 36px;
     padding: 4px 0;
   }
-    .input-1 {
+
+  .input-1,
+  .input-2,
+  .captcha {
     box-sizing: border-box;
     width: 307px;
     height: 42px;
@@ -39,4 +48,28 @@
     padding: 5px 20px;
     box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.3);
   }
+
+  .input-2 {
+    width: 165px;
+  }
+
+  .captcha {
+    width: 125px;
+    box-shadow: none;
+    padding: 0 0;
+    margin-left: 14px;
+  }
+
+  .submit-btn {
+    width: 360px;
+    height: 42px;
+    border-radius: 16px;
+    box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.3);
+    background-color: #EE914E;
+    color: #fff;
+    font-size: 16px;
+    text-align: center;
+    line-height: 42px;
+    font-weight: bold;
+  }
 }

src/pages/new_table/new_table.jsx

@@ -1,13 +1,57 @@
 import React, { Component, useState } from 'react'
-import {View, Text} from '@tarojs/components'
+import { View, Text, Image, Button } from '@tarojs/components'
+import { useSelector } from 'react-redux'
 
 import './new_table.scss'
+import Title from '@/components/title'
+import userIcon from '@/assets/icon/user-2.svg'
+import closeIcon from '@/assets/icon/close-1.svg'
 
 function NewTable() {
+  const {username, nickname, avatar} = useSelector(state => state.user);
+
+  const players = [1,2,3,4,5,6];
+  const playerRows = players.reduce((arr, item, idx) => {
+    const row = parseInt(idx / 2);
+    let rowArr = arr[row] || [];
+    rowArr[idx % 2] = {index: idx, item};
+    arr[row] = rowArr;
+    parseInt()
+    return arr;
+  }, []);
 
   return (
+    <View className="nt">
+      <Title title={"Create New Table"} />
+      <View className="nt-wrap">
+        {
+          playerRows.map((row, i) => (
+            <View key={i} className="playerRow">
+              {
+                row.map((player, j) => (
+                  <View key={j} className="player-wrap">
+                    <View className="player-icon"><Image className="player-icon-img" src={userIcon} /></View>
+                    <View className="close-icon"><Image className="close-icon-img" src={closeIcon} /></View>
+                    <View className="player">
+                      <Text className="player-name">Player{player.item}</Text>
+                    </View>
+                  </View>
+                ))
+              }
+            </View>
+          ))
+        }
+
+        <View className="self-wrap">
+          <View className="self">
+            <View className="avatar-wrap"><Image className="avatar" src={avatar} /></View>
+            <View className="nickname"><Text>{nickname}</Text></View>
+          </View>
+        </View>
         <View>
-            <Text>创建新桌面NewTable!!</Text>
+          <Button>CREATE</Button>
+        </View>
+      </View>
     </View>
   )
 }

src/pages/new_table/new_table.scss

@@ -0,0 +1,70 @@
+.nt {
+  .nt-wrap {
+    padding: 0 11px 0 11px;
+  }
+  .playerRow {
+    display: flex;
+    justify-content: space-between;
+    // align-content: space-around;
+    flex-flow: row wrap;
+    width: 405px;
+    margin: 46px auto 0 auto;
+  }
+  .player-wrap {
+    // flex: 0 0 50%;
+    position: relative;
+  }
+  .player {
+    width: 159px;
+    height: 101px;
+    background-color: #EE914E;
+    text-align: center;
+    line-height: 101px;
+  }
+  .player-icon {
+    height: 50px;
+    width: 50px;
+    background-color: #EE914E;
+    position: absolute;
+    top: -14px;
+  }
+  .player-icon-img {
+    width: 30px;
+    height: 30px;
+    padding: 10px;
+  }
+  .close-icon {
+    position: absolute;
+    top: 8px;
+    left: 127px;
+  }
+  .close-icon-img {
+    width: 24px;
+    height: 24px;
+  }
+  .player-name {
+    font-size: 26px;
+    color: #fff;
+    font-weight: bold;
+  }
+
+  .self-wrap {
+    margin-top: 38px;
+    display: flex;
+    justify-content: center;
+  }
+  .self {
+    width: 405px;
+    height: 83px;
+    background-color: #EE914E;
+  }
+
+  .avatar-wrap {
+
+  }
+  .avatar {
+    margin: 9px 0 0 9px;
+    width: 66px;
+    height: 66px;
+  }
+}

src/store/index.js

@@ -1,6 +1,7 @@
-import { configureStore, combineReducers, createSlice } from '@reduxjs/toolkit'
+import { configureStore, createSlice } from '@reduxjs/toolkit'
 
 import connSlice from '@/store/conn'
+import userSlice from '@/store/user'
 
 const counterSlice = createSlice({
     name: 'counter',
@@ -20,6 +21,7 @@ const store = configureStore({
     reducer: {
         counter: counterSlice.reducer,
         conn: connSlice.reducer,
+        user: userSlice.reducer,
     }
 })
 

src/store/user.js

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const userSlice = createSlice({
+  name: 'user',
+  initialState: {
+    username: 'Prometheus',
+    nickname: 'PrometheusNick',
+    avatar: 'https://img0.baidu.com/it/u=2477829979,2171947490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
+  },
+  reducers: {
+    setUserInfo(state, action) {
+      return {...state, ...action.payload}
+    }
+  }
+})
+
+export default userSlice
+
+export const { setUserInfo } = userSlice.actions