university detail - preview

src/pagesOther/pages/university/detail/components/college-info.vue

@@ -34,7 +34,7 @@
                 <view class="text-30 font-bold">{{ info.comScore || '-'}}</view>
                 <view class="text-24">综合评分</view>
             </view>
-            <view class="flex-none min-w-120 p-28 flex flex-col items-center bg-back-light rounded-xl">
+            <view v-if="userStore.isHN" class="flex-none min-w-120 p-28 flex flex-col items-center bg-back-light rounded-xl">
                 <view class="text-30 font-bold">{{ info.tierName || '-'}}</view>
                 <view class="text-24">院校实力</view>
             </view>
@@ -50,6 +50,7 @@
 import {University} from "@/types/university";
 import _ from "lodash";
 import {concernUniversity, removeConcernedUniversity} from "@/api/modules/university";
+import {useUserStore} from "@/store/userStore";
 
 const props = defineProps<{
     info: University
@@ -57,6 +58,7 @@ const props = defineProps<{
 }>()
 const emits = defineEmits(['tag'])
 
+const userStore = useUserStore()
 const isCultural = ref(false) //useUserStore() // 这是早先兼容河南文化类填报时的字段
 const highlights = ['双高']
 const tagAttrs = {

src/pagesOther/pages/university/detail/components/college-profile.vue

@@ -17,14 +17,15 @@
         <view v-if="baseInfo.images?.length" class="mt-30">
             <view class="flex justify-between items-center">
                 <view class="text-32 font-bold text-fore-title">院校风采</view>
-                <view class="flex items-center text-24 text-fore-tip" @click="handlePreview(4)">
+                <view v-if="baseInfo.images.length>4" class="flex items-center text-24 text-fore-tip"
+                      @click="$refs.imagesPopup.open()">
                     查看更多
                     <uv-icon name="arrow-right" color="info"/>
                 </view>
             </view>
             <view class="mt-28 grid grid-cols-2 gap-28">
-                <ie-image v-for="(item,i) in baseInfo.images.slice(0,4)" :key="i" :src="item.url" mode="aspectFill" :round="6"
-                          custom-class="w-335 h-200" @click="handlePreview(i)" />
+                <ie-image v-for="(item,i) in baseInfo.images.slice(0,4)" :key="i" :src="item.url" mode="aspectFill"
+                          :round="6" custom-class="w-335 h-200" @click="handlePreview(i)"/>
             </view>
         </view>
         <view class="mt-30">
@@ -55,6 +56,15 @@
                 </scroll-view>
             </template>
         </ie-popup>
+        <ie-popup ref="imagesPopup" :show-toolbar="false">
+            <view class="h-90 flex justify-center items-center text-32 font-bold">院校风采</view>
+            <scroll-view scroll-y :style="{maxHeight: '50vh', backgroundColor: 'var(--back-light)'}">
+                <view class="p-30 grid grid-cols-2 gap-28">
+                    <ie-image v-for="(item,i) in baseInfo.images" :key="i" :src="item.url" mode="aspectFill"
+                              :round="6" custom-class="w-335 h-200" @click="handlePreview(i)"/>
+                </view>
+            </scroll-view>
+        </ie-popup>
     </view>
 </template>
 
@@ -90,6 +100,7 @@ defineProps({
     loading: Boolean
 })
 
+const imagesPopup = ref<InstanceType<typeof IePopup>>()
 const detail = inject(UNIVERSITY_DETAIL) || ref({} as UniversityDetail)
 const majorTree = inject(MAJOR_TREE) || ref([])
 const baseInfo = computed<University>(() => detail.value.baseInfo || {})
@@ -216,6 +227,7 @@ const handlePhone = () => {
 
 const handlePreview = (index: number) => {
     if (!baseInfo.value.images?.length) return
+    // TODO: uni.previewImage 与 ie-popup 在H5端有遮挡问题
     uni.previewImage({
         urls: baseInfo.value.images.map(i => i.url),
         current: index,
@@ -258,4 +270,7 @@ watch(() => baseInfo.value.introduction, async (val) => {
     font-size: 12px;
     color: #999999;
 }
+</style>
+
+<style lang="scss">
 </style>