first
This commit is contained in:
163
inspond-nuxt-safekiso/base/pages/user/profile/[pid]/index.vue
Normal file
163
inspond-nuxt-safekiso/base/pages/user/profile/[pid]/index.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user