240 lines
7.1 KiB
Vue
240 lines
7.1 KiB
Vue
<template>
|
|
<div ref="scrollDistance" class="ui-appMeasurementRecord" @scroll="handleScroll">
|
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
|
<van-list v-model:loading="loading" :finished="finished" @load="getList">
|
|
<div v-if="!refreshing && list.length == 0">
|
|
<div v-if="loadingState" class="text-center">
|
|
<img class="ui-no-data-icon" src="https://image.fulllinkai.com/202212/01/f06371b76ab686752486c8b99fa7669a.png" alt="" />
|
|
<div class="color6 font_30">还没有测量数据哦~</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div v-for="(item, index) in list" :key="index" class="ui-record-list">
|
|
<div class="font_28 color6 ui-record-date">{{ item.yearMonth }}</div>
|
|
<div v-for="(itemSub, indexSub) in item.subList" :key="indexSub" style="background: #ffffff" @click="jumpPath('appMeasuringRecordDetail', itemSub)">
|
|
<div class="ui-record-item">
|
|
<div class="ui-content-box {{itemSub.isTouchMove ? 'shopCon-active' : ''}}">
|
|
<div class="f-fbc ui-content">
|
|
<div>
|
|
<div class="color3 font_30">{{ itemSub.score }}{{ itemSub.unit }}</div>
|
|
<div class="color6 font_24 ui-pt-6">体脂秤类型：{{ itemSub.type == 1 ? '新版秤' : '旧版秤' }}</div>
|
|
</div>
|
|
<div class="f-fcr">
|
|
<div class="font_30 color9">{{ itemSub.dayHour }}</div>
|
|
<img class="ui-record-item-icon" src="https://image.fulllinkai.com/202211/22/8cf3979193db3796fe4ca3b3b9be00f7.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="indexSub + 1 != item.subList.length" class="ui-record-item-line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</van-list>
|
|
</van-pull-refresh>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { onActivated, onMounted, ref } from 'vue';
|
|
import weChat from '@/utils/weChat';
|
|
import router from '@/router';
|
|
import { useUserStore } from '@/store/modules/user';
|
|
|
|
defineOptions({ name: 'AppMeasurementRecord' });
|
|
|
|
const userStore = useUserStore() as any;
|
|
const loadingState = ref(false);
|
|
const cacheList = ref<any[]>([]); // 数据存储
|
|
const list = ref<any[]>([]); // 数据存储
|
|
const noMore = ref(false); // 没有更多数据
|
|
const refreshing = ref(true); // 上拉刷新false表示加载完成
|
|
const finished = ref(false); // true表示数据全部加载完成
|
|
const loading = ref(false); // false表示数据加载完成
|
|
const page = ref(1); // 数据分页
|
|
|
|
const scrollValue = ref(0); // 记录页面列表的滚动距离
|
|
const scrollDistance = ref<any>(null);
|
|
|
|
// 获取备注列表
|
|
const getList = () => {
|
|
weChat({ url: `/h5/get/fat/logs?page=${page.value}&chat_id=${userStore.chatId}`, hideLoading: true, method: 'get' })
|
|
.then((res) => {
|
|
const result = res.data;
|
|
if (cacheList.value.length === 0 || page.value === 1) {
|
|
cacheList.value = result.data;
|
|
setTimeout(() => {
|
|
list.value = transition(cacheList.value);
|
|
}, 100);
|
|
} else if (cacheList.value.length >= 15) {
|
|
result.data.forEach((item) => {
|
|
cacheList.value.push(item);
|
|
});
|
|
setTimeout(() => {
|
|
list.value = transition(cacheList.value);
|
|
}, 100);
|
|
}
|
|
refreshing.value = false;
|
|
loading.value = false;
|
|
if (cacheList.value.length < 15 || result.data.length < 15) {
|
|
finished.value = true;
|
|
noMore.value = true;
|
|
}
|
|
page.value++;
|
|
setTimeout(() => {
|
|
loadingState.value = true;
|
|
}, 200);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
|
|
// 上拉初始化数据
|
|
const onRefresh = () => {
|
|
page.value = 1;
|
|
noMore.value = false;
|
|
finished.value = false;
|
|
loading.value = true;
|
|
getList();
|
|
};
|
|
|
|
// 根据不同的年月放置不同的数组
|
|
const transition = (list) => {
|
|
let Arr = [] as any;
|
|
list.forEach((e) => {
|
|
let index = -1;
|
|
let state = Arr.some((item, i) => {
|
|
if (e.yearMonth == item.yearMonth) {
|
|
index = i;
|
|
return true;
|
|
}
|
|
});
|
|
if (!state) {
|
|
Arr.push({ yearMonth: e.yearMonth, subList: [{ dayHour: e.dayHour, e_name: e.fat_name || e.e_name, id: e.id, isTouchMove: false, score: e.fat_data || e.score, created_at: e.created_at, unit: e.unit, yearMonth: e.yearMonth, type: e.type }] });
|
|
} else {
|
|
Arr[index].subList.push({ dayHour: e.dayHour, e_name: e.fat_name || e.e_name, id: e.id, isTouchMove: false, score: e.fat_data || e.score, created_at: e.created_at, unit: e.unit, yearMonth: e.yearMonth, type: e.type });
|
|
}
|
|
});
|
|
return Arr;
|
|
};
|
|
|
|
const jumpPath = (url, e) => {
|
|
router.push({
|
|
name: url,
|
|
query: { tested_at: e.created_at, type: e.type, id: e.id },
|
|
});
|
|
};
|
|
|
|
// 监听页面滚动距离
|
|
const handleScroll = (event) => {
|
|
scrollValue.value = event.target.scrollTop;
|
|
};
|
|
|
|
onActivated(() => {
|
|
scrollDistance.value.scrollTop = scrollValue.value;
|
|
});
|
|
|
|
onMounted(() => {});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.ui-appMeasurementRecord {
|
|
background: #f6f7f8;
|
|
overflow-y: auto;
|
|
height: 100vh;
|
|
}
|
|
|
|
.ui-tabBar-box {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 8;
|
|
width: 100vw;
|
|
height: px2rem(90);
|
|
background: #f8f8f8;
|
|
|
|
.ui-tabBar-list {
|
|
padding: px2rem(24) px2rem(180) px2rem(0) px2rem(180);
|
|
}
|
|
|
|
.ui-tabBar-line {
|
|
position: absolute;
|
|
bottom: px2rem(2);
|
|
width: 100%;
|
|
height: px2rem(10);
|
|
background: linear-gradient(90deg, rgba(95, 226, 175, 0.1) 0%, #41d5a9 100%);
|
|
border-radius: px2rem(5);
|
|
}
|
|
}
|
|
|
|
.ui-placeholder {
|
|
width: 100vw;
|
|
height: px2rem(70);
|
|
}
|
|
|
|
.ui-no-data-icon {
|
|
width: px2rem(500);
|
|
height: px2rem(360);
|
|
border-radius: 50%;
|
|
margin-top: 20vh;
|
|
}
|
|
|
|
.ui-record-list {
|
|
.ui-record-date {
|
|
padding: px2rem(20) px2rem(30);
|
|
}
|
|
|
|
.ui-record-item {
|
|
display: flex;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.ui-content-box {
|
|
width: 100%;
|
|
padding: px2rem(24) 0 px2rem(24) px2rem(30);
|
|
margin-right: 0;
|
|
transition: all 0.4s;
|
|
display: flex;
|
|
position: relative;
|
|
left: 0;
|
|
|
|
.ui-content {
|
|
width: 100%;
|
|
|
|
.ui-record-item-icon {
|
|
width: px2rem(16);
|
|
display: block;
|
|
margin: 0 px2rem(30);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-del {
|
|
background-color: #f1013d;
|
|
width: px2rem(180);
|
|
height: 100%;
|
|
color: #fff;
|
|
position: absolute;
|
|
z-index: 222;
|
|
right: px2rem(-180);
|
|
top: 0;
|
|
transition: all 0.4s;
|
|
}
|
|
}
|
|
|
|
.shopCon-active {
|
|
left: px2rem(-180);
|
|
}
|
|
|
|
.shopDel-active {
|
|
right: 0 !important;
|
|
}
|
|
|
|
.ui-record-item-line {
|
|
width: 100%;
|
|
height: px2rem(2);
|
|
background: #f7f7f7;
|
|
margin-left: px2rem(30);
|
|
}
|
|
}
|
|
</style>
|