From 548802fa4cd5dd7561d21e6b50455d0abc2dc1f9 Mon Sep 17 00:00:00 2001 From: tangmingyou <234767776@qq.com> Date: Mon, 16 Jan 2023 17:53:34 +0800 Subject: [PATCH] static pages --- src/app.config.js | 2 +- src/assets/coin-1.png | Bin 0 -> 17468 bytes src/assets/icon/close-1.svg | 1 + src/assets/icon/left-1.svg | 1 + src/assets/icon/user-2.svg | 1 + src/assets/tab-question.svg | 1 + src/assets/tab-x.svg | 1 + src/components/style/title.scss | 88 ++++++++++++---------- src/components/title.jsx | 16 ++-- src/pages/lobby/lobby.jsx | 102 ++++++++++++++++++++----- src/pages/lobby/lobby.scss | 80 ++++++++++++++++++++ src/pages/login/login.jsx | 26 ++++--- src/pages/login/login.scss | 115 +++++++++++++++++++---------- src/pages/new_table/new_table.jsx | 54 ++++++++++++-- src/pages/new_table/new_table.scss | 70 ++++++++++++++++++ src/store/index.js | 4 +- src/store/user.js | 19 +++++ 17 files changed, 458 insertions(+), 123 deletions(-) create mode 100644 src/assets/coin-1.png create mode 100644 src/assets/icon/close-1.svg create mode 100644 src/assets/icon/left-1.svg create mode 100644 src/assets/icon/user-2.svg create mode 100644 src/assets/tab-question.svg create mode 100644 src/assets/tab-x.svg create mode 100644 src/store/user.js diff --git a/src/app.config.js b/src/app.config.js index 9453080..e1538b6 100644 --- a/src/app.config.js +++ b/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', ], diff --git a/src/assets/coin-1.png b/src/assets/coin-1.png new file mode 100644 index 0000000000000000000000000000000000000000..8ae57c6970d4b02f5412a2dda735c30db923f053 GIT binary patch literal 17468 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 \ No newline at end of file diff --git a/src/assets/icon/left-1.svg b/src/assets/icon/left-1.svg new file mode 100644 index 0000000..e3417af --- /dev/null +++ b/src/assets/icon/left-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icon/user-2.svg b/src/assets/icon/user-2.svg new file mode 100644 index 0000000..c6c2b1f --- /dev/null +++ b/src/assets/icon/user-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/tab-question.svg b/src/assets/tab-question.svg new file mode 100644 index 0000000..ef5ae14 --- /dev/null +++ b/src/assets/tab-question.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/tab-x.svg b/src/assets/tab-x.svg new file mode 100644 index 0000000..dfc3014 --- /dev/null +++ b/src/assets/tab-x.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/style/title.scss b/src/components/style/title.scss index d38fc40..9b50459 100644 --- a/src/components/style/title.scss +++ b/src/components/style/title.scss @@ -1,46 +1,56 @@ -.page-top{ +.page-top { + width: 100%; + position: fixed; + z-index: 9999; + top: 0; + left: 0; + box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.3); + + .topHeight { width: 100%; - position: fixed; - z-index: 9999; - top: 0; - left: 0; - .topHeight{ - width: 100%; - height: 88px; + height: 46px; + } + + .page-title { + padding: 0 32px; + height: 46px; + display: flex; + justify-content: space-between; + align-items: center; + font-weight: bold; + + .icon { + width: 34px; + height: 30px; + // font-size: 40px; + } + + .title { + font-size: 18px; + color: #ffffff; } - .page-title{ - padding: 0 32px; - height: 88px; - display: flex; - justify-content: space-between; - align-items: center; - font-weight: bold; - .icon{ - width: 40px; - height: 40px; - font-size: 40px; - } - .title{ - font-size: 34px; - color: #ffffff; - } - .title1{ - font-size: 34px; - color: #000000; - } - .blank{ - width: 48px; - height: 48px; - } + + .avatar { + width: 41px; + height: 41px; + border-radius: 50%; + margin-top: 2px; + } + + .blank { + width: 48px; + height: 48px; } + } } -.hidden{ - height: 88px; //176px; - width: 100%; - opacity: 0; - // background: pink; + +.hidden { + height: 46px; //176px; + width: 100%; + opacity: 0; + // background: pink; } -.bgc{ - background-color: #fff; +.bgc { + background-color: #fff; } diff --git a/src/components/title.jsx b/src/components/title.jsx index ca1d347..31d181f 100644 --- a/src/components/title.jsx +++ b/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 ( {/* */} - { - props.nullBank ? - : - navigateBack()} className='icon' name='rect-left' color={props.colorStyle ? "#ffffff" : "#000000"} /> - } - {props.title} - + navigateBack()} /> + {props.title} + {props.topNull ? '' : } diff --git a/src/pages/lobby/lobby.jsx b/src/pages/lobby/lobby.jsx index 6d9eb5a..ad7a9df 100644 --- a/src/pages/lobby/lobby.jsx +++ b/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' - -// class Lobby extends Component { -// constructor(props) { -// super(props) -// console.log('lobby', props) -// } -// render() { -// return ( -// -// Lobby!! -// -// -// ) -// } -// } +import coin1 from '@/assets/coin-1.png' +import tabQuestion from '@/assets/tab-question.svg' +import tabX from '@/assets/tab-x.svg' 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 ( - - <Text>Lobby!! {count}</Text> - <Button type="primary" onClick={() => dispatch(increment())}>increment</Button> + <Title title={"Lobby!!" + count} bgColor={true} /> + <View className="celling"></View> + <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> ) } diff --git a/src/pages/lobby/lobby.scss b/src/pages/lobby/lobby.scss index e69de29..5767053 100644 --- a/src/pages/lobby/lobby.scss +++ b/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; +} diff --git a/src/pages/login/login.jsx b/src/pages/login/login.jsx index e8589a3..5f8a367 100644 --- a/src/pages/login/login.jsx +++ b/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({ - origin: "http://localhost:9999/api/auth/captcha", - src: "http://localhost:9999/api/auth/captcha", + const [captcha, setCaptcha] = useState({ + origin: "/api/auth/captcha", // http://localhost:9999 + 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} /> - <Input className="input-1" name="username" type="text" defaultValue={state.username} placeholder="account" leftIcon="dongdong" + <Label for="username"><Image className='input-icon' src={iconUser} /></Label> + <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 > - <Image src={capatcha.src} width="107" height="36" onClick={() => setCapatcha({...capatcha, src: capatcha.origin + '?t=' + Math.random()})} /> + <View className='input-wrap'> + <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> diff --git a/src/pages/login/login.scss b/src/pages/login/login.scss index d48ae83..b9ea91b 100644 --- a/src/pages/login/login.scss +++ b/src/pages/login/login.scss @@ -1,42 +1,75 @@ .login { - height: 100vh; - background-color:#fff; - - .ceiling { - height: 75px; - } - .title-line { - padding: 6px 39px; - } - .title-1 { - font-size: 36px; - color: #EE914E; - font-weight: bold; - } - .title-2 { - font-size: 14px; - } - - .input-wrap { - display: flex; - justify-content: center; - // align-items: center; - margin: 37.5px 0; - } - .input-icon { - margin-right: 16px; - height: 36px; - width: 36px; - padding: 4px 0; - } - .input-1 { - box-sizing: border-box; - width: 307px; - height: 42px; - border-radius: 16px; - border: 1px solid #000; - font-size: 18px; - padding: 5px 20px; - box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.3); - } -} \ No newline at end of file + height: 100vh; + background-color: #fff; + + .ceiling { + height: 75px; + } + + .title-line { + //padding: 6px 39px; + width: 359px; + margin: 0 auto; + } + + .title-1 { + font-size: 36px; + color: #EE914E; + font-weight: bold; + } + + .title-2 { + font-size: 14px; + } + + .input-wrap { + display: flex; + justify-content: center; + // align-items: center; + margin: 37.5px 0; + } + + .input-icon { + margin-right: 16px; + height: 36px; + width: 36px; + padding: 4px 0; + } + + .input-1, + .input-2, + .captcha { + box-sizing: border-box; + width: 307px; + height: 42px; + border-radius: 16px; + border: 1px solid #000; + font-size: 18px; + 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; + } +} diff --git a/src/pages/new_table/new_table.jsx b/src/pages/new_table/new_table.jsx index 80ebc47..78c9f51 100644 --- a/src/pages/new_table/new_table.jsx +++ b/src/pages/new_table/new_table.jsx @@ -1,15 +1,59 @@ 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); - return ( + 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> + ) } -export default NewTable \ No newline at end of file +export default NewTable diff --git a/src/pages/new_table/new_table.scss b/src/pages/new_table/new_table.scss index e69de29..7219fbf 100644 --- a/src/pages/new_table/new_table.scss +++ b/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; + } +} diff --git a/src/store/index.js b/src/store/index.js index db06460..95661d3 100644 --- a/src/store/index.js +++ b/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, } }) diff --git a/src/store/user.js b/src/store/user.js new file mode 100644 index 0000000..26350f0 --- /dev/null +++ b/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