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 | 221 +++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 205 insertions(+), 16 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index c1ceeb2..ca89792 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -2,6 +2,20 @@
<view class="page-container index">
<image class="page-bg" src="@/static/imgs/index-top.png" mode="scaleToFill"></image>
<view class="content" style="padding-bottom: 200rpx;">
+ <!-- #ifdef APP-PLUS -->
+ <view class="uni-popup" :style="{top:isNativeHead?'':StatusBar}" v-if="contactsFlag">
+ <view class="ani uni-custom uni-popup__wrapper">
+ <view class="uni-popup__wrapper-box">
+ <view class="title">通讯权限</view>
+ <view class="content">便于实现好友推荐、联系人同步等功能</view>
+ <view class="btn-group">
+ <button class="cancel-btn" @click="handleReject">拒绝</button>
+ <button class="allow-btn" @click="handleAuthorize">允许</button>
+ </view>
+ </view>
+ </view>
+ </view>
+ <!-- #endif -->
<view class="hLogo">
<view class="hLogoView">
<view class="hLogo-1">
@@ -14,20 +28,104 @@
</view>
</view>
</view>
-
- <view class="cates" v-if="catesNavData" style="margin-top: 0;">
- <view class="cates-v" v-for="(item, index) in catesNavData" @tap="$util.goPages('/pages/catesList/catesList?catesId=' + item.id + '&title=' + item.title)">
+ <!-- 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')">
+ <image class="cates-v-icon" src="/static/imgs/more.png" mode=""></image>
+ <view class="">更多</view>
+ </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 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 class="cateNav">
+ <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=3' + '&title=' + '手机数码')">
+ <image src="/static/imgs/ad3.png" mode=""></image>
+ </view>
+
+ <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>
+ </view>
+ <view class="ca-ad" v-else>
+ <image src="/static/imgs/c2.png" mode=""></image>
+ </view>
+ <view class="cGoods">
+ <scroll-view class="scroll-view_H" scroll-x="true">
+ <view class="scroll-view-item_H" v-for="(itm, index) in item.goods" @tap="$util.goPages('/pages/ginfo/ginfo?id=' + itm.id)">
+ <image lazy-load class="goods-icon" :src="itm.icon" mode=""></image>
+ <view class="goods-title">{{itm.title}}</view>
+ <view class="goods-price">
+ <view>¥</view>
+ <view class="red">{{itm.price}}</view>
+ </view>
+ </view>
+ </scroll-view>
+ </view>
+ </view> -->
+ <!-- <view class="c-goods" v-if="hotGoods">
+ <view class="cGoods">
+ <scroll-view class="scroll-view_H" scroll-x="true">
+ <view class="scroll-view-item_H" v-for="(itm, index) in hotGoods" @tap="$util.goPages('/pages/ginfo/ginfo?id=' + itm.id)">
+ <image lazy-load class="goods-icon" :src="itm.icon" mode=""></image>
+ <view class="goods-title">{{itm.title}}</view>
+ <view class="goods-price">
+ <view>¥</view>
+ <view class="red">{{itm.price}}</view>
+ </view>
+ </view>
+ </scroll-view>
+ </view>
+ </view> -->
+ <!-- 分类展示一 -->
+ <!-- <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">
@@ -47,7 +145,26 @@
</view>
</view>
</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-btn">立即登录</view>
+ </view>
</view>
+
+ <uni-popup ref="popup2" type="center" :is-mask-click="false">
+ <view class="popup-content">
+ <view class="edu-view edu-view2">
+ <view class="edu-view-desc2">认证领取额度</view>
+ <image class="edu-icon-succ" src="/static/imgs/auths.png" mode=""></image>
+ <view class="edu-view-desc3">
+ 请您先认证个人信息，然后立即领取额度
+ </view>
+ <view class="edu-btns" @tap="go_auth">立即领取</view>
+ <!-- <view class="edu-btns" @tap="$util.goPages('/pages/idcard/idcard')">立即领取</view> -->
+ </view>
+ </view>
+ </uni-popup>
</view>
</template>
@@ -72,17 +189,19 @@
},
data() {
return {
+ 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,
@@ -98,15 +217,15 @@
goodsData: [],
cateNavList: [
{
- title: '精选',
- desc: '猜你喜欢',
- skey: '手机数码',
- catesId: 11,
- },{
title: '人气',
desc: '好物精选',
skey: '家用电器',
catesId: 2,
+ },{
+ title: '精选',
+ desc: '猜你喜欢',
+ skey: '服装鞋包',
+ catesId: 15,
},{
title: '休闲',
desc: '天天低价',
@@ -114,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,
@@ -131,9 +273,9 @@
// #endif
},
created() {
- this.actIndex = 0;
- this.catesId = 11;
+ this.catesId = this.cateNavList[0]['catesId']
this.catesGoods()
+ this.getCatesGoods()
},
onLoad() {
const systemInfo = uni.getSystemInfoSync();
@@ -157,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)
}
})
},
@@ -331,6 +482,7 @@
@import url(@/static/css/index.css);
</style>
<style lang="scss">
+ // 分类展示一
.cateNav {
display: flex;
justify-content: center;
@@ -352,11 +504,48 @@
}
.cateNav-item.active {
.cateNav-title {
- color: #4766FE;
+ color: #1735C0;
}
.cateNav-desc {
color: #ffffff;
- background-color: #4766FE;
+ 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