182 lines
3.6 KiB
Vue
182 lines
3.6 KiB
Vue
<!-- 福利 -->
|
||
|
||
<template>
|
||
<page-container title="福利">
|
||
<banner :type-id="6" :height="326"></banner>
|
||
<view class="grid-container" style="padding: 0 32rpx; margin-top: 40rpx;">
|
||
<view class="grid-item" v-for="(item, index) 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>
|
||
</page-container>
|
||
</template>
|
||
|
||
<script>
|
||
import { getWelfareMenuList } from '@/common/server/welfare.js';
|
||
import PageContainer from '@/components/page-container/page-container.vue'
|
||
|
||
export default {
|
||
components: {
|
||
PageContainer
|
||
},
|
||
data() {
|
||
return {
|
||
list: []
|
||
}
|
||
},
|
||
onShareAppMessage() {
|
||
let imageUrl = this.$config.getShareImageUrl();
|
||
// 使用小写 id，兼容新版 .NET API
|
||
const userinfo = uni.getStorageSync('userinfo') || {};
|
||
const pid = userinfo.id || userinfo.ID || '';
|
||
return {
|
||
imageUrl: imageUrl,
|
||
title: this.$config.getAppSetting('share_title') || "哈尼盲盒上线,来就送！",
|
||
path: '/pages/shouye/index?pid=' + pid
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取福利屋菜单列表
|
||
async getWelfareList() {
|
||
// API: welfare_house_list
|
||
const res = await getWelfareMenuList();
|
||
if (res.status === 1 && res.data) {
|
||
this.list = res.data;
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || '获取福利列表失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
//跳转页面
|
||
toPage(item) {
|
||
if (item.url) {
|
||
console.log(item);
|
||
uni.setStorageSync('fuliwu_title', item.name)
|
||
this.$customRouter.navigateTo(item.url);
|
||
// this.$c.to({
|
||
// type:1,
|
||
// 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">
|
||
.grid-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 324rpx);
|
||
/* 三列，每列宽度相等 */
|
||
gap: 40rpx 42rpx;
|
||
/* 网格之间的间隔 */
|
||
animation: fadeIn 0.5s ease-out;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20rpx);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.grid-item {
|
||
position: relative;
|
||
|
||
text-align: center;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||
animation-fill-mode: both;
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%) scale(0);
|
||
opacity: 0;
|
||
transition: transform 0.6s ease-out, opacity 0.6s ease-out;
|
||
}
|
||
|
||
&:active::after {
|
||
transform: translate(-50%, -50%) scale(2);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes scaleIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.8);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.grid-item-bg {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.grid-item text {
|
||
z-index: 2;
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
transition: all 0.3s ease;
|
||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
// 为每个网格项添加延迟动画
|
||
.grid-item {
|
||
@for $i from 1 through 10 {
|
||
&:nth-child(#{$i}) {
|
||
animation-delay: #{$i * 0.1}s;
|
||
}
|
||
}
|
||
}
|
||
</style> |