<!-- 福利 -->

<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="150"></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>