XEH-miniProgram/pages/index/product/category.vue

<template>
	<view class="page-wrap">
		<scroll-view scroll-y class="nav-panel">
			<view :class="{ item: true, active: navActive === index }" @click="navActive = index" v-for="(item, index) in navList" :key="index">
				{{ item.categoryName }}
			</view>
		</scroll-view>
		<scroll-view scroll-y class="product-panel">
			<view class="item" v-for="(item, index) in productList" :key="index" @click="handleOpenDetail(item.id)">
				<view class="box">{{ item.name }}</view>
				<view class="name">{{ item.name }}</view>
				<view class="desc">{{ item.title }}</view>
				<view class="tags">
					<view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ filterDict(tag, tagList) }}</view>
				</view>
				<view class="price">{{ item.salePrice }}</view>
			</view>
			<view class="c-abnor" v-if="!productList.length">
				<image class="icon" src="@/static/svg/bags.svg"></image>
				暂无数据
			</view>
		</scroll-view>
	</view>
</template>

<script>
import productService from '@/api/product.js';
import systemService from '@/api/system.js';
import { filterDict } from '@/utils/util.js';
export default {
	data() {
		return {
			navActive: 0,
			navList: [],
			productList: [],
			tagList: []
		};
	},
	watch: {
		navActive() {
			this.getProductList();
		}
	},
	onLoad() {
		this.getCategoryList();
		this.getTagConfig();
	},
	methods: {
		// 获取分类列表
		async getCategoryList() {
			const { data } = await productService.getCategoryList();
			this.navList = data;
			this.getProductList();
		},
		// 获取产品列表
		async getProductList() {
			const { navActive, navList } = this;
			const { categoryName } = navList[navActive];
			const { rows } = await productService.getProductList({
				categoryOne: categoryName,
				categoryTwo: categoryName
			});
			this.productList = rows.map((item) => {
				return {
					...item,
					tags: item.label ? item.label.split(',') : []
				};
			});
		},
		// 获取标签配置
		async getTagConfig() {
			const { rows } = await systemService.getDict('fin_product_tag');
			this.tagList = rows;
		},
		// 打开商品详情
		handleOpenDetail(id) {
			uni.navigateTo({
				url: 'index?id=' + id
			});
		},
		// 引用方法需要手动注入，否则报错
		filterDict
	}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	padding-left: 164.84rpx;
}

.nav-panel {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: 164.84rpx;
	background: #f2f2f2;

	.item {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 89.29rpx;
		text-align: center;
		padding: 0 13.74rpx;
		font-size: 24.73rpx;
		color: #333;
	}

	.active {
		color: #00bcd2;
		background: #fff;
	}
}

.product-panel {
	height: 100vh;
	.item {
		height: 192.31rpx;
		background: #fff;
		position: relative;
		padding: 13.74rpx 20.6rpx 0 199.18rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #e0e0e0;

		&:last-child {
			border: none;
		}
	}

	.box {
		width: 157.97rpx;
		height: 157.97rpx;
		position: absolute;
		left: 20.6rpx;
		top: 13.74rpx;
		font-size: 27.47rpx;
		color: #fff;
		text-align: center;
		word-break: break-all;
		background: #0a9efe;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 13.74rpx;
		box-sizing: border-box;
	}

	.name {
		font-size: 27.47rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.desc {
		font-size: 24.73rpx;
		color: #999;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		max-height: 82.42rpx;
		word-break: break-all;
	}

	.tags {
		overflow: hidden;

		.tag {
			float: left;
			font-size: 21.98rpx;
			color: #f97631;
			padding: 2.75rpx 13.74rpx;
			border: 1rpx solid #f97631;
			margin: 13.74rpx 13.74rpx 0 0;
		}
	}

	.price {
		font-size: 41.21rpx;
		color: #f97631;
		position: absolute;
		right: 20.6rpx;
		bottom: 20.6rpx;
		line-height: 1;

		&:before {
			content: '￥';
			font-size: 24.73rpx;
		}

		&::after {
			content: attr(data-text);
			font-size: 21.98rpx;
			color: #999;
			margin-left: 4.12rpx;
			vertical-align: middle;
		}
	}
}
.c-abnor {
	margin-left: 82.42rpx;
}
</style>