UI：鹿不选

lin

2026-05-25 b13062d53abb7fd5cdce039df8c21c7690d0d2b7

 pages/index/index.vue

@@ -28,7 +28,7 @@
            </view>
         </view>
      </view>

      <!-- 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>
@@ -39,32 +39,46 @@
            <view class="">更多</view>
         </view> -->
      </view>
      <!-- <view v-if="catesNavData" style="padding: 0 30rpx;background-color: #ffffff;margin-top: 190rpx;">
         <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>
      <!-- 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 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: #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;
         }