adultDeviceApp/pageTwo/me/history.vue

<template>
	<view class="common">
		<!-- <view class="history" v-if="ranklist.length">
      <delectList :list="ranklist" :type="user.type" :border="false" @changeDelete="changeDelete"></delectList>
      <view class="endtext" v-if="!lastPage || page >= lastPage">—— 到底了，看看别的吧 ——</view>
    </view> -->
		<view class="history">
			<view class="list" v-for="(item, index) in ranklist" :key="index" @click="clickItemMethod(item)">
				<uni-swipe-action>
					<uni-swipe-action-item :right-options="item.options" @click="swipeClick($event, index)">
						<view class="item">
							<view class="time">
								<icon class="t-icon t-icon-shijian-mianxing-0"></icon>
								<text>{{item.createtime}}</text>
							</view>
							<view>{{item.weight}}<text>体重</text></view>
							<view>{{item.bmi}}<text>BMI</text></view>
							<view>{{item.fat_r}}<text>脂肪率</text></view>
							<image src="../../static/arrow-right.png" class="iconfont"></image>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<view class="endtext" v-if="!lastPage || page >= lastPage">—— 到底了，看看别的吧 ——</view>
		</view>
		<view class="nolist" v-if="!lastPage">
			<image src="../../static/zanwu.png" class="iconfont"></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	import delectList from "@/components/mark-slide-list/mark-slide-list.vue"
	import {
		mapState
	} from "vuex";
	export default {
		components: {
			delectList
		},
		computed: {
			...mapState(['user', "appTheme"]),
		},
		data() {
			return {
				buttonList: [{
					title: '删除',
					background: '#ff3b32'
				}],
				list: [
					"测量时间",
					"体重",
					"BMI",
					"操作",
				],
				ranklist: [],
				page: 1,
				lastPage: 1,
				type: null,
				id: null,
				startX: 0,
				endX: 0
			}
		},
		onLoad() {
			let that = this
			// 导航栏颜色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: that.appTheme,
			})
			that.getList(1)
		},
		onReachBottom() {
			let that = this
			console.log("onReachBottom", this.lastPage)
			if (!this.lastPage || this.page >= this.lastPage) {
				uni.showToast({
					title: '没有更多数据！',
					icon: 'none'
				})
				return
			}
			this.page++
			this.getList(this.page)
		},
		methods: {
			swipeClick(e, index) {
				let that = this
				let id = that.ranklist[index].id
				uni.showModal({
					title: '友情提示',
					content: '是否删除当前测量记录？',
					success: function(res) {
						if (res.confirm) {
							that.$model.gethistorydelete({
								id: id,
							}).then((res) => {
								if (res.code != 0) {
									that.$tools.msg(res.message)
									return
								}
								that.ranklist.splice(index, 1)
								that.$store.dispatch("getUserInfo", {
									familyid: that.user.familyid,
								})
								that.$store.dispatch("getResult", {
									birthday: that.user.birthday,
									familyid: that.user.familyid,
									height: that.user.height,
									sex: that.user.sex,
								})

								that.$tools.msg("删除成功")
							})
						} else if (res.cancel) {
							that.$tools.msg("您已取消操作！");
						}
					},
				})
			},
			clickItemMethod(item) {
				uni.navigateTo({
					url: "/pageTwo/me/info?index=" + JSON.stringify(item)
				})
			},
			getList(page) {
				let that = this
				that.$model.getHistoryList({
					familyId: that.user.familyid,
					pageNo: page,
					pageSize: 10
				}).then((res) => {
					console.log("历史记录", res)
					if (res.code != 0) return
					res.data.rows.forEach(item => {
						item.slide_x = 0
					})
					this.ranklist = this.ranklist.concat(res.data.rows)
					this.lastPage = res.data.totalpage
				})
			},
		}
	}
</script>
<style scoped="scoped" lang="scss">
	.common {
		width: 100%;
		min-height: 100.5vh; // 重点
		overflow-y: scroll;
	}

	.history {
		padding-bottom: 40px;
		margin-bottom: 0;
		overflow: auto;

		.list {
			margin-bottom: 15px;

			.item {
				margin-bottom: 0;

				image {
					width: 16px;
					height: 16px;
				}
			}
		}
	}
</style>