From b13062d53abb7fd5cdce039df8c21c7690d0d2b7 Mon Sep 17 00:00:00 2001
From: lin <1005713861@163.com>
Date: Mon, 25 May 2026 13:40:02 +0800
Subject: [PATCH] UI：鹿不选
---
pages/index/index.vue | 163 ++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 122 insertions(+), 41 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4669c6d..ca89792 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -28,43 +28,57 @@
</view>
</view>
</view>
-
- <!-- <view class="cates" v-if="catesNavData">
+ <!-- nav1 -->
+ <view class="cates" v-if="catesNavData">
<view class="cates-v" v-for="(item, index) in catesNavData" :key="item.id" @tap="$util.goPages('/pages/catesList/catesList?catesId=' + item.id + '&title=' + item.title)">
<image class="cates-v-icon" :src="item.icon" mode=""></image>
<view class="">{{item.title}}</view>
</view>
- <view class="cates-v" @tap="$util.goSwitch('/pages/cates/cates')">
+ <!-- <view class="cates-v" @tap="$util.goSwitch('/pages/cates/cates')">
<image class="cates-v-icon" src="/static/imgs/more.png" mode=""></image>
<view class="">更多</view>
- </view>
- </view> -->
- <view v-if="catesNavData" style="padding: 0 30rpx;background-color: #ffffff;margin-top: 422rpx;">
- <uv-scroll-list>
- <view class="cates-v" v-for="(item, index) in catesNavData" :key="item.id" @tap="$util.goPages('/pages/catesList/catesList?catesId=' + item.id + '&title=' + item.title)">
- <image class="cates-v-icon" :src="item.icon" mode="heightFix"></image>
+ </view> -->
+ </view>
+ <!-- nav2-横向滚动 -->
+ <!-- <view v-if="catesNavData" style="padding: 0 30rpx;background-color: #ffffff;margin-top: 422rpx;">
+ <uv-scroll-list indicatorColor="#fff0f0" indicatorActiveColor="#1735C0">
+ <view class="cates-v-s" v-for="(item, index) in catesNavData" :key="item.id" @tap="$util.goPages('/pages/catesList/catesList?catesId=' + item.id + '&title=' + item.title)">
+ <image class="cates-v-s-icon" :src="item.icon" mode="heightFix"></image>
<view class="">{{item.title}}</view>
</view>
</uv-scroll-list>
- </view>
-
+ </view> -->
+
<!-- <view class="ad1" @tap="$util.goPages('/pages/catesList/catesList?catesId=11' + '&title=' + '服装鞋包')">
<image src="/static/imgs/ad1.png" mode=""></image>
</view> -->
-
+
<view class="ad2" @tap="$util.goPages('/pages/catesList/catesList?catesId=3' + '&title=' + '手机数码')">
<image src="/static/imgs/ad2.png" mode=""></image>
</view>
+ <view v-if="catesGoodsData" style="padding: 0 30rpx;background-color: #ffffff;margin-top: 0rpx;">
+ <uv-scroll-list :indicator="false" indicatorColor="#fff0f0" indicatorActiveColor="#1735C0">
+ <view class="cates-v-goods-s" v-for="(item, index) in catesGoodsData" :key="item.id" @click="$util.goPages('/pages/ginfo/ginfo?id=' + item.id)">
+ <image class="cates-v-goods-s-icon" :src="item.icon" mode="heightFix"></image>
+ <view class="cates-v-goods-title">{{item.title}}</view>
+ </view>
+ </uv-scroll-list>
+ </view>
+
<view class="d3-wrap">
- <view class="ad3" @tap="$util.goPages('/pages/catesList/catesList?catesId=2' + '&title=' + '家用电器')">
+ <view class="ad3" @tap="$util.goPages('/pages/catesList/catesList?catesId=3' + '&title=' + '手机数码')">
<image src="/static/imgs/ad3.png" mode=""></image>
</view>
- <view class="ad4" @tap="$util.goPages('/pages/catesList/catesList?catesId=4' + '&title=' + '美妆个护')">
+
+ <view class="ad4" @tap="$util.goPages('/pages/catesList/catesList?catesId=2' + '&title=' + '家用电器')">
<image src="/static/imgs/ad4.png" mode=""></image>
</view>
+ <!-- <view class="ad4" @tap="$util.goPages('/pages/catesList/catesList?catesId=4' + '&title=' + '美妆个护')">
+ <image src="/static/imgs/ad4.png" mode=""></image>
+ </view> -->
</view>
-
+
<!-- <view class="c-goods" v-if="hotCates" v-for="(item, index) in hotCates">
<view class="ca-ad" v-if="index % 2 == 0">
<image src="/static/imgs/c1.png" mode=""></image>
@@ -99,11 +113,19 @@
</scroll-view>
</view>
</view> -->
-
- <view class="cateNav">
+ <!-- 分类展示一 -->
+ <!-- <view class="cateNav">
<view class="cateNav-item" :class="{active:actIndex===index}" v-for="(item, index) in cateNavList" :key="index" @click="navClick(item,index)">
<view class="cateNav-title">{{item.title}}</view>
<view class="cateNav-desc">{{item.desc}}</view>
+ </view>
+ </view> -->
+ <!-- 分类展示二 -->
+ <view class="cateNav-t">
+ <view class="cateNav-t-item" :class="{active:actIndex===index}" v-for="(item, index) in cateNavListt" :key="index" @click="navClick(item,index)">
+ <view class="cateNav-t-title">{{item.title}}</view>
+ <!-- <view class="cateNav-t-desc">{{item.desc}}</view> -->
+ <image v-show="actIndex===index" class="cateNav-t-icon" src="/static/imgs/cateNavIcon.png" mode="heightFix"></image>
</view>
</view>
<view class="goods-main">
@@ -118,8 +140,6 @@
<!-- <view class="hyj">
<image src="@/static/imgs/hyj.png" mode=""></image>
</view> -->
- <view>¥</view>
- <view class="red">{{itm.price}}</view>
</view>
</view>
</view>
@@ -127,11 +147,11 @@
</view>
<view class="login-desc" v-if="!userInfo" @tap="$util.goPages('../login/login')">
<image class="login-icon" src="/static/imgs/logo-icon.png" mode=""></image>
- <view class="login-font">登录购有趣，打开美好生活</view>
+ <view class="login-font">登录鹿不选，打开美好生活</view>
<view class="login-btn">立即登录</view>
</view>
</view>
-
+
<uni-popup ref="popup2" type="center" :is-mask-click="false">
<view class="popup-content">
<view class="edu-view edu-view2">
@@ -169,29 +189,19 @@
},
data() {
return {
- list: [{
- image: "https://via.placeholder.com/200x200.png/3c9cff/fff"
- }, {
- image: "https://via.placeholder.com/200x200.png/f9ae3d/fff"
- }, {
- image: "https://via.placeholder.com/200x200.png/5ac725/fff"
- }, {
- image: "https://via.placeholder.com/200x200.png/f56c6c/fff"
- }, {
- image: "https://via.placeholder.com/200x200.png/909399/fff"
- }],
indicator: true,
contactsFlag: false,
staHeight: 0,
paddingHeight: 0,
indicatorDots: true,
- indicatorColor: '#e3b400',
+ indicatorColor: '#1735C0',
indicatorActiveColor: '#ffffff',
autoplay: true,
interval: 3000,
duration: 500,
bannerData: [],
catesNavData: [],
+ catesGoodsData: [],
catesHotData: [],
userInfo: null,
config: null,
@@ -207,15 +217,15 @@
goodsData: [],
cateNavList: [
{
- title: '精选',
- desc: '猜你喜欢',
- skey: '服装鞋包',
- catesId: 11,
- },{
title: '人气',
desc: '好物精选',
skey: '家用电器',
catesId: 2,
+ },{
+ title: '精选',
+ desc: '猜你喜欢',
+ skey: '服装鞋包',
+ catesId: 15,
},{
title: '休闲',
desc: '天天低价',
@@ -223,6 +233,29 @@
catesId: 4,
},{
title: '母婴',
+ desc: '热门榜单',
+ skey: '母婴童玩',
+ catesId: 5,
+ },
+ ],
+ cateNavListt: [
+ {
+ title: '今日推荐',
+ desc: '好物精选',
+ skey: '家用电器',
+ catesId: 2,
+ },{
+ title: '天天低价',
+ desc: '猜你喜欢',
+ skey: '服装鞋包',
+ catesId: 15,
+ },{
+ title: '好物精选',
+ desc: '天天低价',
+ skey: '美妆个护',
+ catesId: 4,
+ },{
+ title: '热门榜单',
desc: '热门榜单',
skey: '母婴童玩',
catesId: 5,
@@ -240,8 +273,9 @@
// #endif
},
created() {
- this.catesId = 11
+ this.catesId = this.cateNavList[0]['catesId']
this.catesGoods()
+ this.getCatesGoods()
},
onLoad() {
const systemInfo = uni.getSystemInfoSync();
@@ -265,6 +299,15 @@
this.$util.post('Goods/getCatesGoods', {catesId: this.catesId, is_hot: this.is_hot, pageIndex: this.pageIndex, pageSize: this.pageSize}).then(res => {
if(res.code == 1) {
this.goodsData = res.data.list
+ }
+ })
+ },
+ //获取某个分类商品：is_hot=是否热门，is_pref=是否优选，is_fenqi=是否分期，sort=排序
+ getCatesGoods(){
+ this.$util.post('Goods/getCatesGoods', {catesId: 3, is_hot: 'true', pageIndex: this.pageIndex, pageSize: this.pageSize}).then(res => {
+ if(res.code == 1) {
+ this.catesGoodsData = res.data.list
+ console.log('啦啦啦',this.catesGoodsData)
}
})
},
@@ -439,6 +482,7 @@
@import url(@/static/css/index.css);
</style>
<style lang="scss">
+ // 分类展示一
.cateNav {
display: flex;
justify-content: center;
@@ -460,11 +504,48 @@
}
.cateNav-item.active {
.cateNav-title {
- color: #37AA25;
+ color: #1735C0;
}
.cateNav-desc {
color: #ffffff;
- background-color: #37AA25;
+ background-color: #1735C0;
+ border-radius: 50rpx;
+ padding: 12rpx 0;
+ }
+ }
+ }
+ // 分类展示二
+ .cateNav-t {
+ display: flex;
+ justify-content: center;
+ gap: 30rpx;
+ margin-top: 40rpx;
+ margin-bottom: 30rpx;
+ .cateNav-t-item {
+ width: 20%;
+ text-align: center;
+ .cateNav-t-title {
+ color: #333333;
+ font-weight: bold;
+ font-size: 32rpx;
+ }
+ .cateNav-t-icon {
+ width: 62rpx;
+ height: 18rpx;
+ }
+ .cateNav-t-desc {
+ color: #666666;
+ font-size: 24rpx;
+ }
+ }
+ .cateNav-t-item.active {
+ .cateNav-t-title {
+ color: #1735C0;
+ font-size: 34rpx;
+ }
+ .cateNav-t-desc {
+ color: #ffffff;
+ background-color: #1735C0;
border-radius: 50rpx;
padding: 12rpx 0;
}
--
Gitblit v1.9.3