.

src/router/index.js

@@ -108,6 +108,14 @@ const routes = [
             fullPage: true
         }
     },
+    {
+        path: '/roomDes',
+        name: 'roomDes',
+        component: () => import('../views/RoomDes.vue'),
+        meta: {
+            title: 'QQ建房说明'
+        }
+    },
     {
         path: '/roomResult',
         name: 'roomResult',

src/views/Home.vue

@@ -31,11 +31,14 @@
                 v-model="search"
                 left-icon=" "
                 @search="searchList"
-                @cancel="searchList"
                 show-action
                 placeholder="输入房间号码"
                 action-text="搜索"
-            />
+            >
+                <template #action>
+                    <div @click="searchList">搜索</div>
+                </template>
+            </van-search>
         </div>
 
         <div class="room-list">

src/views/Room.vue

@@ -7,143 +7,161 @@
         <!-- <div class="back">
             <img src="@assets/back.png" @click="back" alt="" />
         </div> -->
-
-        <div class="content">
-            <div class="content-top">
-                <div class="text1">{{ getLabelName(info.status, statusOptions) }}</div>
-                <div class="text2">
-                    <span>房间号 {{ info.id }}</span>
-                    <img src="@assets/png-copy.png" @click="copy(info.id)" alt="" />
-                </div>
-            </div>
-            <div class="content-box">
-                <div class="tabs">
-                    <div class="tab">{{ info.zone }}</div>
-                    <div class="tab">{{ gameMode.name }}</div>
-                    <div class="tab">{{ getLabelName(info.requireTicket, requireTicketOptions) }}</div>
-                    <div class="tab">{{ gameMap.name }}</div>
+        <van-pull-refresh
+            class="home"
+            success-text="加载成功"
+            success-duration="500"
+            v-model="isLoading"
+            :head-height="80"
+            @refresh="onRefresh"
+            pageType="light"
+        >
+            <div class="content">
+                <div class="content-top">
+                    <div class="text1">{{ getLabelName(info.status, statusOptions) }}</div>
+                    <div class="text2">
+                        <span>房间号 {{ info.id }}</span>
+                        <img src="@assets/png-copy.png" @click="copy(info.id)" alt="" />
+                    </div>
                 </div>
+                <div class="content-box">
+                    <div class="tabs">
+                        <div class="tab">{{ info.zone }}</div>
+                        <div class="tab">{{ gameMode.name }}</div>
+                        <div class="tab">{{ getLabelName(info.requireTicket, requireTicketOptions) }}</div>
+                        <div class="tab">{{ gameMap.name }}</div>
+                    </div>
 
-                <div class="player-content">
-                    <div class="players">
-                        <div class="player-item">
-                            <div class="title">主队</div>
-                            <div class="list1" v-if="info.maxPlayerNum === 2">
-                                <van-image
-                                    width="58"
-                                    height="58"
-                                    radius="4"
-                                    :src="host.avatar || require('@assets/img_default_photo.png')"
-                                    fit="cover"
-                                />
-                                <div class="name">{{ host.nickname }}</div>
-                            </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>
-                            <template v-if="info.maxPlayerNum === 2">
-                                <div class="list1 not" v-for="(item, index) in guests" :key="index">
+                    <div class="player-content">
+                        <div class="players">
+                            <div class="player-item">
+                                <div class="title">主队</div>
+                                <div class="list1" v-if="info.maxPlayerNum === 2">
                                     <van-image
                                         width="58"
                                         height="58"
                                         radius="4"
-                                        :src="item.avatar || require('@assets/img_default_photo.png')"
+                                        :src="host.avatar || require('@assets/img_default_photo.png')"
                                         fit="cover"
                                     />
-                                    <div class="name">{{ item.nickname }}</div>
+                                    <div class="name">{{ host.nickname }}</div>
                                 </div>
-                            </template>
-                            <div class="list" v-else>
-                                <div class="person" 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 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>
+                                <template v-if="info.maxPlayerNum === 2">
+                                    <div class="list1 not" 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" 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>
                         </div>
                     </div>
-                </div>
 
-                <div class="bg-icon" :class="{ bgOne: info.maxPlayerNum === 2 }">
-                    <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 class="bg-icon" :class="{ bgOne: info.maxPlayerNum === 2 }">
+                        <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>
             </div>
-        </div>
-
-        <div class="help">
-            <div class="help-btn" v-if="isJoin && !isHost && info.status == 'GAMING'" @click="quit">
-                <img src="@assets/png-tuichu.png" alt="" />
-                <span>退出</span>
-            </div>
-            <div class="help-btn" v-if="isHost && info.status == 'GAMING'" @click="$refs.failed.init()">
-                <img src="@assets/png-liuju.png" alt="" />
-                <span>流局</span>
-            </div>
-            <div class="help-btn" @click="$refs.description.init()">
-                <img src="@assets/png-shuoming.png" alt="" />
-                <span>说明</span>
-            </div>
-        </div>
 
-        <div class="bottom" v-if="isJoin">
-            <div class="join-btn" v-if="isFull && (info.status == 'WAITING' || info.status == 'GAMING')">
-                <van-button type="primary" v-if="info.status == 'WAITING'" block @click="start">开始比赛</van-button>
-                <van-button type="primary" v-else-if="info.status == 'GAMING'" block @click="goGame"
-                    >进入比赛</van-button
-                >
-            </div>
-            <div class="btns">
-                <div class="btn" v-if="!isHost && info.status == 'WAITING'" @click="quit">
-                    <img src="@assets/png-quxiaobaoming.png" alt="" />
-                    <span>取消报名</span>
+            <div class="help">
+                <div class="help-btn" v-if="isJoin && !isHost && info.status == 'GAMING'" @click="quit">
+                    <img src="@assets/png-tuichu.png" alt="" />
+                    <span>退出</span>
                 </div>
-                <div class="btn" @click="changeUrl" v-if="isHost">
-                    <img src="@assets/png-xiugaidizhi.png" alt="" />
-                    <span>修改地址</span>
+                <div class="help-btn" v-if="isHost && info.status == 'GAMING'" @click="$refs.failed.init()">
+                    <img src="@assets/png-liuju.png" alt="" />
+                    <span>流局</span>
                 </div>
-                <div class="btn" v-if="info.status == 'FINISH'" @click="$router.push('/roomResult?roomId=' + roomId)">
-                    <img src="@assets/png-xiugaidizhi.png" alt="" />
-                    <span>查看战绩</span>
+                <div class="help-btn" @click="$refs.description.init()">
+                    <img src="@assets/png-shuoming.png" alt="" />
+                    <span>说明</span>
                 </div>
-                <div class="btn" @click="$router.push('/reportAdd?roomId=' + roomId)">
-                    <img src="@assets/png-yicangshenbao.png" alt="" />
-                    <span>异常申报</span>
-                </div>
-                <div class="btn" v-if="isHost && info.status == 'WAITING'">
-                    <img src="@assets/png-quxiaosaishi.png" alt="" />
-                    <span>取消赛事</span>
+            </div>
+
+            <div class="bottom" v-if="isJoin">
+                <div
+                    class="join-btn"
+                    v-if="isFull && ((info.status == 'WAITING' && isHost) || info.status == 'GAMING')"
+                >
+                    <van-button type="primary" v-if="info.status == 'WAITING' && isHost" block @click="start"
+                        >开始比赛</van-button
+                    >
+                    <van-button type="primary" v-else-if="info.status == 'GAMING'" block @click="goGame"
+                        >进入比赛</van-button
+                    >
                 </div>
-                <div class="btn" v-if="info.status == 'GAMING'" @click="$refs.result.init()">
-                    <img src="@assets/png-jieshubisai.png" alt="" />
-                    <span>结束比赛</span>
+                <div class="btns">
+                    <div class="btn" v-if="!isHost && info.status == 'WAITING'" @click="quit">
+                        <img src="@assets/png-quxiaobaoming.png" alt="" />
+                        <span>取消报名</span>
+                    </div>
+                    <div class="btn" @click="changeUrl" v-if="isHost">
+                        <img src="@assets/png-xiugaidizhi.png" alt="" />
+                        <span>修改地址</span>
+                    </div>
+                    <div
+                        class="btn"
+                        v-if="info.status == 'FINISH'"
+                        @click="$router.push('/roomResult?roomId=' + roomId)"
+                    >
+                        <img src="@assets/png-xiugaidizhi.png" alt="" />
+                        <span>查看战绩</span>
+                    </div>
+                    <div class="btn" @click="$router.push('/reportAdd?roomId=' + roomId)">
+                        <img src="@assets/png-yicangshenbao.png" alt="" />
+                        <span>异常申报</span>
+                    </div>
+                    <div class="btn" v-if="isHost && info.status == 'WAITING'">
+                        <img src="@assets/png-quxiaosaishi.png" alt="" />
+                        <span>取消赛事</span>
+                    </div>
+                    <div class="btn" v-if="info.status == 'GAMING'" @click="$refs.result.init()">
+                        <img src="@assets/png-jieshubisai.png" alt="" />
+                        <span>结束比赛</span>
+                    </div>
                 </div>
             </div>
-        </div>
+        </van-pull-refresh>
         <change-url ref="url" :roomId="roomId"></change-url>
         <join-room ref="join" :roomInfo="info" @update="getInfo"></join-room>
         <description ref="description"></description>
@@ -167,7 +185,8 @@ export default {
     data() {
         return {
             info: {},
-            roomId: 0
+            roomId: 0,
+            timer: null
         };
     },
     computed: {
@@ -235,6 +254,10 @@ export default {
         if (this.$route.query.id) {
             this.roomId = this.$route.query.id;
         }
+        this.$toast.loading({
+            message: '加载中...',
+            forbidClick: true
+        });
         this.getInfo();
     },
     methods: {
@@ -251,11 +274,7 @@ export default {
             );
         },
         getInfo() {
-            this.$toast.loading({
-                message: '加载中...',
-                forbidClick: true
-            });
-            this.$http
+            return this.$http
                 .get('/room/detail/' + this.roomId)
                 .then(res => {
                     this.$toast.clear();
@@ -274,6 +293,8 @@ export default {
                             .then(() => {
                                 this.$router.go(-1);
                             });
+                    } else {
+                        this.loop();
                     }
                 })
                 .catch(e => {
@@ -282,6 +303,20 @@ export default {
                     }
                 });
         },
+        loop() {
+            if (this.timer) {
+                clearTimeout(this.timer);
+                this.timer = null;
+            }
+
+            this.timer = setTimeout(() => {
+                if (this.info.status === 'WAITING' || this.info.status === 'GAMING') {
+                    this.getInfo().then(() => {
+                        this.loop();
+                    });
+                }
+            }, 2000);
+        },
         changeUrl() {
             this.$refs.url.init(this.info.url);
         },
@@ -349,6 +384,17 @@ export default {
         goGame() {
             window.location.href = this.info.url;
             // this.$refs.joinGame.init()
+        },
+        onRefresh() {
+            this.getInfo().then(() => {
+                this.isLoading = false;
+            });
+        }
+    },
+    unmounted() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
         }
     },
     beforeRouteLeave(to, from, next) {

src/views/RoomCreate.vue

@@ -67,7 +67,13 @@
             </van-cell-group>
 
             <van-cell-group :border="false">
-                <van-cell title="填写游戏地址" :border="false" is-link value="查看建房说明" />
+                <van-cell
+                    title="填写游戏地址"
+                    :border="false"
+                    is-link
+                    value="查看建房说明"
+                    :to="{ path: '/roomDes' }"
+                />
                 <van-field
                     v-model="form.url"
                     name="游戏地址"

src/views/RoomDes.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="des">
+        <div class="page">
+            <div class="text">1、王者荣耀开好房间后，点击右下角的QQ邀请</div>
+            <img src="@assets/png-qq01.png" alt="" />
+        </div>
+        <div class="page page2">
+            <div class="text">2、选择我的电脑，发送邀请过去，就可以得到游戏地址啦～</div>
+            <img src="@assets/png-qq02.png" alt="" />
+        </div>
+        <div class="page page2">
+            <div class="text">3、复制链接，粘贴到游戏地址中就完成啦～</div>
+            <img src="@assets/png-qq03.png" alt="" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.des {
+    padding: 30px 20px;
+}
+
+.page {
+    .text {
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 24px;
+        margin-bottom: 16px;
+    }
+
+    img {
+        width: 100%;
+        display: block;
+    }
+    padding-bottom: 30px;
+
+    &.page2 {
+        img {
+            height: 490px;
+            width: auto;
+            display: block;
+            margin: auto;
+        }
+    }
+}
+</style>

src/views/user/Collections.vue

@@ -5,11 +5,17 @@
                 <van-image width="64" height="64" radius="4px" fit="cover" :src="item.pic" />
                 <div class="collection-content">
                     <div class="text1">{{ item.name }}</div>
-                    <div class="text2">兑换账户:188617287287</div>
-                    <div class="text2">消耗绿洲石:200个</div>
+                    <div class="text2">兑换账户:{{ item.phone }}</div>
+                    <div class="text2">消耗绿洲石:{{ item.totalPrice }}个</div>
                 </div>
                 <div class="status">已发放</div>
             </div>
+
+            <van-empty
+                v-if="empty"
+                description="当前没有兑换纪录哦～"
+                :image="require('../../assets/kong-pimg-zhanji.png')"
+            />
         </van-list>
     </div>
 </template>
@@ -20,7 +26,7 @@ export default {
     mixins: [list],
     data() {
         return {
-            url: '/exchangeOrder/all'
+            url: '/exchangeOrder/my'
         };
     },
     methods: {}

src/views/user/Pass.vue

@@ -11,7 +11,7 @@
             <pass-info v-for="(item, index) in list" :key="index" :info="item"></pass-info>
             <van-empty
                 v-if="empty"
-                description="当前没有战绩哦～"
+                description="当前没有兑换券哦～"
                 :image="require('../../assets/kong-pimg-zhanji.png')"
             />
         </van-list>