56 lines
2.5 KiB
Vue
56 lines
2.5 KiB
Vue
<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 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 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 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">
|
|
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>
|