电竞

src/components/PayMethodPick.vue

@@ -60,16 +60,16 @@ export default {
                     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'
                 }
+                // {
+                //     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'),

src/components/TicketBuy.vue

@@ -76,28 +76,29 @@ export default {
                 this.$toast('请选择购买方式');
                 return;
             }
-            this.$toast.loading({
-                message: '加载中...',
-                forbidClick: true
-            });
+            this.$toast('暂不支持该付款方式');
+            // this.$toast.loading({
+            //     message: '加载中...',
+            //     forbidClick: true
+            // });
 
-            this.$http
-                .post('/ticketOrder/create', {
-                    type: this.info.type,
-                    qty: this.qty
-                })
-                .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);
-                });
+            // this.$http
+            //     .post('/ticketOrder/create', {
+            //         type: this.info.type,
+            //         qty: this.qty
+            //     })
+            //     .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);
+            //     });
         }
     }
 };

src/components/product/productInfo.vue

@@ -1,19 +1,14 @@
 <template>
-    <div class="product-info" :class="{ prim: isChoose }">
-        <van-image
-            width="calc(50vw - 24px)"
-            height="calc(50vw - 24px)"
-            fit="cover"
-            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-        />
+    <div class="product-info" :class="{ prim: isChoose }" @click.stop="choose">
+        <van-image width="calc(50vw - 26px)" height="calc(50vw - 26px)" radius="2" fit="cover" :src="info.pic" />
         <!-- <img src="@assets/fire3.gif" style="width: 32px; height: 108px" alt="" /> -->
         <div class="content">
-            <div class="text1">PFA FOR RAEX ONPFA FOR RAEX ON</div>
+            <div class="text1">{{ info.name }}</div>
             <div class="text2">
-                <span>100</span>
+                <span>{{ info.price }}</span>
                 <span>个绿洲石</span>
             </div>
-            <div class="text3">已兑164次</div>
+            <div class="text3">已兑{{ info.sale }}次</div>
         </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="" />
@@ -26,6 +21,17 @@ export default {
         isChoose: {
             type: Boolean,
             default: false
+        },
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    methods: {
+        choose() {
+            this.$emit('choose', this.info.id);
         }
     }
 };
@@ -40,6 +46,8 @@ export default {
     display: inline-block;
     margin: 8px;
     position: relative;
+    padding: 1px;
+    box-sizing: border-box;
     .choose-icon {
         width: 36px;
         height: 36px;

src/mixins/list.js

@@ -6,7 +6,8 @@ export default {
             finished: false,
             page: 0,
             totalElements: 0,
-            size: 20
+            size: 20,
+            listKey: 'content'
         };
     },
     methods: {
@@ -33,10 +34,16 @@ export default {
                     if (res.first) {
                         this.list = [];
                     }
-                    this.list = [...this.list, ...res.content];
                     this.empty = res.empty;
-                    this.loading = false;
                     this.finished = res.last;
+                    if (this.listKey) {
+                        this.list = [...this.list, ...res[this.listKey]];
+                    } else {
+                        this.list = [...this.list, ...res];
+                        this.empty = this.list.length === 0;
+                        this.finished = true;
+                    }
+                    this.loading = false;
                     if (!this.finished) {
                         this.page = this.page + 1;
                     }
@@ -47,10 +54,17 @@ export default {
                     if (res.first) {
                         this.list = [];
                     }
-                    this.list = [...this.list, ...res.content];
                     this.empty = res.empty;
-                    this.loading = false;
                     this.finished = res.last;
+                    if (this.listKey) {
+                        this.list = [...this.list, ...res[this.listKey]];
+                    } else {
+                        this.list = [...this.list, ...res];
+                        this.empty = this.list.length === 0;
+                        this.finished = true;
+                    }
+                    this.empty = res.empty;
+                    this.loading = false;
                     if (!this.finished) {
                         this.page = this.page + 1;
                     }

src/router/index.js

@@ -280,25 +280,25 @@ const routes = [
         }
     },
     {
-        path: '/exceptionLogs',
-        name: 'exceptionLogs',
-        component: () => import('../views/user/ExceptionLogs.vue'),
+        path: '/reports',
+        name: 'reports',
+        component: () => import('../views/user/Reports.vue'),
         meta: {
             title: '异常申报纪录'
         }
     },
     {
-        path: '/exceptionLog',
-        name: 'exceptionLog',
-        component: () => import('../views/user/ExceptionLog.vue'),
+        path: '/report',
+        name: 'report',
+        component: () => import('../views/user/Report.vue'),
         meta: {
             title: '反馈纪录'
         }
     },
     {
-        path: '/exceptionLogAdd',
-        name: 'exceptionLogAdd',
-        component: () => import('../views/user/ExceptionLogAdd.vue'),
+        path: '/reportAdd',
+        name: 'reportAdd',
+        component: () => import('../views/user/ReportAdd.vue'),
         meta: {
             title: '异常申报'
         }

src/views/ExchangeCollection.vue

@@ -1,17 +1,11 @@
 <template>
     <div class="exchange">
         <div class="collection">
-            <van-image
-                width="80"
-                height="80"
-                radius="4"
-                fit="cover"
-                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-            />
+            <van-image width="80" height="80" radius="4" fit="cover" :src="info.pic" />
             <div class="collection-info">
-                <div class="text1 van-multi-ellipsis--l2">PFA FOR RAEX ON</div>
+                <div class="text1 van-multi-ellipsis--l2">{{ info.name }}</div>
                 <div class="text2">
-                    <span>100</span>
+                    <span>{{ info.price }}</span>
                     <span>个绿洲石</span>
                 </div>
             </div>
@@ -32,20 +26,71 @@
 
         <div class="bottom">
             <div class="price">
-                <span>100</span>
+                <span>{{ info.price }}</span>
                 <span>个绿洲石</span>
             </div>
-            <van-button type="primary">立即兑换</van-button>
+            <van-button type="primary" @click="submit">立即兑换</van-button>
         </div>
     </div>
 </template>
 
 <script>
+import phone from '../mixins/phone';
 export default {
     data() {
         return {
-            phone: ''
+            phone: '',
+            exchangeItemId: 0,
+            info: {}
         };
+    },
+    mounted() {
+        if (this.$route.query.exchangeItemId) {
+            this.exchangeItemId = this.$route.query.exchangeItemId;
+        }
+        this.getDetail();
+    },
+    mixins: [phone],
+    methods: {
+        getDetail() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http.get('/exchangeItem/get/' + this.exchangeItemId).then(res => {
+                this.info = res;
+                this.$toast.clear();
+            });
+        },
+        submit() {
+            if (!this.phone) {
+                this.$toast('手机号不能为空!');
+                return;
+            }
+            if (!this.phonePattern.test(this.phone)) {
+                this.$toast('手机号格式错误');
+                return;
+            }
+
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http
+                .post('/exchangeOrder/create', {
+                    itemId: this.exchangeItemId,
+                    phone: this.phone
+                })
+                .then(res => {
+                    this.$toast.success('兑换成功');
+                    setTimeout(() => {
+                        this.$router.go(-1);
+                    }, 1000);
+                })
+                .catch(e => {
+                    this.$toast(e.error);
+                });
+        }
     }
 };
 </script>

src/views/Mine.vue

@@ -69,7 +69,11 @@
                     :icon="require('@assets/icon_guanlianzhanghu.png')"
                     text="关联账户"
                 />
-                <van-grid-item :icon="require('@assets/icon-zhanghugauanli.png')" text="账户管理" />
+                <van-grid-item
+                    :to="{ path: '/reports' }"
+                    :icon="require('@assets/icon-shenbaojil.png')"
+                    text="申报记录"
+                />
                 <van-grid-item :icon="require('@assets/icon_guanyuwomen.png')" text="关于我们" />
                 <van-grid-item
                     :to="{ path: '/security' }"

src/views/Room.vue

@@ -129,7 +129,7 @@
                     <img src="@assets/png-xiugaidizhi.png" alt="" />
                     <span>查看战绩</span>
                 </div>
-                <div class="btn" @click="$router.push('/exceptionLogAdd?roomId=' + roomId)">
+                <div class="btn" @click="$router.push('/reportAdd?roomId=' + roomId)">
                     <img src="@assets/png-yicangshenbao.png" alt="" />
                     <span>异常申报</span>
                 </div>

src/views/RoomResult.vue

@@ -1,34 +1,192 @@
 <template>
     <div class="result">
-        <img class="topBg" src="@assets/png-depeat-bg.png" alt="" />
+        <img
+            class="topBg"
+            :src="isWin ? require('@assets/png-victory-bg.png') : require('@assets/png-depeat-bg.png')"
+            alt=""
+        />
 
-        <div class="topBox" :style="{ top: barHeight + 'px' }">
-            <div class="top-info">
+        <div class="topBox" :class="{ win: isWin }" :style="{ top: barHeight + 'px' }">
+            <div class="top-info" v-if="isWin">
+                <div class="text1">victory</div>
+                <div class="text2">比赛胜利</div>
+                <!-- <div class="text3">
+                    <span>赢得</span>
+                    <span></span>
+                    <span>绿洲石</span>
+                </div> -->
+            </div>
+            <div class="top-info" v-else>
                 <div class="text1">defeat</div>
                 <div class="text2">比赛失败</div>
                 <div class="text3">无奖励</div>
             </div>
-            <img src="@assets/png-defeat.png" alt="" class="img" />
+            <img
+                :src="isWin ? require('@assets/png-victory.png') : require('@assets/png-defeat.png')"
+                alt=""
+                class="img"
+            />
         </div>
 
         <div class="result-content">
             <div class="result-title">比赛截图</div>
+
+            <div class="teams">
+                <div class="team">
+                    <div class="team-item" v-for="(item, index) in hosts" :key="index">
+                        <div class="tag">主队</div>
+                        <div class="user">
+                            <van-image
+                                :src="item.avatar || require('@assets/img_default_photo.png')"
+                                width="34"
+                                height="34"
+                                fit="cover"
+                            />
+                            <div class="user-info">
+                                <div class="text1">{{ item.nickname }}</div>
+                                <div class="text2">UID:{{ item.userId }}</div>
+                            </div>
+                        </div>
+                        <van-image
+                            v-if="item.screenShot"
+                            :src="item.screenShot"
+                            class="screen"
+                            width="100%"
+                            fit="scale-down"
+                            @click="preview(item.screenShot)"
+                        />
+                        <div class="not" v-else>
+                            <img src="@assets/png-weishangchuan.png" alt="" />
+                            <div>未上传</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="team guest">
+                    <div class="team-item" v-for="(item, index) in guests" :key="index">
+                        <div class="tag">客队</div>
+                        <div class="user">
+                            <van-image
+                                :src="item.avatar || require('@assets/img_default_photo.png')"
+                                width="34"
+                                height="34"
+                                fit="cover"
+                            />
+                            <div class="user-info">
+                                <div class="text1">{{ item.nickname }}</div>
+                                <div class="text2">UID:{{ item.userId }}</div>
+                            </div>
+                        </div>
+                        <van-image
+                            v-if="item.screenShot"
+                            :src="item.screenShot"
+                            @click="preview(item.screenShot)"
+                            class="screen"
+                            width="100%"
+                            fit="scale-down"
+                        />
+                        <div class="not" v-else>
+                            <img src="@assets/png-weishangchuan.png" alt="" />
+                            <div>未上传</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
+import { ImagePreview } from 'vant';
 export default {
     inject: ['barHeight'],
     data() {
         return {
-            roomId: 0
+            roomId: 0,
+            results: [],
+            players: []
         };
     },
+    computed: {
+        isWin() {
+            return this.mine.status === 'WIN';
+        },
+        hosts() {
+            let results = [...this.results];
+            let players = [...this.players];
+            return results
+                .filter(item => {
+                    return item.team === 'host';
+                })
+                .map(item => {
+                    let info = players.find(player => {
+                        return player.userId === item.userId;
+                    });
+                    return {
+                        ...info,
+                        ...item
+                    };
+                });
+        },
+        guests() {
+            let results = [...this.results];
+            let players = [...this.players];
+            return results
+                .filter(item => {
+                    return item.team === 'guest';
+                })
+                .map(item => {
+                    let info = players.find(player => {
+                        return player.userId === item.userId;
+                    });
+                    return {
+                        ...info,
+                        ...item
+                    };
+                });
+        },
+        mine() {
+            let results = [...this.results];
+            let info = results.find(item => {
+                return item.userId === this.$store.state.userInfo.id;
+            });
+            return info || {};
+        }
+    },
     mounted() {
         if (this.$route.query.roomId) {
             this.roomId = this.$route.query.roomId;
         }
+        this.$http
+            .get('/room/detail/' + this.roomId)
+            .then(res => {
+                this.players = res.players;
+            })
+            .catch(e => {
+                if (e && e.error) {
+                    this.$toast(e.error);
+                }
+            });
+        this.$http
+            .post(
+                '/joinRoom/all',
+                {
+                    query: {
+                        roomId: this.roomId
+                    }
+                },
+                { body: 'json' }
+            )
+            .then(res => {
+                this.results = res.content;
+            });
+    },
+    methods: {
+        preview(img) {
+            ImagePreview({
+                images: [img],
+                startPosition: 0
+            });
+        }
     }
 };
 </script>
@@ -36,6 +194,8 @@ export default {
 <style lang="less" scoped>
 .result {
     background-color: #fff;
+    position: relative;
+    padding-bottom: 80px;
 }
 .topBg {
     width: 100%;
@@ -94,4 +254,89 @@ export default {
         padding: 0 4px;
     }
 }
+
+.teams {
+    .flex();
+    padding: 16px 0;
+    justify-content: space-between;
+    align-items: flex-start;
+    .team {
+        width: calc(50% - 8px);
+
+        .team-item {
+            background: rgba(255, 123, 59, 0.1);
+            border-radius: 4px;
+            padding: 34px 10px;
+            position: relative;
+            .user {
+                .flex();
+
+                .user-info {
+                    flex-grow: 1;
+                    margin-left: 8px;
+                    .text1 {
+                        font-size: 14px;
+                        font-weight: bold;
+                        color: #000000;
+                        line-height: 24px;
+                    }
+                    .text2 {
+                        font-size: 12px;
+                        color: #c2c2c2;
+                        line-height: 17px;
+                    }
+                }
+            }
+
+            .screen {
+                margin-top: 17px;
+            }
+
+            .tag {
+                font-size: 12px;
+                font-weight: bold;
+                background: #ff7b3b;
+                border-radius: 4px 0px 4px 0px;
+                position: absolute;
+                top: 0;
+                left: 0;
+                padding: 0 10px;
+            }
+        }
+
+        .team-item + .team-item {
+            margin-top: 20px;
+        }
+
+        &.guest {
+            .team-item {
+                background: rgba(88, 178, 255, 0.1);
+
+                .tag {
+                    background: #58b2ff;
+                }
+            }
+        }
+    }
+}
+
+.not {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
+    .flex-col();
+    align-items: center;
+    justify-content: center;
+    height: 62px;
+    margin-top: 17px;
+    img {
+        width: 24px;
+        height: 24px;
+    }
+    span {
+        font-size: 12px;
+        color: #c2c2c2;
+        line-height: 17px;
+        margin-top: 3px;
+    }
+}
 </style>

src/views/Shop.vue

@@ -1,46 +1,46 @@
 <template>
-    <div class="shop">
-        <van-tabs sticky shrink @change="changeTab" v-model:active="active" swipeable :swipe-threshold="2">
-            <van-tab title="通行证购买">
-                <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="通行证兑换">
-                <div class="list">
-                    <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="藏品兑换">
-                <div class="list">
-                    <product-info isChoose></product-info>
-                    <product-info></product-info>
-                    <product-info></product-info>
-                </div>
-            </van-tab>
+    <div class="shop" @click="clear">
+        <van-tabs shrink @change="changeTab" v-model:active="active" :swipe-threshold="2">
+            <van-tab title="通行证购买"> </van-tab>
+            <van-tab title="通行证兑换"> </van-tab>
+            <van-tab title="藏品兑换"> </van-tab>
         </van-tabs>
 
+        <van-list
+            @click="clear"
+            v-model:loading="loading"
+            :immediate-check="false"
+            :finished="finished"
+            finished-text=""
+            @load="getData"
+        >
+            <template v-if="active === 2">
+                <product-info
+                    v-for="(item, index) in list"
+                    @choose="choose"
+                    :key="index"
+                    :info="item"
+                    :isChoose="chooseTicket === item.id"
+                ></product-info>
+            </template>
+            <template v-else>
+                <pass-card
+                    v-for="(item, index) in list"
+                    @choose="choose"
+                    :key="index"
+                    :info="item"
+                    :isChoose="chooseTicket === item.type"
+                    :balance="active === 1"
+                ></pass-card>
+            </template>
+        </van-list>
+
         <div class="bottom" v-if="chooseTicket">
-            <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
-            >
+            <van-button color="#12131E" block v-if="active == 0" @click.stop="buy">确认购买</van-button>
+            <van-button type="primary" block v-else @click.stop="goExchange">确认兑换</van-button>
         </div>
 
-        <ticket-buy ref="buy" :info="ticketInfo"></ticket-buy>
+        <ticket-buy ref="buy" :info="ticketInfo" @click.stop=""></ticket-buy>
     </div>
 </template>
 
@@ -48,14 +48,18 @@
 import PassCard from '../components/PassCard.vue';
 import ProductInfo from '../components/product/productInfo.vue';
 import TicketBuy from '../components/TicketBuy.vue';
+import list from '../mixins/list.js';
 export default {
     data() {
         return {
             active: 0,
             ticketPrices: [],
-            chooseTicket: ''
+            chooseTicket: '',
+            list: [],
+            listKey: ''
         };
     },
+    mixins: [list],
     components: {
         PassCard,
         ProductInfo,
@@ -63,28 +67,55 @@ export default {
     },
     computed: {
         ticketInfo() {
-            let info = [...this.ticketPrices].find(item => {
+            let info = [...this.list].find(item => {
                 return item.type === this.chooseTicket;
             });
 
             return info ? info : {};
+        },
+        url() {
+            if (this.active === 2) {
+                return '/exchangeItem/all';
+            } else {
+                return '/ticketPrice/all';
+            }
         }
     },
     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);
-            });
+        // 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);
+        //     });
         if (this.$route.query.active) {
             this.active = Number(this.$route.query.active);
+            if (this.active == 2) {
+                this.listKey = 'content';
+            } else {
+                this.listKey = '';
+            }
         }
+        this.$nextTick(() => {
+            this.getData(true);
+        });
     },
     methods: {
+        goExchange() {
+            if (this.active === 1) {
+                this.$router.push('/exchange?ticket=' + this.chooseTicket);
+            } else {
+                this.$router.push('/exchangeCollection?exchangeItemId=' + this.chooseTicket);
+            }
+        },
+        beforeData() {
+            return {
+                query: { del: false }
+            };
+        },
         choose(type) {
             this.chooseTicket = type;
         },
@@ -95,6 +126,12 @@ export default {
                     active: this.active
                 }
             });
+            if (this.active == 2) {
+                this.listKey = 'content';
+            } else {
+                this.listKey = '';
+            }
+            this.getData(true);
         },
         clear() {
             this.chooseTicket = '';
@@ -113,15 +150,15 @@ export default {
         justify-content: space-between;
     }
 
-    /deep/.van-swipe__track {
-        min-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 94px);
-    }
+    // /deep/.van-swipe__track {
+    //     min-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 94px);
+    // }
 }
 
 .list {
     padding: 8px;
     .bottom(50px);
-    min-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 94px);
+    // min-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 94px);
     box-sizing: border-box;
 }
 

src/views/user/Collections.vue

@@ -1,25 +1,30 @@
 <template>
     <div class="page">
-        <div class="collection-info">
-            <van-image
-                width="64"
-                height="64"
-                radius="4px"
-                fit="cover"
-                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-            />
-            <div class="collection-content">
-                <div class="text1">藏品名称藏品名称</div>
-                <div class="text2">兑换账户:188617287287</div>
-                <div class="text2">消耗绿洲石:200个</div>
+        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
+            <div class="collection-info" v-for="(item, index) in list" :key="index">
+                <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>
+                <div class="status">已发放</div>
             </div>
-            <div class="status">已发放</div>
-        </div>
+        </van-list>
     </div>
 </template>
 
 <script>
-export default {};
+import list from '../../mixins/list';
+export default {
+    mixins: [list],
+    data() {
+        return {
+            url: '/exchangeOrder/all'
+        };
+    },
+    methods: {}
+};
 </script>
 
 <style lang="less" scoped>
@@ -61,4 +66,7 @@ export default {};
         right: 0;
     }
 }
+.collection-info + .collection-info {
+    margin-top: 16px;
+}
 </style>

src/views/user/ExceptionLog.vue

@@ -1,9 +0,0 @@
-<template>
-    <div></div>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style lang="less" scoped></style>

src/views/user/ExceptionLogs.vue

@@ -1,9 +0,0 @@
-<template>
-    <div></div>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style lang="less" scoped></style>

src/views/user/Pass.vue

@@ -1,15 +1,7 @@
 <template>
     <div class="pass">
         <van-sticky :offset-top="barHeight">
-            <van-tabs
-                swipeable
-                v-model:active="active"
-                @change="changeTab"
-                shrink
-                line-width="34"
-                line-height="2"
-                scrollspy
-            >
+            <van-tabs v-model:active="active" @change="changeTab" shrink line-width="34" line-height="2">
                 <van-tab title="未使用"> </van-tab>
                 <van-tab title="已使用"></van-tab>
                 <van-tab title="已过期"></van-tab>
@@ -40,7 +32,7 @@ export default {
     mixins: [list],
     components: { passInfo },
     mounted() {
-        this.emitter.emit('setRightBar', { text: '明细', path: '/userPassList' });
+        // this.emitter.emit('setRightBar', { text: '明细', path: '/userPassList' });
     },
     methods: {
         beforeData() {

src/views/user/PassList.vue

@@ -1,25 +1,54 @@
 <template>
-    <div class="van-list">
-        <div class="pass-info" v-for="i in 5" :key="i">
+    <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
+        <div class="pass-info" v-for="(item, index) in list" :key="index">
             <div class="pass-title">
-                <div class="title">支付宝购买</div>
-                <div class="time">2022-7-5</div>
+                <div class="title">{{ getLabelName(item.payMethod, payMethodOptions) }}</div>
+                <div class="time">{{ item.payAt }}</div>
             </div>
             <div class="pass-box">
-                <van-image width="136" height="64" :src="require('@assets/qingtong.png')" fit="cover" />
+                <van-image width="136" height="64" :src="getLevelInfo(item).img" fit="cover" />
                 <div class="pass-content">
-                    <div class="text1">青铜通行证</div>
+                    <div class="text1">{{ getLevelInfo(item).label }}</div>
                     <div class="flex1"></div>
                     <div class="text2">编号:78738373788</div>
                     <div class="text2">到期时间:2022-7-20</div>
                 </div>
             </div>
         </div>
-    </div>
+    </van-list>
 </template>
 
 <script>
-export default {};
+import list from '../../mixins/list.js';
+import room from '../../mixins/room';
+export default {
+    data() {
+        return {
+            url: '/userTicket/my',
+            payMethodOptions: [
+                { label: '微信', value: 'WECHAT' },
+                { label: '支付宝', value: 'ALIPAY' },
+                { label: '余额', value: 'BALANCE' }
+            ]
+        };
+    },
+    mixins: [list, room],
+    methods: {
+        beforeData() {
+            return {
+                query: {
+                    del: false
+                }
+            };
+        },
+        getLevelInfo(info) {
+            let _info = [...this.requireTicketOptions].find(item => {
+                return info.type === item.value;
+            });
+            return _info || {};
+        }
+    }
+};
 </script>
 <style lang="less" scoped>
 .van-list {

src/views/user/Report.vue

@@ -0,0 +1,20 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            reportId: 0
+        };
+    },
+    mounted() {
+        if (this.$route.query.reportId) {
+            this.reportId = this.$route.query.reportId;
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/user/ExceptionLogAdd.vue → src/views/user/ReportAdd.vue

@@ -6,7 +6,7 @@
                 name="问题描述"
                 label="问题描述"
                 placeholder="请详细说明，以便于我们解决问题，您最多可填300字。"
-                v-model="form.detail"
+                v-model="form.content"
                 clearable
                 rows="4"
                 autosize
@@ -57,12 +57,18 @@ export default {
     data() {
         return {
             form: {
-                detail: '',
+                content: '',
                 pic: []
             },
-            show: false
+            show: false,
+            roomId: 0
         };
     },
+    mounted() {
+        if (this.$route.query.roomId) {
+            this.roomId = this.$route.query.roomId;
+        }
+    },
     methods: {
         submit() {
             this.$toast.loading({
@@ -70,11 +76,13 @@ export default {
                 forbidClick: true
             });
             let form = { ...this.form };
+            form.roomId = this.roomId;
+
             form.pic = form.pic.map(item => {
                 return item.url;
             });
             this.$http
-                .post('/message/create', form, { body: 'json' })
+                .post('/report/create', form)
                 .then(res => {
                     this.$toast.clear();
                     this.$dialog
@@ -148,7 +156,7 @@ export default {
 }
 
 .bottom {
-    padding: 9px 52px;
+    padding: 9px 28px;
     .bottom(9px);
     position: fixed;
     left: 0;

src/views/user/Reports.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="report">
+        <van-sticky :offset-top="barHeight">
+            <van-tabs
+                swipeable
+                v-model:active="active"
+                @change="changeTab"
+                shrink
+                line-width="28"
+                line-height="2"
+                scrollspy
+            >
+                <van-tab title="全部"> </van-tab>
+                <van-tab title="待反馈"></van-tab>
+                <van-tab title="已反馈"></van-tab>
+            </van-tabs>
+        </van-sticky>
+        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
+            <div class="report-info" v-for="(item, index) in list" :key="index" @click="goDetail(item.id)">
+                <div class="report-top">
+                    <div class="status">{{ getLabelName(item.status, statusOptions) }}</div>
+                    <div class="text1">{{ item.title }}</div>
+                </div>
+                <div class="time">提交时间:{{ item.createdAt }}</div>
+            </div>
+            <van-empty
+                v-if="empty"
+                description="当前没有申报纪录哦～"
+                :image="require('../../assets/kong-pimg-zhanji.png')"
+            />
+        </van-list>
+    </div>
+</template>
+
+<script>
+import list from '../../mixins/list.js';
+export default {
+    data() {
+        return {
+            active: 0,
+            url: '/report/my',
+            httpType: 'get',
+            statusOptions: [
+                { label: '待反馈', value: 'OPEN' },
+                { label: '已反馈', value: 'CLOSED' }
+            ]
+        };
+    },
+    inject: ['barHeight'],
+    mixins: [list],
+    methods: {
+        changeTab() {
+            this.$nextTick(() => {
+                this.getData(true);
+            });
+        },
+        goDetail(id) {
+            this.$router.push({
+                path: '/report',
+                query: {
+                    reportId: id
+                }
+            });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+/deep/.van-tabs__nav {
+    padding: 0 0 14px;
+    justify-content: space-between;
+}
+/deep/.van-tab {
+    padding: 0 16px;
+}
+.van-list {
+    padding: 16px;
+}
+
+.report-info {
+    background: #25283d;
+    border-radius: 8px;
+    padding: 12px 10px;
+
+    .report-top {
+        .flex();
+        overflow: hidden;
+        .status {
+            font-size: 12px;
+            color: #ffce2d;
+            line-height: 20px;
+            border-radius: 4px;
+            border: 1px solid #ffce2d;
+            padding: 0 10px;
+            margin-right: 10px;
+            flex-shrink: 0;
+        }
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 24px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .time {
+        font-size: 12px;
+        color: #6a6d83;
+        line-height: 17px;
+        margin-top: 10px;
+    }
+}
+
+.report-info + .report-info {
+    margin-top: 16px;
+}
+</style>