volunteer-4/src/pages-sub/home/college/info.vue

<route lang="json5" type="page">
{
  layout: 'page',
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="flex flex-col h-screen">
    <view class="relative">
      <Navbar
        safeAreaInsetTop
        bg-color="transparent"
        :bordered="false"
        left-arrow
        @click-left="navigatorBack"
        content-class="justify-between"
      ></Navbar>
      <view class="custom-background h-[200rpx] w-full absolute top-0 left-0 z-[-1]"></view>
    </view>

    <scroll-view class="flex-1 flex flex-col pb-safe" :scroll-y="true">
      <view class="flex items-center p-[32rpx]" hover-class="none">
        <image
          class="w-[104rpx] h-[104rpx]"
          :src="universityBaseInfo?.universityResult.logo"
          :lazy-load="true"
        ></image>
        <view class="flex flex-col ml-[24rpx]">
          <text class="text-[32rpx] font-semibold text-[#303030]">
            {{ universityBaseInfo?.universityResult.name }}
          </text>
          <text class="text-[22rpx] font-normal text-[#303030] mt-[6rpx]">
            {{ universityBaseInfo?.universityResult.provinceName }}·{{
              universityBaseInfo?.universityResult.level === 0 ? '本科' : '专科'
            }}·{{ universityBaseInfo?.universityResult.nature }}
          </text>
          <text class="mt-[14rpx] text-[22rpx] font-normal text-[#303030]">
            {{ universityBaseInfo?.universityResult.features.slice(0, 4).join('/&nbsp;') }}
          </text>
        </view>
        <button class="collect-btn" plain @click="handleStar">
          <view class="i-carbon-star-filled" v-if="startFlag"></view>
          <view class="i-carbon-star" v-else></view>
          收藏
        </button>
      </view>

      <view class="card-swiper mb-[32rpx]">
        <wd-swiper
          :display-multiple-items="universityBaseInfo?.universityResult.imglist ? 3 : 0"
          custom-image-class="custom-image"
          custom-next-image-class="custom-image-prev"
          custom-prev-image-class="custom-image-prev"
          :list="universityBaseInfo?.universityResult.imglist || []"
          previousMargin="8rpx"
          nextMargin="8rpx"
          :indicator="false"
        ></wd-swiper>
      </view>

      <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"
      />
      <view class="bg-[#f8f8f8]" v-show="currentTab === 0">
        <Profile :university-result="universityBaseInfo?.universityResult" />
        <FirstClass :id="collegeId" />
        <Colleges :id="collegeId" />
      </view>
      <view class="bg-[#f8f8f8]" v-show="currentTab === 1">
        <EnrollmentPlan :id="collegeId"></EnrollmentPlan>
      </view>
      <EnrollmentIntro :id="collegeId" v-show="currentTab === 2" />
      <EnrollmentMark :id="collegeId" v-show="currentTab === 3" />
      <Situation :id="collegeId" v-show="currentTab === 4" />
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import Profile from './components/Profile.vue'
import FirstClass from './components/FirstClass.vue'
import Colleges from './components/Colleges.vue'
import EnrollmentPlan from './components/EnrollmentPlan.vue'
import EnrollmentIntro from './components/EnrollmentIntro.vue'
import EnrollmentMark from './components/EnrollmentMark.vue'
import Situation from './components/Situation.vue'
import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'

import {
  getUniversityInfo,
  getUnCollectionList,
  deleteUnCollection,
  addUnCollection,
} from '@/service/index/api'
import { useUserStore } from '@/store'

const userStore = useUserStore()
const navigatorBack = () => {
  uni.navigateBack()
}

const universityBaseInfo = ref()

const collegeId = ref(0)

onLoad((options) => {
  collegeId.value = Number(options.collegeId) || 0
  getUniversityInfo({ Id: collegeId.value }).then((res) => {
    if (res.code === 200) {
      universityBaseInfo.value = res.result
      getUnCollectionList({
        SearchKey: universityBaseInfo.value.universityResult.name,
      }).then((resp) => {
        if (resp.code === 200 && (resp.result as any[]).length > 0) {
          startFlag.value = true
        } else {
          startFlag.value = false
        }
      })
    }
  })
})

const tabsList = ['院校简介', '招生计划', '招生简章', '录取分数线', '查扩缩招']
const currentTab = ref(0)

const handleTabChange = (index: number) => {
  currentTab.value = index
}

const startFlag = ref(false)
const handleStar = () => {
  if (startFlag.value && universityBaseInfo.value.universityResult._id) {
    // 收藏了，取消收藏
    deleteUnCollection({
      wxId: userStore.userInfo.estimatedAchievement.wxId,
      uId: universityBaseInfo.value._id,
    }).then((resp) => {
      if (resp.code === 200) {
        startFlag.value = false
      }
    })
  } else {
    addUnCollection({
      wxId: userStore.userInfo.estimatedAchievement.wxId,
      uId: universityBaseInfo.value._id,
    }).then((resp) => {
      if (resp.code === 200) {
        startFlag.value = true
      }
    })
  }
}
</script>

<style lang="scss" scoped>
:deep(.custom-background) {
  background-image: linear-gradient(
    180deg,
    rgb(177, 221, 250) 0,
    rgb(177, 221, 250) 14%,
    rgb(232, 244, 252) 68%,
    rgba(255, 255, 255, 1) 86%,
    rgba(255, 255, 255, 1) 100%,
    rgba(255, 255, 255, 1) 100%
  );
  background-position: 50% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: auto auto;
}

:deep(.collect-btn) {
  border: 2rpx solid #eee !important;
  color: #636363 !important;

  width: unset !important;
  min-width: unset !important;
  border-radius: 12rpx !important;
  margin-right: 0 !important;
  padding: 12rpx !important;
  line-height: 1 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  font-size: 24rpx !important;
}

:deep(.wd-button__icon) {
  margin-right: 8rpx !important;
  line-height: 1;
}

.card-swiper {
  --wot-swiper-radius: 0;
  --wot-swiper-item-padding: 0 8rpx;
  --wot-swiper-nav-dot-color: #e7e7e7;
  --wot-swiper-nav-dot-active-color: #4d80f0;

  :deep(.custom-image) {
    height: 126rpx !important;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }
  :deep(.custom-image-prev) {
    height: 126rpx !important;
  }

  :deep(.wd-swiper__track) {
    height: 126rpx !important;
  }
}

:deep(.tabs-wrapper) {
  --wot-tabs-nav-fs: 28rpx;
  --wot-tabs-nav-height: 80rpx;
  flex: 1 1 auto;
}
:deep(.wd-tabs__line) {
  bottom: 0 !important;
}

:deep(.wd-tabs__nav--wrap) {
  border-bottom: 2rpx solid #f7f7f7;
}
</style>