NN2025081602/addons/min-exam/pages/group/list.vue

<template>
	<view class="app" :style="'width: '+boxWidth+'px;min-height: '+boxHeight+'px'">
		<view :class="['header-box',fixedTop?'header-fixed':'']">
			<navbar title="我加入的群" :showLeft="true" :place="true">
			</navbar>
			<view class="search-box">
				<uv-search placeholder="搜索群聊名称" v-model="params.keyword" action-text="搜索" bgColor="#fff"
					:actionStyle="{color: '#fff',background: '#15B3B2',padding:'.25rem .75rem',borderRadius: '10rem',marginRight: '.25rem'}"
					@search="search" @custom="search" @clear="search()" height="36" :animation="false"
					:customStyle="{fontSize:'24rpx'}">
				</uv-search>
			</view>
		</view>
		<view class="main" v-if="loaded">
			<view class="loading" v-if="loading && (!dataList || dataList.length<=0)">
			</view>
			<uv-empty class="empty" v-else-if="!dataList || dataList.length<=0" mode="data" text="暂无群聊" icon-size="0"
				width="90" height="90" textColor="var(--empty-color)"></uv-empty>
			<view class="list-box" v-else>
				<view class="list-item" v-for="(v,k) in dataList" :key="k">
					<view class="info-box">
						<view class="info-row">
							<view class="avatar">
								<uv-avatar class="image" :src="v.headimg" shape="square" size="3.25rem" />
							</view>
							<view class="info">
								<view class="text-box title-box">
									<view class="title">
										{{v.title}}
									</view>
									<view class="publish">
										发布者 {{v.nick_name || '微信用户'}}
									</view>
								</view>
								<view class="text-box desc">
									{{v.content}}
								</view>
							</view>
						</view>
						<view class="action-box">
							<view class="count-box">
								<text class="area">{{getArea(v.area)}}</text>
								<text class="num">{{v.group_user||0}}人</text>
							</view>
							<view class="btn-box">
								<view class="btn entry" @click="gotoPage('/pages/group/chat?id='+v.id)">
									进入群聊
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="loaded" v-if="params.loaded">
					没有更多了
				</view>
			</view>
		</view>

		<showModal ref="uvModal"></showModal>
		<uv-loading-icon class="loading" :show="loading" textSize="30rpx" color="var(--color)"
			:customStyle="{position:'absolute',top:'50%',left:0,right:0}"></uv-loading-icon>
	</view>

</template>

<script>
	import navbar from "../../components/navbar.vue"
	import showModal from "../../components/showModal.vue"
	export default {
		components: {
			navbar,
			showModal
		},
		data() {
			return {
				loading: false,
				loaded: false,
				submitLoading: false,
				boxHeight: 800,
				boxWidth: 360,
				fixedTop: false,
				leftIconStyle: {
					width: '1.5rem',
					height: '1.5rem'
				},
				userInfo: {
					id: 0,
				},
				params: {
					uid: 0,
					cate_id: [],
					info_type: 3,
					keyword: "",
					page: 1,
					pageSize: 10,
					loaded: false,
				},
				dataList: [],
			}
		},
		onLoad(e) {
			const windowInfo = uni.getWindowInfo();
			this.boxHeight = windowInfo.windowHeight
			this.boxWidth = windowInfo.windowWidth
			this.getInfo();
		},
		onHide() {
			this.$refs.uvModal.close();
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
			this.params.page = 1;
			this.params.loade = false;
			this.getInfo()
		},
		onPageScroll(e) {
			if (e.scrollTop > 30) {
				this.fixedTop = true;
			} else if (e.scrollTop <= 0) {
				this.fixedTop = false;
			}
		},
		onReachBottom() {
			if (!this.params.loaded && this.userInfo.id) {
				this.params.page++;
				this.getList()
			}

			uni.stopPullDownRefresh()
		},
		methods: {
			getArea(text) {
				let data = text ? text.split('/') : [];
				return typeof(data[1]) != 'undefined' ? data[1] : (typeof(data[0]) != 'undefined' ? data[0] : '');
			},
			// 用户信息
			async getInfo() {
				this.loading = true;
				this.userInfo = await this.$request.apiGetUserInfo(this, true);
				this.loading = false;
				this.loaded = true;
				if (!this.userInfo || this.userInfo.id <= 0) {
					this.$refs.uvModal.open({
						title: '提示',
						content: '您暂未登录，请先登录～',
						confirmText: '立即登录',
						confirmColor: "#15B3B2",
						confirm: function(e) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					});
					return false;
				}

				this.params.uid = this.userInfo.id;
				this.getList();
			},
			// 搜索
			search() {
				this.params.page = 1;
				this.params.loaded = false;
				this.getList();
			},
			// 列表
			async getList() {
				let _this = this
				this.loading = true;
				const res = await this.$request.api('/index/infoList', this.params)
				this.loading = false;
				this.loaded = true;
				if (res.code == 200) {
					if (this.params.page == 1) {
						this.dataList = res.data
					} else if (res.data.length > 0) {
						this.dataList = this.dataList.concat(res.data);
					} else {
						this.params.loaded = true
					}
					if (res.data.length < this.params.pageSize) {
						this.params.loaded = true
					}
				} else if (res.code == 510) {
					this.dataList = [];
					this.$refs.uvModal.open({
						title: '提示',
						content: '您暂未登录，请先登录～',
						confirmText: '立即登录',
						confirmColor: "#15B3B2",
						confirm: function(e) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					});
				} else {
					let msg = typeof(res.msg) != 'undefined' ? res.msg : ''
					if (msg) {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
					}

				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		height: 100%;
		width: 100%;
		// background: #F4F5F5;
	}

	.app {
		height: 100%;
	}

	.header-box {
		width: 100%;
		position: fixed;
		padding-bottom: .5rem;
		z-index: 99;
		left: 0;
		top: 0;

		&.header-fixed {
			position: fixed;
			background: linear-gradient(to bottom, #15B3B2, #9de8db);
		}

		.search-box {
			background-color: #fff;
			border-radius: 10rem;
			margin: 3.5rem .5rem 0;
		}
	}

	.main {
		margin: 10.5rem .75rem 0;

		/* #ifdef H5 */
		margin-top: 8rem;
		/* #endif */

		::v-deep .uv-empty {
			padding-top: 2rem;
		}

		.list-box {
			padding-bottom: 1.5rem;

			.list-item {
				background-color: #fff;
				margin-bottom: 1.125rem;
				border-radius: 1rem;

				.info-box {
					padding: .75rem;

					.info-row {
						display: flex;
						flex-direction: row;
						padding-bottom: 1rem;

						.avatar {
							width: 3.25rem;
							height: 3.25rem;

							.image {
								width: 100%;
							}
						}

						.info {
							flex: 1;
							margin-left: .75rem;

							.text-box {
								font-size: .75rem;
								color: var(--text-color);

								&.title-box {
									display: flex;
									flex-direction: row;
									align-items: center;
									margin-bottom: .25rem;

									.title {
										flex: 1;
										color: var(--title-color);
										margin-right: .5rem;
										font-weight: 500;
										font-size: 1rem;
									}

									.publish {
										font-size: .625rem;
										border: .0125rem solid var(--text-color);
										padding: 0rem .15rem;
										border-radius: .1rem;
									}
								}


								&.desc {
									overflow: hidden;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
								}


							}
						}
					}

					.action-box {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-end;

						.count-box {
							flex: 1;
							display: flex;
							flex-direction: row;
							align-items: center;
							font-size: .675rem;

							.area {
								border: .025rem solid var(--color);
								border-top-left-radius: 10rem;
								border-bottom-left-radius: 10rem;
								color: #fff;
								background-color: var(--color);
								padding: 0rem .425rem;
								min-width: 1.5rem;
							}

							.num {
								min-width: 1.5rem;
								color: var(--color);
								padding: 0rem .425rem;
								border: .025rem solid var(--color);
								border-top-right-radius: 10rem;
								border-bottom-right-radius: 10rem;
								text-align: center;
							}
						}

						.btn-box {
							display: flex;
							flex-direction: row;
							align-items: center;

							.btn {
								padding: .15rem .75rem;
								color: var(--color);
								font-size: .75rem;
								font-weight: 500;

								/* #ifdef APP */
								padding: .375rem .75rem;

								/* #endif */
							}

							.money {
								min-width: 2rem;
								// background: url("@/static/images/icon-money-bg.png") no-repeat 100%;
								background-size: cover;
								border-radius: 0;
								border-bottom-left-radius: 1rem;
								border-top-left-radius: 1rem;
								border-top-right-radius: .5rem;

								display: flex;
								flex-direction: row;
								align-items: center;

								.icon {
									width: 2rem;
								}

								.text {
									flex: 1;
									color: #fff;
									font-size: 1rem;
								}
							}

							.entry {
								height: 1.375rem;
								line-height: 1.375rem;
								width: 3.4rem;
								text-align: center;
								// background: url("@/static/images/icon-entry-bg.png") no-repeat 100%;
								background-size: 100% 100%;
								margin-left: -.3rem;
								color: #fff;
							}
						}
					}
				}


			}

			.loaded {
				padding: .5rem 0;
				text-align: center;
				font-size: .75rem;
				color: #999;
			}
		}
	}
</style>