nk-shop2.0/pages/cloud_warehouse/big_classification/index.vue

<!-- 里海云仓大分类 -->
<template>
	<view class="bigClassification">
		<!-- 占位 -->
		<view style="height: var(--status-bar-height);"></view>

		<!-- 返回 -->
		<view class="back-icon" @click="handleBack"></view>

		<!-- 分类 -->
		<view class="classification">
			<view class="classification-wrap" v-if="list.length >0">
				<block v-for="(item,indx) in list" :key="indx">
					<view class="classification-item" @click="goSmallType(item)">
						<view class="classification-item-name">{{item.cate_name}}</view>
						<view class="classification-item-btn">立即前往</view>
						<u-image :src="item.pic" mode="widthFix" width="140rpx" height="130rpx" class="img"
							:lazy-load="true">
							<view slot="error" style="font-size: 24rpx;">暂无图片</view>
						</u-image>
					</view>
				</block>
			</view>

			<view class='empty-box' v-if="list.length == 0">
				<view class='pictrue'>
					<u--image src='../../../static/images/empty-box.png' width="414rpx" height="240rpx" />
					<view class="txt">暂无更多分类~</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCategory
	} from "@/api/cloud_warehouse.js";
	import {
		getCategoryListLevel
	} from '@/api/requesta.js'
	export default {
		data() {
			return {
				list: [],
				mer_id: ''
			}
		},

		onLoad(opt) {
			// this.mer_id = opt.id || 244;
			// this.getData();

			this.getCloundShop();

		},

		methods: {
			getCloundShop() {
				uni.showLoading({
					title: "加载中..."
				})
				getCategoryListLevel({
					type: 2
				}).then(res => {
					uni.hideLoading();
					this.list = res.data;
				}).catch(() => {
					uni.hideLoading();
				})
			},

			// 返回上一页
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			// 小分类
			goSmallType(e) {
				uni.setStorageSync("market_type_parent", e);
				uni.navigateTo({
					url: "/pages/cloud_warehouse/small_classification/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #F7F7F7;
	}

	.bigClassification {
		position: relative;
		width: 100%;
		height: 760rpx;
		background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/06e54202402281547535138.webp');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.back-icon {
		position: absolute;
		top: 116rpx;
		left: 20rpx;
		width: 24rpx;
		height: 24rpx;
		border: 2rpx solid #fff;
		border-bottom-color: transparent;
		border-right-color: transparent;
		transform: rotate(-45deg);
	}

	.classification {
		margin-left: 20rpx;
		padding-top: 490rpx;

		.classification-wrap {
			display: flex;
			flex-wrap: wrap;

			.classification-item {
				width: 47%;
				position: relative;
				background-color: #fff;
				margin: 0 20rpx 18rpx 0;
				border-radius: 30rpx;
				padding: 26rpx 0 26rpx 24rpx;

				.classification-item-name {
					position: relative;
					z-index: 2;
					display: inline-block;
					font-size: 36rpx;
					color: #000;
					font-weight: bold;
					margin-bottom: 30rpx;

					&::before {
						content: "";
						display: inline-block;
						position: absolute;
						z-index: -1;
						left: 0rpx;
						bottom: -2rpx;
						width: 100%;
						height: 24rpx;
						border-radius: 24rpx;
						background: linear-gradient(to right, #FF8259 0%, rgba(255, 255, 255, .8) 80%);
					}
				}

				.classification-item-btn {
					width: 140rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 48rpx;
					text-align: center;
					color: #FFB298;
					border: 2rpx solid #FFB298;
				}

				.img {
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}
		}
	}

	.empty-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 100rpx auto 0;

		image {
			width: 414rpx;
			height: 240rpx;
		}

		.txt {
			font-size: 26rpx;
			color: #999;
			text-align: center;
		}
	}
</style>