first commit
This commit is contained in:
PC-202306242200\Administrator
225
pages/team/team.vue
Normal file
225
pages/team/team.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user