volunteer-4/src/pages-sub/home/wishesList/components/ScrollListItem.vue

85 lines
3.0 KiB
Vue

<template>
<view class="h-[16rpx] bg-[#F5F5F5]"></view>
<view class="flex items-start p-[32rpx]">
<view class="flex flex-col items-center gap-[16rpx]">
<image :src="college.logo" mode="scaleToFill" class="w-[112rpx] h-[112rpx]" />
<view
class="w-[52rpx] h-[52rpx] rounded-[8rpx] font-semibold text-[28rpx] flex items-center justify-center"
:style="calcTypeName(college.type).style"
>
{{ calcTypeName(college.type).text }}
</view>
<text class="text-[32rpx] font-semibold">
{{
Math.round(
college.items.reduce((a, b) => a + Number(b.percentAge.replace('%', '')), 0) /
college.items.length,
)
}}%
</text>
</view>
<view class="flex flex-col ml-[24rpx] justify-between flex-1">
<view class="flex justify-between mb-[14rpx]">
<view class="flex justify-between flex-col gap-[6rpx]">
<text class="text-[32rpx] font-semibold">{{ college.unName }}</text>
<text class="text-[22rpx] text-[#505050]">
{{ college.city }}·{{ college.educationCategory }}
</text>
<view class="text-[22rpx] text-[#8F959E] flex items-center">
<text class="truncate max-w-[300rpx]" v-show="college.features.length > 0">
{{ college.features.slice(0, 3).join('/') }}/
</text>
<text>排名{{ college.rank }}</text>
</view>
<view class="text-[22rpx] text-[#1F2329] mt-[8rpx] flex gap-[10rpx]">
<text class="">代码{{ college.collegeCode }}</text>
<text>
{{ college.year }}计划{{ college.items.reduce((a, b) => a + b.planCount, 0) }}人
</text>
</view>
</view>
<view class="flex flex-col gap-[8rpx] items-center whitespace-nowrap">
<view
class="text-[24rpx] px-[16rpx] py-[12rpx] rounded-[8rpx] border-[2rpx] border-[#1580FF] border-solid whitespace-nowrap flex items-center text-[#1580FF]"
@click.stop="handleShow"
>
<view class="i-carbon-add-large"></view>
<view>专业{{ college.items.length }}</view>
</view>
<text class="text-[20rpx] text-[#8F959E]" v-if="collegeMajorCount > 0">
{{ collegeMajorCount }}
</text>
</view>
</view>
<DataTable :data="college.childItems" v-bind="$attrs" />
</view>
</view>
</template>
<script lang="ts" setup>
import DataTable from './DataTable.vue'
import { useUserStore } from '@/store/user'
import { calcTypeName } from '../composable/useWishesList'
const userStore = useUserStore()
const props = defineProps({
college: Object,
})
const emit = defineEmits(['showAction'])
const handleShow = () => {
emit('showAction', props.college)
}
const collegeMajorCount = computed(() => {
return (
userStore.userInfo.wishList.find((item) => item.uId === props.college.uId)?.vItems.length || 0
)
})
</script>
<style lang="scss" scoped></style>