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="nolist" v-if="!lastPage">
            <icon class="iconfont icon-zanwu"></icon>
        </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']),
        },
        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
            that.getList(1)
        },
        onReachBottom() {
            let that = this
            console.log("this.lastPage", this.lastPage)
            if (!this.lastPage || this.page >= this.lastPage) {
                uni.showToast({
                    title: '没有更多数据！',
                    icon: 'none'
                })
                return
            }
            this.page++
            this.getList(this.page)
        },
        methods: {
            changeDelete(item) {
                let that = this
                uni.showModal({
                    title: '友情提示',
                    content: '是否删除当前测量记录？',
                    success: function(res) {
                        if (res.confirm) {
                            that.$model.gethistorydelete({
                                id: item.id,
                            }).then((res) => {
                                if (res.code != 0) {
                                    that.$tools.msg(res.message)
                                    return
                                }
                                that.ranklist.splice(that.ranklist.findIndex(ite => ite.id === item
                                    .id), 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("您已取消操作！");
                        }
                    },
                })
            },
            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
                })
            },
            // 滑动开始
            touchStart(e) {
                // 记录初始位置
                this.startX = e.touches[0].clientX
            },
            // 滑动结束
            touchEnd(e) {
                console.log("2", e)
                // 当前滑动的父级元素
                let parentElement = e.currentTarget
                // 记录结束位置
                this.endX = e.changedTouches[0].clientX
                // 左滑
                if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
                    this.restSlide()
                    parentElement.dataset.type = 1
                }
                // 右滑
                if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
                    this.restSlide()
                    parentElement.dataset.type = 0
                }
                this.startX = 0
                this.endX = 0
            },
            // 判断当前是否有滑块处于滑动状态
            checkSlide() {
                let listItems = document.querySelectorAll('.list')
                for (let i = 0; i < listItems.length; i++) {
                    if (listItems[i].dataset.type == 1) {
                        return true
                    }
                }
                return false
            },
            // 复位滑动状态
            restSlide() {
                let listItems = document.querySelectorAll('list')
                // 复位
                for (let i = 0; i < listItems.length; i++) {
                    listItems[i].dataset.type = 0
                }
            },
        }
    }
</script>
<style scoped="scoped" lang="scss">
    .common {
        min-height: calc(100vh - 40px);
        padding-bottom: 15px
    }
</style>