Browse Source

lobby

master
tangmingyou 4 years ago
parent
commit
fa602aaeea
  1. 2
      config/dev.js
  2. 144
      src/pages/lobby/lobby.jsx

2
config/dev.js

@ -10,7 +10,7 @@ module.exports = {
h5: { h5: {
devServer: { devServer: {
//host: '0.0.0.0', //host: '0.0.0.0',
host: '192.168.0.102', host: '192.168.3.102',
port: 10086, port: 10086,
// 设置代理来解决 H5 请求的跨域问题 // 设置代理来解决 H5 请求的跨域问题
proxy: { proxy: {

144
src/pages/lobby/lobby.jsx

@ -13,99 +13,71 @@ import coin1 from '@/assets/coin-1.png'
import tabQuestion from '@/assets/tab-question.svg' import tabQuestion from '@/assets/tab-question.svg'
import tabX from '@/assets/tab-x.svg' import tabX from '@/assets/tab-x.svg'
function Lobby() { class Lobby extends Component {
const count = useSelector((state) => state.counter.value) constructor(props) {
const user = useSelector((state) => state.user) super(props)
console.log(user) this.state = {
const dispatch = useDispatch() tables: [],
fetchLobbyView() defaultAvatar: "https://img0.baidu.com/it/u=2477829979,2171947490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
.then(res => { }
console.log('lobby', res) this.circleEle = [1,2,3,4,5,6,7];
}) 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}];
.catch(err => { }
console.error(err)
})
const avatar = "https://img0.baidu.com/it/u=2477829979,2171947490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"; componentDidMount() {
fetchLobbyView()
.then(res => {
console.log('lobby', res)
this.setState({tables: res.data})
})
.catch(err => {
console.error(err)
})
}
const circleEle = [1,2,3,4,5,6,7]; render() {
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}]; // const count = useSelector((state) => state.counter.value)
// const user = useSelector((state) => state.user)
return ( console.log('state', this.state)
<View> return (
<Title title={"Lobby!!" + count} bgColor={true} /> <View>
<View className="celling"></View> <Title title={"Lobby!!"} bgColor={true} />
<View className="tab"> <View className="celling"></View>
<View className="tab-wrap"> <View className="tab">
<View className="circle-wrap"> {
<View className="circle-inner"><Image className="inner-coin" src={coin1} /></View> this.state.tables.map((table, i) => (
{ <View key={table.TableNo} className="tab-wrap" onClick={() => {console.log('join', table)}}>
circleEle.map((_, idx) => ( <View className="circle-wrap">
<View key={idx} className="circle-item" style={{ <View className="circle-inner"><Image className="inner-coin" src={coin1} /></View>
position: 'absolute', {
left: Taro.pxTransform(circleElePos[idx].x), this.circleEle.map((_, idx) => (
top: Taro.pxTransform(circleElePos[idx].y) <View key={idx} className="circle-item" style={{
}}> position: 'absolute',
<Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : avatar} /> left: Taro.pxTransform(this.circleElePos[idx].x),
</View> top: Taro.pxTransform(this.circleElePos[idx].y)
)) }}>
} <Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : this.state.defaultAvatar} />
</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-no-wrap">
</View> <View className="tab-no">#10013</View>
<View className="tab-sc">5/7</View>
</View>
</View>
))
}
<View className="tab-wrap"> <View className="tab-wrap"></View>
<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>
<View className="bottom-btn-wrap">
<View className="tab-wrap"> <Button className="bottom-btn" onClick={() => navigateTo({url: '/pages/new_table/new_table'})}>Create New Table</Button>
<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>
<View className="tab-wrap"></View>
</View>
<View className="bottom-btn-wrap">
<Button className="bottom-btn" onClick={() => navigateTo({url: '/pages/new_table/new_table'})}>Create New Table</Button>
</View> </View>
</View> )
) }
} }
export default Lobby export default Lobby

Loading…
Cancel
Save