135 lines
4.7 KiB
Vue
135 lines
4.7 KiB
Vue
<script lang="ts" setup>
|
|
import ReadMore from "@/pages-sub/components/read-more/index.vue"
|
|
|
|
const props = defineProps({
|
|
schoolDetail: {
|
|
type: Object,
|
|
default: () => ({
|
|
schoolName: '',
|
|
tags: '',
|
|
region: '',
|
|
schoolNature: "",
|
|
overview: "",
|
|
admissionOfficePhone: "",
|
|
officialWebsite: ""
|
|
})
|
|
}
|
|
})
|
|
|
|
const officePhoneList = computed(() => {
|
|
return JSON.parse(props.schoolDetail.admissionOfficePhone || '[]')
|
|
})
|
|
|
|
const contacts = computed(() => {
|
|
|
|
const phone = officePhoneList.value.length > 0 ? officePhoneList.value[0]["phone"] : '暂无电话'
|
|
return [
|
|
{
|
|
title: '招办电话', msg: phone, type: 'phone', typeLabel: '拨打', eventClick: () => {
|
|
visible.value = true;
|
|
renderType.value = 'phone';
|
|
}
|
|
},
|
|
{
|
|
title: '学校官网', msg: props.schoolDetail.officialWebsite, type: 'view', typeLabel: '复制', eventClick: () => {
|
|
uni.setClipboardData({
|
|
data: props.schoolDetail.officialWebsite
|
|
})
|
|
}
|
|
},
|
|
{
|
|
title: '就读地址', msg: props.schoolDetail.address, type: 'navigation', typeLabel: '导航', eventClick: () => {
|
|
uni.openLocation({
|
|
longitude: Number.parseFloat(props.schoolDetail.lng),
|
|
latitude: Number.parseFloat(props.schoolDetail.lat),
|
|
address: props.schoolDetail.address,
|
|
name: props.schoolDetail.address,
|
|
scale: 5
|
|
})
|
|
}
|
|
},
|
|
{
|
|
title: '公众号', msg: props.schoolDetail.schoolName, type: 'gzh', typeLabel: '查看', eventClick: () => {
|
|
visible.value = true;
|
|
renderType.value = 'gzh';
|
|
}
|
|
}
|
|
]
|
|
})
|
|
|
|
const visible = ref(false)
|
|
|
|
const onOverlayClick = () => {
|
|
visible.value = false
|
|
}
|
|
|
|
const renderType = ref("phone")
|
|
|
|
const makePhoneCall = (val: string) => {
|
|
uni.makePhoneCall({ phoneNumber: val })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="bg-[#f8f8f8]">
|
|
<view class="bg-white flex flex-col px-[30rpx] py-[20rpx]">
|
|
<view class="text-[#000] font-500 text-[30rpx] mb-[10rpx]">学校概况</view>
|
|
<ReadMore :paragraph="schoolDetail.overview" />
|
|
</view>
|
|
<view class="px-[30rpx] pt-[20rpx] bg-white mt-[20rpx]">
|
|
<view class="text-[30rpx] text-black font-500">联系方式</view>
|
|
<view
|
|
class="flex items-center text-[26rpx] text-[#333] border-b-[2rpx] border-b-solid border-b-[#ededed] py-[22rpx]"
|
|
v-for="(val, index) in contacts" :key="index">
|
|
<view class="min-w-max">{{ val.title }}:</view>
|
|
<view>{{ val.msg }}</view>
|
|
<view
|
|
class="ml-auto border-[2rpx] border-solid text-[#1580FF] border-[#1580FF] rounded-[8rpx] px-[12rpx] py-[8rpx] text-[22rpx] min-w-max"
|
|
@click="val.eventClick">{{ val.typeLabel }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<sar-popup :visible="visible" effect="slide-bottom" @overlay-click="onOverlayClick">
|
|
<view class="bg-white pb-safe rounded-[24rpx_24rpx_0_0]" v-if="renderType === 'phone'">
|
|
<view
|
|
class="text-[#1580FF] py-[32rpx] text-center not-last:border-b-1 not-last:border-b-[#eaeaea] not-last:border-b-solid"
|
|
v-for="value in officePhoneList" :key="value" @click="makePhoneCall(value.phone)">
|
|
{{ value.name }}:{{ value.phone }}
|
|
</view>
|
|
<view class="bg-[#F2F2F2] h-[16rpx]"></view>
|
|
<view class="text-[34rpx] text-[#000] text-center pt-[32rpx]" @click="onOverlayClick">取消</view>
|
|
</view>
|
|
|
|
|
|
<view class="bg-white pb-safe rounded-[24rpx_24rpx_0_0]" v-if="renderType === 'gzh'">
|
|
<view class="text-[34rpx] font-500 flex items-center justify-between p-[30rpx]">
|
|
<view>官方微信公众号</view>
|
|
<view class="w-[36rpx] h-[36rpx] flex items-center" @click="onOverlayClick">
|
|
<image src="https://lwzk.ycymedu.com/img/tianbao/tb_guanbi.png" mode="scaleToFill"
|
|
class="w-[36rpx] h-[36rpx]" />
|
|
</view>
|
|
</view>
|
|
<view class="h-[560rpx] flex flex-col justify-center">
|
|
<view class="flex items-center justify-center">
|
|
<view class="border-[2rpx] border-solid border-[#3b9df4]">
|
|
<view class="w-[292rpx] h-[292rpx]">
|
|
<image :src="schoolDetail.wechatQrcode" mode="scaleToFill" :show-menu-by-longpress="true"
|
|
class="w-[292rpx] h-[292rpx]" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-center mt-[20rpx]">
|
|
<view class="w-[28rpx] h-[34rpx] flex items-center">
|
|
<image src="https://lwzk.ycymedu.com/img/qt/wd_zhiwen.png" mode="scaleToFill"
|
|
class="w-[28rpx] h-[34rpx]" />
|
|
</view>
|
|
<view class="text-[28rpx]">长按识别二维码关注公众号</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</sar-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|