289 lines
6.7 KiB
Vue
289 lines
6.7 KiB
Vue
<template>
|
||
<z-paging
|
||
ref="pagingRef"
|
||
v-model="data_list"
|
||
@query="queryList"
|
||
class="scroll_div"
|
||
:loading-more-enabled="false"
|
||
:layout-only="true"
|
||
empty-view-text="暂无积分记录"
|
||
paging-class="z-paging-class"
|
||
>
|
||
<template #top>
|
||
<view class="body-title">
|
||
<view class="back_div" @click="common.navigateBack()">
|
||
<view class="back-icon"></view>
|
||
</view>
|
||
<view>勋章墙</view>
|
||
</view>
|
||
<view class="personal_information">
|
||
<view class="profile">
|
||
<cached-avatar class="img"></cached-avatar>
|
||
</view>
|
||
<view class="personal_information_data">
|
||
<view class="name_sex_div">
|
||
<view class="name">
|
||
{{ user_info.userName }}
|
||
</view>
|
||
<view class="fl1"></view>
|
||
</view>
|
||
<view class="work_number_div">工号：{{ user_info.loginName }}</view>
|
||
<view class="fl1"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="main-div">
|
||
<view class="item-array" v-for="(itemList, index) in data_list">
|
||
<view class="title-div">
|
||
<image class="img" src="@/static/images/pointsAndRank/badge-title-left.png" mode=""></image>
|
||
<view class="title">
|
||
{{ itemList.name }}
|
||
</view>
|
||
<image class="img" src="@/static/images/pointsAndRank/badge-title-right.png" mode=""></image>
|
||
</view>
|
||
<view class="item-list-container">
|
||
<view class="item" v-for="item in itemList.child">
|
||
<view class="badge-img">
|
||
<image-preview
|
||
class="img"
|
||
:src="item.isOpen === 'Y' ? item.ossAddr : item.ossAddrOff"
|
||
></image-preview>
|
||
</view>
|
||
<view class="badge-img-title light-up">
|
||
{{ item.badgeName }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- </view> -->
|
||
</z-paging>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 竞赛列表
|
||
import { ref, reactive, watch, onMounted } from 'vue';
|
||
import { onLoad, onUnload } from '@dcloudio/uni-app';
|
||
import common from '@/common/common';
|
||
import useZpaging from '@/composables/useZpaging.js';
|
||
import { queryRankWall } from '@/api/pointsAndRank.js';
|
||
import { getUserInfo } from '@/common/common';
|
||
const user_info = reactive({
|
||
userName: '',
|
||
userId: ''
|
||
});
|
||
const fetchFunction = (params) => {
|
||
return new Promise((resolve, reject) => {
|
||
queryRankWall().then(({ body }) => {
|
||
let originalData = body;
|
||
// 处理逻辑：构建二维数组（外层分类列表 + 内层徽章列表）
|
||
const twoDimensionalArray = [];
|
||
// 遍历每个分类，生成二维数组的每一项
|
||
Object.entries(originalData).forEach(([categoryKey, badgeArray]) => {
|
||
// 构建外层列表项：包含 name 和子列表 badgeList
|
||
const categoryItem = {
|
||
name: categoryKey, // 第一维度的 name 是原始键
|
||
child: badgeArray // 子列表：直接放入当前分类的所有徽章数据
|
||
};
|
||
// 将分类项加入二维数组
|
||
twoDimensionalArray.push(categoryItem);
|
||
});
|
||
uni.$emit('update_me_data', true);
|
||
resolve({
|
||
body: twoDimensionalArray
|
||
});
|
||
});
|
||
});
|
||
};
|
||
const { pagingRef, queryList, data_list, search } = useZpaging({
|
||
fetchFunction
|
||
});
|
||
|
||
onMounted(() => {
|
||
Object.assign(user_info, getUserInfo());
|
||
pagingRef.value.reload();
|
||
});
|
||
// onUnload(() => {});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.main-div {
|
||
padding-top: 30rpx;
|
||
}
|
||
.personal_information {
|
||
padding: 40rpx 26rpx 0 6vw;
|
||
display: flex;
|
||
// 个人头像框框
|
||
.profile {
|
||
border-radius: 100%;
|
||
// border: 2px solid #ffffff;
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
overflow: hidden;
|
||
border: 2rpx solid #b39e81;
|
||
}
|
||
|
||
// 头像右边的信息
|
||
.personal_information_data {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 26rpx;
|
||
overflow: hidden;
|
||
|
||
// 上边的姓名性别盒子
|
||
.name_sex_div {
|
||
display: flex;
|
||
margin-top: 6rpx;
|
||
justify-content: space-between;
|
||
|
||
.name {
|
||
font-family: PingFangSC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.work_number_div {
|
||
font-family: PingFangSC;
|
||
font-weight: 400;
|
||
font-size: 25rpx;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title-div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: nowrap;
|
||
margin: 20rpx 30rpx;
|
||
.title {
|
||
margin: 0 16rpx;
|
||
font-weight: 600;
|
||
font-size: 34rpx;
|
||
color: #ffd1a8;
|
||
text-align: center;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
}
|
||
.img {
|
||
width: 242rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.item-list-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start; /* 改为居中对齐 */
|
||
gap: 40rpx; /* 调大间距（根据需要调整数值） */
|
||
padding: 6vw;
|
||
box-sizing: border-box;
|
||
|
||
.item {
|
||
/* 计算宽度：总宽度减去两倍间距后三等分（保证三列） */
|
||
width: calc((100% - 80rpx) / 3); /* 间距40rpx时，左右两边间距总和为80rpx */
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
|
||
.badge-img {
|
||
width: calc(27vw - 14rpx); /* 基于父元素宽度计算，更适配 */
|
||
height: calc(27vw - 14rpx);
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
.badge-img-title {
|
||
margin-top: 10rpx;
|
||
// white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
line-height: 20px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
color: #e2d1cc;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.body-title {
|
||
width: 100%;
|
||
height: 70rpx;
|
||
font-size: 33rpx;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
position: relative;
|
||
text-align: center;
|
||
margin-top: calc(var(--status-bar-height) + 20rpx);
|
||
.delete_div {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 17rpx;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
|
||
.img {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
}
|
||
}
|
||
|
||
.back_div {
|
||
position: absolute;
|
||
left: 26rpx;
|
||
top: 17rpx;
|
||
.back-icon {
|
||
position: relative;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.back-icon::before,
|
||
.back-icon::after {
|
||
content: '';
|
||
position: absolute;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.back-icon::after {
|
||
top: 25%;
|
||
left: 25%;
|
||
width: 40%;
|
||
height: 40%;
|
||
border-top: 4rpx solid #fff;
|
||
border-left: 4rpx solid #fff;
|
||
transform: rotate(-45deg);
|
||
}
|
||
}
|
||
}
|
||
.z-paging-class {
|
||
min-height: 100vh;
|
||
background-image: url('@/static/images/pointsAndRank/badge-bg.png');
|
||
background-color: #000; /* 图片高度不足时的背景色 */
|
||
background-size: 100% auto; /* 宽度填满，高度自适应 */
|
||
background-position: center top; /* 图片顶部居中显示 */
|
||
background-repeat: no-repeat; /* 不重复平铺 */
|
||
background-color: #fef1dd;
|
||
}
|
||
</style>
|