。

src/components/RoomInfo.vue

@@ -22,9 +22,14 @@
                 <span>创建时间 {{ createdAt }}</span>
             </div>
         </div>
+
+        <div class="ticket">{{ getLabelName(info.requireTicket, requireTicketOptions, 'saishi') }}</div>
+
+        <div class="status">{{ getLabelName(info.status, statusOptions) }}</div>
     </div>
 </template>
 <script>
+import room from '../mixins/room.js';
 export default {
     props: {
         info: {
@@ -34,6 +39,7 @@ export default {
             }
         }
     },
+    mixins: [room],
     computed: {
         host() {
             return this.info.host || {};
@@ -76,6 +82,7 @@ export default {
     padding: 20px 12px 12px;
     .flex();
     box-sizing: border-box;
+    position: relative;
     .room-info {
         color: #fff;
         flex-grow: 1;
@@ -121,4 +128,27 @@ export default {
         }
     }
 }
+
+.ticket {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 12px;
+    color: #1a1c2b;
+    line-height: 18px;
+    background: linear-gradient(135deg, #f6abf0 0%, #10f7ee 100%);
+    border-radius: 4px 0px 4px 0px;
+    padding: 0 16px;
+}
+.status {
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 12px;
+    color: #ffffff;
+    line-height: 18px;
+    padding: 0 16px;
+    background: #5464e6;
+    border-radius: 0px 4px 0px 4px;
+}
 </style>

src/components/room/failed.vue

@@ -21,7 +21,7 @@ export default {
     },
     data() {
         return {
-            show: true,
+            show: false,
             message: ''
         };
     },

src/components/room/joinRoom.vue

@@ -57,18 +57,13 @@ export default {
                         forbidClick: true
                     });
                     this.$http
-                        .post(
-                            '/joinRoom/save',
-                            {
-                                roomId: this.roomInfo.id,
-                                userId: this.$store.state.userInfo.id,
-                                ticketId: ticketId
-                            },
-                            { body: 'json' }
-                        )
+                        .post('/room/joinRoom', {
+                            roomId: this.roomInfo.id,
+                            ticketId: ticketId
+                        })
                         .then(res => {
                             this.$toast.success('加入成功');
-                            this.$emit('update')
+                            this.$emit('update');
                         })
                         .catch(e => {
                             console.log(e);
@@ -87,10 +82,9 @@ export default {
             });
             return this.$http
                 .post(
-                    '/userTicket/all',
+                    '/userTicket/my',
                     {
                         query: {
-                            userId: this.$store.state.userInfo.id,
                             type: this.roomInfo.requireTicket,
                             used: false,
                             expired: false

src/components/room/playerInfo.vue

@@ -0,0 +1,94 @@
+<template>
+    <van-dialog v-model:show="show" theme="round-button" confirm-button-text="知道了">
+        <div class="dialog-title">
+            <span>玩家信息</span>
+        </div>
+        <div class="player-list">
+            <div class="player" v-for="(item, index) in players" :key="index">
+                <van-image
+                    width="40"
+                    height="40"
+                    radius="4"
+                    :src="item.avatar || require('@assets/img_default_photo.png')"
+                    fit="cover"
+                />
+                <div class="info">
+                    <div class="text1">{{ item.nickname }}</div>
+                    <div class="text2">ID：{{ item.userId }}</div>
+                </div>
+            </div>
+        </div>
+    </van-dialog>
+</template>
+
+<script>
+export default {
+    props: {
+        roomInfo: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            show: true
+        };
+    },
+    computed: {
+        players() {
+            return this.roomInfo.players || [];
+        }
+    },
+    methods: {
+        init(url = '') {
+            this.show = true;
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-title {
+    .flex-col();
+    align-items: center;
+    padding: 20px 0 24px;
+    img {
+        width: 48px;
+        height: 48px;
+    }
+    span {
+        font-size: 18px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 24px;
+        margin-top: 12px;
+    }
+}
+
+.dialog-tips {
+    font-size: 14px;
+    color: #ffffff;
+    line-height: 20px;
+    padding: 0 20px 30px;
+}
+.player {
+    .flex();
+    padding: 10px 20px;
+    .info {
+        margin-left: 10px;
+        flex-grow: 1;
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 24px;
+        }
+        .text2 {
+            font-size: 12px;
+            color: #6a6d83;
+            line-height: 17px;
+        }
+    }
+}
+</style>

src/mixins/room.js

@@ -13,6 +13,7 @@ export default {
                     label: '青铜通行证',
                     value: 'LEVEL_1',
                     color: '#FFA371',
+                    saishi: '青铜赛事',
                     icon: require('@assets/png-qingtong.png'),
                     img: require('@assets/qingtong.png')
                 },
@@ -20,6 +21,7 @@ export default {
                     label: '白银通行证',
                     value: 'LEVEL_2',
                     color: '#9EC1FF',
+                    saishi: '白银赛事',
                     icon: require('@assets/png-baiying.png'),
                     img: require('@assets/baiying.png')
                 },
@@ -27,6 +29,7 @@ export default {
                     label: '黄金通行证',
                     value: 'LEVEL_3',
                     color: '#FFE3A3',
+                    saishi: '黄金赛事',
                     icon: require('@assets/png-huangjin.png'),
                     img: require('@assets/huangjin.png')
                 },
@@ -34,6 +37,7 @@ export default {
                     label: '钻石通行证',
                     value: 'LEVEL_4',
                     color: '#C9A7FF',
+                    saishi: '钻石赛事',
                     icon: require('@assets/png-zuanshi.png'),
                     img: require('@assets/zuanshi.png')
                 }

src/views/Room.vue

@@ -5,7 +5,7 @@
         </div>
 
         <div class="back">
-            <img src="@assets/back.png" alt="" />
+            <img src="@assets/back.png" @click="back" alt="" />
         </div>
 
         <div class="content">
@@ -37,28 +37,68 @@
                                 />
                                 <div class="name">{{ host.nickname }}</div>
                             </div>
-                            <div class="list" v-else></div>
+                            <div class="list" v-else>
+                                <div class="person" v-for="(item, index) in hosts" :key="index">
+                                    <van-image
+                                        width="24"
+                                        height="24"
+                                        radius="4"
+                                        :src="item.avatar || require('@assets/img_default_photo.png')"
+                                        fit="cover"
+                                    />
+                                    <div class="name">{{ item.nickname }}</div>
+                                </div>
+                            </div>
                         </div>
                         <div class="player-item">
                             <div class="title">客队</div>
-                            <div class="list1 not" v-if="info.maxPlayerNum === 2">
-                                <van-image
-                                    width="58"
-                                    height="58"
-                                    radius="4"
-                                    :src="require('@assets/png-pipeizhong.png')"
-                                    fit="cover"
-                                />
-                                <div class="name">匹配中…</div>
+                            <template v-if="info.maxPlayerNum === 2">
+                                <div
+                                    class="list1 not"
+                                    @click="choosePerson(item)"
+                                    v-for="(item, index) in guests"
+                                    :key="index"
+                                >
+                                    <van-image
+                                        width="58"
+                                        height="58"
+                                        radius="4"
+                                        :src="item.avatar || require('@assets/img_default_photo.png')"
+                                        fit="cover"
+                                    />
+                                    <div class="name">{{ item.nickname }}</div>
+                                </div>
+                            </template>
+                            <div class="list" v-else>
+                                <div
+                                    class="person"
+                                    @click="choosePerson(item)"
+                                    v-for="(item, index) in guests"
+                                    :key="index"
+                                >
+                                    <van-image
+                                        width="24"
+                                        height="24"
+                                        radius="4"
+                                        :src="item.avatar || require('@assets/img_default_photo.png')"
+                                        fit="cover"
+                                    />
+                                    <div class="name">{{ item.nickname }}</div>
+                                </div>
                             </div>
-                            <div class="list" v-else></div>
                         </div>
                     </div>
                 </div>
 
                 <div class="bg-icon">
- 
-                    <img src="@assets/png-1v1-bg.png" class="img1" alt="" />
+                    <img src="@assets/png-1v1-bg.png" v-if="info.maxPlayerNum === 2" class="img1" alt="" />
+                    <img
+                        src="@assets/png-2v2～5v5-bg.png"
+                        :style="{ height: teamHeight + 'px' }"
+                        v-else
+                        class="img3"
+                        alt=""
+                    />
                     <img src="@assets/png-vs.png" alt="" class="img2" />
                 </div>
             </div>
@@ -71,8 +111,8 @@
             </div>
         </div>
 
-        <div class="bottom">
-            <div class="btn" @click="changeUrl">
+        <div class="bottom" v-if="isJoin">
+            <div class="btn" @click="changeUrl" v-if="isHost">
                 <img src="@assets/png-xiugaidizhi.png" alt="" />
                 <span>修改地址</span>
             </div>
@@ -89,6 +129,7 @@
         <join-room ref="join" :roomInfo="info" @update="getInfo"></join-room>
         <description ref="description"></description>
         <failed ref="failed"></failed>
+        <player-info ref="player" :roomInfo="info"></player-info>
     </div>
 </template>
 
@@ -98,6 +139,7 @@ import changeUrl from '../components/room/changeUrl.vue';
 import joinRoom from '../components/room/joinRoom.vue';
 import description from '../components/room/description.vue';
 import failed from '../components/room/failed.vue';
+import playerInfo from '../components/room/playerInfo.vue';
 export default {
     data() {
         return {
@@ -114,10 +156,58 @@ export default {
         },
         host() {
             return this.info.host || {};
+        },
+        players() {
+            return this.info.players || [];
+        },
+        hosts() {
+            let list = [...this.players].filter(item => {
+                return item.team === 'host' && !item.host;
+            });
+
+            list.splice(0, 0, this.host);
+
+            for (let i = list.length; i < this.info.maxPlayerNum / 2; i++) {
+                list.push({
+                    nickname: '匹配中...',
+                    avatar: require('@assets/png-pipeizhong.png')
+                });
+            }
+            return list;
+        },
+        guests() {
+            let list = [...this.players].filter(item => {
+                return item.team === 'guest';
+            });
+            for (let i = list.length; i < this.info.maxPlayerNum / 2; i++) {
+                list.push({
+                    nickname: '匹配中...',
+                    avatar: require('@assets/png-pipeizhong.png')
+                });
+            }
+            return list;
+        },
+        isHost() {
+            return this.host.id === this.$store.state.userInfo.id;
+        },
+        isJoin() {
+            if (this.isHost) {
+                return true;
+            }
+            let info = [...this.players].find(item => {
+                return item.userId === this.$store.state.userInfo.id;
+            });
+            return !!info;
+        },
+        isFull() {
+            return this.players.length === this.info.maxPlayerNum;
+        },
+        teamHeight() {
+            return (this.info.maxPlayerNum / 2) * 43 + 12;
         }
     },
     mixins: [room],
-    components: { changeUrl, joinRoom, description, failed },
+    components: { changeUrl, joinRoom, description, failed, playerInfo },
     mounted() {
         if (this.$route.query.id) {
             this.roomId = this.$route.query.id;
@@ -133,11 +223,19 @@ export default {
             this.$http.get('/room/detail/' + this.roomId).then(res => {
                 this.$toast.clear();
                 this.info = res;
-                // this.$refs.join.init();
+                if (!this.isFull && !this.isJoin && res.status === 'WAITING') {
+                    this.$refs.join.init();
+                }
             });
         },
         changeUrl() {
             this.$refs.url.init(this.info.url);
+        },
+        back() {
+            this.$router.back();
+        },
+        choosePerson(info) {
+            console.log(info);
         }
     }
 };
@@ -237,7 +335,7 @@ export default {
 .content-box {
     .flex-col();
     position: relative;
-    padding: 16px;
+    padding: 16px 10px;
     flex-grow: 1;
     background: linear-gradient(180deg, #6310b0 0%, #09005c 100%);
     .tabs {
@@ -284,6 +382,12 @@ export default {
             left: 50%;
             transform: translateX(-50%);
         }
+        .img3 {
+            width: 100%;
+            display: block;
+            top: -26px;
+            position: absolute;
+        }
     }
 }
 .player-content {
@@ -389,4 +493,30 @@ export default {
         }
     }
 }
+
+.person {
+    .flex();
+    padding: 10px 0;
+    overflow: hidden;
+    .van-image {
+        flex-shrink: 0;
+    }
+    .name {
+        font-size: 14px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 24px;
+        margin-left: 6px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    &:first-child {
+        padding-top: 16px;
+    }
+
+    &:last-child {
+        padding-bottom: 16px;
+    }
+}
 </style>

src/views/RoomCreate.vue

@@ -253,10 +253,9 @@ export default {
             });
             return this.$http
                 .post(
-                    '/userTicket/all',
+                    '/userTicket/my',
                     {
                         query: {
-                            userId: this.$store.state.userInfo.id,
                             type: this.form.requireTicket,
                             used: false,
                             expired: false