diff --git a/api/personal-center/types.ts b/api/personal-center/types.ts
index d17f374..d7c6905 100644
--- a/api/personal-center/types.ts
+++ b/api/personal-center/types.ts
@@ -46,6 +46,8 @@ export interface UserExtendRespVO {
   description: string
   authStatus: number
   createTime: string
+  wxOpenId: string
+  qqOpenId: string
   files: {
     id: number
     memberId: number
diff --git a/pages/personal-Center/index/account-bind.vue b/pages/personal-Center/index/account-bind.vue
index b091c09..6ae63f3 100644
--- a/pages/personal-Center/index/account-bind.vue
+++ b/pages/personal-Center/index/account-bind.vue
@@ -1,26 +1,55 @@
 <template>
   <div class="box-border w-auto border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px mt-10px">
     <div class="flex flex-col justify-center text-[14px] text-[#333333] font-normal">
-      <div class="mt-[6px] flex items-center">
-        <img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
-        <div class="ml-[19px] w-50px">手机号</div>
-        <div class="ml-[100px] flex items-center"><div class="w-[90px]">手机号码：</div><div class="w-[180px]">xxx</div></div>
-        <div class="btn">绑定</div>
+      <div class="mt-[6px] flex items-center justify-between">
+        <div class="flex items-center">
+          <el-icon size="32" color="#007AFF"><Iphone /></el-icon>
+          <!-- <img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" /> -->
+          <div class="ml-[19px] w-fit flex flex-col">
+            <div class="color-#333 text-15px mb-4px">手机号</div><div class="color-#999">手机号可以用于登录帐号{{ user.mobile }}</div></div
+          >
+        </div>
+        <el-button type="primary" class="ml-10px" :disabled="!!user.mobile">{{ user.mobile ? '已绑定' : '绑定' }}</el-button>
       </div>
-      <div class="mt-[30px] flex items-center">
-        <img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
-        <div class="ml-[19px] w-50px">QQ</div>
-        <div class="ml-[100px] flex items-center"><div class="w-[90px]">QQ昵称：</div><div class="w-[180px]">xxx</div></div>
-        <div class="btn">绑定</div>
+      <div class="mt-[30px] flex items-center justify-between">
+        <div class="flex items-center">
+          <img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
+          <div class="ml-[19px] w-fit flex flex-col"> <div class="color-#333 text-15px mb-4px">QQ</div><div class="color-#999">QQ可以用于登录帐号</div></div>
+        </div>
+        <el-button type="primary" class="ml-10px" :disabled="!!user.qqOpenId" @click="handleBind('qq')">{{ user.qqOpenId ? '已绑定' : '绑定' }}</el-button>
       </div>
-      <div class="mt-[30px] flex items-center">
-        <img src="~/assets/images/weixin-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
-        <div class="ml-[19px] w-50px">微信</div>
-        <div class="ml-[95px] flex items-center"><div class="w-[90px]">微信昵称：</div><div class="w-[180px]">xxx</div></div>
-        <div class="btn">绑定</div>
+      <div class="mt-[30px] flex items-center justify-between">
+        <div class="flex items-center">
+          <img src="~/assets/images/weixin-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
+          <div class="ml-[19px] w-fit flex flex-col">
+            <div class="color-#333 text-15px mb-4px">微信</div><div class="color-#999">微信可以用于登录帐号</div></div
+          >
+        </div>
+        <el-button type="primary" class="ml-10px" :disabled="!!user.wxOpenId" @click="handleBind('wx')">{{ user.wxOpenId ? '已绑定' : '绑定' }}</el-button>
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { Iphone } from '@element-plus/icons-vue'
+  import { onMounted } from 'vue'
+  import { getUserInfo } from '~/api/personal-center/index'
+  import type { UserExtendRespVO } from '~/api/personal-center/types'
+  onMounted(() => {
+    getUser()
+  })
+
+  const user = ref({} as UserExtendRespVO)
+  const getUser = async () => {
+    const res = await getUserInfo()
+    console.log(res)
+    user.value = res.data
+  }
+
+  const handleBind = (type: string) => {
+    console.log(type)
+  }
+</script>
+
+<style scoped></style>