154 lines
3.9 KiB
Vue
154 lines
3.9 KiB
Vue
<route lang="json5" type="page">
|
|
{
|
|
style: {
|
|
navigationBarTitleText: '我的收藏',
|
|
},
|
|
}
|
|
</route>
|
|
|
|
<template>
|
|
<z-paging
|
|
ref="paging"
|
|
use-virtual-list
|
|
:force-close-inner-list="true"
|
|
cell-height-mode="dynamic"
|
|
@virtualListChange="virtualListChange"
|
|
@query="queryList"
|
|
:auto-show-system-loading="true"
|
|
>
|
|
<!-- <template #top>
|
|
<z-tabs
|
|
:current="currentTab"
|
|
:list="tabsList"
|
|
:scrollCount="4"
|
|
inactive-color="#BFBFBF"
|
|
active-color="#303030"
|
|
:bar-style="{ backgroundColor: '#1580FF' }"
|
|
:tabsStyle="{ position: 'sticky', top: '0', zIndex: '9' }"
|
|
@change="handleTabChange"
|
|
v-bind="{} as any"
|
|
/>
|
|
</template> -->
|
|
<view
|
|
class="item-wrapper"
|
|
:id="`zp-id-${item.zp_index}`"
|
|
:key="item.zp_index"
|
|
v-for="item in starList"
|
|
>
|
|
<view
|
|
class="flex gap-[24rpx] py-[40rpx] border-bt"
|
|
v-if="currentTab === 0"
|
|
@click.stop="navigatorTo(item)"
|
|
>
|
|
<image
|
|
class="min-w-[112rpx] min-h-[112rpx] w-[112rpx] h-[112rpx]"
|
|
:src="item.logo"
|
|
mode="scaleToFill"
|
|
/>
|
|
<view class="flex flex-col flex-1">
|
|
<text class="text-[28rpx] text-[#333] font-semibold mb-[6rpx]">
|
|
{{ item.name }}
|
|
</text>
|
|
<view class="flex flex-wrap items-center gap-[8rpx] mb-[16rpx]">
|
|
<view
|
|
class="truncate max-w-[136rpx] bg-[#f8f8f8] rounded-[4rpx] text-[20rpx] px-[8rpx] py-[2rpx]"
|
|
v-for="(fea, fIndex) in item.features.slice(0, 5)"
|
|
:key="fIndex"
|
|
>
|
|
{{ fea }}
|
|
</view>
|
|
</view>
|
|
<text class="text-[22rpx] text-[#999] font-normal">
|
|
{{ item.cityName }}.{{ item.nature }}
|
|
</text>
|
|
</view>
|
|
<button class="collect-btn" plain @click.stop="handleStar(item)">
|
|
<view class="i-carbon-star-filled text-[#FFB032]" v-if="item.isStar"></view>
|
|
<view class="i-carbon-star" v-else></view>
|
|
收藏
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
|
|
import { addUnCollection, deleteUnCollection, getUnCollectionList } from '@/service/index/api'
|
|
import { useUserStore } from '@/store'
|
|
|
|
const userStore = useUserStore()
|
|
|
|
// const tabsList = ['院校']
|
|
const currentTab = ref(0)
|
|
|
|
// const handleTabChange = (index: number) => {
|
|
// currentTab.value = index
|
|
// }
|
|
|
|
const starList = ref([])
|
|
const paging = ref(null)
|
|
|
|
const queryList = (page: number, pageSize: number) => {
|
|
getUnCollectionList({
|
|
Page: page,
|
|
PageSize: pageSize,
|
|
SearchKey: '',
|
|
}).then((res) => {
|
|
if (res.code === 200) {
|
|
paging.value.complete((res.result as any[]).map((item) => ({ ...item, isStar: true })))
|
|
}
|
|
})
|
|
}
|
|
const virtualListChange = (_vList) => {
|
|
starList.value = _vList
|
|
}
|
|
|
|
const handleStar = (item: any) => {
|
|
if (item.isStar) {
|
|
deleteUnCollection({
|
|
wxId: userStore.userInfo.estimatedAchievement.wxId,
|
|
uId: item._id,
|
|
}).then((resp) => {
|
|
if (resp.code === 200) {
|
|
item.isStar = false
|
|
}
|
|
})
|
|
} else {
|
|
addUnCollection({
|
|
wxId: userStore.userInfo.estimatedAchievement.wxId,
|
|
uId: item._id,
|
|
}).then((resp) => {
|
|
if (resp.code === 200) {
|
|
item.isStar = true
|
|
}
|
|
})
|
|
}
|
|
}
|
|
const navigatorTo = (item: any) => {
|
|
uni.navigateTo({ url: `/pages-sub/home/college/info?collegeId=${item._id}` })
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.collect-btn {
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #eeeeee;
|
|
font-size: 22rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8rpx;
|
|
line-height: 1;
|
|
padding: 8rpx 12rpx;
|
|
height: max-content;
|
|
}
|
|
.item-wrapper {
|
|
padding: 0 32rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.border-bt {
|
|
border-bottom: 2rpx solid #eeeeee;
|
|
}
|
|
</style>
|