146 lines
4.0 KiB
Vue
146 lines
4.0 KiB
Vue
<script lang="ts" setup>
|
|
import { thumbnailImg } from "@/utils/utils";
|
|
import { conversionMobile } from "@/utils";
|
|
import {appUserUserInviteInviteListPost} from "@/service";
|
|
|
|
const { t } = useI18n();
|
|
|
|
const { paging, dataList, queryList, loading } = usePage<any>(
|
|
(pageNum: number, pageSize: number) =>
|
|
appUserUserInviteInviteListPost({
|
|
params: {
|
|
pageNum,
|
|
pageSize,
|
|
}
|
|
})
|
|
);
|
|
|
|
function navigateTo(url: string) {
|
|
uni.navigateTo({
|
|
url,
|
|
});
|
|
}
|
|
function handleClickLeft() {
|
|
uni.navigateBack()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view>
|
|
<z-paging ref="paging" v-model="dataList" @query="queryList">
|
|
<template #top>
|
|
<wd-navbar
|
|
safeAreaInsetTop
|
|
:fixed="true"
|
|
:placeholder="true"
|
|
:bordered="false"
|
|
custom-class="!bg-transparent"
|
|
@click-left="handleClickLeft"
|
|
>
|
|
<template #left>
|
|
<view class="shrink-0">
|
|
<view class="i-carbon:chevron-left text-50rpx text-#3D3D3D ml-[-10rpx]"></view>
|
|
</view>
|
|
</template>
|
|
<template #title>
|
|
<view class="invite-navbar-title-wrap">
|
|
<text class="invite-navbar-title">{{ t('pages.mine.the-person-invited') }}</text>
|
|
<text class="invite-navbar-count">({{ dataList.length }})</text>
|
|
</view>
|
|
</template>
|
|
</wd-navbar>
|
|
</template>
|
|
<view class="px-18rpx">
|
|
<view
|
|
class="animate-in fade-in animate-ease-in animate-duration-300"
|
|
v-show="!loading"
|
|
>
|
|
<view
|
|
class="py-28rpx px-20rpx bg-#fff rounded-16rpx"
|
|
:class="[index > 0 && 'mt-20rpx']"
|
|
v-for="(item, index) in dataList"
|
|
:key="item.id"
|
|
>
|
|
<view class="flex items-center justify-between">
|
|
<view class="flex items-center shrink-0 mr-30rpx">
|
|
<image
|
|
class="w-106rpx h-106rpx rounded-full"
|
|
:src="thumbnailImg(item.avatar)"
|
|
></image>
|
|
</view>
|
|
<view class="flex-1">
|
|
<view class="text-28rpx text-primary lh-42rpx font-bold"
|
|
>
|
|
{{ item?.firstName }} {{ item?.surname }}
|
|
</view>
|
|
<view class="mt-25rpx flex items-center">
|
|
<!-- <image class="w-28rpx h-28rpx shrink-0 mr-2prx" src="@img-user/1479@2x.png"></image> -->
|
|
<text class="text-24rpx text-#999 lh-34rpx font-bold">{{
|
|
conversionMobile(item.phone)
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="animate-in fade-in animate-ease-in-out animate-duration-300"
|
|
v-show="loading"
|
|
>
|
|
<view
|
|
class="py-28rpx px-20rpx bg-#fff rounded-16rpx"
|
|
:class="[i > 1 && 'mt-20rpx']"
|
|
v-for="i in 10"
|
|
:key="i"
|
|
>
|
|
<view class="flex items-center justify-between">
|
|
<wd-skeleton
|
|
animation="gradient"
|
|
:row-col="[{ size: '106rpx', type: 'circle' }]"
|
|
/>
|
|
<view class="flex-1 ml-30rpx">
|
|
<wd-skeleton
|
|
animation="gradient"
|
|
:row-col="[
|
|
{ width: '94rpx', margin: '0px' },
|
|
{ width: '354rpx' },
|
|
]"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.invite-navbar-title-wrap {
|
|
display: flex;
|
|
align-items: baseline;
|
|
align-items: center;
|
|
align-content: center;
|
|
height: 100%;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding-left: 8rpx;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.invite-navbar-title {
|
|
font-size: 34rpx;
|
|
line-height: 42rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
}
|
|
|
|
.invite-navbar-count {
|
|
font-size: 28rpx;
|
|
line-height: 34rpx;
|
|
font-weight: 600;
|
|
color: #666;
|
|
}
|
|
</style>
|