86 lines
3.1 KiB
Vue
86 lines
3.1 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 handlePreviewImage = (src: string, index: number) => {
|
|
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 => 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-[#F8F8F8] px-[10rpx] py-[4rpx] text-[24rpx] text-[#666] first:border-solid border-red border-[1rpx]"
|
|
v-for="feature in schoolDetail.tags.split('、')" :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]" circular :autoplay="true" :indicator="false" v-if="schoolDetail.imageList"
|
|
:display-multiple-items="schoolDetail.imageList.length > 2 ? 3 : 1">
|
|
<swiper-item v-for="(item, index) in schoolDetail.imageList" :key="item" class="flex justify-center">
|
|
<image :src="item" mode="scaleToFill" class="w-full h-full mx-[4rpx] rounded-[8rpx]"
|
|
@click.stop="handlePreviewImage(item, index)" />
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|