new-zx-front-app/pages/chat/components/select-popup.vue

<template>
	<su-popup :show="show" showClose round="10" backgroundColor="#eee" @close="emits('close')">
		<view class="select-popup">
			<view class="title">
				<span>{{ mode == 'goods' ? '我的浏览' : '我的订单' }}</span>
			</view>
			<scroll-view class="scroll-box" scroll-y="true" :scroll-with-animation="true" :show-scrollbar="false"
				@scrolltolower="loadmore">
				<view class="item" v-for="item in state.pagination.data" :key="item"
					@tap="emits('select', { type: mode, data: item })">
					<template v-if="mode == 'goods'">
						<GoodsItem :goodsData="item.goods" />
					</template>
					<template v-if="mode == 'order'">
						<OrderItem :orderData="item" />
					</template>
				</view>
				<uni-load-more :status="state.loadStatus" :content-text="{ contentdown: '上拉加载更多' }" />
			</scroll-view>
		</view>
	</su-popup>
</template>

<script setup>
	import {
		reactive,
		watch
	} from 'vue';
	import sheep from '@/sheep';
	import _ from 'lodash';
	import GoodsItem from './goods.vue';
	import OrderItem from './order.vue';
	import OrderApi from '@/sheep/api/trade/order';
	import SpuHistoryApi from '@/sheep/api/product/history';

	const emits = defineEmits(['select', 'close']);
	const props = defineProps({
		mode: {
			type: String,
			default: 'goods',
		},
		show: {
			type: Boolean,
			default: false,
		},
	});

	watch(() => props.mode,() => {
			state.pagination.data = [];
			if (props.mode) {
				getList(state.pagination.page);
			}
		},
	);

	const state = reactive({
		loadStatus: '',
		pagination: {
			data: [],
			current_page: 1,
			total: 1,
			last_page: 1,
		},
	});

	async function getList(page, list_rows = 5) {
		state.loadStatus = 'loading';
		const res =
			props.mode == 'goods' ?
			await SpuHistoryApi.getBrowseHistoryPage({
				page,
				list_rows,
			}) :
			await OrderApi.getOrderPage({
				page,
				list_rows,
			});
		let orderList = _.concat(state.pagination.data, res.data.data);
		state.pagination = {
			...res.data,
			data: orderList,
		};
		if (state.pagination.current_page < state.pagination.last_page) {
			state.loadStatus = 'more';
		} else {
			state.loadStatus = 'noMore';
		}
	}

	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			getList(state.pagination.current_page + 1);
		}
	}
</script>

<style lang="scss" scoped>
	.select-popup {
		max-height: 600rpx;

		.title {
			height: 100rpx;
			line-height: 100rpx;
			padding: 0 26rpx;
			background: #fff;
			border-radius: 20rpx 20rpx 0 0;

			span {
				font-size: 32rpx;
				position: relative;

				&::after {
					content: '';
					display: block;
					width: 100%;
					height: 2px;
					z-index: 1;
					position: absolute;
					left: 0;
					bottom: -15px;
					background: var(--ui-BG-Main);
					pointer-events: none;
				}
			}
		}

		.scroll-box {
			height: 500rpx;
		}

		.item {
			background: #fff;
			margin: 26rpx 26rpx 0;
			border-radius: 20rpx;

			:deep() {
				.image {
					width: 140rpx;
					height: 140rpx;
				}
			}
		}
	}
</style>