From ef46d13d5fa70d1c94f25de294f5ed177b751234 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期一, 02 三月 2026 16:40:30 +0800
Subject: [PATCH] 提交
---
mini-program/pages/index/index.vue | 240 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 218 insertions(+), 22 deletions(-)
diff --git a/mini-program/pages/index/index.vue b/mini-program/pages/index/index.vue
index a0f8866..a39d61f 100644
--- a/mini-program/pages/index/index.vue
+++ b/mini-program/pages/index/index.vue
@@ -1,7 +1,6 @@
<template>
<view class="index">
<view class="head" :style="{ height: 'calc(' + (navHeight + statusbarHeight + 'px + 248rpx)') }">
- <view :style="{ width: '100%', height: navHeight + statusbarHeight + 'px' }"></view>
<view class="head-bar" :style="{ height: navHeight + statusbarHeight + 'px' }">
<view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
<view class="head-bar-nav" :style="{ height: navHeight + 'px' }" @click="openLoacing">
@@ -11,13 +10,30 @@
</view>
</view>
<view class="search" @click="jumpSearch">
- <u-search placeholder="璇疯緭鍏ュ晢鍝佸悕绉版悳绱�" disabled height="36" searchIconColor="#999999" borderColor="#eeeeee"
+ <u-search placeholder="璇疯緭鍏ュ晢 鍝佸悕绉版悳绱�" disabled height="36" searchIconColor="#999999" borderColor="#eeeeee"
bgColor="rgba(255,255,255,0.9)" :showAction="false" />
</view>
<view class="banner">
- <u-swiper :list="list" keyName="imgurl" height="150"></u-swiper>
+ <u-swiper :list="list" keyName="imgurl" height="150" indicator indicatorMode="dot" @click="jumpBanner"></u-swiper>
</view>
- <u-scroll-list indicatorActiveColor="#004096">
+ <swiper class="cate" @change="changeCate">
+ <swiper-item v-for="(item, index) in labels" :key="index">
+ <view class="cate-list">
+ <view class="cate-item" v-for="(child, a) in item" :key="a" @click="jumpSearch1(child, 1)">
+ <view class="cate-item-image">
+ <image :src="child.imgUrl" mode="widthFix"></image>
+ </view>
+ <text>{{child.name}}</text>
+ </view>
+ <view style="width: 25%; height: 0;"></view>
+ <view style="width: 25%; height: 0;"></view>
+ </view>
+ </swiper-item>
+ </swiper>
+ <view class="cate-dian">
+ <view :class="cateIndex === index ? 'cate-dian-item active' : 'cate-dian-item'" v-for="(item, index) in labels" :key="index"></view>
+ </view>
+ <!-- <u-scroll-list indicatorActiveColor="#004096">
<view class="scroll-list">
<view class="scroll-list__line" v-for="(item, index) in labels" :key="index">
<view class="cate-item" v-for="(child, a) in item" :key="a" @click="jumpSearch1(child, 1)">
@@ -28,11 +44,28 @@
</view>
</view>
</view>
- </u-scroll-list>
+ </u-scroll-list> -->
<view class="title">
<view class="title-left">閫傜敤鍝佺墝</view>
</view>
- <u-scroll-list indicatorActiveColor="#004096">
+ <swiper class="pingpai" @change="changeBrand">
+ <swiper-item v-for="(item, index) in brand" :key="index">
+ <view class="pingpai-list">
+ <view class="pingpai-item" v-for="(child, a) in item" :key="a" @click="jumpSearch1(child, 2)">
+ <view class="pingpai-item-image">
+ <image :src="child.imgUrl" mode="widthFix"></image>
+ </view>
+ <text>{{child.name}}</text>
+ </view>
+ <view style="width: 25%; height: 0;"></view>
+ <view style="width: 25%; height: 0;"></view>
+ </view>
+ </swiper-item>
+ </swiper>
+ <view class="cate-dian">
+ <view :class="brandIndex === index ? 'cate-dian-item active' : 'cate-dian-item'" v-for="(item, index) in brand" :key="index"></view>
+ </view>
+ <!-- <u-scroll-list indicatorActiveColor="#004096">
<view class="scroll-list" style="padding: 0;">
<view class="scroll-list__line" v-for="(item, index) in brand" :key="index">
<view class="cate-item1" v-for="(child, a) in item" :key="a" @click="jumpSearch1(child, 2)">
@@ -41,7 +74,7 @@
</view>
</view>
</view>
- </u-scroll-list>
+ </u-scroll-list> -->
<view class="title">
<view class="title-left">鍝佽川涓撳尯</view>
<view class="title-right" @click="toZhuanqu">
@@ -131,7 +164,9 @@
goodsList: [],
page: 1,
next: true,
- isShow: false
+ isShow: false,
+ cateIndex: 0,
+ brandIndex: 0,
}
},
async onLoad() {
@@ -147,6 +182,32 @@
this.getGoodsList()
},
methods: {
+ changeCate(e) {
+ this.cateIndex = e.detail.current
+ },
+ changeBrand(e) {
+ this.brandIndex = e.detail.current
+ },
+ jumpBanner(e) {
+ // 澶栭摼
+ if (this.list[e].type == 1 && this.list[e].content) {
+ uni.navigateTo({
+ url: '/pagesA/pages/webview/webview?url=' + this.list[e].content
+ })
+ // 瀵屾枃鏈�
+ } else if (this.list[e].type == 0 && this.list[e].content) {
+ uni.setStorageSync('fuwenben', this.list[e].content);
+ uni.navigateTo({
+ url: '/pagesA/pages/richText/richText'
+ })
+ // 鍥剧墖棰勮
+ } else {
+ uni.previewImage({
+ urls: [this.list[e].imgurl],
+ current: this.list[e].imgurl
+ })
+ }
+ },
toZhuanqu() {
uni.navigateTo({
url: '/pages/zhuanqu/zhuanqu'
@@ -163,7 +224,7 @@
num: 1
}).then(res => {
if (res.code === 200) {
- uni.showToast({ title: '娣诲姞鎴愬姛', icon: 'success' })
+ uni.showToast({ title: '娣诲姞鎴愬姛', icon: 'success', mask: true })
}
})
},
@@ -191,13 +252,13 @@
this.$u.api.getGoodsLabelsByType({ type: 0 })
.then(res => {
if (res.code === 200) {
- this.labels = this.alternateChunkArraySimple(res.data)
+ this.labels = this.chunkArray(res.data)
}
})
this.$u.api.getGoodsLabelsByType({ type: 14 })
.then(res => {
if (res.code === 200) {
- this.brand = this.alternateChunkArraySimple(res.data, 2)
+ this.brand = this.chunkArray(res.data, 4)
}
})
this.$u.api.getGoodsLabelsByType({ type: 12 })
@@ -230,6 +291,14 @@
}
})
},
+ chunkArray(arr, size = 8) {
+ return arr.reduce((acc, _, i) => {
+ if (i % size === 0) {
+ acc.push(arr.slice(i, i + size));
+ }
+ return acc;
+ }, []);
+ },
// 鍒嗗壊鏁版嵁
alternateChunkArraySimple(arr, chunkSize = 4) {
const result = [
@@ -252,8 +321,12 @@
countInCurrentChunk = 0; // 閲嶇疆璁℃暟鍣�
}
}
-
- return result;
+
+ if (result[1].length === 0) {
+ return [result[0]]
+ } else {
+ return result;
+ }
},
goToAppSetting() {
var that = this;
@@ -285,7 +358,6 @@
latitude: res1.latitude,
longitude: res1.longitude
};
- console.log(locParam)
const qqmapsdk = new QQMapWX({
key: 'HEIBZ-QJLLM-SZ36X-6ZBHI-S6Y2J-S6FND'
});
@@ -294,6 +366,7 @@
locParam,
success: function(res) {
console.log(res, '==================index鑾峰彇鍦板潃')
+ console.log(locParam)
that.$store.commit('setPosition', res.result)
},
fail: (err) => {
@@ -388,12 +461,6 @@
.head-bar {
width: 100%;
- position: fixed;
- padding: 0 30rpx;
- box-sizing: border-box;
- top: 0;
- left: 0;
- z-index: 999;
// background-color: #ffffff;
.head-bar-nav {
@@ -508,6 +575,7 @@
.commodity-item-image {
width: 100%;
height: 336rpx;
+ overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
@@ -594,6 +662,130 @@
}
}
}
+
+ .cate-dian {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 30rpx;
+ .active {
+ background-color: #004096 !important;
+ }
+ .cate-dian-item {
+ width: 40rpx;
+ height: 4rpx;
+ background: #E2E2E2;
+ margin-right: 8rpx;
+ &:last-child {
+ margin: 0 !important;
+ }
+ }
+ }
+
+ .cate {
+ width: 100%;
+ height: 310rpx;
+ margin-top: 40rpx;
+ .cate-list {
+ width: 100%;
+ height: 300rpx;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ .cate-item {
+ width: 25%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 30rpx;
+
+ .cate-item-image {
+ width: 88rpx;
+ height: 88rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ background: linear-gradient(180deg, #E6E6E6 0%, #F9F9FB 100%);
+ border-radius: 24rpx;
+ image {
+ width: 100%;
+ }
+ }
+
+ text {
+ width: 100%;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #333333;
+ margin-top: 16rpx;
+ }
+ }
+
+ }
+
+ }
+
+ .pingpai {
+ width: 100%;
+ height: 310rpx;
+ margin-top: 40rpx;
+ .pingpai-list {
+ width: 100%;
+ height: 300rpx;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ .pingpai-item {
+ width: 49%;
+ height: 104rpx;
+ padding: 0 40rpx;
+ box-sizing: border-box;
+ background: #FFFFFF;
+ border-radius: 16rpx;
+ display: flex;
+ align-items: center;
+ margin-bottom: 30rpx;
+
+ .pingpai-item-image {
+ width: 46rpx;
+ height: 46rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ margin-right: 20rpx;
+ flex-shrink: 0;
+ image {
+ width: 100%;
+ }
+ }
+
+ text {
+ flex: 1;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 500;
+ font-size: 30rpx;
+ color: #222222;
+ }
+ }
+
+ }
+
+ }
.scroll-list {
@include flex(column);
@@ -631,14 +823,14 @@
}
.cate-item {
- width: calc(100vw / 4 - 96rpx);
+ width: calc(100vw / 4 - 86rpx);
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 30rpx;
- margin-right: 96rpx;
+ margin-right: 86rpx;
&:last-child {
margin-right: 0 !important;
@@ -659,6 +851,10 @@
}
text {
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
font-weight: 400;
font-size: 26rpx;
color: #333333;
--
Gitblit v1.9.3