czg_team
/
xo_user_client
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化首页效果

This commit is contained in:
gyq 2025-05-20 18:36:32 +08:00
parent 453af757c2
commit 5e08d13c0d
2 changed files with 1534 additions and 1418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
pages/goods-category/goods-category.vue
View File

@ -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>
@ -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) {
@ -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);
@ -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 {
@ -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>

113
pages/index/index.vue
View File

@ -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;
}
}
}