update

src/components/input/Slider.scss

@@ -1,8 +1,8 @@
 .slider-container {
     position: relative;
-    width: 600px;
+    width: 578px;
     height: 120px;
-    background-color: #7E7E7E;
+    background-color: #787878;
     border-radius: 60px;
     overflow: hidden;
     touch-action: none;
@@ -20,10 +20,6 @@
     overflow: hidden;
 }
 
-.slider-item-bg::after{
-    background-color: red;
-}
-
 .slider-item {
     position: absolute;
     left: 0;
@@ -74,4 +70,53 @@
     color: #000;
     font-size: 48px;
     font-weight: bold;
+}
+
+.tooltip_bg {
+    width: 578px;
+    height: 200px;
+    pointer-events: none;
+    z-index: 1;
+    position: absolute;
+    left: 0;
+    top: -210px;
+    display: flex;
+    flex-direction: column;
+}
+
+.tooltip_content{
+    width: 578px;
+    padding-left: 40px;
+    padding-right: 40px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    box-sizing: border-box;
+    border-radius: 16px;
+    background-color: #787878;
+    display: flex;
+    flex-direction: column;
+}
+
+.tooltip_title{
+    font-size: 28px;
+    line-height: 40px;
+    color: #fff;
+    font-weight: bold;
+}
+
+.tooltip_desc{
+    font-size: 24px;
+    line-height: 40px;
+    color: #fff;
+    opacity: 0.6;
+}
+
+.tooltip_arrow {
+    width: 0;
+    height: 0;
+    margin-top: -2px;
+    border-left: 25px solid transparent;
+    border-right: 25px solid transparent;
+    border-top: 20px solid #787878;
+
 }

src/components/input/Slider.tsx

@@ -1,16 +1,25 @@
 import { View, Text } from '@tarojs/components'
 import './Slider.scss'
 import { ColorType } from '@/context/themes/color'
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { rpxToPx } from '@/utils/tools';
+import Taro from '@tarojs/taro';
+import { useSelector } from 'react-redux';
 
 var currentValue = 0;
 export default function (props: { onChanged?: Function, value?: number, edit?: boolean }) {
-
-    const [brightness, setBrightness] = useState(0);
+    const sliderWidth = 578;
+    const [brightness, setBrightness] = useState(props.value ? props.value*10 : 0);
     const [isSliding, setIsSliding] = useState(false);
     const [value, setValue] = useState(props.value ? props.value : 0)
     const [startX, setStartX] = useState(0);
+    const common = useSelector((state: any) => state.common);
+
+    useEffect(() => {
+        // if (props.value) {
+        //     setBrightness(props.value * 10)
+        // }
+    }, [props.value])
 
     const handleTouchStart = (event) => {
         setIsSliding(true);
@@ -19,13 +28,12 @@ export default function (props: { onChanged?: Function, value?: number, edit?: b
 
     const handleTouchMove = (event) => {
         if (isSliding) {
-
             const { touches } = event;
             const touchX = touches[0].clientX;
             const deltaX = touchX - startX;
             // console.log(deltaY,startY,touchY)
             // const containerHeight = rpxToPx(182); // 容器高度，根据实际情况调整
-            let brightnessValue = brightness + deltaX / rpxToPx(600 - 120) * 100;// / containerHeight * 100;
+            let brightnessValue = brightness + deltaX / rpxToPx(sliderWidth - 120) * 100;// / containerHeight * 100;
 
             // 边界限制
             brightnessValue = Math.max(0, Math.min(brightnessValue, 100));
@@ -44,9 +52,15 @@ export default function (props: { onChanged?: Function, value?: number, edit?: b
             props.onChanged(value);
         }
         if (props.edit) {
-            console.log('mind')
-            if (startX != 0) {
+            if (startX != 0 && value != 0) {
                 // 松手后，滑块动画移动到最左边
+                Taro.vibrateShort({
+                    type: 'heavy'
+                })
+                Taro.showToast({
+                    icon: 'none',
+                    title: '请先上传！'
+                })
                 const animationId = requestAnimationFrame(moveToStart);
                 return () => cancelAnimationFrame(animationId);
             }
@@ -54,11 +68,11 @@ export default function (props: { onChanged?: Function, value?: number, edit?: b
     };
 
     const moveToStart = () => {
-        const newPosition = Math.max(currentValue - 3, 0);
+        const newPosition = Math.max(currentValue - 8, 0);
         currentValue = newPosition
         setBrightness(newPosition)
+        setValue(calculateNumber(newPosition))
         if (newPosition > 0) {
-            console.log(newPosition)
             requestAnimationFrame(moveToStart);
         } else {
             setStartX(0);
@@ -100,19 +114,33 @@ export default function (props: { onChanged?: Function, value?: number, edit?: b
         }
     }
 
+    function getTitle() {
+        var obj = common.food_scales.filter((item: any) => {
+            return item.point == value
+        })
+        return obj[0].name
+    }
 
-    return <View style={{ display: 'flex', flexDirection: 'column' }}>
+    function getDesc() {
+        var obj = common.food_scales.filter((item: any) => {
+            return item.point == value
+        })
+        return obj[0].description ?? '暂无描述'
+    }
+
+
+    return <View style={{ display: 'flex', flexDirection: 'column', position: 'relative', width: rpxToPx(578) }}>
         <View className='slider-container'
             catchMove
             onTouchStart={handleTouchStart}
             onTouchMove={handleTouchMove}
             onTouchEnd={handleTouchEnd}>
-            <View className='slider-item-bg' style={{ width: brightness * 0.01 * rpxToPx(600 - 120) + rpxToPx(120) }}>
+            <View className='slider-item-bg' style={{ width: brightness * 0.01 * rpxToPx(sliderWidth - 120) + rpxToPx(120) }}>
 
 
             </View>
             <View className='slider-item' style={{
-                width: brightness * 0.01 * rpxToPx(600 - 120) + rpxToPx(120),
+                width: brightness * 0.01 * rpxToPx(sliderWidth - 120) + rpxToPx(120),
                 backgroundColor: brightness <= 50 ? ColorType.fast : ColorType.food,
                 opacity: calculateOpacity(brightness),
             }}>
@@ -123,12 +151,15 @@ export default function (props: { onChanged?: Function, value?: number, edit?: b
             </View>
 
         </View>
-        {/* <View style={{ display: 'flex', flexDirection: 'row' }}>
-            {
-                colors.map(item => {
-                    return <View style={{ width: 15, height: 40, backgroundColor: item }} />
-                })
-            }
-        </View> */}
+        {
+            isSliding && <View className='tooltip_bg'>
+                <View style={{ flex: 1 }} />
+                <View className='tooltip_content'>
+                    <Text className='tooltip_title'>{getTitle()}</Text>
+                    <Text className='tooltip_desc'>{getDesc()}</Text>
+                </View>
+                <View className='tooltip_arrow' style={{ marginLeft: brightness * 0.01 * rpxToPx(sliderWidth - 120) + rpxToPx((120 - 50) / 2) }} />
+            </View>
+        }
     </View>
 }

src/context/locales/zh.js

@@ -294,7 +294,9 @@ export default {
             share_title:'我的饮食日记',
             prompt:'提示',
             prompt_detail:'日记列表顺序发生变化，点击刷新',
-            sence_desc:'拍摄食物，记录餐前饥饿感\n记录餐后饱足感'
+            sence_desc:'拍摄食物，记录餐前饥饿感\n记录餐后饱足感',
+            sence_desc_off:'感知身体饥饱信号, 提升健康饮食直觉',
+            learn_more:'了解更多'
         },
         track_something: {
             btn_record: '记录',

src/features/food/FoodConsole.scss

@@ -1,4 +1,4 @@
-.box11{
+.box11 {
     width: 304px;
     height: 304px;
     margin-left: 40px;
@@ -6,7 +6,7 @@
     background-color: #00ffff;
 }
 
-.food_console_box{
+.food_console_box {
     background-color: #121212;
     border-radius: 36px;
     margin-left: 46px;
@@ -16,14 +16,14 @@
     margin-bottom: 24px;
 }
 
-.food_console_title{
+.food_console_title {
     color: #fff;
     font-size: 36px;
     font-weight: bold;
     margin-left: 40px;
 }
 
-.food_console_desc{
+.food_console_desc {
     margin-top: 16px;
     display: flex;
     flex-direction: row;
@@ -32,7 +32,17 @@
     line-height: 48px;
 }
 
-.food_console_desc_point{
+.food_console_desc_off {
+    margin-top: 16px;
+    display: flex;
+    flex-direction: column;
+    color: #ffffff66;
+    font-size: 28px;
+    line-height: 48px;
+    margin-left: 40px;
+}
+
+.food_console_desc_point {
     width: 12px;
     height: 12px;
     border-radius: 6px;
@@ -41,14 +51,14 @@
     margin-top: 18px;
 }
 
-.demo1{
+.demo1 {
     width: 100px;
     height: 100px;
     position: relative;
     // background-color: red;
 }
 
-.demo1::before{
+.demo1::before {
     position: absolute;
     left: 0;
     top: 0;
@@ -58,11 +68,11 @@
     z-index: 1;
 }
 
-.demo1::after{
+.demo1::after {
     background-color: #ffffff66;
 }
 
-.camera_bg{
+.camera_bg {
     width: 304px;
     height: 304px;
     border-radius: 36px;
@@ -73,7 +83,7 @@
     position: relative;
 }
 
-.album_bottom{
+.album_bottom {
     position: absolute;
     left: 0;
     right: 0;
@@ -81,13 +91,13 @@
     height: 88px;
 }
 
-.camera_icon{
+.camera_icon {
     width: 72px;
     height: 60px;
     margin-top: 76px;
 }
 
-.camera_text{
+.camera_text {
     margin-top: 18px;
     font-size: 32px;
     line-height: 32px;
@@ -96,11 +106,22 @@
     font-weight: bold;
 }
 
-.album_text{
+.album_text {
     margin-top: 60px;
     font-size: 24px;
     line-height: 26px;
     color: #fff;
     opacity: 0.2;
     font-weight: bold;
+}
+
+.center_line2{
+    position: absolute;
+    left: 374px;
+    width: 2px;
+    top: 0;
+    bottom: 0;
+    background-color: #fff;
+    opacity: 0.2;
+    z-index: -1;
 }

src/features/food/FoodConsole.tsx

@@ -21,6 +21,7 @@ export default function Component(props: { addItem: Function, firstItem: any })
     const [modeOn, setModeOn] = useState(false)
     const [firstData, setFirstData] = useState(props.firstItem)
     const [lastUnFinished, setLastUnFinished] = useState(false)
+    const common = useSelector((state: any) => state.common);
     const { t } = useTranslation()
     const [imgUrl, setImgUrl] = useState('')
     let navigation;
@@ -28,9 +29,15 @@ export default function Component(props: { addItem: Function, firstItem: any })
         navigation = useNavigation()
     }
 
+    // useEffect(() => {
+    //     setFirstData(props.firstItem)
+    // }, [props.firstItem, props.firstItem.feel.post_meal])
+
     useEffect(() => {
-        setFirstData(props.firstItem)
-    }, [props.firstItem, props.firstItem.feel.post_meal])
+        if (props.firstItem) {
+            setFirstData(props.firstItem)
+        }
+    }, [props.firstItem])
 
     useEffect(() => {
         if (firstData &&
@@ -212,21 +219,35 @@ export default function Component(props: { addItem: Function, firstItem: any })
         Taro.setStorageSync('food_switch', e.detail.value)
     }
 
+    function more() {
+        const resource = common.resources.filter((item: any) => {
+            return item.code == 'about_mindful_eating'
+        })
+
+        jumpPage('/pages/common/H5?title=' + '' + '&url=' + resource[0].url)
+    }
+
     return <View style={{ marginBottom: rpxToPx(60) }}>
         <View className='food_console_box'>
             <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                 <Text className='food_console_title'>感知模式</Text>
                 <Switch disabled={lastUnFinished} checked={modeOn} color={ColorType.food} style={{ marginRight: rpxToPx(40), opacity: lastUnFinished ? 0.4 : 1 }} onChange={modeChange} />
             </View>
-
-            <View className='food_console_desc'>
-                <View className='food_console_desc_point' style={{ backgroundColor: ColorType.food }} />
-                <Text>{t('feature.food.sence_desc')}</Text>
-            </View>
-
+            {
+                modeOn && <View className='food_console_desc'>
+                    <View className='food_console_desc_point' style={{ backgroundColor: ColorType.food }} />
+                    <Text>{t('feature.food.sence_desc')}</Text>
+                </View>
+            }
+            {
+                !modeOn && <View className='food_console_desc_off'>
+                    <Text>{t('feature.food.sence_desc_off')}</Text>
+                    <Text style={{ color: ColorType.food }} onClick={more}>{t('feature.food.learn_more')}</Text>
+                </View>
+            }
         </View>
         {
-            !lastUnFinished && <View style={{ display: 'flex', width: rpxToPx(750), alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
+            !lastUnFinished && <View style={{ display: 'flex',position:'relative', width: rpxToPx(750), alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
                 <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                     <View className='camera_bg' onClick={() => choose(false)}>
                         <Image src={require('@assets/images/camera2.png')} className='camera_icon' />
@@ -237,8 +258,9 @@ export default function Component(props: { addItem: Function, firstItem: any })
                     {
                         modeOn && <View style={{ height: rpxToPx(60) }} />
                     }
-                    {modeOn && <Slider edit={true}/>}
+                    {modeOn && <Slider edit={true} />}
                 </View>
+                <View className='center_line2' style={{bottom:-rpxToPx(60)}}/>
             </View>
         }
 

src/features/food/FoodJournal.tsx

@@ -72,7 +72,6 @@ export default function Component() {
 
     //0点刷新一下数据
     function refreshData() {
-        console.log('aaaa')
         list.map(item => {
             item.showDate = false
         })
@@ -88,7 +87,6 @@ export default function Component() {
 
         setList(list)
         setCount(count + 1)
-        debugger
     }
 
     function getConfigs() {
@@ -122,12 +120,12 @@ export default function Component() {
         }
         setIsLoading(true)
         var page = pageIndex + 1
-        setPageIndex(page)
         getList(page)
     }
 
 
     function getList(index) {
+        setPageIndex(index)
         getFoodJournals({
             page: index,
             limit: 10
@@ -190,9 +188,13 @@ export default function Component() {
         </TitleView>
     }
     function detail() {
+        var tempFirst = list.length > 0 ? list[0] : null
+        if (!user.isLogin) {
+            tempFirst = null
+        }
         return <View style={{ position: 'relative', marginTop: rpxToPx(52) }}>
             {
-                loaded && <FoodConsole addItem={addItem} firstItem={list.length > 0 ? list[0] : null} />
+                (loaded || !user.isLogin) && <FoodConsole addItem={addItem} firstItem={tempFirst} />
             }
             {
                 user.isLogin && list && <FoodTimeline array={list} refresh={() => refreshData()} forceRefresh={() => getList(1)} />
@@ -201,9 +203,9 @@ export default function Component() {
                 user.isLogin && showError && <NoData refresh={() => { getList(1) }} />
             }
             <View style={{ height: 60 }} />
-            {
+            {/* {
                 user.isLogin && <View className="center_line" style={{ height: list.length == 0 ? rpxToPx(304) : rpxToPx(364 * (list.length + 1) - 120) }} />
-            }
+            } */}
         </View>
     }
 

src/features/food/FoodTimeline.tsx

@@ -60,7 +60,8 @@ export default function Component(props: { array: any, refresh: Function, forceR
                     preview={() => preview(index)}
                     update={(data) => updateItem(index, data)}
                     forceRefresh={() => props.forceRefresh()}
-                    refresh={() => {props.refresh();console.log('oppppp');debugger}}
+                    refresh={() => {props.refresh();}}
+                    isLast={index==list.length-1}
                 />
             })
         }

src/features/food/FoodTimelineItem.scss

@@ -144,4 +144,15 @@
     top: 0;
     width: 72px;
     height: 72px;
+}
+
+.center_line3{
+    position: absolute;
+    left: 374px;
+    width: 2px;
+    top: 0;
+    bottom: 0;
+    background-color: #fff;
+    opacity: 0.2;
+    z-index: -1;
 }

src/features/food/FoodTimelineItem.tsx

@@ -18,7 +18,8 @@ import { rpxToPx } from "@/utils/tools";
 export default function Component(props: {
     data: any, index: number,
     delete: Function, preview: Function, update: Function,
-    forceRefresh: Function, refresh: Function
+    forceRefresh: Function, refresh: Function,
+    isLast?: boolean
 }) {
     const common = useSelector((state: any) => state.common);
     const [detail, setDetail] = useState(props.data)
@@ -216,9 +217,20 @@ export default function Component(props: {
 
     function updateFeel(value, isPreMeal) {
         var feel = isPreMeal ? { pre_meal: value } : { post_meal: value }
-        editFoodJournal({
+        var params = {
             feel: feel
-        }, detail.id).then(res => {
+        }
+        if (!isPreMeal) {
+            var date = new Date()
+            var year = date.getFullYear()
+            var month = date.getMonth() + 1
+            var day = date.getDate();
+            (params as any).end = {
+                date: (year + '') + (month < 10 ? '0' + month : month) + (day < 10 ? '0' + day : day),
+                timestamp: date.getTime()
+            }
+        }
+        editFoodJournal(params, detail.id).then(res => {
             if (isPreMeal) {
                 (res as any).showDate = props.data.showDate
                 setDetail(res)
@@ -370,11 +382,11 @@ export default function Component(props: {
         })
     }
 
-    return <View>
+    return <View style={{ position: 'relative' }}>
         {
             detail.mindful_mode == 'AWARE' && detail.status != 'ABANDONED' && detail.feel.pre_meal && !detail.feel.post_meal &&
             <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: rpxToPx(60), position: 'relative' }}>
-                <Slider onChanged={(value) => { updateFeel(value, false) }} />
+                <Slider onChanged={(value) => { updateFeel(value, false) }} value={detail.feel.pre_meal} />
                 <Image src={require('@assets/images/more-vertical.png')} className="food_timeline_more" onClick={more} />
             </View>
         }
@@ -467,5 +479,6 @@ export default function Component(props: {
                 />
             </Modal>
         }
+        <View className="center_line3" style={{ bottom: props.isLast ? 50 : 0 }} />
     </View>
 }