ydd_front/mer_uniapp/pages/merchant/components/classify/index.vue

<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>