jurong_circle_front_app/pages/home/mallCategory.vue

<template>
	<view class="category-container">
		<u-navbar id="uNavbarId" title="商品详情" :background="{background: 'transparent' }" :border-bottom="false"
			back-icon-color="#000" title-color="#000">
			<template v-slot:right>
				<image class="collection" src="/static/icon/Settings.png" mode=""></image>
			</template>
		</u-navbar>
		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'">
			<view class="scroll-view">
				<view class="menu-level1">
					<view class="text" :class="{'active': currentCate==index}" v-for="(item, index) in categoryList"
						@click="handleChangeCategory(index)">
						{{item.name}}
					</view>
				</view>
				<view class="menu-level2" v-if="categoryList[currentCate]?.relative.length!=0">
					<view class="menu-item" v-for="item in categoryList[currentCate]?.relative" @click="handleSearchCategory(item)">
						<u-image v-if="item.img" :fade="false" :src="getImageUrl(item.img)" :width="iconWidth"
							mode="widthFix"></u-image>
						<view class="menu-text">
							{{item.name}}
						</view>
					</view>
				</view>

				<view class="mall-list">
					<u-waterfall v-model="mallList" ref="mallListRef">
						<template v-slot:left="{leftList}">
							<view class="mall-item u-m-r-10" v-for="(item, index) in leftList" :key="index"
								@click="handleCheck(item)">
								<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image)"
									:index="index"></u-lazy-load>
								<view class="mall-title u-m-l-5 u-m-r-5">
									{{item.name}}
								</view>
								<del class="u-m-l-5 u-m-r-5" style="white-space: nowrap;">￥{{item.price}}</del>
								<view class="mall-price u-m-l-5 u-m-r-5" v-if="RDType(item.payment_methods)">
									<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
									{{item.rongdou_price}}
								</view>
								<view class="mall-price u-m-l-5 u-m-r-5" v-if="pointsType(item.payment_methods)">
									<u-icon name="integral"></u-icon>
									{{item.points_price}}
								</view>
								<view class="mall-tag u-m-l-5 u-m-r-5">
									<view class="mall-tag-text" v-if="RDType(item.payment_methods)">
										融豆
									</view>
									<view class="mall-tag-owner" v-if="pointsType(item.payment_methods)">
										积分
									</view>
								</view>
								<view class="mall-shop u-m-l-5 u-m-r-5">
									{{item.category}}
								</view>
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="mall-item u-m-l-10" v-for="(item, index) in rightList" :key="index"
								@click="handleCheck(item)">
								<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image)"
									:index="index"></u-lazy-load>
								<view class="mall-title u-m-l-5 u-m-r-5">
									{{item.name}}
								</view>
								<del class="u-m-l-5 u-m-r-5" style="white-space: nowrap;">￥{{item.price}}</del>
								<view class="mall-price u-m-l-5 u-m-r-5" v-if="RDType(item.payment_methods)">
									<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
									{{item.rongdou_price}}
								</view>
								<view class="mall-price u-m-l-5 u-m-r-5" v-if="pointsType(item.payment_methods)">
									<u-icon name="integral"></u-icon>
									{{item.points_price}}
								</view>
								<view class="mall-tag u-m-l-5 u-m-r-5">
									<view class="mall-tag-text" v-if="RDType(item.payment_methods)">
										融豆
									</view>
									<view class="mall-tag-owner" v-if="pointsType(item.payment_methods)">
										积分
									</view>
								</view>
								<view class="mall-shop u-m-l-5 u-m-r-5">
									{{item.category}}
								</view>
							</view>
						</template>
					</u-waterfall>
					<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref, onMounted, getCurrentInstance
	} from 'vue';
	import { mallAPI } from '../../api/mall';
	import { getImageUrl } from '../../util/common';

	const instance = getCurrentInstance();

	const currentCate = ref(0)
	const categoryList = ref([])
	const iconWidth = "65%"
	const loadCategory = () => {
		mallAPI.getCategory().then(res => {
			categoryList.value = res.data
		})
	}

	const handleChangeCategory = (index) => {
		currentCate.value = index
	}
	
	const handleSearchCategory = (item) => {
		 uni.navigateTo({
		 	url: '/pages/home/mallSearch?cate=' + item.name
		 })
	}

	const params = ref({
		keyword: '',
		page: 1,
		limit: 5,
		category: ''
	})
	const mallList = ref([])
	const mallListRef = ref()
	const loadStatus = ref('loadmore') // nomore
	const maxPage = ref(1)

	// 积分兑换
	const pointsType = (val : any) => {
		if (val && val.indexOf("points") >= 0) return true
		return false
	}
	// 融豆兑换
	const RDType = (val : any) => {
		if (val && val.indexOf("rongdou") >= 0) return true
		return false
	}

	// 加载数据
	const loadMallData = () => {
		if (loadStatus.value == 'nomore') return
		mallAPI.getMallList(params.value).then((res) => {
			mallList.value = mallList.value.concat(res.data.products)
			maxPage.value = res.data.pagination.pages
			params.value.page++
			if (maxPage.value < params.value.page) {
				loadStatus.value = 'nomore'
			}
		})
	}

	const handleCheck = (item : any) => {
		uni.navigateTo({
			url: '/pages/home/mallDetail?id=' + item.id
		})
	}

	const scrollHeight = ref(0)
	const loadHeight = () => {
		uni.getSystemInfo({
			success(res) {
				let screenHeight = res.screenHeight
				uni.createSelectorQuery().in(instance.proxy).select("#uNavbarId").boundingClientRect((data : any) => {
					scrollHeight.value = screenHeight - data.height
				}).exec()
			}
		})
	}

	onMounted(() => {
		loadHeight()
		loadCategory()
		loadMallData()
	})
</script>

<style lang="scss" scoped>
	.category-container {
		width: 100%;
		height: 100vh;
		background: #B9D5FF;

		.collection {
			width: 48rpx;
			height: 48rpx;
			margin-right: 24rpx;
		}

		.scroll-view {
			.menu-level1 {
				display: flex;
				white-space: nowrap;
				overflow: hidden;
				overflow-x: scroll;

				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;
				font-family: Work Sans;
				font-weight: 600;
				font-style: SemiBold;

				.text {
					margin: 22rpx;
					font-family: Work Sans;
					font-weight: 600;
					font-style: SemiBold;
					font-size: 14px;
					color: #F5F8FF;
				}

				.active {
					font-size: 16px;
					color: var(--wz, #2938E0);
				}
			}

			.menu-level2 {
				background: #F5F8FF;
				// background: #FFFFFF80;
				padding: 20rpx 0 0 0;
				border-radius: 20rpx;
				display: flex;
				flex-wrap: wrap;

				.menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 20%;
					margin-bottom: 20rpx;

					.menu-text {
						font-family: Work Sans;
						font-weight: 400;
						font-style: Regular;
						font-size: 24rpx;
						leading-trim: NONE;
						line-height: 100%;
						letter-spacing: -2%;
						color: #2B2B2B;
						margin-top: 10rpx;
					}
				}
			}

			// 商城列表
			.mall-list {
				margin-top: 20rpx;
				padding: 0 20rpx;

				.mall-item {
					border-radius: 16rpx;
					background: #F0F5FF;
					position: relative;
					margin-top: 20rpx;
					box-shadow: 0px 4px 4px 0px #00000040;
					padding-bottom: 10rpx;

					.mall-title {
						font-size: 30rpx;
						margin-top: 10rpx;
						color: $u-main-color;
					}

					.mall-price {
						font-size: 30rpx;
						color: $u-type-error;
						margin-top: 10rpx;

						.icon {
							height: 30rpx;
							width: 30rpx;
						}
					}

					.mall-tag {
						display: flex;
						margin-top: 5px;

						.mall-tag-owner {
							background-color: $u-type-error;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							padding: 4rpx 14rpx;
							border-radius: 50rpx;
							font-size: 20rpx;
							line-height: 1;
						}

						.mall-tag-text {
							margin-right: 10px;
							border: 1px solid $u-type-primary;
							color: $u-type-primary;
							border-radius: 50rpx;
							line-height: 1;
							padding: 4rpx 14rpx;
							display: flex;
							align-items: center;
							border-radius: 50rpx;
							font-size: 20rpx;
						}
					}

					.mall-shop {
						font-size: 22rpx;
						color: $u-tips-color;
						margin-top: 5px;
					}

				}
			}
		}
	}
</style>