dajiankang-uniapp/pages/team/team.vue

<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" :refresher-enabled="showLoading">
			<view class="p30">
				<view style="position: relative; width: 690rpx; height: 228rpx; padding: 30rpx 25rpx;box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(0,88,219,0.06);border-radius: 16rpx;overflow: hidden;" v-if="userInfo.userRights && userInfo.userRights.rightsLevel == 3">
					<image style="width: 690rpx; height: 228rpx; position: absolute; top: 0; left: 0; z-index: -1" src="/static/team.png"></image>
					<view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 30rpx">
						<view style="font-size: 32rpx; font-weight: bold">
							团队业绩奖励
							<text style="font-weight: 500; font-size: 28rpx; color: #999">(元)</text>
						</view>
						<wd-datetime-picker type="year-month" v-model="value" @confirm="confirm" @close="showLoading = true" @open="showLoading = false">
							<view style="font-size: 28rpx; font-weight: bold; color: #5d7a4e; display: flex; align-items: center">
								11月
								<image src="/static/icons/yue.png" style="width: 34rpx; height: 34rpx"></image>
							</view>
						</wd-datetime-picker>
					</view>
					<view style="display: flex; align-items: center; justify-content: space-between; font-size: 26rpx; margin-bottom: 30rpx;">
						<view>本月团队业绩：{{ count.investmentAmount }}</view>
						<view>{{ timeTrue ? '可' : '已' }}获得业绩奖励：{{ count.expectedReturn }}</view>
					</view>
					<view style="font-size: 26rpx">
						累计获得奖励：
						<text style="color: #fe3535">{{ count.totalExpectedReturn }}</text>
					</view>
				</view>

				<view style="font-size: 30rpx; background-color: #fff; border-radius: 8rpx; padding: 25rpx; margin-bottom: 25rpx" v-if="userInfo.puser">
					推荐人：{{ userInfo.puser ? `${userInfo.puser.nickname} ${userInfo.puser.mobile}` : '无' }}
				</view>

				<view style="font-weight: bold; font-size: 32rpx; margin: 30rpx 0">团队成员列表</view>

				<!-- 用户信息卡片 -->
				<view class="user-card" v-for="(item, index) in dataList" :key="index">
					<!-- 头像区域 -->
					<view class="avatar-container">
						<image class="avatar" :src="item.avatar" mode="aspectFit"></image>
						<view class="avatar-container_name">{{ item.nickname || '微信用户' }}</view>
					</view>
					<view style="display: flex; align-items: center; justify-content: space-between; margin-top: 20rpx">
						<!-- 用户信息区域 -->
						<view class="phone-time-row">
							<view class="phone">{{ item.mobile }}</view>
							<view class="time"><uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="item.createTime"></uni-dateformat></view>
						</view>

						<!-- 右侧操作区域 -->
						<view class="action-section">
							<view class="action-btn join" v-if="item.userRights">{{ item.userRights.rights.rightsName }}</view>
							<view class="action-btn join" v-else>无</view>
							<view class="level-text">当前等级</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import api from '@/api/index';
import { timeFormat } from '@/utils/fun.js';
const paging = ref(null);
const dataList = ref([]);
const count = ref({});
const showLoading = ref(true);

const timeTrue = ref(false);

import { Store } from '@/store';
const store = Store();

const userInfo = computed(
	() =>
		store.userInfo || {
			inviteCode: '',
			nickname: '',
			mobile: '',
			avatar: '',
			paywallet: {
				balance: 0
			}
		}
);

onShow(() => {});

onLoad(() => {
	timeTrue.value = isTimestampInCurrentMonth(new Date().getTime());

	timeCount();
});

function timeCount() {
	if (userInfo.value.userRights && userInfo.value.userRights.rightsLevel == 3) {
		api.getTeamMonthlyPerformanceAward({ month: timeFormat(value.value, 'yyyy-MM-ddThh:mm:ss') }).then((res) => {
			count.value = res;
		});
	}
}

const value = ref(new Date().getTime());

const list = ref({});

const queryList = (pageNo, pageSize) => {
	api.usersGetInfoTeam({ pageNo, pageSize })
		.then((res: any) => {
			paging.value.complete(res.list);
			timeCount();
		})
		.catch((res) => {
			paging.value.complete(false);
		});
};

const confirm = (e) => {
	timeTrue.value = isTimestampInCurrentMonth(e.value);
	paging.value.reload();
};

function isTimestampInCurrentMonth(timestamp) {
	// 处理时间戳（支持秒级和毫秒级）
	const ts = timestamp < 1e12 ? timestamp * 1000 : timestamp;
	const date = new Date(ts);

	// 获取当前日期信息
	const now = new Date();
	const currentYear = now.getFullYear();
	const currentMonth = now.getMonth();

	// 获取目标日期的年月
	const targetYear = date.getFullYear();
	const targetMonth = date.getMonth();

	// 比较年月是否相同
	return currentYear === targetYear && currentMonth === targetMonth;
}

// onShow(async () => {
// 	list.value = await api.usersGetInfoTeam();
// });
</script>

<style lang="scss" scoped>
.user-card {
	border-radius: 16rpx;
	width: 690rpx;
	height: 244rpx;
	background: #ffffff;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(0,88,219,0.06);
}

.avatar-container {
	display: flex;
	align-items: center;

	&_name {
		font-weight: bold;
		font-size: 28rpx;
		color: #232323;
	}
	.avatar {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background-color: #999;
	}
}

.info-section {
	flex: 1;
}

.username {
	font-size: 36rpx;
	color: #333333;
	font-weight: 500;
	margin-bottom: 20rpx;
	display: block;
}

.phone-time-row {
	margin-top: 10rpx;
}

.phone {
	font-weight: 400;
	font-size: 28rpx;
	color: #232323;
}

.time {
	margin-top: 20rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #999;
}

.action-section {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.action-btn {
	font-weight: bold;
	font-size: 28rpx;
	color: #5d7a4e;
	margin-bottom: 4rpx;
}

.level-text {
	margin-top: 20rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #999;
}
</style>