电竞

.env.app

@@ -2,6 +2,6 @@ VUE_APP_BASE_URL=https://www.raex.vip
 NODE_ENV=production
 VUE_APP_PUBLIC_PATH=./
 ASSETS_PATH=raex
-TITLE=RAEX宇宙
+TITLE=电竞
 VUE_APP_CORDOVA=true
 VUE_APP_PAGE_TYPE=raex

.env.app_test

@@ -2,6 +2,6 @@ VUE_APP_BASE_URL=https://www.raex.vip
 NODE_ENV=production
 VUE_APP_PUBLIC_PATH=./
 ASSETS_PATH=raex
-TITLE=RAEX宇宙
+TITLE=电竞
 VUE_APP_CORDOVA=true
 VUE_APP_PAGE_TYPE=raex

.env.development

@@ -1,6 +1,6 @@
-VUE_APP_BASE_URL=http://localhost:8080
+VUE_APP_BASE_URL=http://192.168.6.116:8080/
 NODE_ENV=development
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex
-TITLE=RAEX宇宙
+TITLE=电竞
 VUE_APP_PAGE_TYPE=raex

.env.production

@@ -2,5 +2,5 @@ VUE_APP_BASE_URL=/
 NODE_ENV=production
 VUE_APP_PUBLIC_PATH=/h5/
 ASSETS_PATH=raex
-TITLE=RAEX宇宙
+TITLE=电竞
 VUE_APP_PAGE_TYPE=raex

public/index.html

@@ -31,13 +31,12 @@
         </noscript>
         <div id="app"></div>
 
-        <div style="display: none;">
+        <!-- <div style="display: none;">
             <script
                 type="text/javascript"
                 src="https://s4.cnzz.com/z_stat.php?id=1281049823&web_id=1281049823"
             ></script>
-            <!-- built files will be auto injected -->
-        </div>
+        </div> -->
     </body>
     <script>
         function goFetch(path) {

src/App.vue

@@ -37,7 +37,9 @@ export default {
         scrollStyle() {
             return {
                 boxSizing: 'border-box',
-                minHeight: `calc(${this.appHeight} - ${(this.barHeight || '0') + 'px'})`
+                minHeight: this.fullPage
+                    ? this.appHeight
+                    : `calc(${this.appHeight} - ${(this.barHeight || '0') + 'px'})`
             };
         }
     },
@@ -45,7 +47,8 @@ export default {
         return {
             checkEvent: null,
             keeps: [],
-            bodyScroll: 0
+            bodyScroll: 0,
+            fullPage: false
         };
     },
     watch: {
@@ -53,9 +56,20 @@ export default {
             this.$nextTick(() => {
                 this.$el.scrollTop = 0;
             });
+            this.checkFull();
         }
     },
+    mounted() {
+        this.checkFull();
+    },
     methods: {
+        checkFull() {
+            if (this.$route.meta.fullPage) {
+                this.fullPage = true;
+            } else {
+                this.fullPage = false;
+            }
+        },
         setKeeps(keep = [], isAdd = true, isClear = false) {
             let keeps = [...this.keeps];
             if (isAdd) {

src/components/AppBar.vue

@@ -6,17 +6,17 @@
         :left-arrow="false"
         v-if="show"
         z-index="20"
-        placeholder
+        :placeholder="!fullPage"
         :border="false"
         id="navBar"
-        :class="{ dark: tabColor }"
         ref="navBar"
+        :class="{ fullBar: fullPage }"
     >
         <template #left>
             <div class="back">
-                <van-icon @click="back" size="24" name="arrow-left" :color="fontColor || $colors.font0" />
+                <van-icon @click="back" size="24" name="arrow-left" :color="fontColor || $colors.font1" />
             </div>
-            <van-popover
+            <!-- <van-popover
                 v-model:show="showPopover"
                 placement="bottom-start"
                 theme="dark"
@@ -24,13 +24,13 @@
                 @select="onSelect"
             >
                 <template #reference>
-                    <van-icon size="24" :color="fontColor || $colors.font0" name="bars" />
+                    <van-icon size="24" :color="fontColor || $colors.font1" name="bars" />
                 </template>
-            </van-popover>
+            </van-popover> -->
         </template>
 
         <template #title>
-            <span class="title" :style="{ color: fontColor || $colors.font0 }">{{ title }}</span>
+            <span class="title" :style="{ color: fontColor || $colors.font1 }">{{ title }}</span>
         </template>
 
         <template #right>
@@ -53,13 +53,15 @@ export default {
             rightInfo: {
                 text: '',
                 path: ''
-            }
+            },
+            fullPage: false,
+            darkBar: true
         };
     },
     computed: {
         ...mapState(['showConsole']),
         fontColor() {
-            return this.tabColor ? '#fff' : '';
+            return this.darkBar ? '' : '#fff';
         },
         actions() {
             if (this.showConsole) {
@@ -133,21 +135,23 @@ export default {
             }
         },
         getColor(color = '') {
-            if (this.$route.meta.tabColor) {
-                if (window.cordova && StatusBar && StatusBar.isVisible) {
-                    StatusBar.styleLightContent();
-                }
-                this.tabColor = this.$route.meta.tabColor;
-            } else if (color) {
+            if (this.$route.meta.fullPage) {
+                this.fullPage = true;
+                this.tabColor = '';
+            } else {
+                this.fullPage = false;
+                this.tabColor = '#1A1C2B';
+            }
+            if (this.$route.meta.darkBar) {
                 if (window.cordova && StatusBar && StatusBar.isVisible) {
-                    StatusBar.styleLightContent();
+                    StatusBar.styleDefault();
                 }
-                this.tabColor = color;
+                this.darkBar = true;
             } else {
                 if (window.cordova && StatusBar && StatusBar.isVisible) {
-                    StatusBar.styleDefault();
+                    StatusBar.styleLightContent();
                 }
-                this.tabColor = '';
+                this.darkBar = false;
             }
         },
         onSelect(val) {
@@ -197,6 +201,9 @@ export default {
         line-height: initial !important;
     }
 }
+.fullBar {
+    background: transparent !important;
+}
 </style>
 <style lang="less" scoped>
 .back {

src/components/PassCard.vue

@@ -4,7 +4,11 @@
         <div class="img">
             <van-image width="100%" fit="scale-down" :src="ticketInfo.icon" />
         </div>
-        <div class="price">
+        <div class="balance" v-if="balance">
+            <span>{{ info.price }}</span>
+            <span>个绿洲石</span>
+        </div>
+        <div class="price" v-else>
             <span>¥</span>
             <span>{{ info.price }}</span>
         </div>
@@ -26,6 +30,10 @@ export default {
         isChoose: {
             type: Boolean,
             default: false
+        },
+        balance: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {
@@ -91,12 +99,32 @@ export default {
     }
 }
 
+.balance {
+    .flex();
+    justify-content: center;
+    font-size: 12px;
+    color: #ffffff;
+    line-height: 24px;
+    span {
+        &:first-child {
+            font-size: 16px;
+            font-weight: bold;
+            margin-right: 2px;
+        }
+    }
+}
+
 .prim {
     .price {
         background: linear-gradient(225deg, @prim2 0%, @prim 100%);
         color: #1a1c2b;
     }
 
+    .balance {
+        background: linear-gradient(225deg, #10f7ee 0%, #f6abf0 100%);
+        color: #1a1c2b;
+    }
+
     &::before {
         content: '';
         position: absolute;

src/mixins/phone.js

@@ -37,29 +37,19 @@ export default {
         },
         sendMsg(phone) {
             this.phone = phone;
-            if (!this.captcha || !this.captchaKey) {
-                this.getCode();
-                return;
-            }
             this.isSend = true;
             this.setTime(60);
             this.$http
-                .get('/sms/sendSecureVerify', {
-                    phone: phone,
-                    captcha: this.captcha,
-                    captchaKey: this.captchaKey
+                .get('/sms/sendVerify', {
+                    phone: phone
                 })
                 .then(res => {
                     this.msgCode = res;
                     this.$toast.success('发送成功');
-                    this.captcha = '';
-                    this.captchaKey = '';
                 })
                 .catch(e => {
                     if (e) {
                         this.$toast(e.error);
-                        this.captcha = '';
-                        this.captchaKey = '';
                     }
                     this.setTime(0);
                 });

src/plugins/colors.js

@@ -5,6 +5,7 @@ export default {
             prim2:'#10F7EE',
             warn: '#FFE3A3',
             font0: '#fffff',
+            font1: '#000000',
             bg: '#1A1C2B',
             bg3: '#ffffff',
             bgBlack: '#0f0f0f'

src/router/index.js

@@ -105,7 +105,17 @@ const routes = [
         name: 'room',
         component: () => import('../views/Room.vue'),
         meta: {
-            menuPage: true
+            fullPage: true
+        }
+    },
+    {
+        path: '/roomResult',
+        name: 'roomResult',
+        component: () => import('../views/RoomResult.vue'),
+        meta: {
+            title: '查看战绩',
+            fullPage: true,
+            darkBar: true
         }
     },
     {
@@ -162,8 +172,7 @@ const routes = [
         component: () => import('../views/account/Login.vue'),
         meta: {
             pageType: Page.Login,
-            title: '登录',
-            tabColor: '#181818'
+            title: '登录'
         }
     },
     {
@@ -181,8 +190,7 @@ const routes = [
         component: () => import('../views/account/Register.vue'),
         meta: {
             pageType: Page.Login,
-            title: '注册',
-            tabColor: '#181818'
+            title: '注册'
         }
     },
     {

src/views/Exchange.vue

@@ -1,20 +1,20 @@
 <template>
     <div class="exchange">
-        <van-image class="icon" width="calc(100vw - 52px)" :src="require('@assets/qingtong.png')" fit="scale-down" />
+        <van-image class="icon" width="calc(100vw - 52px)" :src="ticketInfo.img" fit="scale-down" />
 
         <van-cell-group :border="false">
             <van-cell>
                 <template #title>
                     <div class="cell-title">
-                        <span>100</span>
+                        <span>{{ info.price }}</span>
                         <span>个绿洲石</span>
                     </div>
                 </template>
                 <template #value>
-                    <van-stepper v-model="value" input-width="40px" />
+                    <van-stepper :min="1" v-model="qty" input-width="40px" />
                 </template>
             </van-cell>
-            <van-cell :border="false" class="cell2" title="青铜通行证">
+            <van-cell :border="false" class="cell2" :title="ticketInfo.label">
                 <template #label>
                     <div>
                         <div>虚拟商品兑换成功后不支持退换</div>
@@ -26,20 +26,86 @@
 
         <div class="bottom">
             <div class="price">
-                <span>100</span>
+                <span>{{ money }}</span>
                 <span>个绿洲石</span>
             </div>
-            <van-button type="primary">立即兑换</van-button>
+            <van-button type="primary" @click="submit">立即兑换</van-button>
         </div>
     </div>
 </template>
 
 <script>
+import room from '../mixins/room.js';
 export default {
     data() {
         return {
-            value: ''
+            qty: 1,
+            ticketPrices: [],
+            ticket: ''
         };
+    },
+    mixins: [room],
+    computed: {
+        money() {
+            let price = this.info.price || 0;
+            price = this.accMul(price, this.qty);
+            return price;
+        },
+        info() {
+            let info = [...this.ticketPrices].find(item => {
+                return item.type === this.ticket;
+            });
+
+            return info ? info : {};
+        },
+        ticketInfo() {
+            let info = [...this.requireTicketOptions].find(item => {
+                return item.value === this.ticket;
+            });
+            return info ? info : {};
+        }
+    },
+    mounted() {
+        if (this.$route.query.ticket) {
+            this.ticket = this.$route.query.ticket;
+        }
+        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: {
+        submit() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+
+            this.$http
+                .post('/ticketOrder/create', {
+                    type: this.ticket,
+                    qty: this.qty
+                })
+                .then(res => {
+                    return this.$http.post('/ticketOrder/balancePay', {
+                        orderId: res.id
+                    });
+                })
+                .then(res => {
+                    this.$toast.success('购买成功');
+                    setTimeout(() => {
+                        this.$router.back();
+                    }, 1000);
+                })
+                .catch(e => {
+                    this.$toast(e.error);
+                });
+        }
     }
 };
 </script>
@@ -124,6 +190,8 @@ export default {
     .price {
         color: #ffe3a3;
         font-weight: bold;
+        .flex();
+        align-items: flex-end;
 
         span {
             &:first-child {

src/views/Home.vue

@@ -8,9 +8,12 @@
         @refresh="onRefresh"
         pageType="light"
     >
-        <swiper :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }" v-if="banners.length > 0">
-            <swiper-slide v-for="item in banners" :key="item.id">
+        <swiper :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }">
+            <!-- <swiper-slide v-for="item in banners" :key="item.id">
                 <product-small :info="item"></product-small>
+            </swiper-slide> -->
+            <swiper-slide>
+                <van-image :src="require('@assets/banner.png')" fit="cover" />
             </swiper-slide>
         </swiper>
 
@@ -96,7 +99,6 @@ export default {
     components: {
         Swiper,
         SwiperSlide,
-        ProductSmall,
         RoomInfo
     },
     computed: {
@@ -156,7 +158,7 @@ export default {
             if (this.active === 0) {
                 return {
                     zone: this.zone,
-                    status: 'WAITING,GAMING',
+                    // status: 'WAITING,GAMING',
                     id: this.search
                 };
             } else {
@@ -228,9 +230,6 @@ export default {
     },
     activated() {
         this.$nextTick(() => {
-            if (window.cordova && StatusBar && StatusBar.isVisible) {
-                StatusBar.styleDefault();
-            }
             this.changeScroll(this.scrollTop || 0);
         });
     },

src/views/Mine.vue

@@ -42,7 +42,7 @@
 
         <div class="menu-list">
             <div class="menu-card" @click="$router.push('/userPoint')">
-                <div class="text1">200</div>
+                <div class="text1">{{ balance }}</div>
                 <div class="text2">绿洲石</div>
             </div>
             <div class="menu-card" @click="$router.push('/userPass')">
@@ -87,7 +87,8 @@ export default {
     data() {
         return {
             faceAuth: true,
-            userTickets: 0
+            userTickets: 0,
+            balance: 0
         };
     },
     computed: {
@@ -99,6 +100,7 @@ export default {
     },
     inject: ['safeTop'],
     mounted() {
+        this.$store.dispatch('getUserInfo');
         if (this.isLogin) {
             this.$http
                 .post(
@@ -116,6 +118,10 @@ export default {
                 .then(res => {
                     this.userTickets = res.totalElements;
                 });
+
+            this.$http.get('/user/myBalance').then(res => {
+                this.balance = res.balance;
+            });
         }
     },
     methods: {

src/views/Room.vue

@@ -4,9 +4,9 @@
             <img src="@assets/roomBg.png" alt="" />
         </div>
 
-        <div class="back">
+        <!-- <div class="back">
             <img src="@assets/back.png" @click="back" alt="" />
-        </div>
+        </div> -->
 
         <div class="content">
             <div class="content-top">
@@ -80,7 +80,7 @@
                     </div>
                 </div>
 
-                <div class="bg-icon">
+                <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"
@@ -95,11 +95,11 @@
         </div>
 
         <div class="help">
-            <div class="help-btn" v-if="isJoin" @click="back">
+            <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" @click="$refs.failed.init()">
+            <div class="help-btn" v-if="isHost && info.status == 'GAMING'" @click="$refs.failed.init()">
                 <img src="@assets/png-liuju.png" alt="" />
                 <span>流局</span>
             </div>
@@ -110,14 +110,14 @@
         </div>
 
         <div class="bottom" v-if="isJoin">
-            <div class="join-btn" v-if="isFull">
+            <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="$refs.joinGame.init()"
                     >进入比赛</van-button
                 >
             </div>
             <div class="btns">
-                <div class="btn" v-if="!isHost" @click="quit">
+                <div class="btn" v-if="!isHost && info.status == 'WAITING'" @click="quit">
                     <img src="@assets/png-quxiaobaoming.png" alt="" />
                     <span>取消报名</span>
                 </div>
@@ -125,6 +125,10 @@
                     <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('/exceptionLogAdd?roomId=' + roomId)">
                     <img src="@assets/png-yicangshenbao.png" alt="" />
                     <span>异常申报</span>
@@ -318,7 +322,6 @@ export default {
                 });
         }
     },
-
     beforeRouteLeave(to, from, next) {
         if (this && this.emitter) {
             this.emitter.emit('updateList', this.info);
@@ -455,24 +458,29 @@ export default {
         position: absolute;
         left: 0;
         right: 0;
-        top: 130px;
+        top: 104px;
         z-index: 1;
         .img1 {
             width: 100%;
             display: block;
+            margin-top: 26px;
         }
         .img2 {
             width: 74px;
             display: block;
             position: absolute;
-            top: 0;
+            top: 50%;
             left: 50%;
-            transform: translateX(-50%);
+            transform: translate(-50%, -50%);
         }
         .img3 {
             width: 100%;
             display: block;
-            margin-top: -26px;
+        }
+        &.bgOne {
+            .img2 {
+                top: calc(50% + 13px);
+            }
         }
     }
 }
@@ -500,7 +508,7 @@ export default {
     position: relative;
     z-index: 2;
     .player-item {
-        width: 110px;
+        width: 29vw;
         .title {
             font-size: 14px;
             font-weight: bold;
@@ -534,13 +542,13 @@ export default {
     .btns {
         .flex();
         height: 56px;
-        padding: 0 32px;
-        justify-content: space-between;
+        padding: 0 16px;
     }
 
     .btn {
         .flex();
         justify-content: center;
+        flex-grow: 1;
         img {
             width: 24px;
             height: 24px;

src/views/RoomResult.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="result">
+        <img class="topBg" src="@assets/png-depeat-bg.png" alt="" />
+
+        <div class="topBox" :style="{ top: barHeight + 'px' }">
+            <div class="top-info">
+                <div class="text1">defeat</div>
+                <div class="text2">比赛失败</div>
+                <div class="text3">无奖励</div>
+            </div>
+            <img src="@assets/png-defeat.png" alt="" class="img" />
+        </div>
+
+        <div class="result-content">
+            <div class="result-title">比赛截图</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    inject: ['barHeight'],
+    data() {
+        return {
+            roomId: 0
+        };
+    },
+    mounted() {
+        if (this.$route.query.roomId) {
+            this.roomId = this.$route.query.roomId;
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.result {
+    background-color: #fff;
+}
+.topBg {
+    width: 100%;
+    display: block;
+}
+.topBox {
+    position: absolute;
+    padding: 20px 30px 0 20px;
+    .flex();
+    left: 0;
+    right: 0;
+    justify-content: space-between;
+
+    .img {
+        width: 146px;
+        height: 178px;
+    }
+    .top-info {
+        .text1 {
+            font-size: 38px;
+            font-family: SourceHanSans-Medium;
+            font-weight: bolder;
+            color: #ff7f1f;
+            line-height: 38px;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            background: linear-gradient(295deg, #b5b5b5 0%, #434343 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .text2 {
+            font-size: 20px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 24px;
+            margin-top: 24px;
+        }
+
+        .text3 {
+            font-size: 14px;
+            color: #939599;
+            line-height: 24px;
+            margin-top: 8px;
+        }
+    }
+}
+
+.result-content {
+    padding: 0 20px;
+    .result-title {
+        font-size: 16px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 24px;
+        padding: 0 4px;
+    }
+}
+</style>

src/views/Shop.vue

@@ -14,7 +14,14 @@
             </van-tab>
             <van-tab title="通行证兑换">
                 <div class="list">
-                    <pass-card v-for="(item, index) in ticketPrices" :key="index" :info="item"></pass-card>
+                    <pass-card
+                        v-for="(item, index) in ticketPrices"
+                        @choose="choose"
+                        balance
+                        :key="index"
+                        :info="item"
+                        :isChoose="chooseTicket === item.type"
+                    ></pass-card>
                 </div>
             </van-tab>
             <van-tab title="藏品兑换">
@@ -27,8 +34,10 @@
         </van-tabs>
 
         <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>
+            <van-button color="#12131E" block v-if="active == 0" @click="buy">确认购买</van-button>
+            <van-button type="primary" block v-else @click="$router.push('/exchange?ticket=' + chooseTicket)"
+                >确认兑换</van-button
+            >
         </div>
 
         <ticket-buy ref="buy" :info="ticketInfo"></ticket-buy>
@@ -71,6 +80,9 @@ export default {
                 console.log(e);
                 this.$toast(e.error);
             });
+        if (this.$route.query.active) {
+            this.active = Number(this.$route.query.active);
+        }
     },
     methods: {
         choose(type) {
@@ -78,6 +90,11 @@ export default {
         },
         changeTab() {
             this.clear();
+            this.$router.replace({
+                query: {
+                    active: this.active
+                }
+            });
         },
         clear() {
             this.chooseTicket = '';

src/views/user/Point.vue

@@ -1,26 +1,66 @@
 <template>
     <div class="point">
-        <div class="top">
-            <div class="text1">200</div>
+        <div class="point-card">
+            <div class="card-top">
+                <div class="text1">绿洲石</div>
+                <div class="text2">
+                    <span>{{ balance }}</span>
+                    <span>个</span>
+                </div>
+                <img src="@assets/png-bg.png" alt="" />
+            </div>
+            <div class="card-bottom" @click="$router.push('/shop?active=1')">
+                <img src="@assets/icon_inter1.png" alt="" />
+                <span>去商城兑换好物</span>
+                <img src="@assets/icon_inter2.png" alt="" />
+            </div>
         </div>
-        <div class="van-list">
+        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
             <div class="title">交易记录</div>
-            <div class="point-item">
+            <div class="point-item" v-for="(item, index) in list" :key="index">
                 <div class="text1">
-                    <span>兑换青铜通行证</span>
-                    <span>-100</span>
+                    <span>兑换{{ getLabelName(item.type, requireTicketOptions) }}</span>
+                    <span>-{{ item.totalPrice }}</span>
                 </div>
                 <div class="text2">
-                    <span>编号:787383737883737883737</span>
-                    <span> 07-05 14:56</span>
+                    <span>编号:{{ item.id }}</span>
+                    <span> {{ getTime(item.payAt) }}</span>
                 </div>
             </div>
-        </div>
+        </van-list>
     </div>
 </template>
 
 <script>
-export default {};
+import list from '../../mixins/list';
+import room from '../../mixins/room.js';
+export default {
+    data() {
+        return {
+            balance: 0,
+            url: '/ticketOrder/all'
+        };
+    },
+    mixins: [list, room],
+    mounted() {
+        this.$http.get('/user/myBalance').then(res => {
+            this.balance = res.balance;
+        });
+    },
+    methods: {
+        beforeData() {
+            return {
+                query: {
+                    userId: this.$store.state.userInfo.id,
+                    payMethod: 'BALANCE'
+                }
+            };
+        },
+        getTime(time) {
+            return this.dayjs(time).format('MM-DD HH:mm');
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>
@@ -66,4 +106,62 @@ export default {};
         color: #6a6d83;
     }
 }
+.point-item + .point-item {
+    margin-top: 16px;
+}
+.point-card {
+    background-color: #5176eb;
+    border-radius: 8px;
+    overflow: hidden;
+    .card-top {
+        padding: 16px;
+        position: relative;
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 24px;
+        }
+        .text2 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 14px;
+            margin-top: 21px;
+            span {
+                &:first-child {
+                    font-size: 40px;
+                    font-family: OSP-DIN, OSP;
+                    font-weight: normal;
+                    line-height: 30px;
+                    margin-right: 4px;
+                }
+            }
+        }
+        img {
+            width: 166px;
+            height: 98px;
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+    }
+
+    .card-bottom {
+        height: 40px;
+
+        background: rgba(38, 57, 177, 0.4);
+        .flex();
+        justify-content: center;
+        img {
+            width: 24px;
+            height: 24px;
+            display: block;
+        }
+        span {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.5);
+            line-height: 24px;
+            margin: 0 4px;
+        }
+    }
+}
 </style>