|
|
@@ -27,11 +27,25 @@
|
|
|
@change="changeIndex"
|
|
|
inactiveColor="#666666"
|
|
|
>
|
|
|
- <block class="h-full" v-for="(item, idnex) in tabList" :key="'tabs' + item.id">
|
|
|
+ <block class="h-full" v-for="(item, index) in tabList" :key="'tabs' + item.id">
|
|
|
<wd-tab :title="item.title">
|
|
|
- <template v-if="tabIndex === 0">
|
|
|
- <REcharts :unit="unit" />
|
|
|
- </template>
|
|
|
+ <REcharts :id="echartsItem.id + index" :seriesData="echartsItem?.seriesData" :unit="unit">
|
|
|
+ <template #default>
|
|
|
+ <view class="absolute right-4 top-7 z-[10] text-xs text-[#333]">
|
|
|
+ <template v-if="handleColumns(echartsItem?.columns)">
|
|
|
+ <SwitchBtn
|
|
|
+ v-model:show="show"
|
|
|
+ :columns="echartsItem?.columns"
|
|
|
+ :seriesData="echartsItem?.seriesData"
|
|
|
+ @handleList="handleList"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ {{ echartsItem?.columns }}
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </REcharts>
|
|
|
</wd-tab>
|
|
|
</block>
|
|
|
</wd-tabs>
|
|
|
@@ -40,41 +54,33 @@
|
|
|
<view
|
|
|
class="mx-4 px-3 py-1 mb-3 rounded-full flex items-center text-sm bg-[#F88842]/[0.2] text-[#F88842]"
|
|
|
>
|
|
|
- 过去 7 天平均每天喂奶 450ml
|
|
|
+ 过去 7 天平均每天{{ informText }}
|
|
|
</view>
|
|
|
|
|
|
<!-- 数据统计区域 -->
|
|
|
- <div class="grid grid-cols-3 gap-4 mx-4 mb-3">
|
|
|
- <!-- 喂奶时长 -->
|
|
|
- <div class="bg-white rounded-lg p-4 flex flex-col items-center justify-center shadow-sm">
|
|
|
- <span class="text-2xl font-medium text-gray-900">45min</span>
|
|
|
- <span class="text-sm text-gray-500 mt-1">母乳时长</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 母乳喂养量 -->
|
|
|
- <div class="bg-white rounded-lg p-4 flex flex-col items-center justify-center shadow-sm">
|
|
|
- <span class="text-2xl font-medium text-gray-900">450ml</span>
|
|
|
- <span class="text-sm text-gray-500 mt-1">母乳喂养</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 配方奶喂养量 -->
|
|
|
- <div class="bg-white rounded-lg p-4 flex flex-col items-center justify-center shadow-sm">
|
|
|
- <span class="text-2xl font-medium text-gray-900">450ml</span>
|
|
|
- <span class="text-sm text-gray-500 mt-1">配方奶</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- <view v-else class="h-full flex items-center justify-center">
|
|
|
- <Empty />
|
|
|
- </view> -->
|
|
|
- <!-- <wd-loadmore v-if="tabIndex == 0" :state="state" @reload="loadmore" /> -->
|
|
|
+ <view v-if="bannerList.length" class="flex justify-between items-center mx-4 mb-3">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in bannerList"
|
|
|
+ :key="'bannerList' + item.value"
|
|
|
+ class="bg-white px-4 flex flex-1 flex-col items-center justify-center shadow-sm"
|
|
|
+ >
|
|
|
+ <text class="text-base text-[#333]">{{ item.count }}</text>
|
|
|
+ <text class="text-xs text-[#666] mt-1">{{ item.label }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<wd-gap bg-color="#F2F2F2"></wd-gap>
|
|
|
<view class="p-4 flex justify-between items-center">
|
|
|
<text class="text-base">2020年12月15日</text>
|
|
|
<text class="text-xs text-[#666]">2岁4个月4天</text>
|
|
|
</view>
|
|
|
|
|
|
- <RecordList :dataList="records" />
|
|
|
+ <RecordList v-if="records.length" :dataList="records" />
|
|
|
+ <view v-else class="h-full flex items-center justify-center">
|
|
|
+ <Empty />
|
|
|
+ </view>
|
|
|
+ <!-- <wd-loadmore v-if="tabIndex == 0" :state="state" @reload="loadmore" /> -->
|
|
|
+
|
|
|
<!-- 悬浮添加按钮 -->
|
|
|
<view
|
|
|
@click="goToPage('')"
|
|
|
@@ -86,25 +92,33 @@
|
|
|
</view>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
- import HeightItem from '@/components/height/height-item.vue'
|
|
|
+ import { ref } from 'vue'
|
|
|
+ import { feedMethodList, cacationList } from '@/pages/record/data.js'
|
|
|
+ import { onLoad, onReachBottom } from '@dcloudio/uni-app'
|
|
|
+ import SwitchBtn from '@/components/switch-btn/switch-btn.vue'
|
|
|
import REcharts from '@/components/height/r-echarts.vue'
|
|
|
import data from '@/components/feed-wd-popup/data.json'
|
|
|
import Empty from '@/components/empty/empty.vue'
|
|
|
- import { ref } from 'vue'
|
|
|
- import { onLoad, onReachBottom } from '@dcloudio/uni-app'
|
|
|
import RecordList from '@/components/record-list/record-list.vue'
|
|
|
- const hList = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
|
|
|
- const wList = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50]
|
|
|
- const tList = [0, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52]
|
|
|
|
|
|
- const tabList = ref(data)
|
|
|
+ const ML = '(ml)'
|
|
|
+ const CI = '(次)'
|
|
|
+ const HOUR = '(小时)'
|
|
|
+ const MINUTE = '(分钟)'
|
|
|
+
|
|
|
+ const hList = [0, 1, 2, 3, 4, 5, 6]
|
|
|
|
|
|
+ const tabList = ref(data)
|
|
|
+ const bannerList = ref([])
|
|
|
+ const informText = ref('')
|
|
|
const tabIndex = ref(0)
|
|
|
|
|
|
- const xAxisData = ref(['1岁', '14个月', '16个月', '1岁半', '20个月', '2岁'])
|
|
|
+ // 图表上面的 按钮切换是否显示
|
|
|
+ const show = ref(false)
|
|
|
+
|
|
|
const yAxisData = ref([])
|
|
|
- // const seriesData = ref(['1岁', '14个月', '16个月', '1岁半', '20个月', '2岁'])
|
|
|
const unit = ref('(cm)')
|
|
|
+ // 列表数据
|
|
|
const records = ref([
|
|
|
{
|
|
|
id: '0',
|
|
|
@@ -112,9 +126,10 @@
|
|
|
time: '13:00',
|
|
|
title: '喂奶 200ml',
|
|
|
desc: '宝宝今天胃口很好',
|
|
|
-
|
|
|
+ imageCount: 0,
|
|
|
recorder: '妈妈 王小美',
|
|
|
// image: 'https://ai-public.mastergo.com/ai/img_res/3a46635d73b74316cd39813502beb964.jpg',
|
|
|
+ image: 'https://ai-public.mastergo.com/ai/img_res/3d04b8dc21d0fe5f0f639f125fbd5c53.jpg',
|
|
|
},
|
|
|
{
|
|
|
id: '1',
|
|
|
@@ -123,6 +138,7 @@
|
|
|
title: '母乳喂养',
|
|
|
desc: '持续了30分钟',
|
|
|
recorder: '妈妈 王小美',
|
|
|
+ imageCount: 2,
|
|
|
image: 'https://ai-public.mastergo.com/ai/img_res/3d04b8dc21d0fe5f0f639f125fbd5c53.jpg',
|
|
|
},
|
|
|
{
|
|
|
@@ -132,13 +148,19 @@
|
|
|
title: '辅食 50ml',
|
|
|
desc: '今天尝试了新的米糊，宝宝很喜欢',
|
|
|
recorder: '妈妈 王小美',
|
|
|
+ imageCount: 0,
|
|
|
image: '',
|
|
|
},
|
|
|
])
|
|
|
- // const parmas = ref({
|
|
|
- // pageSize: 10,
|
|
|
- // pageNum: 1,
|
|
|
- // })
|
|
|
+
|
|
|
+ // 图表数组
|
|
|
+ const echartsItem = ref({
|
|
|
+ id: 'echarts',
|
|
|
+ columns: ['喂奶次数', '喂奶量'],
|
|
|
+ seriesData: [120, 200, 150, 80, 70, 110, 130],
|
|
|
+ yAxisData: [],
|
|
|
+ // unit
|
|
|
+ })
|
|
|
|
|
|
const state = ref('')
|
|
|
const num = ref(0)
|
|
|
@@ -154,6 +176,15 @@
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ // 是显示切换的按钮
|
|
|
+ function handleColumns(params) {
|
|
|
+ if (Array.isArray(params)) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
const growthRecordList = ref([])
|
|
|
// 获取生长记录
|
|
|
async function getGrowthRecordList() {
|
|
|
@@ -332,6 +363,7 @@
|
|
|
// http.post('/')
|
|
|
}
|
|
|
|
|
|
+ // 懒加载
|
|
|
function loadmore() {
|
|
|
let data = [
|
|
|
{
|
|
|
@@ -366,6 +398,7 @@
|
|
|
}, 200)
|
|
|
}
|
|
|
|
|
|
+ // 触底加载
|
|
|
onReachBottom(() => {
|
|
|
if (num.value > 45) {
|
|
|
state.value = 'finished'
|
|
|
@@ -375,27 +408,152 @@
|
|
|
state.value = 'finished'
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
+ //
|
|
|
+ function handleSwitch(index) {
|
|
|
+ let data = []
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ yAxisData.value = hList
|
|
|
+ informText.value = show.value ? '喂奶400ml' : '喂奶7次'
|
|
|
+ unit.value = show.value ? ML : CI
|
|
|
+
|
|
|
+ echartsItem.value = {}
|
|
|
+
|
|
|
+ if (show.value) {
|
|
|
+ data = ['40min', '4000ml', '400ml']
|
|
|
+ bannerList.value = feedMethodList.map((item, index) => ({
|
|
|
+ ...item,
|
|
|
+ count: data[index],
|
|
|
+ }))
|
|
|
+ } else {
|
|
|
+ data = ['1次', '4次', '2次']
|
|
|
+ bannerList.value = feedMethodList.map((item, index) => ({
|
|
|
+ ...item,
|
|
|
+ count: data[index],
|
|
|
+ }))
|
|
|
+ }
|
|
|
+
|
|
|
+ echartsItem.value = {
|
|
|
+ id: 'echarts',
|
|
|
+ columns: ['喂奶次数', '喂奶量'],
|
|
|
+ seriesData: [120, 200, 150, 80, 70, 110, 130],
|
|
|
+ yAxisData: [],
|
|
|
+ // unit
|
|
|
+ }
|
|
|
+
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ yAxisData.value = hList
|
|
|
+ informText.value = show.value ? '睡眠20小时' : '睡眠5次'
|
|
|
+ unit.value = CI
|
|
|
+ unit.value = HOUR
|
|
|
+ echartsItem.value = {
|
|
|
+ id: 'echarts',
|
|
|
+ columns: ['睡眠次数', '睡眠时长'],
|
|
|
+ seriesData: [120, 200, 150, 80, 70, 110, 130],
|
|
|
+ yAxisData: [],
|
|
|
+ // unit
|
|
|
+ }
|
|
|
+ bannerList.value = []
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ yAxisData.value = hList
|
|
|
+ unit.value = CI
|
|
|
+ informText.value = '换尿布3次'
|
|
|
+ data = ['1次', '2次']
|
|
|
+ bannerList.value = cacationList.map((item, index) => ({
|
|
|
+ ...item,
|
|
|
+ count: data[index],
|
|
|
+ }))
|
|
|
+
|
|
|
+ echartsItem.value = {
|
|
|
+ id: 'echarts',
|
|
|
+ columns: '换尿布次数',
|
|
|
+ seriesData: [120, 200, 150, 80, 70, 110, 130],
|
|
|
+ yAxisData: [],
|
|
|
+ // unit
|
|
|
+ }
|
|
|
+
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ yAxisData.value = hList
|
|
|
+ unit.value = CI
|
|
|
+ informText.value = '辅食1次'
|
|
|
+ bannerList.value = []
|
|
|
+ echartsItem.value = {
|
|
|
+ id: 'echarts',
|
|
|
+ columns: '辅食次数',
|
|
|
+ seriesData: [120, 200, 150, 80, 70, 110, 130],
|
|
|
+ yAxisData: [],
|
|
|
+ // unit
|
|
|
+ }
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ yAxisData.value = hList
|
|
|
+ unit.value = CI
|
|
|
+ unit.value = ML
|
|
|
+
|
|
|
+ informText.value = show.value ? '吸奶300ml' : '吸奶5次'
|
|
|
+ bannerList.value = []
|
|
|
+
|
|
|
+ echartsItem.value = {
|
|
|
+ id: 'echarts',
|
|
|
+ columns: ['吸奶次数', '吸奶量'],
|
|
|
+ seriesData: [120, 200, 150, 80, 70, 110, 130],
|
|
|
+ yAxisData: [],
|
|
|
+ // unit
|
|
|
+ }
|
|
|
+
|
|
|
+ break
|
|
|
+ case 5:
|
|
|
+ yAxisData.value = hList
|
|
|
+ unit.value = MINUTE
|
|
|
+ informText.value = '洗澡10分钟'
|
|
|
+ bannerList.value = []
|
|
|
+ echartsItem.value = {
|
|
|
+ id: 'echarts',
|
|
|
+ columns: '洗澡时间',
|
|
|
+ seriesData: [120, 200, 150, 80, 70, 110, 130],
|
|
|
+ yAxisData: [],
|
|
|
+ // unit
|
|
|
+ }
|
|
|
+
|
|
|
+ break
|
|
|
+ case 6:
|
|
|
+ yAxisData.value = hList
|
|
|
+ unit.value = MINUTE
|
|
|
+ informText.value = '游泳10分钟'
|
|
|
+ bannerList.value = []
|
|
|
+
|
|
|
+ echartsItem.value = {
|
|
|
+ id: 'echarts',
|
|
|
+ columns: '游泳时间',
|
|
|
+ seriesData: [120, 200, 150, 80, 70, 110, 130],
|
|
|
+ yAxisData: [],
|
|
|
+ // unit
|
|
|
+ }
|
|
|
+ break
|
|
|
+
|
|
|
+ default:
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // tabs 切换
|
|
|
function changeIndex({ index, name }) {
|
|
|
- console.log('index: ', index)
|
|
|
+ handleSwitch(index)
|
|
|
tabIndex.value = index
|
|
|
- nextTick(() => {
|
|
|
- if (index == 1) {
|
|
|
- yAxisData.value = hList
|
|
|
- unit.value = '(cm)'
|
|
|
- }
|
|
|
- if (index == 2) {
|
|
|
- yAxisData.value = wList
|
|
|
- unit.value = '(kg)'
|
|
|
- }
|
|
|
- if (index == 3) {
|
|
|
- yAxisData.value = tList
|
|
|
- unit.value = '(cm)'
|
|
|
- }
|
|
|
- })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 图表的切换
|
|
|
+ function handleList() {
|
|
|
+ handleSwitch(tabIndex.value)
|
|
|
}
|
|
|
|
|
|
onLoad(() => {
|
|
|
getGrowthRecordList()
|
|
|
+ handleList()
|
|
|
})
|
|
|
|
|
|
const { safeAreaInsets } = uni.getSystemInfoSync()
|
