junzitang/pages/classification/CateTwo.vue

<template>
	<div :class="['qn-page-' + theme]">
		<scroll-view scroll-y class="cate-ul clearfix" :style="{ height: 'calc(100vh - 112rpx - ' + (isBang ? '84px' : '50px') + ')' }">
			<view class="cate-li" v-for="(item, index) in cate_list" :key="index" @click="goPage('/pagesT/productDetail/productDetail?id=' + item.id + '&name=' + item.title)">
				<view class="cate-img-view"><image :src="item.images" mode="aspectFill" class="cate-img"></image></view>
				<view class="cate-tit">{{ item.title }}</view>
			</view>
		</scroll-view>
	</div>
</template>

<script>
export default {
	data() {
		return {
			cate_list: []
		};
	},
	computed: {
		userId() {
			return this.$store.state.userStatus.id;
		}
	},
	created() {
		this.getAllCategory();
	},
	methods: {
		// 分类列表 getAllCategory
		getAllCategory() {
			this.$u.api
				.getAllCategory({
					userCenterId: this.userId || 0
				})
				.then(data => {
					this.cate_list = data.data;
				});
		}
	}
};
</script>

<style lang="scss">
.cate-ul {
	/* #ifdef H5||MP */
	height: calc(100vh - 230upx);
	/*#endif*/
	/* #ifdef APP-PLUS */
	height: calc(100vh - 100upx);
	/*#endif*/
	.cate-li {
		float: left;
		width: 150upx;
		margin-left: 72upx;
		text-align: center;
		margin-top: 50upx;
		.cate-img-view {
			width: 150upx;
			height: 150upx;
			background-color: #f4f5f6;
			border-radius: 8rpx;
			overflow: hidden;
			.cate-img {
				width: 150upx;
				height: 150upx;
				display: block;
			}
		}

		.cate-tit {
			font-size: 28upx;
			color: #333;
			padding-top: 20upx;
		}
	}
}
</style>