绑定游戏

src/components/BandAccound.vue → src/components/BindAccound.vue

@@ -20,15 +20,16 @@
                     placeholder="请输入您的游戏昵称"
                     v-model="form.nickname"
                     :rules="[{ required: true, message: '请输入您的游戏昵称' }]"
+                    clearable
                 />
-                <van-field
+                <!-- <van-field
                     type="digit"
                     name="游戏营地"
                     label="游戏营地"
                     placeholder="请输入您的营地ID"
                     v-model="form.id"
                     :rules="[{ required: true, message: '请输入您的营地ID' }]"
-                />
+                /> -->
                 <div class="tips">
                     <div class="text1">温馨提示</div>
                     <div class="text2">便于游戏公平性，校验官方数据，请认真填写王者荣耀昵称及王者营地1D账号</div>
@@ -49,15 +50,30 @@
 export default {
     data() {
         return {
-            show: true,
+            show: false,
             form: {
                 nickname: '',
-                id: ''
+                gameId: ''
             }
         };
     },
     methods: {
-        submit() {}
+        submit() {
+            let form = { ...this.form };
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http.post('/user/bindGame', form).then(res => {
+                this.$toast.success('绑定成功');
+                this.show = false;
+                this.$emit('update');
+            });
+        },
+        init(gameInfo) {
+            this.form = { nickname: '', gameId: gameInfo.id };
+            this.show = true;
+        }
     }
 };
 </script>

src/styles/app.less

@@ -259,7 +259,7 @@ input:-webkit-autofill {
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 9999;
+    z-index: 9999;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
     object-fit: cover;
     opacity: 1;
     transition: opacity 0.8s ease-in-out;

src/views/Mine.vue

@@ -64,12 +64,12 @@
 
         <div class="grids">
             <van-grid :border="false">
-                <!-- <van-grid-item
+                <van-grid-item
                     :to="{ path: '/account' }"
                     :icon="require('@assets/icon_guanlianzhanghu.png')"
                     text="关联账户"
-                /> -->
-                <van-grid-item @click="wait" :icon="require('@assets/icon_guanlianzhanghu.png')" text="关联账户" />
+                />
+                <!-- <van-grid-item @click="wait" :icon="require('@assets/icon_guanlianzhanghu.png')" text="关联账户" /> -->
                 <van-grid-item
                     :to="{ path: '/reports' }"
                     :icon="require('@assets/icon-shenbaojil.png')"

src/views/user/Account.vue

@@ -7,42 +7,78 @@
                 <div class="title">王者荣耀</div>
                 <div class="type-list">
                     <div class="type prim">QQ区</div>
-                    <div class="type">微信区</div>
+                    <div class="type" @click="wait">微信区</div>
                 </div>
             </div>
         </div>
 
         <div class="account-list">
-            <div class="account-title">已绑定0个账号</div>
-            <div class="account-box">
-                <div class="account-info" v-for="i in 3" :key="i">
-                    <van-image
-                        width="44"
-                        height="44"
-                        fit="cover"
-                        radius="4"
-                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-                    />
+            <div class="account-title">已绑定{{ accounts.length }}个账号</div>
+            <div class="account-box" v-if="accounts.length !== 0">
+                <div class="account-info" v-for="(item, index) in accounts" :key="index">
+                    <div class="account-img">
+                        <van-image
+                            width="44"
+                            height="44"
+                            fit="cover"
+                            radius="4"
+                            :src="userInfo.avatar || require('@assets/img_default_photo.png')"
+                        />
+                        <div class="account-btn" @click="remove">解绑</div>
+                    </div>
                     <div class="account-right">
-                        <div class="text1">奶盖</div>
-                        <div class="text2">营地ID:7873837378</div>
+                        <div class="text1">{{ item.nickname }}</div>
+                        <div class="text2">游戏ID:{{ item.gameId }}</div>
                     </div>
                 </div>
             </div>
         </div>
 
-        <div class="bottom">
-            <van-button type="primary" block>绑定账号</van-button>
+        <div class="bottom" v-if="accounts.length === 0">
+            <van-button type="primary" block @click="$refs.bind.init(gameInfo)">绑定账号</van-button>
         </div>
 
-        <band-accound></band-accound>
+        <bind-accound ref="bind" @update="getInfo"></bind-accound>
     </div>
 </template>
 
 <script>
-import BandAccound from '../../components/BandAccound.vue';
+import { mapState } from 'vuex';
+import BindAccound from '../../components/BindAccound.vue';
 export default {
-    components: { BandAccound }
+    components: { BindAccound },
+    data() {
+        return {
+            accounts: [],
+            gameInfo: {}
+        };
+    },
+    computed: {
+        ...mapState(['userInfo'])
+    },
+    mounted() {
+        this.$http.post('/game/all', { size: 1000, query: { del: false } }, { body: 'json' }).then(res => {
+            if (!res.empty) {
+                this.gameInfo = res.content[0];
+            }
+        });
+        this.getInfo();
+    },
+    methods: {
+        getInfo() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http.get('/user/bindGame/list').then(res => {
+                this.$toast.clear();
+                this.accounts = res;
+            });
+        },
+        remove() {
+            this.wait();
+        }
+    }
 };
 </script>
 
@@ -112,7 +148,11 @@ export default {
         font-size: 14px;
         color: #ffffff;
         position: relative;
-        &::after {
+    }
+
+    .account-box {
+        position: relative;
+        &::before {
             content: '';
             position: absolute;
             bottom: 0;
@@ -137,6 +177,21 @@ export default {
 .account-info {
     .flex();
     padding: 10px 16px;
+    .account-img {
+        height: 44px;
+        position: relative;
+        .account-btn {
+            position: absolute;
+            font-size: 10px;
+            color: #ffffff;
+            line-height: 12px;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            text-align: center;
+        }
+    }
     .account-right {
         flex-grow: 1;
         margin-left: 10px;