优化首页效果
This commit is contained in:
parent
453af757c2
commit
5e08d13c0d
File diff suppressed because it is too large
Load Diff
|
|
@ -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">
|
||||
<image class="img" :src="item.images"></image>
|
||||
<view class="t">
|
||||
<view class="price">￥{{ item.min_price }}</view>
|
||||
</view>
|
||||
<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,14 +174,22 @@
|
|||
<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">
|
||||
<image class="img" :src="item.images"></image>
|
||||
<view class="name">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<view class="t">
|
||||
<view class="price">￥{{ item.min_price }}</view>
|
||||
</view>
|
||||
<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 }}
|
||||
</view>
|
||||
<view class="t">
|
||||
<view class="price">￥{{ item.min_price }}</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -182,14 +198,22 @@
|
|||
<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">
|
||||
<image class="img" :src="item.images"></image>
|
||||
<view class="name">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<view class="t">
|
||||
<view class="price">￥{{ item.min_price }}</view>
|
||||
</view>
|
||||
<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 }}
|
||||
</view>
|
||||
<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">
|
||||
<image class="img" :src="item.images" mode="aspectFill"></image>
|
||||
<text class="name">{{ item.title }}</text>
|
||||
<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">
|
||||
<image class="img" style="height: 100upx; border-radius: 8upx" :src="item.images" mode="aspectFill"></image>
|
||||
<text class="name" style="width: 100upx">{{ item.title }}</text>
|
||||
<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: 90upx">{{ item.title }}</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -224,15 +260,23 @@
|
|||
<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">
|
||||
<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>
|
||||
<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 }}
|
||||
</view>
|
||||
<view class="t">
|
||||
<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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue