159 lines
3.8 KiB
Vue
159 lines
3.8 KiB
Vue
<!-- 更多服务 - 模仿首页功能入口网格 -->
|
||
<template>
|
||
<view class="more-service-page">
|
||
<!-- 标题区 -->
|
||
<view class="page-header">
|
||
<text class="page-title">更多服务</text>
|
||
<text class="page-subtitle">可在此处查看所有服务哦~</text>
|
||
</view>
|
||
|
||
<!-- 功能入口网格 4列自适应 -->
|
||
<view class="service-grid" v-if="serviceList.length > 0">
|
||
<view
|
||
class="grid-item"
|
||
v-for="(item, index) in serviceList"
|
||
:key="index"
|
||
@tap="handleServiceTap(item)"
|
||
>
|
||
<view class="icon-wrapper" :style="{ background: item.bgGradient }">
|
||
<image class="icon-img" :src="item.icon" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="icon-label">{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" v-else>
|
||
<text class="empty-text">暂无数据</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import NoticeApi from '@/sheep/api/community/notice';
|
||
|
||
// 服务列表
|
||
const serviceList = ref([]);
|
||
|
||
// 背景色预设（按索引循环使用）
|
||
const bgGradientPresets = [
|
||
'linear-gradient(35deg, #FF7F69 0%, #FC5A5D 100%)',
|
||
'linear-gradient(35deg, #52C41A 0%, #36AD1A 100%)',
|
||
'linear-gradient(35deg, #FFA940 0%, #FA8C16 100%)',
|
||
'linear-gradient(35deg, #4096FF 0%, #1890FF 100%)',
|
||
'linear-gradient(35deg, #69B1FF 0%, #4096FF 100%)',
|
||
'linear-gradient(35deg, #9254DE 0%, #722ED1 100%)',
|
||
'linear-gradient(35deg, #7B61FF 0%, #597EF7 100%)',
|
||
'linear-gradient(35deg, #36CFC9 0%, #13C2C2 100%)',
|
||
];
|
||
|
||
// 查询服务列表（position=2）
|
||
const fetchServiceList = async () => {
|
||
const { code, data } = await NoticeApi.getMiniAppConfigList(2);
|
||
if (code === 0 && data && data.length > 0) {
|
||
serviceList.value = data.map((item, index) => ({
|
||
label: item.name,
|
||
icon: item.icon,
|
||
path: item.url,
|
||
bgGradient: bgGradientPresets[index % bgGradientPresets.length],
|
||
}));
|
||
}
|
||
};
|
||
|
||
// 服务点击
|
||
const handleServiceTap = (item) => {
|
||
const path = item.path ? item.path.trim() : '';
|
||
if (path && path !== '/') {
|
||
uni.navigateTo({ url: path });
|
||
} else {
|
||
uni.showToast({ title: `${item.label}功能开发中`, icon: 'none' });
|
||
}
|
||
};
|
||
|
||
onLoad(() => {
|
||
fetchServiceList();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.more-service-page {
|
||
min-height: 100vh;
|
||
background-color: #F5F5F5;
|
||
padding: 24rpx;
|
||
|
||
.page-header {
|
||
margin-bottom: 32rpx;
|
||
|
||
.page-title {
|
||
display: block;
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
font-family: 'PingFang SC', sans-serif;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.page-subtitle {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
font-family: 'PingFang SC', sans-serif;
|
||
}
|
||
}
|
||
|
||
.service-grid {
|
||
background-color: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
padding: 32rpx 16rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.grid-item {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
|
||
.icon-wrapper {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 34rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
.icon-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.icon-label {
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
font-family: 'PingFang SC', sans-serif;
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-state {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 120rpx 0;
|
||
background-color: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
font-family: 'PingFang SC', sans-serif;
|
||
}
|
||
}
|
||
}
|
||
</style>
|