133 lines
2.7 KiB
Vue
133 lines
2.7 KiB
Vue
<!-- 福利 -->
|
||
|
||
<template>
|
||
<view class="content">
|
||
<uni-nav-bar color="#000000" backgroundColor="transparent" :fixed="true" :statusBar="true" :border="false">
|
||
<view style="font-size: 34rpx; width: 100%; display: flex; justify-content: center; align-items: center;">
|
||
福利
|
||
</view>
|
||
</uni-nav-bar>
|
||
<banner :type-id="6" :height="326"></banner>
|
||
<view class="grid-container" style="width: 100%; padding: 0 32rpx; margin-top: 40rpx;">
|
||
<view class="grid-item" v-for="(item) in list" :key="item.id" @click="toPage(item)" style="height: 184rpx;">
|
||
<image v-if="item.image" :src="item.image" mode="aspectFill" class="grid-item-bg"></image>
|
||
<text v-if="!item.image">{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import RequestManager from '@/common/request.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: []
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取福利屋菜单列表
|
||
getWelfareList() {
|
||
RequestManager.post('/welfare_house_list')
|
||
.then(res => {
|
||
if (res.status === 1 && res.data) {
|
||
this.list = res.data;
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || '获取福利列表失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.error('获取福利列表失败:', err);
|
||
uni.showToast({
|
||
title: '获取福利列表失败',
|
||
icon: 'none'
|
||
});
|
||
});
|
||
},
|
||
|
||
//跳转页面
|
||
toPage(item) {
|
||
|
||
|
||
if (item.url) {
|
||
this.$c.to({
|
||
url: item.url
|
||
});
|
||
}
|
||
}
|
||
},
|
||
onShow() {
|
||
this.current = 0
|
||
const curPages = getCurrentPages()[0]; // 获取当前页面实例
|
||
if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
|
||
this.$mp.page.getTabBar().setData({
|
||
selected: 1
|
||
});
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getWelfareList();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
/* padding-top: 1rpx; */
|
||
padding-bottom: 100px;
|
||
box-sizing: border-box;
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
.title1 {
|
||
width: 100%;
|
||
top: 108rpx;
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 34rpx;
|
||
justify-content: center;
|
||
color: black;
|
||
z-index: 100;
|
||
}
|
||
|
||
.grid-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 324rpx);
|
||
/* 三列，每列宽度相等 */
|
||
gap: 40rpx 42rpx;
|
||
/* 网格之间的间隔 */
|
||
}
|
||
|
||
.grid-item {
|
||
position: relative;
|
||
background-color: #D8D8D8;
|
||
text-align: center;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.grid-item-bg {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.grid-item text {
|
||
z-index: 2;
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
}
|
||
</style> |