<template> <!-- 分类 --> <view> <view class="category"> <view v-for="item in category" :key="item.id" class="section"> <view class="head" @click="goCategoryGoods(item)"> <view class="title">{{ item.name }}</view> <view class="iconfont icon-xiangyou"></view> </view> <view v-if="item.childList" class="body"> <view v-for="value in item.childList" :key="value.id" class="item" @click="goCategoryGoods(value)"> {{ value.name }}</view> </view> </view> </view> <view :hidden="!categoryLoading" class="acea-row row-center-wrapper loadingicon"> <text class="iconfont icon-jiazai loading"></text> </view> <emptyPage v-if="category.length == 0 && !categoryLoading" mTop="35%" title="暂无商品分类~" :imgSrc="urlDomain+'crmebimage/presets/noSearch.png'"></emptyPage> </view> </template> <script> import { getMerCategoryApi } from '@/api/merchant.js'; import emptyPage from '@/components/emptyPage.vue' export default { components: { emptyPage }, props: { merId: { // 商户id type: Number, default: 0 }, }, data() { return { category: [], categoryLoading: false, urlDomain: this.$Cache.get("imgHost"), } }, mounted() { this.getMerCategory() }, methods: { goCategoryGoods(item) { uni.navigateTo({ url: '/pages/goods/goods_list/index?merId=' + this.merId + '&cid=' + item.id }) }, getMerCategory() { this.categoryLoading = true getMerCategoryApi(this.merId).then(res => { this.category = res.data this.categoryLoading = false }).catch(err => { return this.$util.Tips({ title: err }); this.categoryLoading = false }); }, } } </script> <style lang="scss" scoped> .category { padding-top: 34rpx; padding-right: 20rpx; padding-left: 20rpx; .section { border-radius: 10rpx; margin-bottom: 20rpx; background-color: #FFFFFF; .head { position: relative; display: flex; align-items: center; height: 90rpx; padding-right: 20rpx; padding-left: 36rpx; font-weight: bold; color: #282828; &::before { content: " "; position: absolute; top: 50%; left: 20rpx; width: 6rpx; height: 24rpx; @include main_bg_color(theme); transform: translateY(-50%); } .title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 30rpx; } .iconfont { font-size: 22rpx; line-height: 1; } } .body { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 9rpx 36rpx 14rpx; .item { width: 314rpx; height: 84rpx; padding-right: 30rpx; padding-left: 30rpx; border-radius: 10rpx; background-color: #F5F5F5; margin-bottom: 10rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; font-size: 26rpx; line-height: 84rpx; color: #282828; } } } } </style>