首页热门类目展示
This commit is contained in:
donqi
parent
eb8a29a2f5
commit
0a40ca57bd
|
|
@ -486,6 +486,14 @@ export default {
|
||||||
})
|
})
|
||||||
return res[1].data;
|
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 = {}) {
|
async getOrderMasterDetail(params = {}) {
|
||||||
let res = await uni.request({
|
let res = await uni.request({
|
||||||
url: '/order/master/app/detail',
|
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"
|
<!-- <vertical-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
|
||||||
:title="discountGoods.title"></vertical-goods-card> -->
|
:title="discountGoods.title"></vertical-goods-card> -->
|
||||||
<!-- 热门服务 -->
|
<!-- 热门服务 -->
|
||||||
<vertical-goods-card :goodsInfos="hotGoods" :multiPicMode="true" title="大家都在买">
|
<vertical-card :list="hotCategory" :multiPicMode="true" title="大家都在买"></vertical-card>
|
||||||
</vertical-goods-card>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import verticalGoodsCard from '@/components/goods-card/vertical-goods-card.vue';
|
import verticalCard from '@/components/common-card/vertical-card.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'index',
|
name: 'index',
|
||||||
components: {
|
components: {
|
||||||
verticalGoodsCard
|
verticalCard
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -99,7 +98,7 @@
|
||||||
tabCur: 0,
|
tabCur: 0,
|
||||||
categories: [],
|
categories: [],
|
||||||
subCategories: [],
|
subCategories: [],
|
||||||
hotGoods: [],
|
hotCategory: [],
|
||||||
discountGoods: {},
|
discountGoods: {},
|
||||||
InputBottom: 0,
|
InputBottom: 0,
|
||||||
searchInfo: {},
|
searchInfo: {},
|
||||||
|
|
@ -122,13 +121,11 @@
|
||||||
// 加载区域信息
|
// 加载区域信息
|
||||||
this.loadRegionList();
|
this.loadRegionList();
|
||||||
this.getCurAreaArr();
|
this.getCurAreaArr();
|
||||||
// 加载热门商品
|
// 加载热门类目
|
||||||
let hotGoodsRes = await this.$request.getHotGoods({
|
let hotCategoryRes = await this.$request.getHotCategory({
|
||||||
pageNum: 1,
|
type: 1
|
||||||
pageSize: 50,
|
|
||||||
status: 0
|
|
||||||
});
|
});
|
||||||
this.hotGoods = hotGoodsRes.rows;
|
this.hotCategory = hotCategoryRes.data;
|
||||||
// 加载品类
|
// 加载品类
|
||||||
this.loadCategoryList();
|
this.loadCategoryList();
|
||||||
|
|
||||||
|
|
@ -140,10 +137,10 @@
|
||||||
// this.discountGoods = await this.$api.data('discountGoods');
|
// this.discountGoods = await this.$api.data('discountGoods');
|
||||||
},
|
},
|
||||||
bindEvent() {
|
bindEvent() {
|
||||||
uni.$on('index_showProductDetail', this.showDetails);
|
uni.$on('clickCard', this.clickHotCategory);
|
||||||
},
|
},
|
||||||
offBindEvent() {
|
offBindEvent() {
|
||||||
uni.$off('index_showProductDetail');
|
uni.$off('clickCard');
|
||||||
},
|
},
|
||||||
async getCurAreaArr() {
|
async getCurAreaArr() {
|
||||||
let areaArr = await this.$request.getCurArea();
|
let areaArr = await this.$request.getCurArea();
|
||||||
|
|
@ -267,13 +264,14 @@
|
||||||
url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
|
url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
showDetails(productItem) {
|
clickHotCategory(item) {
|
||||||
|
console.log(item)
|
||||||
let params = {
|
let params = {
|
||||||
goodsId: productItem.goodsId
|
category: item
|
||||||
}
|
};
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/product/product-detail?params=' + encodeURIComponent(JSON.stringify(params))
|
url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
showProductCategories() {
|
showProductCategories() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue