room

src/components/RoomInfo.vue

@@ -7,6 +7,7 @@
             radius="4"
             :src="host.avatar || require('@assets/img_default_photo.png')"
         />
+        <div class="host">{{ host.nickname }}</div>
 
         <div class="room-info">
             <div class="text1">
@@ -85,6 +86,7 @@ export default {
     .flex();
     box-sizing: border-box;
     position: relative;
+    align-items: flex-end;
     .room-info {
         color: #fff;
         flex-grow: 1;
@@ -129,6 +131,24 @@ export default {
             }
         }
     }
+    .host {
+        width: 58px;
+        height: 12px;
+        font-size: 10px;
+        color: #ffffff;
+        line-height: 12px;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 0px 0px 4px 4px;
+        position: absolute;
+        left: 12px;
+        bottom: 12px;
+        text-align: center;
+        padding: 0 10px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        box-sizing: border-box;
+    }
 }
 
 .ticket {

src/components/RoomRecord.vue

@@ -0,0 +1,174 @@
+<template>
+    <div class="room" @click="goRoom">
+        <van-image
+            class="room-icon"
+            width="58"
+            height="58"
+            radius="4"
+            :src="host.avatar || require('@assets/img_default_photo.png')"
+        />
+        <div class="host">{{ host.nickname }}</div>
+
+        <div class="room-info">
+            <div class="text1">
+                <span>{{ info.name }}</span>
+            </div>
+            <div class="text2">
+                <span>{{ info.zone }}区</span>
+                <span>房间号 {{ info.id }}</span>
+            </div>
+            <div class="text3">
+                <img src="@assets/png-time.png" alt="" />
+                <span>{{ createdAt }}</span>
+            </div>
+        </div>
+
+        <div class="ticket">{{ getLabelName(info.requireTicket, requireTicketOptions, 'saishi') }}</div>
+
+        <div class="status" :class="{ status1: info.status === 'WAITING', status2: info.status === 'GAMING' }">
+            {{ getLabelName(info.status, statusOptions) }}
+        </div>
+    </div>
+</template>
+<script>
+import room from '../mixins/room.js';
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    mixins: [room],
+    computed: {
+        host() {
+            return this.info.host || {};
+        },
+        players() {
+            return this.info.players || [];
+        },
+        percentage() {
+            if (this.info.maxPlayerNum) {
+                return Math.ceil((this.players.length * 100) / this.info.maxPlayerNum);
+            } else {
+                return 0;
+            }
+        },
+        createdAt() {
+            return this.dayjs(this.info.createdAt).format('MM-DD HH:mm');
+        }
+    },
+    methods: {
+        goRoom() {
+            this.$router.push({
+                path: '/room',
+                query: {
+                    id: this.info.id
+                }
+            });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+/deep/.van-progress__portion {
+    background: linear-gradient(316deg, @prim2 0%, @prim 100%);
+}
+.room-icon {
+    flex-shrink: 0;
+}
+.room {
+    background: @bg2;
+    padding: 28px 12px 12px;
+    .flex();
+    box-sizing: border-box;
+    position: relative;
+    align-items: flex-end;
+    .room-info {
+        color: #fff;
+        flex-grow: 1;
+        margin-left: 10px;
+        align-self: stretch;
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 24px;
+        }
+        .text2 {
+            font-size: 12px;
+            color: #ffffff;
+            line-height: 17px;
+            margin-top: 2px;
+            span + span {
+                &::before {
+                    content: '|';
+                    line-height: 17px;
+                    margin: 0 6px;
+                }
+            }
+        }
+        .text3 {
+            font-size: 12px;
+            color: #6a6d83;
+            line-height: 17px;
+            margin-top: 5px;
+            .flex();
+            img {
+                width: 16px;
+                height: 16px;
+                margin-right: 6px;
+            }
+        }
+    }
+    .host {
+        width: 58px;
+        height: 12px;
+        font-size: 10px;
+        color: #ffffff;
+        line-height: 12px;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 0px 0px 4px 4px;
+        position: absolute;
+        left: 12px;
+        bottom: 12px;
+        text-align: center;
+        padding: 0 10px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        box-sizing: border-box;
+    }
+}
+
+.ticket {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 12px;
+    color: #fff;
+    line-height: 18px;
+    background: #6a6d83;
+    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: #313346;
+    border-radius: 0px 4px 0px 4px;
+
+    &.status1 {
+        background-color: #5464e6;
+    }
+    &.status2 {
+        background-color: #e24f4f;
+    }
+}
+</style>

src/components/room/joinRoom.vue

@@ -17,6 +17,24 @@
             <div>2. 退出房间，您将离开此赛事房间</div>
         </div>
     </van-dialog>
+
+    <van-dialog
+        v-model:show="showPsd"
+        theme="round-button"
+        show-cancel-button
+        confirm-button-text="确认"
+        cancel-button-text="退出房间"
+        @confirm="confirm"
+        @cancel="cancel"
+    >
+        <div class="dialog-title">
+            <img src="@assets/icon-fangjianmima.png" alt="" />
+            <span>请输入房间密码</span>
+        </div>
+        <div class="input">
+            <van-field v-model="password" label-width="0" input-align="center" placeholder="请输入"> </van-field>
+        </div>
+    </van-dialog>
 </template>
 
 <script>
@@ -42,7 +60,9 @@ export default {
     data() {
         return {
             show: false,
-            message: ''
+            message: '',
+            showPsd: false,
+            password: ''
         };
     },
     methods: {
@@ -50,6 +70,12 @@ export default {
             this.show = true;
         },
         confirm() {
+            if (this.roomInfo.password && !this.password) {
+                this.$nextTick(() => {
+                    this.showPsd = true;
+                });
+                return;
+            }
             this.checkTicket()
                 .then(ticketId => {
                     this.$toast.loading({
@@ -59,7 +85,8 @@ export default {
                     this.$http
                         .post('/room/joinRoom', {
                             roomId: this.roomInfo.id,
-                            ticketId: ticketId
+                            ticketId: ticketId,
+                            password: this.password
                         })
                         .then(res => {
                             this.$toast.success('加入成功');
@@ -152,4 +179,10 @@ export default {
     line-height: 20px;
     padding: 0 20px 30px;
 }
+.input {
+    padding: 0 20px 30px;
+    .van-field {
+        background: rgba(255, 255, 255, 0.1);
+    }
+}
 </style>

src/views/Room.vue

@@ -472,8 +472,7 @@ export default {
         .img3 {
             width: 100%;
             display: block;
-            top: -26px;
-            position: absolute;
+            margin-top: -26px;
         }
     }
 }

src/views/user/Records.vue

@@ -20,7 +20,7 @@
 <script>
 import list from '../../mixins/list.js';
 import room from '../../mixins/room.js';
-import RoomInfo from '../../components/RoomInfo.vue';
+import RoomInfo from '../../components/RoomRecord.vue';
 export default {
     name: 'records',
     inject: ['barHeight', 'setKeeps', 'scrollWrapper', 'changeScroll'],