绑定说明

src/components/BindAccound.vue

@@ -28,8 +28,16 @@
                     label="游戏营地"
                     placeholder="请输入您的营地ID"
                     v-model="form.campId"
+                    clearable
                     :rules="[{ required: true, message: '请输入您的营地ID' }]"
-                />
+                >
+                    <template #extra>
+                        <div class="tip-btn" @click="$router.push('/accountDes')">
+                            <span>查看ID说明</span>
+                            <img src="@assets/icon_inter.png" alt="" />
+                        </div>
+                    </template>
+                </van-field>
                 <div class="tips">
                     <div class="text1">温馨提示</div>
                     <div class="text2">便于游戏公平性，校验官方数据，请认真填写王者荣耀昵称及王者营地1D账号</div>
@@ -98,27 +106,32 @@ export default {
             if (this.checkRoleId) {
                 form.roleId = this.checkRoleId;
             }
-            this.$http.post('/bindGame/bind', form).then(res => {
-                if (!this.checkRoleId) {
-                    this.$toast.clear();
-                    // res.roleItems=res.roleItems.filter(item=>{
-                    //     return
-                    // })
-                    if (res.roleItems.length === 0) {
-                        this.$dialog.alert({
-                            title: '角色列表为空',
-                            message: '当前没有可选择的角色，请赶快打开王者创建吧'
-                        });
+            this.$http
+                .post('/bindGame/bind', form)
+                .then(res => {
+                    if (!this.checkRoleId) {
+                        this.$toast.clear();
+                        // res.roleItems=res.roleItems.filter(item=>{
+                        //     return
+                        // })
+                        if (res.roleItems.length === 0) {
+                            this.$dialog.alert({
+                                title: '角色列表为空',
+                                message: '当前没有可选择的角色，请赶快打开王者创建吧'
+                            });
+                        } else {
+                            this.showRoles = true;
+                            this.roleItems = res.roleItems;
+                        }
                     } else {
-                        this.showRoles = true;
-                        this.roleItems = res.roleItems;
+                        this.$toast.success('绑定成功');
+                        this.$emit('update');
                     }
-                } else {
-                    this.$toast.success('绑定成功');
-                    this.$emit('update');
-                }
-                this.show = false;
-            });
+                    this.show = false;
+                })
+                .catch(e => {
+                    this.$toast(e.error);
+                });
         },
         init(gameInfo, zone) {
             this.form = { campId: '', gameId: gameInfo.id, zone: zone };
@@ -138,8 +151,8 @@ export default {
 .title {
     .flex();
     img {
-        width: 28px;
-        height: 28px;
+        width: 24px;
+        height: 24px;
     }
     span {
         font-size: 14px;
@@ -222,4 +235,19 @@ export default {
         background: #313346;
     }
 }
+
+.tip-btn {
+    .flex();
+    margin-left: 6px;
+    span {
+        font-size: 12px;
+        color: #6a6d83;
+        line-height: 17px;
+    }
+
+    img {
+        width: 24px;
+        height: 24px;
+    }
+}
 </style>

src/router/index.js

@@ -287,6 +287,14 @@ const routes = [
             title: '关联账户'
         }
     },
+    {
+        path: '/accountDes',
+        name: 'accountDes',
+        component: () => import('../views/user/AccountDes.vue'),
+        meta: {
+            title: '绑定游戏ID说明'
+        }
+    },
     {
         path: '/collections',
         name: 'collections',

src/views/user/Account.vue

@@ -49,6 +49,8 @@
 import { mapState } from 'vuex';
 import BindAccound from '../../components/BindAccound.vue';
 export default {
+    name: 'userAccount',
+    inject: ['setKeeps', 'scrollWrapper', 'changeScroll'],
     components: { BindAccound },
     data() {
         return {
@@ -121,6 +123,14 @@ export default {
                     this.getInfo();
                 });
         }
+    },
+    beforeRouteLeave(to, from, next) {
+        if (to.path === '/accountDes') {
+            this.setKeeps(['userAccount']);
+        } else {
+            this.setKeeps(['userAccount'], false);
+        }
+        next();
     }
 };
 </script>

src/views/user/AccountDes.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="des">
+        <div class="page page2">
+            <div class="text">1、打开王者营地APP，点击我的页面，进入个人主页</div>
+            <img src="@assets/png-id-01.png" alt="" />
+        </div>
+        <div class="page page2">
+            <div class="text">2、复制ID，粘贴到游戏营地中就完成啦～</div>
+            <img src="@assets/png-id-02.png" alt="" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.des {
+    padding: 30px 20px;
+}
+
+.page {
+    .text {
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 24px;
+        margin-bottom: 16px;
+    }
+
+    img {
+        width: 100%;
+        display: block;
+    }
+    padding-bottom: 30px;
+
+    &.page2 {
+        img {
+            height: 490px;
+            width: auto;
+            display: block;
+            margin: auto;
+        }
+    }
+}
+</style>