lobby

config/dev.js

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

src/pages/lobby/lobby.jsx

@@ -13,61 +13,51 @@ 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()
+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",
+    }
+    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}];
+  }
+
+  componentDidMount() {
     fetchLobbyView()
       .then(res => {
         console.log('lobby', res)
+        this.setState({tables: res.data})
       })
       .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";
-
-  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}];
+  render() {
+    // const count = useSelector((state) => state.counter.value)
+    // const user = useSelector((state) => state.user)
 
+    console.log('state', this.state)
     return (
       <View>
-      <Title title={"Lobby!!" + count} bgColor={true}  />
+        <Title title={"Lobby!!"} 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">
+            this.state.tables.map((table, i) => (
+              <View key={table.TableNo} className="tab-wrap" onClick={() => {console.log('join', table)}}>
               <View className="circle-wrap">
                 <View className="circle-inner"><Image className="inner-coin" src={coin1} /></View>
                 {
-              circleEle.map((_, idx) => (
+                  this.circleEle.map((_, idx) => (
                     <View key={idx} className="circle-item" style={{
                       position: 'absolute',
-                  left: Taro.pxTransform(circleElePos[idx].x),
-                  top: Taro.pxTransform(circleElePos[idx].y)
+                      left: Taro.pxTransform(this.circleElePos[idx].x),
+                      top: Taro.pxTransform(this.circleElePos[idx].y)
                     }}>
-                  <Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : avatar} />
+                      <Image className="circle-avatar" src={idx === 5 ? tabQuestion : idx === 6 ? tabX : this.state.defaultAvatar} />
                     </View>
                   ))
                 }
@@ -77,27 +67,8 @@ function Lobby() {
                 <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>
@@ -106,6 +77,7 @@ function Lobby() {
         </View>
       </View>
     )
+  }
 }
 
 export default Lobby