EP41 我的评分和我的下载公用分类列表

文件路径： E:/homework/uniappv3tswallpaper/api/apis.js

先添加相应的api。

import {
	request
} from "@/utils/requset.js"

export function apiGetBanner() {
	return request({
		url: "/homeBanner"
	})
}
export function apiGetDayRandom() {
	return request({
		url: "/randomWall"
	})
}

export function apiGetRequest(data = {}) {
	return request({
		url: '/wallNewsList',
		data
	})
}

export function apiGetClassify(data = {}) {
	return request({
		url: '/classify',
		data
	})
}

export function apiGetCLassList(data = {}) {
	return request({
		url: '/wallList',
		data
	})
}

export function apiGetSetupScore(data = {}) {
	return request({
		url: '/setupScore',
		data
	})
}

export function apiWriteDownload(data = {}) {
	return request({
		url: '/downloadWall',
		data
	})
}

export function apiGetDetailWall(data = {}) {
	return request({
		url: '/detailWall',
		data
	})
}

export function apiGetUserInfo(data = {}) {
	return request({
		url: '/userInfo',
		data
	})
}

export function apiGetUserWallList(data = {}) {
	return request({
		url: '/userWallList',
		data
	})
}

文件路径： E:/homework/uniappv3tswallpaper/pages/user/user.vue

从我的页面向分类列表页面跳转的时候传递新的参数 name 和 type 。

<template>
	<view class="userLayout pageBg" v-if="userInfo">
		<view class="" :style="{height:getNavBarHeight() + 'px'}"> </view>
		<view class="userInfo">
			<view class="avatar">
				<image src="../../common/images/preview1.jpg" mode="aspectFill"></image>
			</view>
			<view class="ip">
				{{userInfo.IP}}
			</view>
			<view class="from">
				{{userInfo.address.city || userInfo.address.province || userInfo.address.country}}
			</view>
		</view>
		<view class="section">
			<view class="list">
				<navigator url="/pages/classlist/classlist?name=我的下载&type=download">
					<view class="row">
						<view class="left">
							<uni-icons type="download-filled" size="20" color="#28b389"></uni-icons>
							<view class="text">
								我的下载
							</view>
						</view>
						<view class="right">
							<view class="text">
								{{userInfo.downloadSize}}
							</view>
							<uni-icons type="right" size="15" color="#aaa"></uni-icons>
						</view>
					</view>
				</navigator>
				<navigator url="/pages/classlist/classlist?name=我的评分&type=score">
					<view class="row">
						<view class="left">
							<uni-icons type="star-filled" size="20" color="#28b389"></uni-icons>
							<view class="text">
								我的评分
							</view>
						</view>
						<view class="right">
							<view class="text">
								{{userInfo.scoreSize}}
							</view>
							<uni-icons type="right" size="15" color="#aaa"></uni-icons>
						</view>
					</view>
				</navigator>
				<view class="row">
					<view class="left">
						<uni-icons type="chatboxes-filled" size="20" color="#28b389"></uni-icons>
						<view class="text">
							联系客服
						</view>
					</view>
					<view class="right">
						<view class="text">
						</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
					<!-- #ifdef MP -->
					<button open-type="contact">联系客服</button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<button @click="clickContact">打电话</button>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="section">
			<view class="list">
				<view class="row">
					<view class="left">
						<uni-icons type="notification-filled" size="20" color="#28b389"></uni-icons>
						<view class="text">
							订阅更新
						</view>
					</view>
					<view class="right">
						<view class="text">

						</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>
				<view class="row">
					<view class="left">
						<uni-icons type="flag-filled" size="20" color="#28b389"></uni-icons>
						<view class="text">
							常见问题
						</view>
					</view>
					<view class="right">
						<view class="text">

						</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="loadingLayout" v-else>
		<view class="" :style="{height:getNavBarHeight() + 'px'}"> </view>
		<uni-load-more status="loading"></uni-load-more>
	</view>
</template>

<script setup>
	import {
		getNavBarHeight
	} from "@/utils/system.js"
	import {
		apiGetUserInfo
	} from "@/api/apis.js"
	import {
		ref
	} from "vue";

	const userInfo = ref(null)

	const clickContact = () => {
		uni.makePhoneCall({
			phoneNumber: '114' //仅为示例
		});
	}

	const getUerInfo = () => {
		apiGetUserInfo().then(res => {
			userInfo.value = res.data
			// console.log(userInfo.value)
		})
	}

	getUerInfo()
</script>

<style lang="scss" scoped>
	.userLayout {
		.userInfo {
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: center;
			align-items: center;
			padding: 50rpx 0;

			.avatar {
				height: 160rpx;
				width: 160rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.ip {
				font-size: 44rpx;
				color: #333;
				padding: 20rpx 0 5rpx;
			}

			.from {
				font-size: 28rpx;
				color: #aaa;
			}

		}
	}

	.section {
		width: 690rpx;
		margin: 50rpx auto;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		border-shadow: 0 0 30rpx rgba(0, 0, 0, 0.2);

		.list {
			.row {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-content: center;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				height: 100rpx;
				border-bottom: 1px solid #eee;
				position: relative;
				background: white;

				:last-child {
					border-bottom: 0;
				}

				.left {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					align-content: center;
					align-items: center;

					.text {
						padding-left: 20rpx;
						color: #666
					}
				}

				.right {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					align-content: center;
					align-items: center;

					.text {
						padding-left: 20rpx;
						color: #666
					}
				}

				button {
					position: absolute;
					top: 0%;
					left: 0%;
					height: 100%;
					width: 100%;
					opacity: 0
				}
			}
		}
	}
</style>

文件路径： E:/homework/uniappv3tswallpaper/pages/classlist/classlist.vue

接收新的参数，在获取列表信息的时候根据已有参数是 id 还是 type 来区分发起不同的请求。

<template>
	<view class="classlist">
		<view class="loadingLayout" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="'/pages/preview/preview?id='+item._id" class="item" v-for="item in classList"
				:key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData? 'nomre':'loading'"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		apiGetCLassList,
		apiGetUserWallList
	} from '@/api/apis.js'
	import {
		onLoad,
		onUnload,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'

	const queryParams = {
		pageNum: 1,
		pageSize: 12
	}
	const noData = ref(false)

	onLoad(e => {
		// console.log(e)
		let {
			id = null, name = null, type = null
		} = e;
		uni.setNavigationBarTitle({
			title: name
		})
		queryParams.classid = id
		queryParams.type = type
		queryParams.name = name


		getClassList()

	})

	// 触底获取新数据
	onReachBottom(() => {
		if (noData.value) {
			return
		}
		queryParams.pageNum++
		getClassList()
	})

	// 定义列表参数
	const classList = ref([])

	// 发请求获取数据
	const getClassList = async () => {
		let res
		if (queryParams.classid) {
			res = await apiGetCLassList(queryParams)
			console.log(11)
		}
		if (queryParams.type) {
			res = await apiGetUserWallList(queryParams)
			console.log(22)
		}
		console.log(queryParams, res)

		classList.value = [...classList.value, ...res.data]
		uni.setStorageSync("storageClassList", classList.value)
		if (queryParams.pageSize > res.data.length) {
			noData.value = true
		}
	}

	// 分享给好友
	onShareAppMessage((e) => {
		return {
			title: "壁纸小程序-好友" + queryParams.name,
			path: "/pages/classlist/classlist?id=" + queryParams.classid + "&name=" + queryParams.name
		}
	})
	// 分享到朋友圈
	onShareTimeline(() => {
		return {
			title: "壁纸小程序-朋友圈" + queryParams.name,
			query: "id=" + queryParams.classid + "&name=" + queryParams.name
		}
	})

	// 离开页面
	onUnload(() => {
		uni.removeStorageSync("storageClassList")
	})
</script>

<style lang="scss">
	.classlist {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5px;
			padding: 5rpx;

			.item {
				height: 440rpx;
				width: 100%;

				image {
					height: 100%;
					width: 100%;
					display: block;
				}
			}
		}
	}
</style>