164 lines
6.2 KiB
Vue
164 lines
6.2 KiB
Vue
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
<template>
|
|
<section class="bg-white overflow-hidden">
|
|
<div
|
|
class="relative max-w-7xl mx-auto pt-20 pb-12 px-4 sm:px-6 lg:px-8 lg:py-20"
|
|
>
|
|
<svg
|
|
class="absolute top-full left-0 transform translate-x-80 -translate-y-24 lg:hidden"
|
|
width="784"
|
|
height="404"
|
|
fill="none"
|
|
viewBox="0 0 784 404"
|
|
aria-hidden="true"
|
|
>
|
|
<defs>
|
|
<pattern
|
|
id="e56e3f81-d9c1-4b83-a3ba-0d0ac8c32f32"
|
|
x="0"
|
|
y="0"
|
|
width="20"
|
|
height="20"
|
|
patternUnits="userSpaceOnUse"
|
|
>
|
|
<rect
|
|
x="0"
|
|
y="0"
|
|
width="4"
|
|
height="4"
|
|
class="text-gray-200"
|
|
fill="currentColor"
|
|
/>
|
|
</pattern>
|
|
</defs>
|
|
<rect
|
|
width="784"
|
|
height="404"
|
|
fill="url(#e56e3f81-d9c1-4b83-a3ba-0d0ac8c32f32)"
|
|
/>
|
|
</svg>
|
|
|
|
<svg
|
|
class="hidden lg:block absolute right-full top-1/2 transform translate-x-1/2 -translate-y-1/2"
|
|
width="404"
|
|
height="784"
|
|
fill="none"
|
|
viewBox="0 0 404 784"
|
|
aria-hidden="true"
|
|
>
|
|
<defs>
|
|
<pattern
|
|
id="56409614-3d62-4985-9a10-7ca758a8f4f0"
|
|
x="0"
|
|
y="0"
|
|
width="20"
|
|
height="20"
|
|
patternUnits="userSpaceOnUse"
|
|
>
|
|
<rect
|
|
x="0"
|
|
y="0"
|
|
width="4"
|
|
height="4"
|
|
class="text-gray-200"
|
|
fill="currentColor"
|
|
/>
|
|
</pattern>
|
|
</defs>
|
|
<rect
|
|
width="404"
|
|
height="784"
|
|
fill="url(#56409614-3d62-4985-9a10-7ca758a8f4f0)"
|
|
/>
|
|
</svg>
|
|
|
|
<div class="relative lg:flex lg:items-center">
|
|
<div class="w-64 h-64">
|
|
<BaseAvater1 :image-size="64" :image-url="photoUrl" />
|
|
</div>
|
|
|
|
<div class="relative lg:ml-10">
|
|
<svg
|
|
class="absolute top-0 left-0 transform -translate-x-8 -translate-y-24 h-36 w-36 text-indigo-200 opacity-50"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
viewBox="0 0 144 144"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-width="2"
|
|
d="M41.485 15C17.753 31.753 1 59.208 1 89.455c0 24.664 14.891 39.09 32.109 39.09 16.287 0 28.386-13.03 28.386-28.387 0-15.356-10.703-26.524-24.663-26.524-2.792 0-6.515.465-7.446.93 2.327-15.821 17.218-34.435 32.11-43.742L41.485 15zm80.04 0c-23.268 16.753-40.02 44.208-40.02 74.455 0 24.664 14.891 39.09 32.109 39.09 15.822 0 28.386-13.03 28.386-28.387 0-15.356-11.168-26.524-25.129-26.524-2.792 0-6.049.465-6.98.93 2.327-15.821 16.753-34.435 31.644-43.742L121.525 15z"
|
|
/>
|
|
</svg>
|
|
<blockquote class="relative">
|
|
<div
|
|
class="text-2xl leading-9 font-medium text-gray-900"
|
|
>
|
|
<p>
|
|
{{ memo }}
|
|
</p>
|
|
</div>
|
|
<footer class="mt-8">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0 lg:hidden">
|
|
<img
|
|
class="h-12 w-12 rounded-full"
|
|
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="ml-4 lg:ml-0">
|
|
<div
|
|
class="text-base font-medium text-gray-900"
|
|
>
|
|
{{ displayName }}
|
|
</div>
|
|
<div
|
|
class="text-base font-medium text-indigo-600"
|
|
>
|
|
{{ email }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
middleware: 'check-auth-user',
|
|
});
|
|
|
|
const route = useRoute();
|
|
|
|
const displayName = ref(_crossCtl.userProfile['displayName']);
|
|
const email = ref('');
|
|
const photoUrl = ref(_crossCtl.userProfile['photoUrl']);
|
|
const memo = ref(_crossCtl.userProfile['memo']);
|
|
|
|
let userInfo = {};
|
|
|
|
const hero = route.params.pid;
|
|
|
|
console.log('hero=', hero);
|
|
|
|
const responseJson = await _crossCtl.doComm('select', 'profile', {
|
|
hero: hero,
|
|
});
|
|
console.log('responseJson=', responseJson);
|
|
if (responseJson['responseMessage'] == 'ok') {
|
|
userInfo = responseJson['data'][0];
|
|
const tmpSubInfos = userInfo.infos;
|
|
email.value = tmpSubInfos['email'];
|
|
displayName.value = userInfo['display_name'];
|
|
photoUrl.value = userInfo['photo_url'];
|
|
memo.value = tmpSubInfos['memo'];
|
|
} else {
|
|
alert(responseJson['responseMessage']);
|
|
}
|
|
</script>
|