|
@@ -1,26 +1,29 @@
|
|
|
<template>
|
|
|
<div class="profile-page bg-[#f8f8f8]">
|
|
|
<div
|
|
|
- class="pt-66 pb-14 px-26 relative w-full bg-[url('~/assets/img/profile/profile_banner.png')] bg-no-repeat bg-cover">
|
|
|
+ class="pt-66 pb-14 px-26 relative w-full bg-[url('~/assets/img/profile/profile_banner.png')] bg-no-repeat bg-cover"
|
|
|
+ >
|
|
|
<NuxtLink to="/scan" class="absolute top-17 right-14">
|
|
|
- <img src="~/assets/img/profile/pofile_qr.png" height="33" width="33" alt="扫一扫"/>
|
|
|
+ <img src="~/assets/img/profile/pofile_qr.png" height="33" width="33" alt="扫一扫" />
|
|
|
</NuxtLink>
|
|
|
- <div class="w-335 left-20 top-66 right-20 ">
|
|
|
+ <div class="w-335 left-20 top-66 right-20">
|
|
|
<NuxtLink to="/profile/userInfo">
|
|
|
<div class="flex flex-col w-full text-black-3">
|
|
|
<div class="flex flex-row items-center">
|
|
|
<van-image
|
|
|
- :src="userInfo.headImageUrl || defaultAvatar"
|
|
|
- class="mr-9 shrink-0"
|
|
|
- width="75px"
|
|
|
- height="75px"
|
|
|
- radius="37.5px"
|
|
|
+ :src="userInfo.headImageUrl || defaultAvatar"
|
|
|
+ class="mr-9 shrink-0"
|
|
|
+ width="75px"
|
|
|
+ height="75px"
|
|
|
+ radius="37.5px"
|
|
|
/>
|
|
|
- <div class="text-2xl text-[#fff] font-bold text-ellipsis text-nowrap overflow-hidden ...">
|
|
|
+ <div
|
|
|
+ class="text-2xl text-[#fff] font-bold text-ellipsis text-nowrap overflow-hidden ..."
|
|
|
+ >
|
|
|
{{ userInfo.showName }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="mt-24 text-base text-[#fff] ">{{ userInfo.personalSign }}</div>
|
|
|
+ <div class="mt-24 text-base text-[#fff]">{{ userInfo.personalSign }}</div>
|
|
|
</div>
|
|
|
</NuxtLink>
|
|
|
<!-- <NuxtLink to="/profile/userInfo" class="flex items-center space-x-10">
|
|
@@ -42,8 +45,8 @@
|
|
|
</div>
|
|
|
<div class="mt-17 w-full grid grid-cols-4 gap-10">
|
|
|
<template v-for="(tab, i) in tabList" :key="i">
|
|
|
- <NuxtLink :to=" tab.listType ? `/follow?listType=${tab.listType}` : null">
|
|
|
- <div class="text-[#fff] text-base text-center ">
|
|
|
+ <NuxtLink :to="tab.listType ? `/follow?listType=${tab.listType}` : null">
|
|
|
+ <div class="text-[#fff] text-base text-center">
|
|
|
<div class="font-semibold">{{ tab.numText }}</div>
|
|
|
<div class="text-sm">{{ tab.label }}</div>
|
|
|
</div>
|
|
@@ -55,12 +58,12 @@
|
|
|
<div class="text-xl font-semibold ml-20">常用功能</div>
|
|
|
<div class="grid grid-cols-4 gap-y-20 mt-20">
|
|
|
<NuxtLink
|
|
|
- class="flex flex-col items-center"
|
|
|
- v-for="item in menuData"
|
|
|
- :to="item.to"
|
|
|
- :key="item.to"
|
|
|
+ class="flex flex-col items-center"
|
|
|
+ v-for="item in menuData"
|
|
|
+ :to="item.to"
|
|
|
+ :key="item.to"
|
|
|
>
|
|
|
- <img :src="item.icon" class="w-40 h-40" alt="" srcset=""/>
|
|
|
+ <img :src="item.icon" class="w-40 h-40" alt="" srcset="" />
|
|
|
<div class="text-black-3 text-sm mt-5">{{ item.label }}</div>
|
|
|
</NuxtLink>
|
|
|
</div>
|
|
@@ -69,42 +72,38 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import defaultAvatar from "~/assets/img/default_avatar.png";
|
|
|
-import profile_travel_order from "~/assets/img/profile/profile_travel_order.png";
|
|
|
-import profile_labour_order from "~/assets/img/profile/profile_labour_order.png";
|
|
|
-import profile_travel_note from "~/assets/img/profile/profile_travel_note.png";
|
|
|
-import profile_colection from "~/assets/img/profile/profile_colection.png";
|
|
|
-import profile_car_order from "~/assets/img/profile/profile_car_order.png";
|
|
|
-import profile_visa_order from "~/assets/img/profile/profile_visa_order.png";
|
|
|
-import profile_my_comment from "~/assets/img/profile/profile_my_comment.png";
|
|
|
-import profile_wallet from "~/assets/img/profile/profile_wallet.png";
|
|
|
+import defaultAvatar from '~/assets/img/default_avatar.png'
|
|
|
+import profile_travel_order from '~/assets/img/profile/profile_travel_order.png'
|
|
|
+import profile_labour_order from '~/assets/img/profile/profile_labour_order.png'
|
|
|
+import profile_travel_note from '~/assets/img/profile/profile_travel_note.png'
|
|
|
+import profile_colection from '~/assets/img/profile/profile_colection.png'
|
|
|
+import profile_car_order from '~/assets/img/profile/profile_car_order.png'
|
|
|
+import profile_visa_order from '~/assets/img/profile/profile_visa_order.png'
|
|
|
+import profile_my_comment from '~/assets/img/profile/profile_my_comment.png'
|
|
|
+import profile_wallet from '~/assets/img/profile/profile_wallet.png'
|
|
|
|
|
|
-const userInfoStore = useUserInfoStore();
|
|
|
-const {userInfo} = storeToRefs(userInfoStore);
|
|
|
+const userInfoStore = useUserInfoStore()
|
|
|
+const { userInfo } = storeToRefs(userInfoStore)
|
|
|
|
|
|
const tabList = ref([
|
|
|
- {label: '互关', listType: 'friend', numText: '0'},
|
|
|
- {label: '关注', listType: 'follow', numText: '0'},
|
|
|
- {label: '粉丝', listType: 'fans', numText: '0'},
|
|
|
- {label: '获赞', listType: null, numText: '0'},
|
|
|
+ { label: '互关', listType: 'friend', numText: '0' },
|
|
|
+ { label: '关注', listType: 'follow', numText: '0' },
|
|
|
+ { label: '粉丝', listType: 'fans', numText: '0' },
|
|
|
+ { label: '获赞', listType: null, numText: '0' }
|
|
|
])
|
|
|
const getData = async () => {
|
|
|
try {
|
|
|
- const [
|
|
|
- {data: friendsData},
|
|
|
- {data: concernData},
|
|
|
- {data: fansData},
|
|
|
- {data: likeData},
|
|
|
- ] = await Promise.all([
|
|
|
- request('/website/tourism/fans/getFriendsCount'),
|
|
|
- request('/website/tourism/fans/getMyConcern'),
|
|
|
- request('/website/tourism/fans/getMyFansCount'),
|
|
|
- request('/website/tourism/fans/getMylikeCount'),
|
|
|
- ])
|
|
|
- tabList.value[0].numText = formatNumber(friendsData);
|
|
|
- tabList.value[1].numText = formatNumber(concernData);
|
|
|
- tabList.value[2].numText = formatNumber(fansData);
|
|
|
- tabList.value[3].numText = formatNumber(likeData);
|
|
|
+ const [{ data: friendsData }, { data: concernData }, { data: fansData }, { data: likeData }] =
|
|
|
+ await Promise.all([
|
|
|
+ request('/website/tourism/fans/getFriendsCount'),
|
|
|
+ request('/website/tourism/fans/getMyConcernCount'),
|
|
|
+ request('/website/tourism/fans/getMyFansCount'),
|
|
|
+ request('/website/tourism/fans/getMylikeCount')
|
|
|
+ ])
|
|
|
+ tabList.value[0].numText = formatNumber(friendsData)
|
|
|
+ tabList.value[1].numText = formatNumber(concernData)
|
|
|
+ tabList.value[2].numText = formatNumber(fansData)
|
|
|
+ tabList.value[3].numText = formatNumber(likeData)
|
|
|
} catch (e) {
|
|
|
} finally {
|
|
|
}
|
|
@@ -113,28 +112,28 @@ const getData = async () => {
|
|
|
const menuData = [
|
|
|
{
|
|
|
icon: profile_travel_order,
|
|
|
- label: "旅游订单",
|
|
|
- to: "/profile/travel-orders",
|
|
|
+ label: '旅游订单',
|
|
|
+ to: '/profile/travel-orders'
|
|
|
},
|
|
|
{
|
|
|
icon: profile_visa_order,
|
|
|
- label: "签证订单",
|
|
|
- to: "/profile/visa-orders",
|
|
|
+ label: '签证订单',
|
|
|
+ to: '/profile/visa-orders'
|
|
|
},
|
|
|
{
|
|
|
icon: profile_car_order,
|
|
|
- label: "包车订单",
|
|
|
- to: "/profile/car-orders",
|
|
|
+ label: '包车订单',
|
|
|
+ to: '/profile/car-orders'
|
|
|
},
|
|
|
{
|
|
|
icon: profile_travel_note,
|
|
|
- label: "我的游记",
|
|
|
- to: "/profile/notes",
|
|
|
+ label: '我的游记',
|
|
|
+ to: '/profile/notes'
|
|
|
},
|
|
|
{
|
|
|
icon: profile_colection,
|
|
|
- label: "我的收藏",
|
|
|
- to: "/profile/collection",
|
|
|
+ label: '我的收藏',
|
|
|
+ to: '/profile/collection'
|
|
|
},
|
|
|
/* {
|
|
|
icon: profile_my_comment,
|
|
@@ -148,15 +147,15 @@ const menuData = [
|
|
|
},
|
|
|
{
|
|
|
icon: profile_wallet,
|
|
|
- label: "我的返利",
|
|
|
- to: "/profile/wallet",
|
|
|
- },
|
|
|
-];
|
|
|
+ label: '我的返利',
|
|
|
+ to: '/profile/wallet'
|
|
|
+ }
|
|
|
+]
|
|
|
|
|
|
onMounted(() => {
|
|
|
getData()
|
|
|
- userInfoStore.getUserInfo();
|
|
|
-});
|
|
|
+ userInfoStore.getUserInfo()
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|