完成修改用户头像

api/collect.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+/**
+ * 收藏列表
+ * @param {Object} data 参数
+ */
+export function query(data) {
+	return request({
+		'url': '/collect/list',
+		headers: {
+			isToken: true
+		},
+		'method': 'post',
+		'data': data
+	})
+}

api/user.js

@@ -1,7 +1,5 @@
 import request from '@/utils/request'
 
-
-
 /**
  * 我的
  */
@@ -58,3 +56,32 @@ export function getAnjie() {
 	})
 }
 
+/**
+ * 获取系统头像
+ */
+export function getIconList() {
+	return request({
+		'url': '/user/getIcon',
+		headers: {
+			isToken: true
+		},
+		'method': 'get',
+		'data': null
+	})
+}
+
+/**
+ * 修改用户信息
+ * 
+ * @param {Object} data 表单信息
+ */
+export function updateIcon(data) {
+	return request({
+		'url': '/user/icon',
+		headers: {
+			isToken: true
+		},
+		'method': 'post',
+		'data': data
+	})
+}

pages.json

@@ -248,7 +248,7 @@
 			"path": "pages/collect/collect",
 			"style": {
 				"navigationBarTitleText": "我的收藏",
-				"enablePullDownRefresh": false,
+				"enablePullDownRefresh": true,
 				"app-plus": {
 					"titleNView": false
 				}

pages/collect/collect.vue

@@ -26,6 +26,14 @@
 				></u-tabs>
 			</view>
 		</view>
+		<u-empty
+			mode="data"
+			v-if="list.length === 0"
+			iconSize="120"
+			textSize="58"
+			text="暂无数据"
+		>
+		</u-empty>
 		<view class="list-box">
 			<view class="list-item-box" v-for="item in list" :key="item.id" @click="onClickReport(item)">
 				<view class="icon-box">
@@ -36,7 +44,7 @@
 						{{item.title}}
 					</view>
 					<view class="text">
-						【{{item.type}}】
+						【{{item.typeName}}】
 					</view>
 				</view>
 				<view class="suffix-box">
@@ -46,12 +54,14 @@
 				</view>
 			</view>
 		</view>
+		<uni-load-more v-show="visualLoadMore" :status="loadMoreStatus"></uni-load-more>
 	</view>
 </template>
 
 <script setup>
 	import { ref } from 'vue'
-	import { onLoad } from '@dcloudio/uni-app'
+	import { onLoad, onReachBottom, onPullDownRefresh  } from '@dcloudio/uni-app'
+	import { query } from '@/api/collect.js'
 	
 	const searchInputStyle = {
 		backgroundColor: '#E5E5E5'
@@ -70,50 +80,52 @@
 			value: 2
 		},
 	]
+	const pageNum = ref(1)
+	const pageSize = ref(10)
+	const visualLoadMore = ref(false)
+	const loadMoreStatus = ref('more')
 	const searchForm = ref({
 		keyword: '',
-		type: 0
+		type: 0,
+		pageNumber: 1,
+		pageSize: 10
 	})
 	
 	const list = ref([
 		{
 			id: '01',
 			title: '2024年11月关注是中介促成二手住宅市场交易简报',
-			type: '月度成交简报',
+			type: 1,
+			typeName: '月度成交简报',
 			isNew: true
 		},
-		{
-			id: '02',
-			title: '客户需求理解与匹配',
-			type: '精英修炼营',
-			isNew: true
-		},
-		{
-			id: '03',
-			title: '2024年11月关注是中介促成二手住宅市场交易简报',
-			type: '月度成交简报',
-			isNew: false
-		},
-		{
-			id: '04',
-			title: '客户需求理解与匹配',
-			type: '精英修炼营',
-			isNew: false
-		},
-		{
-			id: '05',
-			title: '2024年11月关注是中介促成二手住宅市场交易简报',
-			type: '月度成交简报',
-			isNew: false
-		},
-		{
-			id: '06',
-			title: '客户需求理解与匹配',
-			type: '精英修炼营',
-			isNew: false
-		},
 	])
 	
+	function onSearchConfirm() {
+		searchForm.value.pageNumber = 1
+		pageNum.value = 1
+		onSearch()
+	}
+	
+	function onSearchClear() {
+		searchForm.value.keyword = null
+		searchForm.value.pageNumber = 1
+		pageNum.value = 1
+		onSearch()
+	}
+	
+	function onSearch() {
+		loadMoreStatus.value = 'more'
+		query(searchForm.value).then(res => {
+			if (res && res.message === 'success') {
+				list.value = res.data
+				if (res.count === 0) {
+					visualLoadMore.value = false
+				}
+			}
+		})
+	}
+	
 	function onSearchTypeChange(val) {}
 	
 	function onClickReport(report) {
@@ -121,9 +133,62 @@
 			url: `/pages/reportDetail/reportDetail?id=${report.id}&title=${report.title}`
 		})
 	}
+	onPullDownRefresh((e) => {
+		searchForm.value.pageNumber = 1
+		loadMoreStatus.value = 'more'
+		query(searchForm.value).then(res => {
+			if (res && res.message === 'success') {
+				list.value = res.data
+				if (res.count === 0) {
+					visualLoadMore.value = false
+				}
+				uni.showToast({
+					title: '刷新成功',
+					icon: 'success',
+					duration: 2000
+				})
+			}
+			uni.stopPullDownRefresh()
+		})
+	})
+	
+	onReachBottom(async () => {
+		if (loadMoreStatus.value === 'noMore') {
+			uni.showToast({
+				title: '没有更多啦＞﹏＜',
+				icon: 'none'
+			})
+			return
+		}
+		visualLoadMore.value = true
+		loadMoreStatus.value = 'loading'
+		searchForm.value.pageNum++
+		query(searchForm.value).then(res => {
+			if (res && res.message === 'success') {
+				if (res.data) {
+					if (res.count >= list.value.length) {
+						if (list.value.length === res.count) {
+							loadMoreStatus.value = 'noMore'
+							visualLoadMore.value = true
+						} else {
+							list.value.push(...res.data)
+							loadMoreStatus.value = 'more'
+							visualLoadMore.value = false
+						}							
+					} else {
+						loadMoreStatus.value = 'noMore'
+						visualLoadMore.value = true
+					}
+				} else {
+					loadMoreStatus.value = 'noMore'
+					visualLoadMore.value = true
+				}
+			}
+		})
+	})
 	
 	onLoad(() => {
-		console.log('onLoad')
+		onSearch()
 	})
 </script>
 

pages/personalCenter/personalCenter.vue

@@ -10,7 +10,7 @@
 						<view class="text">
 							{{user.name}}
 						</view>
-						<view class="iconfont icon-xiugai"></view>
+						<view class="iconfont icon-xiugai" @click="onIconOpen"></view>
 					</view>
 					<view class="function" v-else>
 						<view class="function-item">
@@ -150,6 +150,28 @@
 				</view>
 			</view>
 		</view>
+		<u-popup v-model="iconVisible" mode="center" border-radius="10">
+			<view class="icon-list-box">
+				<view class="title">
+					修改头像
+				</view>
+				<u-row gutter="20">
+					<u-col span="3" v-for="icon in iconList" :key="icon.name" @click="currentIcon = icon">
+						<view class="icon-item" :class="{'icon-active': icon.name === currentIcon.name}">
+							<cover-image class="icon" :src="user.icon"></cover-image>
+						</view>
+					</u-col>
+				</u-row>
+				<view class="button-box">
+					<view class="button-item">
+						<u-button type="primary" @click="onIconSubmit">修改</u-button>
+					</view>
+					<view class="button-item">
+						<u-button type="info" @click="onIconCancel">取消</u-button>
+					</view>
+				</view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
@@ -161,7 +183,8 @@
 	import { getToken, removeToken } from '@/utils/auth.js'
 	import { useAuthStore } from '@/store/authStore'
 	
-	import { getCreditCard, getZhongjie, getAnjie } from '@/api/user.js'
+	import { getCreditCard, getZhongjie, getAnjie, getIconList, updateIcon } from '@/api/user.js'
+	import { msgError, msgSuccess } from '@/utils/common'
 	
 	const authStore = useAuthStore()
 	
@@ -173,6 +196,37 @@
 		corpRegNo: '123xxxx'
 	})
 	
+	const iconVisible = ref(false)
+	const iconList = ref([
+		{
+			name: '',
+			url: ''
+		}
+	])
+	const currentIcon = ref({
+		name: '',
+		url: ''
+	})
+	function onIconOpen() {
+		currentIcon.value = iconList.value[0]
+		iconVisible.value = true
+	}
+	function onIconSubmit() {
+		console.log('选择头像', currentIcon.value)
+		updateIcon({userIcon: currentIcon.value.name}).then(res => {
+			if (res && res.message === 'success') {
+				msgSuccess('修改成功')
+				authStore.setUserIcon(currentIcon.value.url)
+				iconVisible.value = false
+			} else {
+				msgError('修改失败')
+			}
+		})
+	}
+	function onIconCancel() {
+		iconVisible.value = false
+	}
+	
 	// 是否预览信用信息卡
 	const showCreditCard = ref(false)
 	// 信用信息卡
@@ -294,6 +348,11 @@
 				anjie.value = res.data ?? {zsbh: null}
 			}
 		})
+		getIconList().then(res => {
+			if (res && res.message === 'success') {
+				iconList.value = res.data
+			}
+		})
 	})
 </script>
 
@@ -455,5 +514,44 @@
 				}
 			}
 		}
+	
+		.icon-list-box {
+			padding: 30rpx;
+			width: 90vw;
+			.title {
+				font-size: $uni-title-font-size-2;
+				font-weight: bold;
+				margin-bottom: 30rpx;
+			}
+			.icon-item {
+				width: 120rpx;
+				height: 120rpx;
+				border-radius: 50%;
+				border: 1px solid #ccc;
+				margin-bottom: 20rpx;
+				.icon {
+					height: 100%;
+					width: 100%;
+					object-fit: cover;
+				}
+			}
+			.icon-active {
+				border: 1px solid $uni-color-primary;
+			}
+			.button-box {
+				margin-top: 30rpx;
+				display: flex;
+				align-items: center;
+				gap: 30rpx;
+				.button-item {
+					&:first-child{
+						margin-left: auto;
+					}
+					&:last-child {
+						margin-right: auto;
+					}
+				}
+			}
+		}
 	}
 </style>

store/authStore.js

@@ -27,6 +27,10 @@ export const useAuthStore = defineStore('auth', {
 		  this.userInfo = data
 		  uni.setStorageSync('USER_INFO', data)
 		},
+		setUserIcon(data) {
+			this.userInfo.userIcon = data
+		  uni.setStorageSync('USER_INFO', this.userInfo)
+		},
 		// 初始化时从Storage加载
 		loadUserInfo() {
 		  this.userInfo = uni.getStorageSync('USER_INFO') || null