优化首页效果

pages/goods-category/goods-category.vue

@@ -155,7 +155,7 @@
 														<view v-if="(plugins_label_data || null) != null && plugins_label_data.data.length > 0" :class="'plugins-label oh pa plugins-label-' + ((plugins_label_data.base.is_user_goods_label_icon || 0) == 0 ? 'text' : 'img') + ' plugins-label-' + (plugins_label_data.base.user_goods_show_style || 'top-left')">
 															<block v-for="(lv, li) in plugins_label_data.data" :key="li">
 																<view v-if="(lv.goods_ids || null) != null && lv.goods_ids.indexOf(item.id) != -1" class="lv dis-inline-block va-m" :data-value="(plugins_label_data.base.is_user_goods_label_url || 0) == 1 ? lv.url || '' : ''" @tap="url_event">
-                                                                    <view v-if="(plugins_label_data.base.is_user_goods_label_icon || 0) == 0" class="round cr-white bg-main text-size-xs fl" :style="('background-color:'+(lv.bg_color || '#666'))+' !important;'+('color:'+(lv.text_color || '#fff'))+' !important;'">
+																	<view v-if="(plugins_label_data.base.is_user_goods_label_icon || 0) == 0" class="round cr-white bg-main text-size-xs fl" :style="'background-color:' + (lv.bg_color || '#666') + ' !important;' + ('color:' + (lv.text_color || '#fff')) + ' !important;'">
 																		{{ lv.name }}
 																	</view>
 																	<block v-else>
@@ -329,7 +329,7 @@
 								</view>
 							</block>
 							<!-- 购物车底部导航 -->
-                            <view class="botton-nav bg-white round pa oh padding-sm flex-row jc-sb align-c" :style="botton_nav_style+(cart_status ? 'z-index:5;' : '')">
+							<view class="botton-nav bg-white round pa oh padding-sm flex-row jc-sb align-c" :style="botton_nav_style + (cart_status ? 'z-index:5;' : '')">
 								<view class="flex-row align-c flex-1 flex-width">
 									<view class="cart pr cp top-sm padding-left-sm" @tap="cart_event">
 										<iconfont name="icon-menu-cart" size="36rpx" color="#666"></iconfont>
@@ -447,7 +447,7 @@
 				// 底部tab高度 - 只有H5下有值
 				window_bottom_height: 0,
 				// #ifdef H5
-                window_bottom_height: (app.globalData.data.is_use_native_tabbar == 1) ? (uni.getWindowInfo().windowBottom || 50) : 0,
+				window_bottom_height: app.globalData.data.is_use_native_tabbar == 1 ? uni.getWindowInfo().windowBottom || 50 : 0,
 				// #endif
 				// 样式
 				category_content_style: '',
@@ -456,6 +456,7 @@
 				botton_nav_style: '',
 				cart_content_style: '',
 				footer_height_value: 0,
+				categoryIndex: '',
 			};
 		},
 
@@ -467,7 +468,7 @@
 			componentPopup,
 			componentBadge,
 			componentCartParaCurve,
-            componentNavMore
+			componentNavMore,
 		},
 
 		onLoad(params) {
@@ -504,7 +505,7 @@
 
 			// 公共onshow事件
 			if ((this.$refs.common || null) != null) {
-                this.$refs.common.on_show({object: this, method: 'init'});
+				this.$refs.common.on_show({ object: this, method: 'init' });
 			}
 		},
 
@@ -667,6 +668,22 @@
 							},
 						});
 
+						let categoryIndex = uni.getStorageSync('categoryIndex');
+						if (categoryIndex) {
+							let arr = categoryIndex.split(',');
+
+							this.nav_event({
+								currentTarget: {
+									dataset: {
+										index: arr[0],
+										itemtwoindex: arr[1],
+										itemthreeindex: arr[2],
+									},
+								},
+							});
+							uni.setStorageSync('categoryIndex', '');
+						}
+
 						// 分享菜单处理、延时执行，确保基础数据已加载完成
 						setTimeout(function () {
 							app.globalData.page_share_handle(this.share_info);
@@ -689,28 +706,28 @@
 				var bottom_style_value = 20;
 				// 左侧
 				var left_style = '';
-                if(this.category_goods_is_show_cart_nav == 1) {
+				if (this.category_goods_is_show_cart_nav == 1) {
-                    left_style = 'height: calc(100% - 120rpx - '+bottom_style_value+'rpx);';
+					left_style = 'height: calc(100% - 120rpx - ' + bottom_style_value + 'rpx);';
 				}
 				// 右侧
 				var right_style = '';
-                if(this.category_goods_is_show_cart_nav == 1 && this.common_site_type != 4) {
+				if (this.category_goods_is_show_cart_nav == 1 && this.common_site_type != 4) {
-                    right_style = 'padding-bottom: calc(120rpx + '+bottom_style_value+'rpx);';
+					right_style = 'padding-bottom: calc(120rpx + ' + bottom_style_value + 'rpx);';
 				}
 				// 底部导航高度
 				var footer_height = this.footer_height_value;
 				var footer_height_unit = 'px';
 				// #ifdef H5
-                if(app.globalData.is_pc()) {
+				if (app.globalData.is_pc()) {
 					var system = app.globalData.get_system_info(null, null, true);
-                    if(system.windowWidth <= 960) {
+					if (system.windowWidth <= 960) {
 						footer_height *= 2;
 						footer_height_unit = 'rpx';
 					}
 				}
 				// #endif
 				this.setData({
-                    category_content_style: 'height:calc(100vh - ' + (this.search_height + this.window_bottom_height)+'px - '+footer_height+footer_height_unit+');',
+					category_content_style: 'height:calc(100vh - ' + (this.search_height + this.window_bottom_height) + 'px - ' + footer_height + footer_height_unit + ');',
 					left_content_actual_style: left_style,
 					right_content_actual_style: right_style,
 					botton_nav_style: 'bottom: calc(20rpx);',
@@ -852,6 +869,8 @@
 
 			// 导航事件
 			nav_event(e) {
+				console.log('nav_event===', e);
+
 				var index = e.currentTarget.dataset.index;
 				var two_index = e.currentTarget.dataset.itemtwoindex;
 				var three_index = e.currentTarget.dataset.itemthreeindex;
@@ -870,7 +889,7 @@
 					data_page: 1,
 					data_list: [],
 					data_list_loding_status: 1,
-                    data_bottom_line_status: false
+					data_bottom_line_status: false,
 				});
 				this.reset_scroll();
 				this.get_goods_list(1);
@@ -897,7 +916,7 @@
 						data_page: 1,
 						data_list: [],
 						data_list_loding_status: 1,
-                        data_bottom_line_status: false
+						data_bottom_line_status: false,
 					});
 					this.get_goods_list(1);
 				} else {
@@ -910,7 +929,7 @@
 			goods_event(e) {
 				// 商品数据缓存处理
 				var index = e.currentTarget.dataset.index;
-                if(e.currentTarget.dataset.type == 'cart') {
+				if (e.currentTarget.dataset.type == 'cart') {
 					var goods = this.cart.data[index];
 					goods['id'] = goods['goods_id'];
 				} else {
@@ -1372,7 +1391,7 @@
 					data_page: 1,
 					data_list: [],
 					data_list_loding_status: 1,
-                    data_bottom_line_status: false
+					data_bottom_line_status: false,
 				});
 				this.reset_scroll();
 				this.get_goods_list(1);
@@ -1381,10 +1400,10 @@
 			// 底部菜单高度
 			footer_height_value_event(value) {
 				this.setData({
-                    footer_height_value: value
+					footer_height_value: value,
 				});
 				this.content_actual_size_handle();
-            }
+			},
 		},
 	};
 </script>

pages/index/index.vue

@@ -152,11 +152,19 @@
 							<text class="t">{{ themeConfigData.layoutData.recommandGoods.block1.title }}</text>
 						</view>
 						<view class="items">
-							<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block1.data" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
+							<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block1.data" :key="item.id" :data-value="item.goods_url" @tap="goodsHandle($event, item)">
+								<template v-if="item.isCategory">
+									<image class="img" :src="item.realistic_images"></image>
+									<view class="t">
+										<view class="price">{{ item.name }}</view>
+									</view>
+								</template>
+								<template>
 									<image class="img" :src="item.images"></image>
 									<view class="t">
 										<view class="price">￥{{ item.min_price }}</view>
 									</view>
+								</template>
 							</view>
 						</view>
 					</view>
@@ -166,7 +174,14 @@
 								<text class="t">{{ themeConfigData.layoutData.recommandGoods.block2.title }}</text>
 							</view>
 							<view class="items">
-								<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block2.data" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
+								<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block2.data" :key="item.id" :data-value="item.goods_url" @tap="goodsHandle($event, item)">
+									<template v-if="item.isCategory">
+										<image class="img" :src="item.realistic_images"></image>
+										<view class="name">
+											{{ item.name }}
+										</view>
+									</template>
+									<template v-else>
 										<image class="img" :src="item.images"></image>
 										<view class="name">
 											{{ item.title }}
@@ -174,6 +189,7 @@
 										<view class="t">
 											<view class="price">￥{{ item.min_price }}</view>
 										</view>
+									</template>
 								</view>
 							</view>
 						</view>
@@ -182,7 +198,14 @@
 								<text class="t">{{ themeConfigData.layoutData.recommandGoods.block3.title }}</text>
 							</view>
 							<view class="items">
-								<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block3.data" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
+								<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block3.data" :key="item.id" :data-value="item.goods_url" @tap="goodsHandle($event, item)">
+									<template v-if="item.isCategory">
+										<image class="img" :src="item.realistic_images"></image>
+										<view class="name">
+											{{ item.title }}
+										</view>
+									</template>
+									<template v-else>
 										<image class="img" :src="item.images"></image>
 										<view class="name">
 											{{ item.title }}
@@ -190,6 +213,7 @@
 										<view class="t">
 											<view class="price">￥{{ item.min_price }}</view>
 										</view>
+									</template>
 								</view>
 							</view>
 						</view>
@@ -206,16 +230,28 @@
 								</view>
 							</view>
 							<view class="title-goods">
-								<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block4.data.slice(0, 2)" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
+								<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block4.data.slice(0, 2)" :key="item.id" :data-value="item.goods_url" @tap="goodsHandle($event, item)">
+									<template v-if="item.isCategory">
+										<image class="img" :src="item.realistic_images" mode="aspectFill"></image>
+										<text class="name">{{ item.name }}</text>
+									</template>
+									<template v-else>
 										<image class="img" :src="item.images" mode="aspectFill"></image>
 										<text class="name">{{ item.title }}</text>
+									</template>
 								</view>
 							</view>
 						</view>
 						<view class="items">
-							<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block4.data.slice(2, 5)" :key="item.id" :data-value="item.goods_url" @tap="goods_event">
+							<view class="item" v-for="item in themeConfigData.layoutData.recommandGoods.block4.data.slice(2, 5)" :key="item.id" :data-value="item.goods_url" @tap="goodsHandle($event, item)">
+								<template v-if="item.isCategory">
+									<image class="img" style="height: 100upx; border-radius: 8upx" :src="item.realistic_images" mode="aspectFill"></image>
+									<text class="name" style="width: 90upx">{{ item.name }}</text>
+								</template>
+								<template v-else>
 									<image class="img" style="height: 100upx; border-radius: 8upx" :src="item.images" mode="aspectFill"></image>
-								<text class="name" style="width: 100upx">{{ item.title }}</text>
+									<text class="name" style="width: 90upx">{{ item.title }}</text>
+								</template>
 							</view>
 						</view>
 					</view>
@@ -224,7 +260,14 @@
 							<text class="t">{{ themeConfigData.layoutData.recommandGoods.block5.title }}</text>
 						</view>
 						<view class="items">
-							<view class="item" v-for="(item, index) in themeConfigData.layoutData.recommandGoods.block5.data" :key="item.id" :data-index="index" :data-value="item.goods_url" @tap="goods_event">
+							<view class="item" v-for="(item, index) in themeConfigData.layoutData.recommandGoods.block5.data" :data-value="item.goods_url" @tap="goodsHandle($event, item)">
+								<template v-if="item.isCategory">
+									<image class="img" :src="item.realistic_images" mode="aspectFill"></image>
+									<view class="name">
+										{{ item.name }}
+									</view>
+								</template>
+								<template v-else>
 									<image class="img" :src="item.images" mode="aspectFill"></image>
 									<view class="name">
 										{{ item.title }}
@@ -233,6 +276,7 @@
 										<view class="price"> ￥{{ item.min_price }} </view>
 										<view class="old"> ￥{{ item.original_price }} </view>
 									</view>
+								</template>
 							</view>
 						</view>
 					</view>
@@ -518,6 +562,55 @@
 					},
 				});
 			},
+			// 分类加商品跳转
+			goodsHandle(e, item) {
+				console.log(e);
+				console.log(item);
+				if (item.isCategory) {
+					let ids = JSON.stringify(item.path).split(',');
+
+					console.log(ids);
+
+					let index = -1; // 一级分类
+					let itemtwoindex = -1; // 二级分类
+					let itemthreeindex = -1; // 三级分类
+
+					console.log('分类数据===', this.category_list);
+
+					this.category_list.map((item, itemIndex) => {
+						if (item.id == ids[0]) {
+							index = itemIndex;
+							if (ids.length > 1) {
+								item.items.map((val, idx) => {
+									if (val.id == ids[1]) {
+										itemtwoindex = idx;
+										if (ids.length > 2) {
+											val.items.map((v, i) => {
+												if (v.id == ids[2]) {
+													itemthreeindex = i;
+												}
+											});
+										}
+									}
+								});
+							}
+						}
+					});
+
+					console.log({
+						index,
+						itemtwoindex,
+						itemthreeindex,
+					});
+
+					uni.setStorageSync('categoryIndex', `${index},${itemtwoindex},${itemthreeindex}`);
+					uni.switchTab({
+						url: `/pages/goods-category/goods-category`,
+					});
+				} else {
+					app.globalData.url_event(e);
+				}
+			},
 			// 商品事件
 			goods_event(e) {
 				console.log('goods_event===', e);
@@ -1459,6 +1552,7 @@
 						display: flex;
 						gap: $gap;
 						box-sizing: border-box;
+						padding: 0 $gap $gap;
 						.item {
 							flex: 1;
 							display: flex;
@@ -1479,6 +1573,7 @@
 								box-sizing: border-box;
 							}
 							.t {
+								width: 140upx;
 								display: flex;
 								align-items: center;
 								box-sizing: border-box;
@@ -1488,9 +1583,11 @@
 								}
 								.old {
 									color: #999;
-									font-size: 20upx;
+									font-size: 16upx;
 									text-decoration: line-through;
 									box-sizing: border-box;
+									position: relative;
+									top: 4upx;
 								}
 							}
 						}