.

src/components/PassCard.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="card" :class="{ prim: isChoose }">
-        <div class="title">青铜通行证</div>
+    <div class="card" :class="{ prim: isChoose }" @click.stop="choose">
+        <div class="title" :style="{ color: ticketInfo.color }">{{ ticketInfo.label }}</div>
         <div class="img">
-            <van-image width="100%" fit="scale-down" :src="require('@assets/png-qingtong.png')" />
+            <van-image width="100%" fit="scale-down" :src="ticketInfo.icon" />
         </div>
         <div class="price">
             <span>¥</span>
-            <span>10.00</span>
+            <span>{{ info.price }}</span>
         </div>
         <img src="@assets/png_xuanzhong.png" v-if="isChoose" class="choose-icon" alt="" />
         <img src="@assets/png-weigouxuan.png" v-else class="choose-icon" alt="" />
@@ -14,12 +14,33 @@
 </template>
 
 <script>
+import room from '../mixins/room.js';
 export default {
     props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
         isChoose: {
             type: Boolean,
             default: false
         }
+    },
+    computed: {
+        ticketInfo() {
+            let info = [...this.requireTicketOptions].find(item => {
+                return item.value === this.info.type;
+            });
+            return info ? info : {};
+        }
+    },
+    mixins: [room],
+    methods: {
+        choose() {
+            this.$emit('choose', this.info.type);
+        }
     }
 };
 </script>

src/components/PayMethodPick.vue

@@ -38,41 +38,39 @@ export default {
         if (this.value) {
             this.checked = this.value;
         }
-        if (this.iosReview) {
-            this.payConfig = [
-                {
-                    name: '绿魔币 ',
-                    key: 'BALANCE',
-                    icon: 'https://cdn.raex.vip/image/2022-05-18-17-46-19eDglIIAy.png',
-                    show: true,
-                    enabled: true
-                }
-            ];
-            this.checked = 'BALANCE';
-        } else {
-            this.$http.get('/sysConfig/get/pay_config').then(res => {
-                let configs = JSON.parse(res.value).filter(item => {
-                    if (item.key === 'BALANCE') {
-                        return this.userInfo && this.userInfo.walletEnabled;
-                    }
-                    return true;
-                });
-                if (this.$store.getters.inWechat) {
-                    configs.forEach(item => {
-                        if (item.key === 'ALIPAY') {
-                            item.key = 'ALIPAY_BRIDGE';
-                        }
-                    });
-                }
-                this.payConfig = configs.sort((a, b) => a.sort - b.sort);
-                this.checked = (configs.find(i => i.show && i.enabled) || {}).key;
-            });
-        }
     },
     data() {
         return {
             checked: null,
-            payConfig: [],
+            payConfig: [
+                {
+                    name: '首信易快捷支付',
+                    icon: 'https://cdn.raex.vip/image/2022-05-19-15-16-35vrSuZKWN.png',
+                    show: true,
+                    enabled: true,
+                    description: '',
+                    sort: 0,
+                    key: 'SYXPAY'
+                },
+                {
+                    name: '支付宝',
+                    icon: 'https://cdn.raex.vip/image/2022-05-18-17-46-08sBUUyUlw.png',
+                    show: true,
+                    enabled: true,
+                    description: '',
+                    sort: 1,
+                    key: 'ALIPAY'
+                },
+                {
+                    name: '余额',
+                    icon: 'https://cdn.raex.vip/image/2022-05-18-17-52-41NwCNOLDd.png',
+                    show: true,
+                    enabled: true,
+                    description: '',
+                    sort: 1,
+                    key: 'BALANCE'
+                }
+            ],
             icons: [
                 require('@assets/svgs/icon_gouxuan_huise.svg'),
                 require('@assets/icon_gouxuan_pre.png'),
@@ -103,8 +101,7 @@ export default {
 .pay-item {
     display: flex;
     align-items: center;
-    height: 60px;
-    border-bottom: 1px solid @tabBorder;
+    height: 48px;
     .icon {
         height: 24px;
         width: 24px;
@@ -119,7 +116,7 @@ export default {
     span {
         font-size: 14px;
         font-weight: bold;
-        color: @text0;
+        color: #fff;
         line-height: 24px;
         flex-grow: 1;
         padding: 0 10px;

src/components/TicketBuy.vue

@@ -0,0 +1,108 @@
+<template>
+    <van-popup v-model:show="show" safe-area-inset-bottom closeable position="bottom">
+        <div class="popup-content">
+            <div class="title">购买详情</div>
+            <div class="price">
+                <div class="text1">金额(元)</div>
+                <div class="text2">{{ info.price }}</div>
+            </div>
+            <div class="title">购买方式</div>
+            <div class="pay-list">
+                <pay-method-pick v-model="payType"></pay-method-pick>
+            </div>
+            <div class="btn">
+                <van-button type="primary" block @click="pay">立即支付</van-button>
+            </div>
+        </div>
+    </van-popup>
+</template>
+
+<script>
+import PayMethodPick from './PayMethodPick.vue';
+export default {
+    components: { PayMethodPick },
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            show: false,
+            payType: ''
+        };
+    },
+    methods: {
+        init() {
+            this.show = true;
+        },
+        pay() {
+            if (!this.payType) {
+                this.$toast('请选择购买方式');
+                return;
+            }
+
+            this.$http
+                .post('/ticketOrder/create', {
+                    type: this.info.type,
+                    qty: 1
+                })
+                .then(res => {
+                    return this.$http.post('/ticketOrder/balancePay', {
+                        orderId: res.id
+                    });
+                })
+                .then(res => {
+                    this.$toast.success('支付成功');
+                    this.show = false;
+                })
+                .catch(e => {
+                    this.$toast(e.error);
+                });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.pay-list {
+    padding: 10px 16px;
+}
+.title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 24px;
+    padding: 16px 16px 0;
+}
+
+.price {
+    background: #313346;
+    border-radius: 4px;
+    margin: 27px 16px 0;
+    .flex-col();
+    align-items: center;
+    padding: 18px;
+
+    .text1 {
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 24px;
+    }
+
+    .text2 {
+        font-size: 30px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 30px;
+        margin-top: 10px;
+    }
+}
+
+.btn {
+    padding: 50px 18px 9px;
+}
+</style>

src/components/room/changeUrl.vue

@@ -0,0 +1,58 @@
+<template>
+    <van-dialog v-model:show="show" theme="round-button" show-cancel-button>
+        <div class="dialog-title">
+            <img src="@assets/icon-xiugaidizhi.png" alt="" />
+            <span>修改地址</span>
+        </div>
+        <van-field v-model="message" rows="4" autosize label-width="0" type="textarea" placeholder="请输入新的游戏地址">
+        </van-field>
+    </van-dialog>
+</template>
+
+<script>
+export default {
+    props: {
+        roomId: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            show: true,
+            message: ''
+        };
+    },
+    methods: {
+        changeUrl() {
+            this.$http.post('/room/changeUrl', {
+                roomId: this.roomId,
+                url: this.message
+                
+            }).then(res=>{
+                 this.$toast.success('修改成功');
+
+            });
+        }
+    }
+};
+</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;
+    }
+}
+</style>

src/main.js

@@ -44,6 +44,7 @@ setTimeout(() => {
     onWindowResize();
 }, 100);
 Toast.setDefaultOptions('loading', { duration: 0 });
+Dialog.setDefaultOptions({ theme: 'round-button' });
 require('dayjs/locale/zh-cn');
 
 const emitter = mitt();

src/mixins/room.js

@@ -0,0 +1,43 @@
+export default {
+    data() {
+        return {
+            statusOptions: [
+                { label: '报名中', value: 'WAITING' },
+                { label: '进行中', value: 'GAMING' },
+                { label: '完成', value: 'FINISH' },
+                { label: '取消', value: 'CANCEL' },
+                { label: '流局', value: 'PASSED' }
+            ],
+            requireTicketOptions: [
+                {
+                    label: '青铜通行证',
+                    value: 'LEVEL_1',
+                    color: '#FFA371',
+                    icon: require('@assets/png-qingtong.png'),
+                    img: require('@assets/qingtong.png')
+                },
+                {
+                    label: '白银通行证',
+                    value: 'LEVEL_2',
+                    color: '#9EC1FF',
+                    icon: require('@assets/png-baiying.png'),
+                    img: require('@assets/baiying.png')
+                },
+                {
+                    label: '黄金通行证',
+                    value: 'LEVEL_3',
+                    color: '#FFE3A3',
+                    icon: require('@assets/png-huangjin.png'),
+                    img: require('@assets/huangjin.png')
+                },
+                {
+                    label: '钻石通行证',
+                    value: 'LEVEL_4',
+                    color: '#C9A7FF',
+                    icon: require('@assets/png-zuanshi.png'),
+                    img: require('@assets/zuanshi.png')
+                }
+            ]
+        };
+    }
+};

src/styles/app.less

@@ -60,6 +60,9 @@
     --van-field-clear-icon-color: #6a6d83;
     --van-popup-background-color: #25283d;
     --van-popup-close-icon-color: #4a4c5d;
+    --van-dialog-background-color: #000000;
+    --van-action-bar-background-color: #000000;
+    --van-dialog-border-radius: 2px;
 }
 
 [contenteditable='true'],
@@ -124,7 +127,6 @@ input:-webkit-autofill {
     flex-grow: 1;
 }
 .van-dialog {
-    border-radius: 8px;
     .van-dialog__header {
         font-size: 16px;
         font-weight: bold;
@@ -309,13 +311,44 @@ input:-webkit-autofill {
 
 .van-dialog {
     width: 260px;
+    overflow: visible;
     .van-dialog__message--has-title {
-        color: #939599;
+        color: #fff;
         padding: 16px 23px 20px;
     }
 
     .van-dialog__header {
         padding-top: 16px;
+        color: #fff;
+    }
+    & > div {
+        position: relative;
+        z-index: 2;
+        background-color: #000;
+    }
+    .van-action-bar-button--first {
+        border-radius: 2px;
+    }
+    .van-action-bar-button--last {
+        border-radius: 2px;
+        margin-left: 20px;
+    }
+    .van-action-bar-button--warning {
+        background: #25283d;
+    }
+    .van-action-bar-button--danger {
+        background: linear-gradient(-225deg, #f6abf0 0%, #10f7ee 100%);
+        color: #1a1c2b;
+    }
+    &::after {
+        content: '';
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        right: -1px;
+        bottom: -1px;
+        z-index: 0;
+        background: linear-gradient(-225deg, #f6abf0 0%, #10f7ee 100%);
     }
 }
 .van-tabbar-item__icon img {

src/views/Room.vue

@@ -10,17 +10,17 @@
 
         <div class="content">
             <div class="content-top">
-                <div class="text1">匹配成功</div>
+                <div class="text1">{{ getLabelName(info.status, statusOptions) }}</div>
                 <div class="text2">
-                    <span>房间号 287837744849</span>
+                    <span>房间号 {{ info.id }}</span>
                 </div>
             </div>
             <div class="content-box">
                 <div class="tabs">
-                    <div class="tab">QQ</div>
-                    <div class="tab">1v1</div>
-                    <div class="tab">黄金赛事</div>
-                    <div class="tab">王者峡谷</div>
+                    <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>
         </div>
@@ -39,11 +39,47 @@
                 <span>取消赛事</span>
             </div>
         </div>
+        <change-url></change-url>
     </div>
 </template>
 
 <script>
-export default {};
+import room from '../mixins/room.js';
+import changeUrl from '../components/room/changeUrl.vue';
+export default {
+    data() {
+        return {
+            info: {},
+            roomId: 0
+        };
+    },
+    computed: {
+        gameMap() {
+            return this.info.gameMap || {};
+        },
+        gameMode() {
+            return this.info.gameMode || {};
+        },
+        host() {
+            return this.info.host || {};
+        }
+    },
+    mixins: [room],
+    components: { changeUrl },
+    mounted() {
+        if (this.$route.query.id) {
+            this.roomId = this.$route.query.id;
+        }
+        this.getInfo();
+    },
+    methods: {
+        getInfo() {
+            this.$http.get('/room/detail/' + this.roomId).then(res => {
+                this.info = res;
+            });
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>

src/views/RoomCreate.vue

@@ -5,8 +5,8 @@
                 <van-field name="游戏区" label="游戏区" :border="false">
                     <template #input>
                         <div class="tabs">
-                            <div class="tab" :class="{ prim: form.type === 'QQ' }" @click="form.type = 'QQ'">QQ区</div>
-                            <div class="tab" :class="{ prim: form.type === 'wechat' }" @click="form.type = 'wechat'">
+                            <div class="tab" :class="{ prim: form.zone === 'QQ' }" @click="form.zone = 'QQ'">QQ区</div>
+                            <div class="tab" :class="{ prim: form.zone === 'wechat' }" @click="form.zone = 'wechat'">
                                 微信区
                             </div>
                         </div>
@@ -25,6 +25,17 @@
                     @click="picker('modeId')"
                 >
                 </van-field>
+                <van-field
+                    v-model="form.requireTicketLabel"
+                    is-link
+                    readonly
+                    :border="false"
+                    name="通行证类型"
+                    label="通行证类型"
+                    placeholder="点击选择通行证类型"
+                    @click="picker('requireTicket')"
+                >
+                </van-field>
             </van-cell-group>
             <van-cell-group :border="false">
                 <van-field
@@ -46,10 +57,9 @@
                     </template>
                 </van-field>
                 <van-field
-                    v-model="form.psd"
-                    is-link
+                    v-model="form.password"
                     :border="false"
-                    v-if="form.password"
+                    v-if="form.usedPsd"
                     name="房间密码"
                     label="房间密码"
                     placeholder="请输入房间密码"
@@ -78,7 +88,7 @@
                 <van-button round block type="primary" native-type="submit">确认创建</van-button>
             </div>
         </van-form>
-        <van-overlay :show="showPicker" @click="showPicker = false">
+        <van-overlay :show="showPicker" z-index="99" @click="showPicker = false">
             <div class="picker" @click.stop>
                 <div class="picker-title">{{ pickerTitle }}</div>
                 <div class="selects" :class="{ selectOnly: pickerOptions.length === 1 }">
@@ -98,19 +108,25 @@
 </template>
 
 <script>
+import room from '../mixins/room.js';
 export default {
     data() {
         return {
             form: {
-                type: 'QQ',
+                type: 'USER',
+                zone: 'QQ',
                 usedPsd: false,
-                map: '王者荣耀',
-                message: '',
+                url: '',
                 modeId: '',
                 mode: '',
+                requireTicket: '',
+                requireTicketLabel: '',
+                gameId: '',
                 gameMapId: '',
                 gameMap: '',
-                password: ''
+                password: '',
+                maxPlayerNum: '',
+                minPlayerNum: ''
             },
             showPicker: false,
             pickerType: 'modeId',
@@ -118,11 +134,15 @@ export default {
             gameMapIdOptions: []
         };
     },
+    mixins: [room],
     computed: {
         pickerOptions() {
             if (this.pickerType === 'modeId') {
                 return [...this.modeIdOptions];
             }
+            if (this.pickerType === 'requireTicket') {
+                return [...this.requireTicketOptions];
+            }
             if (this.pickerType === 'gameMapId') {
                 return [...this.gameMapIdOptions];
             }
@@ -132,12 +152,18 @@ export default {
             if (this.pickerType === 'gameMapId') {
                 return Number(this.form.gameMapId || 0);
             }
+            if (this.pickerType === 'requireTicket') {
+                return this.form.requireTicket;
+            }
             return Number(this.form.modeId || 0);
         },
         pickerTitle() {
             if (this.pickerType === 'gameMapId') {
                 return '选择赛事地图';
             }
+            if (this.pickerType === 'requireTicket') {
+                return '选择通行证类型';
+            }
             return '选择对战模式';
         }
     },
@@ -148,7 +174,10 @@ export default {
                 this.modeIdOptions = res.content.map(item => {
                     return {
                         label: item.name,
-                        value: item.id
+                        value: item.id,
+                        minPlayerNum: item.minPlayerNum,
+                        maxPlayerNum: item.maxPlayerNum,
+                        gameId: item.gameId
                     };
                 });
             })
@@ -158,11 +187,114 @@ export default {
             });
     },
     methods: {
-        submit() {},
+        submit() {
+            if (!this.form.url) {
+                this.$toast('游戏地址必须填写，这样才能开始游戏');
+                return;
+            }
+            if (!this.form.modeId) {
+                this.$toast('请选择对战模式');
+                return;
+            }
+            if (!this.form.requireTicket) {
+                this.$toast('请选择通行证类型');
+                return;
+            }
+            if (!this.form.gameMapId) {
+                this.$toast('请选择赛事地图');
+                return;
+            }
+
+            this.checkTicket().then(ticketId => {
+                this.$toast.loading({
+                    message: '加载中...',
+                    forbidClick: true
+                });
+                let form = { ...this.form };
+                form.userId = this.$store.state.userInfo.id;
+                delete form.usedPsd;
+                delete form.mode;
+                delete form.gameMap;
+                delete form.requireTicketLabel;
+                console.log(form);
+
+                this.$http
+                    .post('/room/createRoom', {
+                        gameId: this.form.gameId,
+                        modeId: this.form.modeId,
+                        mapId: this.form.gameMapId,
+                        ticketId: ticketId,
+                        url: this.form.url,
+                        password: this.form.password,
+                        zone: this.form.zone
+                    })
+                    .then(res => {
+                        this.$toast.clear();
+                        this.$toast.success('创建成功');
+                        setTimeout(() => {
+                            this.$router.replace({
+                                path: '/room',
+                                query: {
+                                    id: res.id
+                                }
+                            });
+                        }, 1000);
+                    })
+                    .catch(e => {
+                        console.log(e);
+                        this.$toast(e.error);
+                    });
+            });
+        },
+        checkTicket() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            return this.$http
+                .post(
+                    '/userTicket/all',
+                    {
+                        query: {
+                            userId: this.$store.state.userInfo.id,
+                            type: this.form.requireTicket,
+                            used: false,
+                            expired: false
+                        },
+                        sort: 'id,asc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    let info = res;
+                    this.$toast.clear();
+                    if (res.empty) {
+                        return this.$dialog
+                            .confirm({
+                                title: '提示',
+                                message: '您没有可用的' + this.form.requireTicketLabel,
+                                confirmButtonText: '立即购买'
+                            })
+                            .then(res => {
+                                this.$router.push('/shop');
+                                return Promise.reject();
+                            });
+                    } else {
+                        return this.$dialog
+                            .confirm({
+                                title: '门票确认',
+                                message: '此操作将扣除您【' + this.form.requireTicketLabel + '】门票一张'
+                            })
+                            .then(() => {
+                                return Promise.resolve(info.content[0].id);
+                            });
+                    }
+                });
+        },
         picker(type = 'modeId') {
             if (type === 'gameMapId') {
                 if (!this.form.modeId) {
-                    this.$toast('请选择对战模式');
+                    this.$toast('请先选择对战模式');
                     return;
                 }
             }
@@ -187,12 +319,22 @@ export default {
         },
         choosePicker(id) {
             if (this.pickerType == 'modeId') {
+                let info = [...this.modeIdOptions].find(item => {
+                    return item.value === id;
+                });
                 this.form.modeId = id;
-                this.form.mode = this.getLabelName(this.form.modeId, this.modeIdOptions);
+                this.form.mode = info.label;
+                this.form.minPlayerNum = info.minPlayerNum;
+                this.form.maxPlayerNum = info.maxPlayerNum;
+                this.form.gameId = info.gameId;
                 this.form.gameMapId = '';
                 this.form.gameMap = '';
                 this.getMap();
             }
+            if (this.pickerType == 'requireTicket') {
+                this.form.requireTicket = id;
+                this.form.requireTicketLabel = this.getLabelName(this.form.requireTicket, this.requireTicketOptions);
+            }
             if (this.pickerType == 'gameMapId') {
                 this.form.gameMapId = id;
                 this.form.gameMap = this.getLabelName(this.form.gameMapId, this.gameMapIdOptions);
@@ -210,7 +352,6 @@ export default {
 @bg: #08080d;
 .picker {
     width: 272px;
-    height: 194px;
     background-color: @bg;
     position: absolute;
     top: 50%;
@@ -219,6 +360,7 @@ export default {
     margin-top: -97px;
     .flex-col();
     justify-content: center;
+    z-index: 20;
     &::after {
         content: '';
         background: linear-gradient(-225deg, #f6abf0 0%, #10f7ee 100%);
@@ -252,6 +394,7 @@ export default {
         color: #fff;
         font-weight: bold;
         text-align: center;
+        padding-top: 20px;
     }
     .selects {
         .flex();

src/views/Shop.vue

@@ -1,16 +1,22 @@
 <template>
     <div class="shop">
-        <van-tabs sticky shrink v-model:active="active" swipeable :swipe-threshold="2">
+        <van-tabs sticky shrink @change="changeTab" v-model:active="active" swipeable :swipe-threshold="2">
             <van-tab title="通行证购买">
-                <div class="list">
-                    <pass-card isChoose></pass-card>
-                    <pass-card v-for="i in 6" :key="i"></pass-card>
+                <div class="list" @click="clear">
+                    <pass-card
+                        v-for="(item, index) in ticketPrices"
+                        @choose="choose"
+                        :key="index"
+                        :info="item"
+                        :isChoose="chooseTicket === item.type"
+                    ></pass-card>
                 </div>
             </van-tab>
             <van-tab title="通行证兑换">
-                <pass-card isChoose></pass-card>
-                <pass-card v-for="i in 6" :key="i"></pass-card
-            ></van-tab>
+                <div class="list">
+                    <pass-card v-for="(item, index) in ticketPrices" :key="index" :info="item"></pass-card>
+                </div>
+            </van-tab>
             <van-tab title="藏品兑换">
                 <div class="list">
                     <product-info isChoose></product-info>
@@ -20,24 +26,65 @@
             </van-tab>
         </van-tabs>
 
-        <div class="bottom">
-            <van-button type="primary" block>确认兑换</van-button>
+        <div class="bottom" v-if="chooseTicket">
+            <van-button color="#12131E" block v-if="chooseTicket" @click="buy">确认购买</van-button>
+            <van-button type="primary" block v-else>确认兑换</van-button>
         </div>
+
+        <ticket-buy ref="buy" :info="ticketInfo"></ticket-buy>
     </div>
 </template>
 
 <script>
 import PassCard from '../components/PassCard.vue';
 import ProductInfo from '../components/product/productInfo.vue';
+import TicketBuy from '../components/TicketBuy.vue';
 export default {
     data() {
         return {
-            active: 2
+            active: 0,
+            ticketPrices: [],
+            chooseTicket: ''
         };
     },
     components: {
         PassCard,
-        ProductInfo
+        ProductInfo,
+        TicketBuy
+    },
+    computed: {
+        ticketInfo() {
+            let info = [...this.ticketPrices].find(item => {
+                return item.type === this.chooseTicket;
+            });
+
+            return info ? info : {};
+        }
+    },
+    mounted() {
+        this.$http
+            .post('/ticketPrice/all', { size: 1000, query: { del: false } }, { body: 'json' })
+            .then(res => {
+                this.ticketPrices = res;
+            })
+            .catch(e => {
+                console.log(e);
+                this.$toast(e.error);
+            });
+    },
+    methods: {
+        choose(type) {
+            this.chooseTicket = type;
+        },
+        changeTab() {
+            this.clear();
+        },
+        clear() {
+            this.chooseTicket = '';
+        },
+        buy() {
+            this.$refs.buy.init();
+        }
     }
 };
 </script>
@@ -56,6 +103,9 @@ export default {
 
 .list {
     padding: 8px;
+    .bottom(50px);
+    min-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 94px);
+    box-sizing: border-box;
 }
 
 .bottom {