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

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

File diff suppressed because it is too large Load Diff

171
pages/index/index.vue
View File

@ -152,11 +152,19 @@
<text class="t">{{ themeConfigData.layoutData.recommandGoods.block1.title }}</text> <text class="t">{{ themeConfigData.layoutData.recommandGoods.block1.title }}</text>
</view> </view>
<view class="items"> <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)">
<image class="img" :src="item.images"></image> <template v-if="item.isCategory">
<view class="t"> <image class="img" :src="item.realistic_images"></image>
<view class="price">￥{{ item.min_price }}</view> <view class="t">
</view> <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> </view>
</view> </view>
@ -166,14 +174,22 @@
<text class="t">{{ themeConfigData.layoutData.recommandGoods.block2.title }}</text> <text class="t">{{ themeConfigData.layoutData.recommandGoods.block2.title }}</text>
</view> </view>
<view class="items"> <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)">
<image class="img" :src="item.images"></image> <template v-if="item.isCategory">
<view class="name"> <image class="img" :src="item.realistic_images"></image>
{{ item.title }} <view class="name">
</view> {{ item.name }}
<view class="t"> </view>
<view class="price">￥{{ item.min_price }}</view> </template>
</view> <template v-else>
<image class="img" :src="item.images"></image>
<view class="name">
{{ item.title }}
</view>
<view class="t">
<view class="price">￥{{ item.min_price }}</view>
</view>
</template>
</view> </view>
</view> </view>
</view> </view>
@ -182,14 +198,22 @@
<text class="t">{{ themeConfigData.layoutData.recommandGoods.block3.title }}</text> <text class="t">{{ themeConfigData.layoutData.recommandGoods.block3.title }}</text>
</view> </view>
<view class="items"> <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)">
<image class="img" :src="item.images"></image> <template v-if="item.isCategory">
<view class="name"> <image class="img" :src="item.realistic_images"></image>
{{ item.title }} <view class="name">
</view> {{ item.title }}
<view class="t"> </view>
<view class="price">￥{{ item.min_price }}</view> </template>
</view> <template v-else>
<image class="img" :src="item.images"></image>
<view class="name">
{{ item.title }}
</view>
<view class="t">
<view class="price">￥{{ item.min_price }}</view>
</view>
</template>
</view> </view>
</view> </view>
</view> </view>
@ -206,16 +230,28 @@
</view> </view>
</view> </view>
<view class="title-goods"> <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)">
<image class="img" :src="item.images" mode="aspectFill"></image> <template v-if="item.isCategory">
<text class="name">{{ item.title }}</text> <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>
</view> </view>
<view class="items"> <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)">
<image class="img" style="height: 100upx; border-radius: 8upx" :src="item.images" mode="aspectFill"></image> <template v-if="item.isCategory">
<text class="name" style="width: 100upx">{{ item.title }}</text> <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: 90upx">{{ item.title }}</text>
</template>
</view> </view>
</view> </view>
</view> </view>
@ -224,15 +260,23 @@
<text class="t">{{ themeConfigData.layoutData.recommandGoods.block5.title }}</text> <text class="t">{{ themeConfigData.layoutData.recommandGoods.block5.title }}</text>
</view> </view>
<view class="items"> <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)">
<image class="img" :src="item.images" mode="aspectFill"></image> <template v-if="item.isCategory">
<view class="name"> <image class="img" :src="item.realistic_images" mode="aspectFill"></image>
{{ item.title }} <view class="name">
</view> {{ item.name }}
<view class="t"> </view>
<view class="price"> ￥{{ item.min_price }} </view> </template>
<view class="old"> ￥{{ item.original_price }} </view> <template v-else>
</view> <image class="img" :src="item.images" mode="aspectFill"></image>
<view class="name">
{{ item.title }}
</view>
<view class="t">
<view class="price"> ￥{{ item.min_price }} </view>
<view class="old"> ￥{{ item.original_price }} </view>
</view>
</template>
</view> </view>
</view> </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) { goods_event(e) {
console.log('goods_event===', e); console.log('goods_event===', e);
@ -1459,6 +1552,7 @@
display: flex; display: flex;
gap: $gap; gap: $gap;
box-sizing: border-box; box-sizing: border-box;
padding: 0 $gap $gap;
.item { .item {
flex: 1; flex: 1;
display: flex; display: flex;
@ -1479,6 +1573,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
.t { .t {
width: 140upx;
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
@ -1488,9 +1583,11 @@
} }
.old { .old {
color: #999; color: #999;
font-size: 20upx; font-size: 16upx;
text-decoration: line-through; text-decoration: line-through;
box-sizing: border-box; box-sizing: border-box;
position: relative;
top: 4upx;
} }
} }
} }