sxc-frontend/miniprogram/components/ss_chat/child/SsChatReplyCategory.vue

<template>
	<view class="ss-chat-reply-category">
		<template v-if="records" v-for="item in records">
			<view class="item" @tap="questSend(item.itemContent)">{{item.itemContent}}</view>
		</template>
		<view class="category-footer">
			<button class="footer-btn" @tap="loadNext">
				<uni-load-more v-if="loading" iconType="circle" :show-text="false" status="loading" color="#7E8AA2"
					:icon-size="12" />
				{{ finish ? '没有更多了' : '更多' }}
			</button>
		</view>
	</view>
</template>

<script>
	import {
		RequestApi
	} from '@/api/requestApi';

	export default {
		props: {
			categoryId: {
				type: Number,
				require: true
			}
		},
		data() {
			return {
				loading: false,
				finish: false,
				records: [],
				pageNum: 1,
				pageSize: 6
			}
		},
		mounted() {
			this.pageNum = 1;
			this.loadCategory();
		},
		methods: {
			loadCategory() {
				if (this.loading || this.finish) {
					return;
				}
				RequestApi.getCategory(this.categoryId, this.pageNum, this.pageSize).then(result => {
					if (result) {
						this.records = this.records.concat(result.records);
						if (result.current >= result.pages) {
							this.finish = true;
						}
						this.loading = false;
						this.$emit('changeChat');
					}
				});
			},
			loadNext() {
				this.pageNum++;
				this.loadCategory();
			},
			questSend(msg) {
				this.$emit('quickSend', msg);
			}
		}
	}
</script>

<style scoped lang="scss">
	.ss-chat-reply-category {
		display: block;
		flex-wrap: wrap;
		margin: 0 -16rpx 32rpx -16rpx;

		.item {
			padding: 24rpx;
			margin: 0 16rpx 24rpx 16rpx;
			border: 2rpx solid #d5d6d8;
			border-radius: 16rpx;
			background-color: #ffffff;
			font-size: 28rpx;
		}

		.category-footer {
			text-align: center;

			.footer-btn {
				border: 0;
				height: unset;
				padding: 0;
				background-color: transparent;
				font-size: 24rpx;
				color: #7E8AA2;

				&::after {
					display: none;
				}

				&:hover {
					background-color: #ffffff;
				}
			}
		}
	}
</style>