|
|
@@ -54,27 +54,16 @@
|
|
|
<text class="announcement-content">暂无公告</text>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 功能菜单 -->
|
|
|
- <view class="menu-grid">
|
|
|
- <view class="menu-item" @click="navigateToMyResources">
|
|
|
- <view class="menu-icon resources"></view>
|
|
|
- <text class="menu-text">我的资源</text>
|
|
|
- </view>
|
|
|
- <view class="menu-item" @click="navigateToQualityResources">
|
|
|
- <view class="menu-icon quality"></view>
|
|
|
- <text class="menu-text">优质资源</text>
|
|
|
- </view>
|
|
|
- <view class="menu-item" @click="navigateToCourses">
|
|
|
- <view class="menu-icon courses"></view>
|
|
|
- <text class="menu-text">课程培训</text>
|
|
|
- </view>
|
|
|
- <view class="menu-item" @click="navigateToPointsMall">
|
|
|
- <view class="menu-icon mall"></view>
|
|
|
- <text class="menu-text">积分商城</text>
|
|
|
- </view>
|
|
|
- <view class="menu-item" @click="navigateToActivityCenter">
|
|
|
- <view class="menu-icon activity"></view>
|
|
|
- <text class="menu-text">活动中心</text>
|
|
|
+ <!-- 核心功能入口 -->
|
|
|
+ <view class="function-grid">
|
|
|
+ <view class="grid-item"
|
|
|
+ v-for="item in functionList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="navigateToFunction(item)">
|
|
|
+ <view class="grid-icon-wrapper" :style="{ background: item.gradient || item.bgColor || '#FFE5F1' }">
|
|
|
+ <text class="grid-icon" :style="{ color: item.iconColor || '#333333' }">{{ item.icon }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="grid-text">{{ item.name }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -139,18 +128,20 @@ import api from '@/utils/api.js'
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {
|
|
|
- bestMatchmakers: [],
|
|
|
- announcements: [],
|
|
|
- currentAnnouncementIndex: 0,
|
|
|
- makerName: uni.getStorageSync("userInfo").nickname,
|
|
|
- matchmakerInfo: {
|
|
|
- realName: '',
|
|
|
- avatarUrl: '',
|
|
|
- successCouples: 0,
|
|
|
- points: 0
|
|
|
+ return {
|
|
|
+ bestMatchmakers: [],
|
|
|
+ announcements: [],
|
|
|
+ currentAnnouncementIndex: 0,
|
|
|
+ makerName: uni.getStorageSync("userInfo").nickname,
|
|
|
+ matchmakerInfo: {
|
|
|
+ realName: '',
|
|
|
+ avatarUrl: '',
|
|
|
+ successCouples: 0,
|
|
|
+ points: 0
|
|
|
+ },
|
|
|
+ // 金刚区功能列表（从数据库获取）
|
|
|
+ functionList: []
|
|
|
}
|
|
|
- }
|
|
|
},
|
|
|
computed: {
|
|
|
currentAnnouncement() {
|
|
|
@@ -162,10 +153,11 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
- this.loadMatchmakerInfo()
|
|
|
- this.loadRankingData()
|
|
|
- this.loadAnnouncements()
|
|
|
- },
|
|
|
+ this.loadMatchmakerInfo()
|
|
|
+ this.loadRankingData()
|
|
|
+ this.loadAnnouncements()
|
|
|
+ this.loadFunctionGridData()
|
|
|
+ },
|
|
|
methods: {
|
|
|
// 加载当前登录红娘信息
|
|
|
async loadMatchmakerInfo() {
|
|
|
@@ -228,22 +220,47 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 加载公告数据
|
|
|
- async loadAnnouncements() {
|
|
|
- try {
|
|
|
- const res = await api.home.getNotices()
|
|
|
- if (res && Array.isArray(res)) {
|
|
|
- this.announcements = res
|
|
|
- } else if (res && res.data && Array.isArray(res.data)) {
|
|
|
- this.announcements = res.data
|
|
|
- }
|
|
|
- // 如果有多条公告，自动轮播
|
|
|
- if (this.announcements.length > 1) {
|
|
|
- this.startAnnouncementCarousel()
|
|
|
+ async loadAnnouncements() {
|
|
|
+ try {
|
|
|
+ const res = await api.home.getNotices()
|
|
|
+ if (res && Array.isArray(res)) {
|
|
|
+ this.announcements = res
|
|
|
+ } else if (res && res.data && Array.isArray(res.data)) {
|
|
|
+ this.announcements = res.data
|
|
|
+ }
|
|
|
+ // 如果有多条公告，自动轮播
|
|
|
+ if (this.announcements.length > 1) {
|
|
|
+ this.startAnnouncementCarousel()
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('加载公告失败:', e)
|
|
|
}
|
|
|
- } catch (e) {
|
|
|
- console.error('加载公告失败:', e)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载金刚区功能数据
|
|
|
+ async loadFunctionGridData() {
|
|
|
+ try {
|
|
|
+ // 获取红娘端金刚区功能列表
|
|
|
+ console.log('开始请求金刚区数据...')
|
|
|
+ const res = await api.home.getFunctionGridByType('matchmaker')
|
|
|
+ console.log('金刚区API返回结果:', res)
|
|
|
+
|
|
|
+ // 由于api.js中的request函数已经处理了响应，res直接是res.data.data或res.data
|
|
|
+ if (Array.isArray(res)) {
|
|
|
+ this.functionList = res
|
|
|
+ console.log('金刚区数据加载成功，共', this.functionList.length, '项:', this.functionList)
|
|
|
+ } else if (res && res.code === 200 && Array.isArray(res.data)) {
|
|
|
+ this.functionList = res.data
|
|
|
+ console.log('金刚区数据加载成功，共', this.functionList.length, '项:', this.functionList)
|
|
|
+ } else {
|
|
|
+ console.error('金刚区API返回数据格式不正确:', res)
|
|
|
+ this.functionList = []
|
|
|
}
|
|
|
- },
|
|
|
+ } catch (e) {
|
|
|
+ console.error('加载金刚区功能失败:', e)
|
|
|
+ this.functionList = []
|
|
|
+ }
|
|
|
+ },
|
|
|
// 公告轮播
|
|
|
startAnnouncementCarousel() {
|
|
|
setInterval(() => {
|
|
|
@@ -283,11 +300,18 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
// 导航到活动中心
|
|
|
- navigateToActivityCenter() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/matchmaker-workbench/activities'
|
|
|
- })
|
|
|
- },
|
|
|
+ navigateToActivityCenter() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/matchmaker-workbench/activities'
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 通用功能导航方法
|
|
|
+ navigateToFunction(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: item.path
|
|
|
+ })
|
|
|
+ },
|
|
|
// 导航到排行榜
|
|
|
navigateToRanking() {
|
|
|
uni.navigateTo({
|
|
|
@@ -365,8 +389,8 @@ export default {
|
|
|
|
|
|
.search-icon,
|
|
|
.settings-icon {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
+ width: 33rpx;
|
|
|
+ height: 33rpx;
|
|
|
background-size: contain;
|
|
|
background-repeat: no-repeat;
|
|
|
background-position: center;
|
|
|
@@ -580,61 +604,115 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-/* 功能菜单 */
|
|
|
-.menu-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(5, 1fr);
|
|
|
- gap: 25rpx;
|
|
|
- padding: 35rpx 20rpx;
|
|
|
- background: #FFFFFF;
|
|
|
+/* 核心功能入口 */
|
|
|
+.function-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ gap: 20rpx;
|
|
|
+ margin: 20rpx 10rpx;
|
|
|
+ padding: 25rpx 15rpx;
|
|
|
+ background: #fefeff;
|
|
|
border-radius: 20rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
-
|
|
|
- .menu-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- gap: 15rpx;
|
|
|
+ border: 2rpx solid #f0f0f5;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(220, 220, 240, 0.2);
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
|
|
|
- .menu-icon {
|
|
|
- width: 90rpx;
|
|
|
- height: 90rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background-size: 50rpx 50rpx;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
+.grid-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 12rpx;
|
|
|
+ padding: 15rpx 8rpx;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: linear-gradient(180deg, #fff 0%, #fdfdff 100%);
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(220, 220, 240, 0.15);
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &:active {
|
|
|
+ transform: translateY(-4rpx) scale(0.98);
|
|
|
+ background: linear-gradient(180deg, #fff 0%, #f8f8ff 100%);
|
|
|
+ box-shadow: 0 6rpx 18rpx rgba(200, 200, 230, 0.25);
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- &.resources {
|
|
|
- background-color: #E8F5E9;
|
|
|
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
|
|
|
- }
|
|
|
+/* 为不同功能定制图标容器底色（贴合功能主题） */
|
|
|
+.grid-item:nth-child(1) .grid-icon-wrapper {
|
|
|
+ background: linear-gradient(135deg, #ff85a2 0%, #ff5d8f 100%);
|
|
|
+}
|
|
|
+.grid-item:nth-child(2) .grid-icon-wrapper {
|
|
|
+ background: linear-gradient(135deg, #85cfff 0%, #5daaff 100%);
|
|
|
+}
|
|
|
+.grid-item:nth-child(3) .grid-icon-wrapper {
|
|
|
+ background: linear-gradient(135deg, #ffc885 0%, #ffaa5d 100%);
|
|
|
+}
|
|
|
+.grid-item:nth-child(4) .grid-icon-wrapper {
|
|
|
+ background: linear-gradient(135deg, #ff85d2 0%, #ff5daa 100%);
|
|
|
+}
|
|
|
|
|
|
- &.quality {
|
|
|
- background-color: #FFF3E0;
|
|
|
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF9800"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
|
|
|
- }
|
|
|
+.grid-icon-wrapper {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: inset 0 3rpx 10rpx rgba(255, 255, 255, 0.4),
|
|
|
+ 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
|
|
|
- &.courses {
|
|
|
- background-color: #E3F2FD;
|
|
|
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232196F3"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19h14v-2H5v2zm0-4h14v-2H5v2zm0-4h14v-2H5v2z"/></svg>');
|
|
|
- }
|
|
|
+.grid-icon-wrapper::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: -50%;
|
|
|
+ left: -50%;
|
|
|
+ width: 200%;
|
|
|
+ height: 200%;
|
|
|
+ background: linear-gradient(135deg,
|
|
|
+ rgba(255, 255, 255, 0.7) 0%,
|
|
|
+ rgba(255, 255, 255, 0.3) 40%,
|
|
|
+ transparent 80%);
|
|
|
+ transform: rotate(45deg);
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
|
|
|
- &.mall {
|
|
|
- background-color: #F3E5F5;
|
|
|
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>');
|
|
|
- }
|
|
|
+.grid-icon {
|
|
|
+ font-size: 80rpx;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.15));
|
|
|
+}
|
|
|
|
|
|
- &.activity {
|
|
|
- background-color: #FFEBEE;
|
|
|
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F44336"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>');
|
|
|
- }
|
|
|
- }
|
|
|
+.grid-text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #2d2d46;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.2;
|
|
|
+ text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.05);
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ max-width: 100%;
|
|
|
+}
|
|
|
|
|
|
- .menu-text {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
+/* 响应式适配：小屏自动改为2列 */
|
|
|
+@media (max-width: 600rpx) {
|
|
|
+ .grid-item {
|
|
|
+ min-width: calc(50% - 15rpx);
|
|
|
+ max-width: calc(50% - 15rpx);
|
|
|
}
|
|
|
}
|
|
|
|
