绑定用户

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=https://test.yags.raex.vip
+VUE_APP_BASE_URL=https://yags.raex.vip
 NODE_ENV=development
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex

src/components/BindAccound.vue

@@ -14,22 +14,22 @@
                 <span>绑定账户</span>
             </div>
             <van-form @submit="submit">
-                <van-field
+                <!-- <van-field
                     name="游戏昵称"
                     label="游戏昵称"
                     placeholder="请输入您的游戏昵称"
                     v-model="form.nickname"
                     :rules="[{ required: true, message: '请输入您的游戏昵称' }]"
                     clearable
-                />
-                <!-- <van-field
+                /> -->
+                <van-field
                     type="digit"
                     name="游戏营地"
                     label="游戏营地"
                     placeholder="请输入您的营地ID"
-                    v-model="form.id"
+                    v-model="form.campId"
                     :rules="[{ required: true, message: '请输入您的营地ID' }]"
-                /> -->
+                />
                 <div class="tips">
                     <div class="text1">温馨提示</div>
                     <div class="text2">便于游戏公平性，校验官方数据，请认真填写王者荣耀昵称及王者营地1D账号</div>
@@ -44,6 +44,32 @@
             </van-form>
         </div>
     </van-popup>
+    <van-popup
+        round
+        close-on-popstate
+        safe-area-inset-bottom
+        v-model:show="showRoles"
+        position="bottom"
+        :close-icon="require('@assets/icon_close.png')"
+    >
+        <div class="popup">
+            <div class="title">
+                <img src="@assets/icon-zhanghugauanli.png" alt="" />
+                <span>选择账户</span>
+            </div>
+            <div class="account-box" v-if="roleItems.length !== 0">
+                <div class="account-info" @click="choose(item)" v-for="(item, index) in roleItems" :key="index">
+                    <div class="account-right">
+                        <div class="text1">{{ item.roleName }}</div>
+                        <div class="text2">
+                            <span v-for="(text, textIndex) in item.roleText" :key="textIndex">{{ text }}</span>
+                        </div>
+                    </div>
+                    <img class="img-icon" :src="checkRoleId === item.roleId ? activeIcon : inactiveIcon" />
+                </div>
+            </div>
+        </div>
+    </van-popup>
 </template>
 
 <script>
@@ -52,9 +78,14 @@ export default {
         return {
             show: false,
             form: {
-                nickname: '',
+                campId: '',
                 gameId: ''
-            }
+            },
+            checkRoleId: 0,
+            showRoles: false,
+            activeIcon: require('@assets/icon_gouxuan_pre.png'),
+            inactiveIcon: require('@assets/icon_gouxuan_huise.png'),
+            roleItems: []
         };
     },
     methods: {
@@ -64,15 +95,30 @@ export default {
                 message: '加载中...',
                 forbidClick: true
             });
-            this.$http.post('/user/bindGame', form).then(res => {
-                this.$toast.success('绑定成功');
+            if (this.checkRoleId) {
+                form.roleId = this.checkRoleId;
+            }
+            this.$http.post('/bindGame/bind', form).then(res => {
+                if (!this.checkRoleId) {
+                    this.$toast.clear();
+                    this.showRoles = true;
+                    this.roleItems = res.roleItems;
+                } else {
+                    this.$toast.success('绑定成功');
+                    this.$emit('update');
+                }
                 this.show = false;
-                this.$emit('update');
             });
         },
-        init(gameInfo) {
-            this.form = { nickname: '', gameId: gameInfo.id };
+        init(gameInfo, zone) {
+            this.form = { campId: '', gameId: gameInfo.id, zone: zone };
+            this.checkRoleId = 0;
             this.show = true;
+        },
+        choose(info) {
+            this.checkRoleId = info.roleId;
+            this.showRoles = false;
+            this.submit();
         }
     }
 };
@@ -122,4 +168,48 @@ export default {
     padding: 9px 28px;
     .bottom(9px);
 }
+.account-box {
+    padding: 8px 0;
+}
+.account-info {
+    .flex();
+    padding: 8px 16px;
+    .account-right {
+        flex-grow: 1;
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 24px;
+        }
+        .text2 {
+            font-size: 12px;
+            color: #6a6d83;
+            line-height: 17px;
+            margin-top: 3px;
+            span + span {
+                margin-left: 10px;
+            }
+        }
+    }
+    .img-icon {
+        width: 24px;
+        height: 24px;
+    }
+}
+.account-box {
+    max-height: 40vh;
+    overflow: auto;
+}
+.account-info + .account-info {
+    position: relative;
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 16px;
+        right: 16px;
+        height: 1px;
+        background: #313346;
+    }
+}
 </style>

src/views/user/Account.vue

@@ -22,20 +22,20 @@
                             height="44"
                             fit="cover"
                             radius="4"
-                            :src="userInfo.avatar || require('@assets/img_default_photo.png')"
+                            :src="item.rongYaoRole.icon || require('@assets/img_default_photo.png')"
                         />
-                        <div class="account-btn" @click="remove">解绑</div>
+                        <div class="account-btn" @click="remove(item.id)">解绑</div>
                     </div>
                     <div class="account-right">
-                        <div class="text1">{{ item.nickname }}</div>
-                        <div class="text2">游戏ID:{{ item.gameId }}</div>
+                        <div class="text1">{{ item.rongYaoRole.roleName }}</div>
+                        <div class="text2">营地ID:{{ item.rongYaoRole.userId }}</div>
                     </div>
                 </div>
             </div>
         </div>
 
         <div class="bottom" v-if="accounts.length === 0">
-            <van-button type="primary" block @click="$refs.bind.init(gameInfo)">绑定账号</van-button>
+            <van-button type="primary" block @click="bind">绑定账号</van-button>
         </div>
 
         <bind-accound ref="bind" @update="getInfo"></bind-accound>
@@ -50,7 +50,8 @@ export default {
     data() {
         return {
             accounts: [],
-            gameInfo: {}
+            gameInfo: {},
+            zone: 'QQ'
         };
     },
     computed: {
@@ -70,13 +71,40 @@ export default {
                 message: '加载中...',
                 forbidClick: true
             });
-            this.$http.get('/user/bindGame/list').then(res => {
+            this.$http.get('/bindGame/my').then(res => {
                 this.$toast.clear();
-                this.accounts = res;
+                this.accounts = res.filter(item => {
+                    return !!item.rongYaoRole;
+                });
             });
         },
-        remove() {
-            this.wait();
+        bind() {
+            this.$refs.bind.init(this.gameInfo, this.zone);
+        },
+        remove(id) {
+            this.$dialog
+                .confirm({
+                    title: '提示',
+                    message: '确认要解绑该账号吗？',
+                    confirmButtonText: '立即解绑'
+                })
+                .then(() => {
+                    this.$toast.loading({
+                        message: '加载中...',
+                        forbidClick: true
+                    });
+                    this.$http
+                        .post('/bindGame/unbind', {
+                            id: id
+                        })
+                        .then(res => {
+                            this.$toast.success('解绑成功');
+                            this.getInfo();
+                            // this.accounts = res;
+                        });
+                });
+
+            // this.wait();
         }
     }
 };