94 lines
3.7 KiB
Vue
94 lines
3.7 KiB
Vue
<script lang="ts" setup>
|
|
import { getSchoolCollection, starCollection } from "@/service"
|
|
import { useUserStore } from "@/store"
|
|
import { storeToRefs } from "pinia";
|
|
|
|
const props = defineProps({
|
|
schoolDetail: {
|
|
type: Object,
|
|
default: () => ({
|
|
schoolName: '',
|
|
tags: '',
|
|
region: '',
|
|
schoolNature: "",
|
|
imageList: []
|
|
})
|
|
}
|
|
})
|
|
|
|
const userStore = useUserStore();
|
|
const { userInfo } = storeToRefs(userStore)
|
|
const isStar = ref(false)
|
|
const innerImageList = computed(() => props.schoolDetail.imageList.map((item:string) => item.concat("?x-oss-process=image/resize,w_150")))
|
|
|
|
const handlePreviewImage = (src: string, index: number|string) => {
|
|
uni.previewImage({
|
|
urls: props.schoolDetail.imageList,
|
|
current: index,
|
|
})
|
|
}
|
|
|
|
const starSchool = () => {
|
|
starCollection({ data: { wxId: userInfo.value.userExtend.wxId, uId: props.schoolDetail.id } }).then(resp => {
|
|
if (resp.code === 200) {
|
|
isStar.value = resp.result
|
|
if (resp.result) {
|
|
uni.showToast({ title: "收藏成功" })
|
|
}
|
|
else {
|
|
uni.showToast({ title: "已取消收藏" })
|
|
}
|
|
|
|
}
|
|
})
|
|
}
|
|
onLoad(() => {
|
|
getSchoolCollection().then((resp) => {
|
|
if (resp.code === 200) {
|
|
isStar.value = resp.result.some((school:any) => school.id === props.schoolDetail.id)
|
|
}
|
|
})
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<view class="mx-[30rpx]">
|
|
<view class="flex items-center">
|
|
<view class="flex flex-col">
|
|
<text class="font-600 text-[40rpx] text-[#000]">{{ schoolDetail.schoolName }}</text>
|
|
<view class="flex items-center gap-[10rpx] my-[14rpx] flex-wrap" v-if="schoolDetail.tags">
|
|
<view class="rounded-[8rpx] bg-[#E03C331A] px-[10rpx] py-[4rpx] text-[24rpx] text-[#E03C33] flex items-center gap-[4rpx]" v-if="schoolDetail.schoolName === '济南市深泉外国语学校'">
|
|
<image
|
|
src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/home/xuexiao_remen.png"
|
|
mode="widthFix"
|
|
class="w-[24rpx] h-[24rpx]"
|
|
/>
|
|
{{ new Date().getFullYear() - 1 }}招生计划完成率100%</view>
|
|
<view
|
|
class="bg-[#F8F8F8] px-[10rpx] py-[4rpx] text-[24rpx] text-[#666]"
|
|
v-for="feature in schoolDetail.tags.split(/[\s,，、]+/)" :key="feature">{{ feature }}</view>
|
|
</view>
|
|
<view class="text-[#303030] text-[24rpx] mb-[10rpx]">{{ schoolDetail.region }}·{{
|
|
schoolDetail.schoolNature }}</view>
|
|
</view>
|
|
<view
|
|
class="flex items-center rounded-[8rpx] border-[2rpx] border-solid border-[#eee] bg-[#fff] py-[8rpx] px-[12rpx] ml-auto text-[#636363] text-[22rpx] min-w-max"
|
|
@click="starSchool">
|
|
<sar-icon :name="!isStar ? 'star' : 'star-fill'" size="12" class="mr-[8rpx]"
|
|
:color="!isStar ? '#636363' : '#73b3ff'" />
|
|
收藏
|
|
</view>
|
|
</view>
|
|
<swiper class="basis-full h-[126rpx] flex mb-[20rpx]" circular :autoplay="true" :indicator="false" v-if="schoolDetail.imageList"
|
|
:display-multiple-items="3">
|
|
<swiper-item v-for="(item, index) in innerImageList" :key="item" class="flex justify-center">
|
|
<image :src="item" mode="aspectFill" class="w-full h-full mx-[4rpx] rounded-[8rpx]"
|
|
@click.stop="handlePreviewImage(item, index)" />
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|