|
@@ -235,20 +235,20 @@
|
|
|
<img class="title" src="@/assets/images/box-service.png" alt="公共服务">
|
|
<img class="title" src="@/assets/images/box-service.png" alt="公共服务">
|
|
|
<div class="services-grid">
|
|
<div class="services-grid">
|
|
|
|
|
|
|
|
- <a class="service-card" href="https://mp.weixin.qq.com/s/r6Tgsp068VNo4tVIA2sEHA" target="_blank">
|
|
|
|
|
|
|
+ <div class="service-card" @click="handleServiceClick('volunteer')">
|
|
|
<img class="icon" src="@/assets/images/icon-explore.png">
|
|
<img class="icon" src="@/assets/images/icon-explore.png">
|
|
|
<h3>志愿者招募</h3>
|
|
<h3>志愿者招募</h3>
|
|
|
<div class="service-link">
|
|
<div class="service-link">
|
|
|
<Icon name="material-symbols-light:chevron-right" />
|
|
<Icon name="material-symbols-light:chevron-right" />
|
|
|
</div>
|
|
</div>
|
|
|
- </a>
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
<div class="service-card" @click="handleServiceClick('activity')">
|
|
<div class="service-card" @click="handleServiceClick('activity')">
|
|
|
<img class="icon" src="@/assets/images/icon-join.png">
|
|
<img class="icon" src="@/assets/images/icon-join.png">
|
|
|
<h3>活动报名</h3>
|
|
<h3>活动报名</h3>
|
|
|
- <a href="#" class="service-link">
|
|
|
|
|
|
|
+ <div class="service-link">
|
|
|
<Icon name="material-symbols-light:chevron-right" />
|
|
<Icon name="material-symbols-light:chevron-right" />
|
|
|
- </a>
|
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="service-card" @click="router.push('/about/')">
|
|
<div class="service-card" @click="router.push('/about/')">
|
|
@@ -262,15 +262,30 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 扫码进入小程序对话框 -->
|
|
|
|
|
+ <AModal
|
|
|
|
|
+ v-model:open="qrModalVisible"
|
|
|
|
|
+ :title="qrModalTitle"
|
|
|
|
|
+ :footer="null"
|
|
|
|
|
+ centered
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="qr-modal-content">
|
|
|
|
|
+ <p class="qr-modal-tip">请扫码进入小程序</p>
|
|
|
|
|
+ <img v-if="qrImageSrc" :src="qrImageSrc" alt="小程序二维码" class="qr-modal-img">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </AModal>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
|
|
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
|
|
|
-import { ref } from 'vue';
|
|
|
|
|
|
|
+import { ref, computed } from 'vue';
|
|
|
import { useSSrSimpleDataLoader } from '@/composeable/SimpleDataLoader';
|
|
import { useSSrSimpleDataLoader } from '@/composeable/SimpleDataLoader';
|
|
|
import { DataDateUtils } from '@imengyu/js-request-transform';
|
|
import { DataDateUtils } from '@imengyu/js-request-transform';
|
|
|
import { MemoryTimeOut } from '@imengyu/imengyu-utils';
|
|
import { MemoryTimeOut } from '@imengyu/imengyu-utils';
|
|
|
|
|
+import volunteerQr from '@/assets/images/qr1/volunteer.png';
|
|
|
|
|
+import activityQr from '@/assets/images/qr1/activity.png';
|
|
|
import CarouselItem1 from '@/assets/images/board1/1.jpg';
|
|
import CarouselItem1 from '@/assets/images/board1/1.jpg';
|
|
|
import CarouselItem2 from '@/assets/images/board1/2.jpg';
|
|
import CarouselItem2 from '@/assets/images/board1/2.jpg';
|
|
|
import CarouselItem3 from '@/assets/images/board1/3.jpg';
|
|
import CarouselItem3 from '@/assets/images/board1/3.jpg';
|
|
@@ -335,31 +350,25 @@ const hot = await useSSrSimpleDataLoader('hot', async () => {
|
|
|
});
|
|
});
|
|
|
// 精彩推荐数据
|
|
// 精彩推荐数据
|
|
|
const featured = await useSSrSimpleDataLoader('featured', async () => {
|
|
const featured = await useSSrSimpleDataLoader('featured', async () => {
|
|
|
- const res = await $fetch(`/api/ecms/article/byChannelName?channelName=鹭岛文脉&pageSize=12`);
|
|
|
|
|
|
|
+ const res = await $fetch(`/api/ecms/article/byChannelName?channelName=非遗流韵,文保家园&pageSize=12`);
|
|
|
if (!res.status)
|
|
if (!res.status)
|
|
|
throw new Error(res.message);
|
|
throw new Error(res.message);
|
|
|
return res.data;
|
|
return res.data;
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+const qrModalVisible = ref(false);
|
|
|
|
|
+const qrModalType = ref<'volunteer' | 'activity'>('volunteer');
|
|
|
|
|
+const qrModalTitle = computed(() => qrModalType.value === 'volunteer' ? '志愿者招募' : '活动报名');
|
|
|
|
|
+const qrImageSrc = computed(() => qrModalType.value === 'volunteer' ? volunteerQr : activityQr);
|
|
|
|
|
+
|
|
|
function handleImageClick(image: ICarousel) {
|
|
function handleImageClick(image: ICarousel) {
|
|
|
window.open(image.url || image.image, '_blank');
|
|
window.open(image.url || image.image, '_blank');
|
|
|
}
|
|
}
|
|
|
-function handleServiceClick(service: string) {
|
|
|
|
|
- if (service === 'activity') {
|
|
|
|
|
- Modal.info({
|
|
|
|
|
- title: '提示',
|
|
|
|
|
- content: '暂无最新活动',
|
|
|
|
|
- });
|
|
|
|
|
- } else {
|
|
|
|
|
- Modal.info({
|
|
|
|
|
- title: '提示',
|
|
|
|
|
- content: '网站正在进行内部测试,暂未对外开放功能,敬请期待。',
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
|
|
+function handleServiceClick(service: 'volunteer' | 'activity') {
|
|
|
|
|
+ qrModalType.value = service;
|
|
|
|
|
+ qrModalVisible.value = true;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
const tipCounter = new MemoryTimeOut('devtip', 1000 * 3600);
|
|
const tipCounter = new MemoryTimeOut('devtip', 1000 * 3600);
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
@@ -373,8 +382,25 @@ onMounted(() => {
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<style lang="scss">
|
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
@use "sass:list";
|
|
@use "sass:list";
|
|
|
@use "sass:math";
|
|
@use "sass:math";
|
|
|
|
|
+
|
|
|
|
|
+.qr-modal-content {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding: 8px 0;
|
|
|
|
|
+ .qr-modal-tip {
|
|
|
|
|
+ margin-bottom: 16px;
|
|
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .qr-modal-img {
|
|
|
|
|
+ max-width: 100%;
|
|
|
|
|
+ width: 240px;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|
|
|
|
|
|