15133400227
/
baimacms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
1173117610@qq.com 2026-05-09 16:22:55 +08:00
parent 5160c52ad4
commit 69eba4ef69
1 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
pages/index/index.vue
View File

@ -12,15 +12,15 @@
</view> </view>
<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false"> <scroll-view scroll-x class="nav-scroll" :show-scrollbar="false">
<view class="nav-item" :class="{ 'active': currentTab === index }" v-for="(item, index) in navList" :key="index" @click="switchTab(index)"> <view class="nav-item" :class="{ 'active': currentTab === index }" v-for="(item, index) in navList" :key="index" @click="switchTab(index)">
<text class="nav-text">{{ item }}</text> <text class="nav-text">{{ item.name }}</text>
<view class="nav-line" v-if="currentTab === index"></view> <view class="nav-line" v-if="currentTab === index"></view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<scroll-view scroll-y class="main-content" :show-scrollbar="false"> <scroll-view scroll-y class="main-content" :show-scrollbar="false" :scroll-into-view="scrollTarget" scroll-with-animation>
<!-- 轮播图区域 --> <!-- 轮播图区域 -->
<view class="banner-box"> <view class="banner-box" id="top-section">
<swiper class="swiper" circular autoplay indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#ffffff"> <swiper class="swiper" circular autoplay indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#ffffff">
<swiper-item v-for="(img, idx) in banners" :key="idx"> <swiper-item v-for="(img, idx) in banners" :key="idx">
<image class="banner-img" :src="img" mode="aspectFill"></image> <image class="banner-img" :src="img" mode="aspectFill"></image>
@ -203,7 +203,7 @@
</view> </view>
<!-- 商品列表 (1:1 还原) --> <!-- 商品列表 (1:1 还原) -->
<view class="goods-list"> <view class="goods-list" id="goods-list-section">
<view class="goods-item" v-for="(goods, idx) in goodsList" :key="idx"> <view class="goods-item" v-for="(goods, idx) in goodsList" :key="idx">
<view class="g-img-wrap"> <view class="g-img-wrap">
<view class="g-anniversary-tag"> <view class="g-anniversary-tag">
@ -242,7 +242,8 @@
data() { data() {
return { return {
currentTab: 0, currentTab: 0,
navList: ['精选', '女装', '美食', '美妆', '母婴', '鞋包', '居家', '数码'], navList: [{ name: '首页', cat_id: 0 }, { name: '推荐', cat_id: -1 }],
scrollTarget: '',
banners: [ banners: [
'https://images.unsplash.com/photo-1483985988355-763728e1935b?w=800&q=80', 'https://images.unsplash.com/photo-1483985988355-763728e1935b?w=800&q=80',
'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800&q=80', 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800&q=80',
@ -284,6 +285,7 @@
} }
}, },
onLoad() { onLoad() {
this.getCategoryList();
this.getNoticeList(); this.getNoticeList();
this.getGoodsList(); this.getGoodsList();
this.getWorthBuyLists(); this.getWorthBuyLists();
@ -306,6 +308,16 @@
} }
}, },
methods: { methods: {
getCategoryList() {
uni.request({
url: 'https://api.cmspro.haodanku.com/index/category?cid=qOstW90',
success: (res) => {
if (res.data && res.data.code === 200 && res.data.data.category) {
this.navList = [{ name: '首页', cat_id: 0 }, { name: '推荐', cat_id: -1 }, ...res.data.data.category];
}
}
});
},
getNoticeList() { getNoticeList() {
uni.request({ uni.request({
url: 'https://api.cmspro.haodanku.com/msg/getMsgs?cid=qOstW90', url: 'https://api.cmspro.haodanku.com/msg/getMsgs?cid=qOstW90',
@ -396,6 +408,16 @@
}, },
switchTab(index) { switchTab(index) {
this.currentTab = index; this.currentTab = index;
const tabName = this.navList[index].name;
this.scrollTarget = ''; // 重置目标，确保下次点击仍能触发滚动
this.$nextTick(() => {
if (tabName === '推荐') {
this.scrollTarget = 'goods-list-section';
} else if (tabName === '首页') {
this.scrollTarget = 'top-section';
}
});
} }
} }
} }
@ -1137,24 +1159,23 @@
} }
.brand-name-row { .brand-name-row {
color: #fff; color: rgba(255, 255, 255, 0.9);
font-size: 32rpx; font-size: 24rpx;
font-weight: bold;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
.brand-name-row .arrow { .brand-name-row .arrow {
margin-left: 10rpx; margin-left: 8rpx;
font-size: 24rpx; font-size: 22rpx;
} }
.brand-discount-text { .brand-discount-text {
color: #fff; color: #fff;
font-size: 28rpx; font-size: 32rpx;
margin-bottom: 12rpx; margin-bottom: 14rpx;
font-weight: 500; font-weight: bold;
} }
.brand-promo-tags { .brand-promo-tags {
@ -1162,7 +1183,7 @@
} }
.p-tag { .p-tag {
background: rgba(0,0,0,0.3); background: rgba(0, 0, 0, 0.25);
color: #fff; color: #fff;
font-size: 20rpx; font-size: 20rpx;
padding: 4rpx 16rpx; padding: 4rpx 16rpx;