首页热门类目展示
This commit is contained in:
donqi
parent
eb8a29a2f5
commit
0a40ca57bd
|
|
@ -486,6 +486,14 @@ export default {
|
|||
})
|
||||
return res[1].data;
|
||||
},
|
||||
async getHotCategory(params = {}) {
|
||||
let res = await uni.request({
|
||||
url: '/goods/deptcategory/app/hot/category',
|
||||
method: 'POST',
|
||||
data: params
|
||||
})
|
||||
return res[1].data;
|
||||
},
|
||||
async getOrderMasterDetail(params = {}) {
|
||||
let res = await uni.request({
|
||||
url: '/order/master/app/detail',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top-sm">
|
||||
<view class="action">
|
||||
<text class="cuIcon-titles text-main-color"></text> {{title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-card case no-card solid-bottom bg-white padding-top-xs" v-for="(item, index) in list" :key="index" @click="clickCard(item)">
|
||||
<view class="cu-item shadow">
|
||||
<view v-if="item.imgs && item.imgs.length > 2" class="flex justify-between align-center multi-pic-container">
|
||||
<view class="left-view"><image class="radius" :src="item.imgs[0]" mode="aspectFill"></image></view>
|
||||
<view class="flex-column-between align-center right-view">
|
||||
<image class="radius" :src="item.imgs[1]" mode="aspectFill"></image>
|
||||
<image class="radius" :src="item.imgs[2]" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="item.imgs && item.imgs.length > 1" class="flex justify-between align-center multi-pic-container">
|
||||
<view class="left-view"><image class="radius" :src="item.imgs[0]" mode="aspectFill"></image></view>
|
||||
<view class="left-view"><image class="radius" :src="item.imgs[1]" mode="aspectFill"></image></view>
|
||||
</view>
|
||||
<view v-else-if="item.imgs && item.imgs.length" class="flex justify-between align-center multi-pic-container">
|
||||
<view class="whole-view"><image class="radius" :src="item.imgs[0]" mode="aspectFill"></image></view>
|
||||
</view>
|
||||
<view class="cu-item item-margin-custom">
|
||||
<view class="content flex-sub">
|
||||
<view class="text-xl">{{item.name}}</view>
|
||||
<view class="text-sm text-gray margin-tb-xs">{{item.desc == null ? "" : item.desc}}</view>
|
||||
<view class="flex justify-between align-end">
|
||||
<view class="text-red text-sm">自营直选，不满意重新服务，全程上险</view>
|
||||
<!-- <view class="text-red text-price text-xl">{{item.goodsStandardList[0].goodsPrice}}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "vertical-card",
|
||||
props: {
|
||||
title: '',
|
||||
list: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
multiPicMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
clickCard(item) {
|
||||
uni.$emit('clickCard', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.item-margin-custom {
|
||||
margin: 10rpx 30rpx 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.multi-pic-container {
|
||||
height: 450rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.multi-pic-container > .whole-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.multi-pic-container > .whole-view > image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.multi-pic-container > .left-view {
|
||||
width: calc(50% - 5rpx);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.multi-pic-container > .left-view > image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.multi-pic-container > .right-view {
|
||||
width: calc(50% - 5rpx);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.multi-pic-container > .right-view > image {
|
||||
height: calc(50% - 5rpx);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top-sm">
|
||||
<view class="action">
|
||||
<text class="cuIcon-titles text-main-color"></text> {{title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-card case no-card solid-bottom bg-white padding-top-xs" v-for="(item, index) in goodsInfos" :key="index" @click="showDetails(item)">
|
||||
<view class="cu-item shadow">
|
||||
<view v-if="multiPicMode" class="flex justify-between align-center multi-pic-container">
|
||||
<view class="left-view"><image class="radius" :src="item.goodsImgsMap[0][0].imgUrl" mode="aspectFill"></image></view>
|
||||
<view class="flex-column-between align-center right-view">
|
||||
<image class="radius" :src="item.goodsImgsMap[0][1].imgUrl" mode="aspectFill"></image>
|
||||
<image class="radius" :src="item.goodsImgsMap[0][2].imgUrl" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<image :src="item.goodsImgUrl" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="cu-item item-margin-custom">
|
||||
<view class="content flex-sub">
|
||||
<view class="text-xl">{{item.goodsName}}</view>
|
||||
<view class="text-sm text-gray margin-tb-xs">{{item.goodsDesc}}</view>
|
||||
<view class="flex justify-between align-end">
|
||||
<view class="text-red text-sm">自营直选，不满意重新服务，全程上险</view>
|
||||
<view class="text-red text-price text-xl">{{item.goodsStandardList[0].goodsPrice}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "vertical-goods-card",
|
||||
props: {
|
||||
title: '',
|
||||
goodsInfos: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
multiPicMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
showDetails(productItem) {
|
||||
uni.$emit('index_showProductDetail', productItem)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.item-margin-custom {
|
||||
margin: 10rpx 30rpx 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.multi-pic-container {
|
||||
height: 450rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.multi-pic-container > view {
|
||||
width: calc(50% - 5rpx);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.multi-pic-container > .left-view > image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.multi-pic-container > .right-view > image {
|
||||
height: calc(50% - 5rpx);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -77,19 +77,18 @@
|
|||
<!-- <vertical-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
|
||||
:title="discountGoods.title"></vertical-goods-card> -->
|
||||
<!-- 热门服务 -->
|
||||
<vertical-goods-card :goodsInfos="hotGoods" :multiPicMode="true" title="大家都在买">
|
||||
</vertical-goods-card>
|
||||
<vertical-card :list="hotCategory" :multiPicMode="true" title="大家都在买"></vertical-card>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import verticalGoodsCard from '@/components/goods-card/vertical-goods-card.vue';
|
||||
import verticalCard from '@/components/common-card/vertical-card.vue';
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
components: {
|
||||
verticalGoodsCard
|
||||
verticalCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -99,7 +98,7 @@
|
|||
tabCur: 0,
|
||||
categories: [],
|
||||
subCategories: [],
|
||||
hotGoods: [],
|
||||
hotCategory: [],
|
||||
discountGoods: {},
|
||||
InputBottom: 0,
|
||||
searchInfo: {},
|
||||
|
|
@ -122,13 +121,11 @@
|
|||
// 加载区域信息
|
||||
this.loadRegionList();
|
||||
this.getCurAreaArr();
|
||||
// 加载热门商品
|
||||
let hotGoodsRes = await this.$request.getHotGoods({
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
status: 0
|
||||
// 加载热门类目
|
||||
let hotCategoryRes = await this.$request.getHotCategory({
|
||||
type: 1
|
||||
});
|
||||
this.hotGoods = hotGoodsRes.rows;
|
||||
this.hotCategory = hotCategoryRes.data;
|
||||
// 加载品类
|
||||
this.loadCategoryList();
|
||||
|
||||
|
|
@ -140,10 +137,10 @@
|
|||
// this.discountGoods = await this.$api.data('discountGoods');
|
||||
},
|
||||
bindEvent() {
|
||||
uni.$on('index_showProductDetail', this.showDetails);
|
||||
uni.$on('clickCard', this.clickHotCategory);
|
||||
},
|
||||
offBindEvent() {
|
||||
uni.$off('index_showProductDetail');
|
||||
uni.$off('clickCard');
|
||||
},
|
||||
async getCurAreaArr() {
|
||||
let areaArr = await this.$request.getCurArea();
|
||||
|
|
@ -267,13 +264,14 @@
|
|||
url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
|
||||
})
|
||||
},
|
||||
showDetails(productItem) {
|
||||
clickHotCategory(item) {
|
||||
console.log(item)
|
||||
let params = {
|
||||
goodsId: productItem.goodsId
|
||||
}
|
||||
category: item
|
||||
};
|
||||
uni.navigateTo({
|
||||
url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params))
|
||||
});
|
||||
url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
|
||||
})
|
||||
},
|
||||
showProductCategories() {
|
||||
uni.navigateTo({
|
||||
|
|
|
|||
Loading…
Reference in New Issue