mudi-app/pages/user/history/history.vue

<template>
	<view>
		<u-navbar title="浏览历史" :title-bold="true"></u-navbar>
		<view class="list">
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="index"
				@click="del(index)" @open="open" :options="options" btn-width="250">
				<view class="cart" @top.stop="toInfo(item)">
					<image style="width: 240rpx; height: 180rpx;" class="u-m-l-16" mode="scaleToFill"
						:src="item.pagodaMainImg"></image>
					<view class="center">
						<view class="name">
							{{item.pagodaName}}
						</view>
						<view class="positon">
							{{item.graveNum}}墓穴 | {{item.floor}}层
						</view>
						<view class="location">
							<view class="icon">

							</view>
							<view class="locationText">
								{{item.address}}
							</view>
						</view>
					</view>
				</view>

			</u-swipe-action>
			<view class="loading" style="height: 40px; color: #C0C0C0;" v-if="isTotle">
				我们是有底线的
			</view>
			<view class="loading" v-if="isLoading">
				<u-loading mode="flower"></u-loading>
			</view>
		</view>
		<u-modal v-model="show" confirm-color="#F44D4D" @cancel="show =false" @confirm="confirmDel"
			:show-cancel-button="true" :show-title="false">
			<view class="text">
				确定删除此条浏览记录？
			</view>
		</u-modal>
	</view>
</template>

<script>
	import ListItem from '../../../components/listItem'
	export default {
		data() {
			return {
				list: [],
				options: [{
					text: '删除记录',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				index: 8,
				show: false,
				queryData: {
					pageNum: 0,
					pageSize: 10,
					browseType: 'browse', // 浏览历史固定参数
				},
				isLoading: false,
				total: 0,
				delId: '',
				isTotle: false,
			}
		},
		methods: {
			toInfo(info) {
				uni.navigateTo({
					url: '../../mian/cemeteryInfo/cemeteryInfo?id=' + info.pagodaId
				})
			},
			shouItem() {
				this.list.forEach(item => item.show = !item.show)
			},
			getHistoryList() {
				if (this.isTotle) {
					return
				}
				this.isLoading = true
				this.queryData.pageNum = this.queryData.pageNum + 1
				this.$u.api.pagoda.getCollectionService(this.queryData).then(res => {
					this.total = res.data.total
					let data = res.data.rows
					data.forEach(item => item.show = false)
					this.list.push(...data)
					setTimeout(() => {
						this.isLoading = false
						if (this.list.length === this.total) {
							this.isTotle = true
						}
					}, 300)
				})

			},
			del(index) {
				this.delId = index
				this.show = true
				this.list[index].show = true
			},
			async confirmDel() {
				let res = await this.$u.api.pagoda.delBrowseService({
					browseId: this.list[this.delId].browseId,
				})
				this.list.splice(this.delId, 1)
				this.list[this.delId].show = false
				console.log(res, 99990)
			},
			open() {},
			getList() {

			}
		},
		components: {
			ListItem,
		},
		// 监听触底
		onReachBottom() {
			this.getHistoryList()
		},
		onLoad() {
			this.getHistoryList()
		}

	}
</script>

<style lang="scss" scoped>
	.list {
		margin-top: 24rpx;
		padding-left: 26rpx;

		.item {
			height: 228rpx;
			border-bottom: 1px solid #F7F9FC;
			display: flex;
			align-items: center;
			padding-left: 36rpx;
		}
	}

	.text {
		height: 188rpx;
		line-height: 188rpx;
		border-radius: 24rpx;
		text-align: center;
	}

	.cart {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #F7F9FC;

		/deep/ div {
			border-radius: 12rpx;
		}

		.center {
			margin-left: 24rpx;
			flex: 1;
			height: 180rpx;
		}

		.name {
			margin-top: 20rpx;
			color: #303133;
			font-size: 28rpx;
			line-height: 32rpx;
		}

		.positon {
			color: #909399;
			font-size: 24rpx;
			margin-top: 5rpx;
		}

		.link {
			margin-top: 12rpx;
			// width: 114rpx;
			height: 44rpx;
			background-color: #edf5ff;
			color: #509EFA;
			font-size: 20rpx;
			text-align: center;
			line-height: 44rpx;
			border-radius: 8rpx;
		}

		.location {
			margin-top: 38rpx;
			color: #909399;
			display: flex;

			.icon {
				width: 24rpx;
				height: 24rpx;
				background-image: url(../../../static/pos.png);
				background-size: 100% 100%;
				transform: translateY(8rpx);
				margin-right: 10rpx;
			}

			.locationText {
				line-height: 40rpx;
				overflow: hidden;
				/*文本超出隐藏*/
				text-overflow: ellipsis;
				/*文本超出显示省略号*/
				white-space: nowrap;
				/*超出的空白区域不换行*/
				width: 90%;
			}
		}
	}
</style>