111
This commit is contained in:
1173117610@qq.com
parent
dca9e0dcba
commit
d0f708eeb8
|
|
@ -43,11 +43,24 @@
|
|||
</swiper>
|
||||
</view>
|
||||
|
||||
<!-- 金刚区 / 导航图标 -->
|
||||
<view class="grid-menu">
|
||||
<view class="grid-item" v-for="(menu, idx) in menus" :key="idx">
|
||||
<image class="menu-icon" :src="menu.icon"></image>
|
||||
<text class="menu-text">{{ menu.name }}</text>
|
||||
<!-- 金刚区 / 导航图标 (滑动 1:1 还原) -->
|
||||
<view class="grid-menu-wrap">
|
||||
<swiper class="grid-swiper" @change="e => gridCurrent = e.detail.current">
|
||||
<swiper-item v-for="(page, pIdx) in (gridMenuPages || [])" :key="pIdx">
|
||||
<view class="grid-menu">
|
||||
<view class="grid-item" v-for="(menu, idx) in page" :key="idx">
|
||||
<image class="menu-icon" :src="menu.img"></image>
|
||||
<text class="menu-text">{{ menu.title }}</text>
|
||||
<view class="menu-tag" v-if="menu.tag">{{ menu.tag }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 自定义指示器 -->
|
||||
<view class="grid-indicator" v-if="gridMenuPages && gridMenuPages.length > 1">
|
||||
<view class="indicator-bg">
|
||||
<view class="indicator-slider" :style="{ width: (gridMenuPages && gridMenuPages.length ? 100 / gridMenuPages.length : 100) + '%', transform: 'translateX(' + (gridCurrent * 100) + '%)' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -259,13 +272,8 @@
|
|||
'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=800&q=80'
|
||||
],
|
||||
menus: [
|
||||
{ name: '9.9包邮', icon: 'https://cdn-icons-png.flaticon.com/512/879/879859.png' },
|
||||
{ name: '疯抢榜', icon: 'https://cdn-icons-png.flaticon.com/512/3594/3594363.png' },
|
||||
{ name: '聚划算', icon: 'https://cdn-icons-png.flaticon.com/512/3594/3594162.png' },
|
||||
{ name: '品牌特卖', icon: 'https://cdn-icons-png.flaticon.com/512/879/879796.png' },
|
||||
{ name: '每日半价', icon: 'https://cdn-icons-png.flaticon.com/512/879/879854.png' }
|
||||
],
|
||||
gridCurrent: 0,
|
||||
menus: [],
|
||||
noticeList: [
|
||||
// 初始兜底数据
|
||||
{ img: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&q=80', msg: '正在获取最新订单信息...' }
|
||||
|
|
@ -295,6 +303,7 @@
|
|||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getIndexData();
|
||||
this.getBottomBar();
|
||||
this.getCategoryList();
|
||||
this.getNoticeList();
|
||||
|
|
@ -303,6 +312,14 @@
|
|||
this.getBrandSaleList();
|
||||
},
|
||||
computed: {
|
||||
gridMenuPages() {
|
||||
const pages = [];
|
||||
if (!this.menus || this.menus.length === 0) return pages;
|
||||
for (let i = 0; i < this.menus.length; i += 10) {
|
||||
pages.push(this.menus.slice(i, i + 10));
|
||||
}
|
||||
return pages;
|
||||
},
|
||||
worthBuyGoods() {
|
||||
if (this.worthTabActive === 0) return this.deserveList;
|
||||
if (this.worthTabActive === 1) return this.nineList;
|
||||
|
|
@ -319,6 +336,16 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getIndexData() {
|
||||
uni.request({
|
||||
url: 'https://api.cmspro.haodanku.com/index/index?cid=qOstW90',
|
||||
success: (res) => {
|
||||
if (res.data && res.data.code === 200 && res.data.data.navs) {
|
||||
this.menus = res.data.data.navs;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getBottomBar() {
|
||||
uni.request({
|
||||
url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
|
||||
|
|
@ -637,13 +664,20 @@
|
|||
}
|
||||
|
||||
/* 金刚区 */
|
||||
.grid-menu-wrap {
|
||||
background: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.grid-swiper {
|
||||
height: 340rpx;
|
||||
}
|
||||
|
||||
.grid-menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 10rpx 20rpx;
|
||||
background: #ffffff;
|
||||
margin: 0 30rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx 0 0;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
|
|
@ -651,12 +685,13 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
|
|
@ -665,6 +700,45 @@
|
|||
color: #333;
|
||||
}
|
||||
|
||||
.menu-tag {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: 4rpx;
|
||||
background: linear-gradient(to right, #ff715a, #ff416c);
|
||||
color: #fff;
|
||||
font-size: 16rpx;
|
||||
padding: 2rpx 8rpx;
|
||||
border-radius: 16rpx;
|
||||
border-bottom-left-radius: 0;
|
||||
white-space: nowrap;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.grid-indicator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.indicator-bg {
|
||||
width: 60rpx;
|
||||
height: 8rpx;
|
||||
background: #eeeeee;
|
||||
border-radius: 4rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.indicator-slider {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: #ff416c;
|
||||
border-radius: 4rpx;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.ad-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue