.

src/components/AppBar.vue

@@ -32,6 +32,10 @@
         <template #title>
             <span class="title" :style="{ color: fontColor || $colors.font0 }">{{ title }}</span>
         </template>
+
+        <template #right>
+            <span class="bar-right" @click="goNext(rightInfo.path)">{{ rightInfo.text }}</span>
+        </template>
     </van-nav-bar>
 </template>
 
@@ -45,7 +49,11 @@ export default {
             show: false,
             showPopover: false,
             tabColor: '',
-            title: ''
+            title: '',
+            rightInfo: {
+                text: '',
+                path: ''
+            }
         };
     },
     computed: {
@@ -75,6 +83,10 @@ export default {
     },
     watch: {
         $route() {
+            this.rightInfo = {
+                text: '',
+                path: ''
+            };
             if (this.$route.meta.menuPage) {
                 this.show = false;
             } else {
@@ -105,6 +117,9 @@ export default {
         }
         this.getColor();
         this.setTitle();
+        this.emitter.on('setRightBar', info => {
+            this.rightInfo = info;
+        });
     },
     methods: {
         setTitle(title) {
@@ -160,6 +175,11 @@ export default {
             // setTimeout(() => {
             //     this.$router.push({ path: '/' });
             // }, 500);
+        },
+        goNext(path) {
+            if (path) {
+                this.$router.push(path);
+            }
         }
     }
 };
@@ -177,6 +197,8 @@ export default {
         line-height: initial !important;
     }
 }
+</style>
+<style lang="less" scoped>
 .back {
     padding-right: 12px;
 }
@@ -184,4 +206,9 @@ export default {
     font-size: 16px;
     font-weight: bold;
 }
+.bar-right {
+    font-size: 14px;
+    color: #6a6d83;
+    line-height: 24px;
+}
 </style>

src/router/index.js

@@ -116,6 +116,46 @@ const routes = [
             title: '兑换详情'
         }
     },
+    {
+        path: '/exchangeCollection',
+        name: 'exchangeCollection',
+        component: () => import('../views/ExchangeCollection.vue'),
+        meta: {
+            title: '藏品兑换'
+        }
+    },
+    {
+        path: '/userPoint',
+        name: 'userPoint',
+        component: () => import('../views/user/Point.vue'),
+        meta: {
+            title: '绿洲石'
+        }
+    },
+    {
+        path: '/userPass',
+        name: 'userPass',
+        component: () => import('../views/user/Pass.vue'),
+        meta: {
+            title: '通行证'
+        }
+    },
+    {
+        path: '/userPassList',
+        name: 'userPassList',
+        component: () => import('../views/user/PassList.vue'),
+        meta: {
+            title: '通行证明细'
+        }
+    },
+    {
+        path: '/records',
+        name: 'records',
+        component: () => import('../views/user/Records.vue'),
+        meta: {
+            title: '我的战绩'
+        }
+    },
     {
         path: '/login',
         name: 'userLogin',
@@ -186,12 +226,18 @@ const routes = [
     {
         path: '/setting',
         name: 'userSetting',
-        component: () => import('../views/account/Setting.vue')
+        component: () => import('../views/account/Setting.vue'),
+        meta: {
+            title: '编辑资料'
+        }
     },
     {
         path: '/changeText',
         name: 'userChangeText',
-        component: () => import('../views/account/ChangeText.vue')
+        component: () => import('../views/account/ChangeText.vue'),
+        meta: {
+            title: '修改昵称'
+        }
     },
     // {
     //     path: '/waiting',

src/styles/app.less

@@ -57,6 +57,7 @@
     --van-stepper-background-color: #ffffff;
     --van-stepper-input-line-height: 24px;
     --van-stepper-input-height: 24px;
+    --van-field-clear-icon-color: #6a6d83;
 }
 
 [contenteditable='true'],

src/views/Exchange.vue

@@ -120,5 +120,22 @@ export default {
     .van-button {
         width: 160px;
     }
+
+    .price {
+        color: #ffe3a3;
+        font-weight: bold;
+
+        span {
+            &:first-child {
+                font-size: 20px;
+                line-height: 24px;
+            }
+            &:nth-child(2) {
+                font-size: 12px;
+                line-height: 20px;
+                margin-left: 2px;
+            }
+        }
+    }
 }
 </style>

src/views/ExchangeCollection.vue

@@ -0,0 +1,141 @@
+<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"
+            />
+            <div class="collection-info">
+                <div class="text1 van-multi-ellipsis--l2">PFA FOR RAEX ON</div>
+                <div class="text2">
+                    <span>100</span>
+                    <span>个绿洲石</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="account">
+            <div class="account-title">兑换账号</div>
+            <van-field
+                type="tel"
+                input-align="center"
+                label-width="0"
+                placeholder="请输入该账户注册的手机号"
+                v-model="phone"
+                maxlength="11"
+                clearable
+            />
+        </div>
+
+        <div class="bottom">
+            <div class="price">
+                <span>100</span>
+                <span>个绿洲石</span>
+            </div>
+            <van-button type="primary">立即兑换</van-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            phone: ''
+        };
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.exchange {
+    padding: 16px;
+}
+.collection {
+    .flex();
+    padding: 12px;
+    background-color: @bg2;
+    align-items: stretch;
+}
+.collection-info {
+    flex-grow: 1;
+    .flex-col();
+    justify-content: space-between;
+    margin-left: 12px;
+    .text1 {
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 24px;
+    }
+
+    .text2 {
+        span {
+            color: #ffffff;
+            &:first-child {
+                font-size: 16px;
+                font-weight: bold;
+                line-height: 24px;
+            }
+
+            &:nth-child(2) {
+                font-size: 12px;
+                line-height: 24px;
+                margin-left: 2px;
+            }
+        }
+    }
+}
+
+.account {
+    .flex-col();
+    align-items: center;
+
+    .account-title {
+        font-size: 16px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 24px;
+        padding: 30px 0 12px;
+    }
+
+    .van-field {
+        background-color: @bg2;
+    }
+}
+
+.bottom {
+    background: #141624;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 9px 26px;
+    .bottom(9px);
+    justify-content: space-between;
+    .flex();
+    z-index: 20;
+    .van-button {
+        width: 160px;
+    }
+
+    .price {
+        color: #ffe3a3;
+        font-weight: bold;
+
+        span {
+            &:first-child {
+                font-size: 20px;
+                line-height: 24px;
+            }
+            &:nth-child(2) {
+                font-size: 12px;
+                line-height: 20px;
+                margin-left: 2px;
+            }
+        }
+    }
+}
+</style>

src/views/Mine.vue

@@ -4,7 +4,7 @@
             <img src="@assets/userBg.png" alt="" />
         </div>
         <div :style="{ paddingTop: safeTopNum ? `calc(${safeTopNum}px + 32px)` : '64px' }">
-            <div class="user-info" v-if="isLogin">
+            <div class="user-info" v-if="isLogin" @click="$router.push('/setting')">
                 <van-image width="58" height="58" radius="4" :src="userInfo.avatar" fit="cover" />
                 <div class="user-text">
                     <div class="text1">
@@ -35,18 +35,18 @@
         </div>
 
         <div class="menu-list">
-            <div class="menu-card">
+            <div class="menu-card" @click="$router.push('/userPoint')">
                 <div class="text1">200</div>
                 <div class="text2">绿洲石</div>
             </div>
-            <div class="menu-card">
+            <div class="menu-card" @click="$router.push('/userPass')">
                 <div class="text1">1</div>
                 <div class="text2">通行证</div>
             </div>
         </div>
 
         <div class="order-list">
-            <div class="order-item">
+            <div class="order-item" @click="$router.push('/records')">
                 <img src="@assets/icon_zhanji.png" alt="" />
                 <span>我的战绩</span>
             </div>

src/views/account/ChangeText.vue

@@ -1,25 +1,9 @@
 <template>
     <div class="change">
-        <div class="title">{{ type === 'nickname' ? '昵称' : '简介' }}</div>
-        <van-field
-            v-model="message"
-            :rows="type === 'nickname' ? 1 : 4"
-            type="textarea"
-            :maxlength="type === 'nickname' ? 10 : 50"
-            :placeholder="type === 'nickname' ? '请输入昵称' : '请添加介绍，让大家了解你'"
-            show-word-limit
-            clearable
-        />
+        <van-field v-model="message" :rows="1" :maxlength="10" placeholder="请输入昵称" clearable />
+        <div class="tips">最多12个字符，仅可使用中文，英文，数字，下划线</div>
         <div class="btn">
-            <van-button
-                type="primary"
-                block
-                round
-                :disabled="!message"
-                :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
-                @click="save"
-                >保存</van-button
-            >
+            <van-button type="primary" block round :disabled="!message" @click="save">保存</van-button>
         </div>
     </div>
 </template>
@@ -59,6 +43,18 @@ export default {
     padding: 23px 16px;
 }
 .btn {
-    padding: 100px 50px;
+    padding: 100px 12px;
+}
+.change {
+    padding: 16px;
+}
+.van-cell {
+    background-color: @bg2;
+}
+.tips {
+    font-size: 12px;
+    color: #6a6d83;
+    line-height: 24px;
+    padding: 10px 0;
 }
 </style>

src/views/account/Setting.vue

@@ -1,14 +1,12 @@
 <template>
     <div class="setting">
-        <div class="tabs">编辑资料</div>
-
         <van-cell-group :border="false">
             <van-cell title="头像" is-link>
                 <template #value>
                     <van-image
-                        round
-                        width="36"
-                        height="36"
+                        radius="4"
+                        width="38"
+                        height="38"
                         :src="userInfo.avatar || require('@assets/svgs/img_default_photo.svg')"
                         fit="cover"
                     />
@@ -22,26 +20,7 @@
                 is-link
                 :value="userInfo.nickname"
             />
-            <van-cell
-                title="性别"
-                :class="{ not: !userInfo.sex }"
-                is-link
-                :value="userInfo.sex || '未设置'"
-                @click="show = true"
-            />
-            <van-cell
-                title="简介"
-                :class="[userInfo.intro ? 'intro' : 'not']"
-                @click="$router.push('/changeText?type=intro')"
-                is-link
-                :value="userInfo.intro || '请添加介绍'"
-            />
-            <van-cell title="主页背景" class="not" is-link>
-                <template #value>
-                    <span> 更换背景图片</span>
-                    <van-uploader class="avatar" :after-read="afterRead2" result-type="file" />
-                </template>
-            </van-cell>
+            <van-cell title="实名认证" @click="goAuth" is-link :value="authStatus" />
             <van-cell class="not" title="用户ID" :value="userInfo.id" @click="showConsoleEve" />
             <van-cell class="not" v-if="showConsole" title="审核版本" is-link @click="goReview" />
             <van-cell class="not" v-if="showConsole" title="测试app" is-link @click="goTest" />
@@ -131,6 +110,17 @@ export default {
         },
         goTest() {
             window.location.href = 'https://test.raex.vip/9th/home';
+        },
+        goAuth() {
+            if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
+                this.$router.push('/waiting');
+            } else if (this.authStatus === '未认证') {
+                if (this.faceAuth) {
+                    this.$router.push('/faceAuth');
+                } else {
+                    this.$router.push('/verified');
+                }
+            }
         }
     }
 };
@@ -171,7 +161,7 @@ export default {
     .van-cell__value {
         span {
             font-size: 16px;
-            color: @text0;
+            color: #ffffff;
             line-height: 24px;
         }
     }

src/views/user/Pass.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="pass">
+        <van-tabs sticky swipeable v-model:active="active" shrink line-width="34" line-height="2" scrollspy>
+            <van-tab title="未使用">
+                <div class="van-list">
+                    <div class="pass-info">
+                        <van-image width="136" height="64" :src="require('@assets/qingtong.png')" fit="cover" />
+                        <div class="pass-content">
+                            <div class="text1">青铜通行证</div>
+                            <div class="flex1"></div>
+                            <div class="text2">编号:78738373788</div>
+                            <div class="text2">到期时间:2022-7-20</div>
+                        </div>
+                    </div>
+                </div>
+            </van-tab>
+            <van-tab title="已使用">内容 2</van-tab>
+            <van-tab title="已过期">内容 3</van-tab>
+        </van-tabs>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            active: 0
+        };
+    },
+    mounted() {
+        this.emitter.emit('setRightBar', { text: '明细', path: '/userPassList' });
+    }
+};
+</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;
+}
+.pass-info {
+    .flex();
+    background-color: @bg2;
+    border-radius: 4px;
+    padding: 12px;
+    .pass-content {
+        margin-left: 10px;
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 24px;
+        }
+
+        .text2 {
+            font-size: 12px;
+            color: #6a6d83;
+            line-height: 17px;
+        }
+        .text2 + .text2 {
+            margin-top: 2px;
+        }
+    }
+}
+.pass-info + .pass-info {
+    margin-top: 16px;
+}
+
+/deep/.van-swipe__track {
+    min-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 90px);
+}
+</style>

src/views/user/PassList.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="van-list">
+        <div class="pass-info" v-for="i in 5" :key="i">
+            <div class="pass-title">
+                <div class="title">支付宝购买</div>
+                <div class="time">2022-7-5</div>
+            </div>
+            <div class="pass-box">
+                <van-image width="136" height="64" :src="require('@assets/qingtong.png')" fit="cover" />
+                <div class="pass-content">
+                    <div class="text1">青铜通行证</div>
+                    <div class="flex1"></div>
+                    <div class="text2">编号:78738373788</div>
+                    <div class="text2">到期时间:2022-7-20</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {};
+</script>
+<style lang="less" scoped>
+.van-list {
+    padding: 16px;
+}
+.pass-info {
+    background-color: @bg2;
+    border-radius: 4px;
+    padding: 10px 12px 12px;
+
+    .pass-title {
+        .flex();
+        justify-content: space-between;
+        .title {
+            font-size: 12px;
+            font-weight: bold;
+            color: #ffe3a3;
+            line-height: 18px;
+        }
+
+        .time {
+            font-size: 12px;
+            color: #ffffff;
+            line-height: 18px;
+        }
+    }
+}
+.pass-box {
+    padding-top: 22px;
+    .flex();
+    .pass-content {
+        margin-left: 10px;
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 24px;
+        }
+
+        .text2 {
+            font-size: 12px;
+            color: #6a6d83;
+            line-height: 17px;
+        }
+        .text2 + .text2 {
+            margin-top: 2px;
+        }
+    }
+}
+.pass-info + .pass-info {
+    margin-top: 16px;
+}
+</style>

src/views/user/Point.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="point">
+        <div class="top">
+            <div class="text1">200</div>
+        </div>
+        <div class="van-list">
+            <div class="title">交易记录</div>
+            <div class="point-item">
+                <div class="text1">
+                    <span>兑换青铜通行证</span>
+                    <span>-100</span>
+                </div>
+                <div class="text2">
+                    <span>编号:787383737883737883737</span>
+                    <span> 07-05 14:56</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.point {
+    padding: 22px 16px;
+}
+
+.top {
+    .flex-col();
+    align-items: center;
+    padding: 0 0 15px;
+
+    .text1 {
+        font-size: 20px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 24px;
+    }
+}
+
+.title {
+    padding: 12px 0;
+    font-size: 16px;
+    color: #ffffff;
+    line-height: 24px;
+}
+
+.point-item {
+    background-color: @bg2;
+    padding: 12px;
+    .text1 {
+        .flex();
+        justify-content: space-between;
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 24px;
+    }
+    .text2 {
+        .flex();
+        justify-content: space-between;
+        margin-top: 5px;
+        font-size: 12px;
+        color: #6a6d83;
+    }
+}
+</style>

src/views/user/Records.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="record">
+        <van-tabs v-model:active="active" line-width="28px" line-height="2px" shrink swipeable swipe-threshold="3">
+            <van-tab title="全部">
+                <div class="van-list">
+                    <div class="record-info">
+                        <van-image
+                            width="58"
+                            height="58"
+                            radius="4"
+                            fit="cover"
+                            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                        />
+                        <div class="record-content">
+                            <div class="text1">
+                                <span>1v1</span>
+                                <span>不限英雄</span>
+                                <span>墨家机关道</span>
+                            </div>
+                            <div class="text2">
+                                <span>QQ区</span>
+                                <span>房间号 8783737</span>
+                            </div>
+                            <div class="text3">
+                                <img src="@assets/png-time.png" alt="" />
+                                <span>07-05 14:56</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </van-tab>
+            <van-tab title="匹配中">内容 2</van-tab>
+            <van-tab title="进行中">内容 3</van-tab>
+            <van-tab title="已结束">内容 4</van-tab>
+            <van-tab title="已流局">内容 4</van-tab>
+        </van-tabs>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            active: 0
+        };
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.van-tabs__nav {
+    padding: 0 0 15px;
+}
+/deep/.van-tab {
+    padding: 0 16px;
+}
+/deep/.van-tab + .van-tab {
+    margin-left: 10px;
+}
+
+.van-list {
+    padding: 16px;
+}
+
+.record-info {
+    .flex();
+    align-items: flex-end;
+    padding: 28px 12px 12px;
+    background-color: @bg2;
+    border-radius: 4px;
+
+    .record-content {
+        margin-left: 10px;
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 24px;
+        }
+
+        .text2 {
+            font-size: 12px;
+            color: #ffffff;
+            line-height: 17px;
+            margin-top: 2;
+        }
+
+        .text3 {
+            .flex();
+            margin-top: 6px;
+            img {
+                width: 16px;
+                height: 16px;
+            }
+            span {
+                font-size: 12px;
+                color: #6a6d83;
+                line-height: 17px;
+                margin-left: 6px;
+            }
+        }
+    }
+}
+</style>