update

src/components/input/Slider.scss

@@ -1,17 +1,34 @@
 .slider-container {
     position: relative;
-    width: 138px;
-    height: 304px;
-    // background-color: transparent;
-    border-radius: 36px;
+    width: 600px;
+    height: 120px;
+    background-color: #7E7E7E;
+    border-radius: 60px;
     overflow: hidden;
     touch-action: none;
-    border: solid 4px #00ffff;
     box-sizing: border-box;
-    background: linear-gradient(to bottom,red,#00ffff);
 }
 
-.slider-top{
+.slider-item-bg {
+    position: absolute;
+    min-width: 120px;
+    height: 120px;
+    border-radius: 60px;
+    left: 0;
+    top: 0;
+    background-color: #fff;
+    overflow: hidden;
+}
+
+.slider-item {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.slider-top {
     position: absolute;
     width: 100%;
     background-color: #000;
@@ -33,4 +50,21 @@
     width: 100%;
     text-align: center;
     color: #fff;
+}
+
+.slider-text-bg {
+    display: flex;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 120px;
+    height: 120px;
+    align-items: center;
+    justify-content: center;
+}
+
+.slider-text {
+    color: #000;
+    font-size: 48px;
+    font-weight: bold;
 }

src/components/input/Slider.tsx

@@ -1,33 +1,51 @@
-import Taro from '@tarojs/taro';
-import { View, Text } from '@tarojs/components';
-import { useState } from 'react';
+import { View, Text } from '@tarojs/components'
 import './Slider.scss'
+import { ColorType } from '@/context/themes/color'
+import { useState } from 'react';
 import { rpxToPx } from '@/utils/tools';
 
-function MyComponent() {
+export default function () {
+    const colors = [
+        '#00ffff', '#1cf2ff', '#39e6ff', '#56d9ff', '#73cdff', '#90c1ff', '#adb4ff', '#caa8ff', '#e79bff', '#ffaeff', '#ffffff',
+        '#ffebe5',
+        '#ffd7cc',
+        '#ffc2b2',
+        '#ffae99',
+        '#ff9a7f',
+        '#ff8656',
+        '#ff723c',
+        '#ff5e23',
+        '#ff4909',
+        '#ff7a4e'
+    ]
+
     const [brightness, setBrightness] = useState(0);
     const [isSliding, setIsSliding] = useState(false);
-    const [startY, setStartY] = useState(0);
+    const [value, setValue] = useState(0)
+    const [startX, setStartX] = useState(0);
 
     const handleTouchStart = (event) => {
         setIsSliding(true);
-        setStartY(event.touches[0].clientY);
+        setStartX(event.touches[0].clientX);
     };
 
     const handleTouchMove = (event) => {
         if (isSliding) {
+
             const { touches } = event;
-            const touchY = touches[0].clientY;
-            const deltaY = startY - touchY;
+            const touchX = touches[0].clientX;
+            const deltaX = touchX - startX;
             // console.log(deltaY,startY,touchY)
             // const containerHeight = rpxToPx(182); // 容器高度，根据实际情况调整
-            let brightnessValue = brightness + deltaY;// / containerHeight * 100;
+            let brightnessValue = brightness + deltaX / rpxToPx(600 - 120) * 100;// / containerHeight * 100;
 
             // 边界限制
             brightnessValue = Math.max(0, Math.min(brightnessValue, 100));
             brightnessValue = Math.round(brightnessValue)
-            setStartY(touchY)
+            setStartX(touchX)
             setBrightness(brightnessValue);
+
+            setValue(calculateNumber(brightnessValue))
         }
     };
 
@@ -35,19 +53,69 @@ function MyComponent() {
         setIsSliding(false);
     };
 
-    return (
-        <View
+    function getColor() {
+        var index = Math.round((brightness / 100) * 20)
+        return colors[index];
+    }
+
+    function calculateOpacity(number) {
+        if (number === 0 || number === 100) {
+            return 1;
+        } else if (number === 50) {
+            return 0;
+        } else if (number < 50) {
+            return 1 - (number / 50);
+        } else {
+            return (number - 50) / 50;
+        }
+    }
+
+    function calculateNumber(number) {
+        if (number <= 2) {
+            return 0;
+        } else if (number <= 7) {
+            return 0.5;
+        } else {
+            var result = Math.floor(number / 10);
+            var decimal = number % 10;
+
+            if (decimal >= 3 && decimal <= 7) {
+                return result + 0.5;
+            } else if (decimal >= 8 && decimal <= 9) {
+                if (result==9){
+                    return 9.5
+                }
+                return result + 1;
+            } else {
+                return result;
+            }
+        }
+    }
+
+
+    return <View style={{ display: 'flex', flexDirection: 'column' }}>
+        <View className='slider-container'
             catchMove
-            className='slider-container'
             onTouchStart={handleTouchStart}
             onTouchMove={handleTouchMove}
-            onTouchEnd={handleTouchEnd}
-        >
-            <View className='slider-top' style={{ height: `${100-brightness}%` }} />
-            {/* <View className='slider-bar' style={{ height: `${brightness}%` }} /> */}
-            <Text className='slider-handle'>{brightness}</Text>
-        </View>
-    );
-}
+            onTouchEnd={handleTouchEnd}>
+            <View className='slider-item-bg' style={{ width: brightness * 0.01 * rpxToPx(600 - 120) + rpxToPx(120) }}>
+                <View className='slider-item' style={{
+                    backgroundColor: brightness <= 50 ? ColorType.fast : ColorType.food,
+                    opacity: calculateOpacity(brightness),
+                }}></View>
+                <View className='slider-text-bg'>
+                    <Text className='slider-text'>{value}</Text>
+                </View>
+            </View>
 
-export default MyComponent;
+        </View>
+        <View style={{ display: 'flex', flexDirection: 'row' }}>
+            {
+                colors.map(item => {
+                    return <View style={{ width: 15, height: 40, backgroundColor: item }} />
+                })
+            }
+        </View>
+    </View>
+}

src/components/input/Slider2.scss

@@ -0,0 +1,36 @@
+.slider-container {
+    position: relative;
+    width: 138px;
+    height: 304px;
+    // background-color: transparent;
+    border-radius: 36px;
+    overflow: hidden;
+    touch-action: none;
+    border: solid 4px #00ffff;
+    box-sizing: border-box;
+    background: linear-gradient(to bottom,red,#00ffff);
+}
+
+.slider-top{
+    position: absolute;
+    width: 100%;
+    background-color: #000;
+    transform: height 0.2s;
+}
+
+.slider-bar {
+    position: absolute;
+    width: 100%;
+    background-color: transparent;
+    // background-color: #00ffff;
+    bottom: 0;
+    transition: height 0.2s;
+}
+
+.slider-handle {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+}

src/components/input/Slider2.tsx

@@ -0,0 +1,53 @@
+import Taro from '@tarojs/taro';
+import { View, Text } from '@tarojs/components';
+import { useState } from 'react';
+import './Slider.scss'
+import { rpxToPx } from '@/utils/tools';
+
+function MyComponent() {
+    const [brightness, setBrightness] = useState(0);
+    const [isSliding, setIsSliding] = useState(false);
+    const [startY, setStartY] = useState(0);
+
+    const handleTouchStart = (event) => {
+        setIsSliding(true);
+        setStartY(event.touches[0].clientY);
+    };
+
+    const handleTouchMove = (event) => {
+        if (isSliding) {
+            const { touches } = event;
+            const touchY = touches[0].clientY;
+            const deltaY = startY - touchY;
+            // console.log(deltaY,startY,touchY)
+            // const containerHeight = rpxToPx(182); // 容器高度，根据实际情况调整
+            let brightnessValue = brightness + deltaY;// / containerHeight * 100;
+
+            // 边界限制
+            brightnessValue = Math.max(0, Math.min(brightnessValue, 100));
+            brightnessValue = Math.round(brightnessValue)
+            setStartY(touchY)
+            setBrightness(brightnessValue);
+        }
+    };
+
+    const handleTouchEnd = () => {
+        setIsSliding(false);
+    };
+
+    return (
+        <View
+            catchMove
+            className='slider-container'
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+        >
+            <View className='slider-top' style={{ height: `${100-brightness}%` }} />
+            {/* <View className='slider-bar' style={{ height: `${brightness}%` }} /> */}
+            <Text className='slider-handle'>{brightness}</Text>
+        </View>
+    );
+}
+
+export default MyComponent;

src/components/input/SlidngScale.tsx

@@ -103,16 +103,15 @@ export default function Component(props: {
     }, [isEnd, isDraging])
 
     function scrollContent(e) {
-        update(e)
-        // lastValue = e.detail.scrollLeft;
-        // if (timerA)
-        //     clearTimeout(timerA);
+        lastValue = e.detail.scrollLeft;
+        if (timerA)
+            clearTimeout(timerA);
 
-        // timerA = setTimeout(() => {
+        timerA = setTimeout(() => {
 
-        //     update(e)
-        //     setIsDraging(false)
-        // }, 250) as any
+            update(e)
+            setIsDraging(false)
+        }, 250) as any
     }
 
     const handleScroll = throttle((e) => {

src/context/themes/color.tsx

@@ -2,5 +2,6 @@ export enum ColorType {
     fast = '#00ffff',//'#aaff00',
     sleep = '#8961F5',//'#00ffff'
     box = '#121212',
-    ring = '#1c1c1c'
+    ring = '#1c1c1c',
+    food = '#FF7A4E',
 }

src/features/food/FoodConsole.tsx

@@ -28,7 +28,7 @@ export default function Component(props: { addItem: Function }) {
         }
     }, [])
 
-    function choose() {
+    function choose(isAlbum=true) {
         if (!user.isLogin) {
             jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
             return;
@@ -37,7 +37,7 @@ export default function Component(props: { addItem: Function }) {
         Taro.chooseImage({
             count: 1,
             sizeType: ['compressed'],
-            sourceType: ['album'],
+            sourceType: [isAlbum?'album':'camera'],
             success: function (res) {
                 console.log(res)
                 var tempFilePaths = res.tempFilePaths
@@ -153,14 +153,15 @@ export default function Component(props: { addItem: Function }) {
 
     return <View >
         <View style={{ display: 'flex', width: rpxToPx(750), alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
-            <View style={{ display: 'flex', flexDirection: 'row' }}>
+            <View style={{ display: 'flex', flexDirection: 'column' }}>
                 <Slider />
-                <View className='box11' onClick={choose}>{
+                <View className='box11' onClick={()=>choose(true)}>{
                     imgUrl && <Image style={{ width: '100%', height: '100%' }} src={imgUrl} mode="aspectFill" />
                 }
                 </View>
                 <Slider />
             </View>
+            <Text style={{ color: '#fff',marginBottom:20 }} onClick={()=>choose(false)}>拍照</Text>
             <Text style={{ color: '#fff' }} onClick={uploadFile}>上传</Text>
 
         </View>

src/features/food/FoodTimeline.tsx

@@ -8,7 +8,6 @@ export default function Component(props: { array: any }) {
     const [list, setList] = useState(props.array)
 
     useEffect(() => {
-        console.log('hhhh')
         setList(props.array)
     }, [props.array.length])
 

src/features/food/FoodTimelineItem.scss

@@ -1,7 +1,30 @@
 .food_timeline_item{
     margin-bottom: 40px;
+    display: flex;
+    flex-direction: row;
+}
+.tags{
+    width: 100px;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+    font-size: 24px;
+}
+.thumb_bg{
+    position: relative;
+    width: 300px;
+    height: 300px;
 }
 .thumb{
-    width: 200px;
-    height: 200px;
+    width: 300px;
+    height: 300px;
+}
+
+.food_desc{
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 60px;
+    backdrop-filter: blur(20px);
 }

src/features/food/FoodTimelineItem.tsx

@@ -1,21 +1,29 @@
-import { View,Image } from "@tarojs/components";
+import { View, Image, Text } from "@tarojs/components";
 import './FoodTimelineItem.scss'
 import Taro from "@tarojs/taro";
 import { useTranslation } from "react-i18next";
+import { editFoodJournal } from "@/services/foodJournal";
+import { useState } from "react";
+import LimitPickers from "@/components/input/LimitPickers";
+import Modal from "@/components/layout/Modal";
+import { ColorType } from "@/context/themes/color";
 
-export default function Component(props:{data:any,delete:Function}){
-    const {t} = useTranslation()
+export default function Component(props: { data: any, delete: Function }) {
+    const [detail, setDetail] = useState(props.data)
+    const [showModal, setShowModal] = useState(false)
+    const [isStart, setIsStart] = useState(false)
+    const { t } = useTranslation()
 
-    function preview(){
+    function preview() {
         Taro.previewImage({
-            current:props.data.cover,
-            urls:[props.data.cover]
+            current: props.data.cover,
+            urls: [props.data.cover]
         })
     }
 
-    function showActionSheet(){
+    function showActionSheet() {
         Taro.showActionSheet({
-            itemList: [t('feature.common.action_sheet.delete')]
+            itemList: [t('feature.common.action_sheet.delete'), '餐前时间', '餐后时间']
         })
             .then(res => {
                 switch (res.tapIndex) {
@@ -31,7 +39,16 @@ export default function Component(props:{data:any,delete:Function}){
                         })
                         break;
                     case 1:
-
+                        {
+                            setIsStart(true)
+                            setShowModal(true)
+                        }
+                        break;
+                    case 2:
+                        {
+                            setIsStart(false)
+                            setShowModal(true)
+                        }
                         break;
                 }
             })
@@ -40,8 +57,53 @@ export default function Component(props:{data:any,delete:Function}){
             })
     }
 
-    return <View  className="food_timeline_item" onLongPress={showActionSheet}>
+    function updateTag(index) {
+        var tags = ['早餐', '午餐', '晚餐', '宵夜']
+        var tag = tags[index]
+        editFoodJournal({
+            tags: [tag]
+        }, detail.id).then(res => {
+            var obj = detail
+            obj.tags = [tag]
+            setDetail(obj)
+        }).catch(e => {
+
+        })
+    }
+
+    function updateTime(e){
+        console.log(e)
+    }
+
+    return <View className="food_timeline_item" onLongPress={showActionSheet}>
         {/* <View className="thumb" style={{backgroundColor:'pink'}}/> */}
-        <Image className="thumb" src={props.data.cover} mode="aspectFill" onClick={preview}/>
+        <View className="tags">
+            <Text onClick={() => updateTag(0)}>早餐</Text>
+            <Text onClick={() => updateTag(1)}>午餐</Text>
+            <Text onClick={() => updateTag(2)}>晚餐</Text>
+            <Text onClick={() => updateTag(3)}>宵夜</Text>
+        </View>
+        <View className="thumb_bg">
+            <Image className="thumb" src={detail.cover} mode="aspectFill" onClick={preview} />
+            <View className="food_desc">
+                <Text>{detail.tags && detail.tags.length > 0 && detail.tags[0]}</Text>
+            </View>
+        </View>
+        {
+            showModal && <Modal dismiss={() => { setShowModal(false) }} confirm={() => { setShowModal(false) }}>
+                <View className='modal_content'>
+                    <LimitPickers
+                        isRealTime={true} time={new Date().getTime()} limit={new Date().getTime() - 120 * 24 * 3600 * 1000}
+                        title={isStart ? '餐前時間' : '餐後時間'}
+                        themeColor={ColorType.fast}
+                        limitDay={120} onCancel={() => { setShowModal(false) }}
+                        onChange={(e) => {
+                            updateTime(e)
+                            setShowModal(false)
+                        }} />
+                </View>
+            </Modal>
+        }
+
     </View>
 }

src/pages/demo.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { useEffect, useState } from 'react';
 import './demo.scss'
 import Taro from '@tarojs/taro';
-import Slider from '@/components/input/Slider';
+import Slider from '@/components/input/Slider2';
 
 
 

src/services/foodJournal.tsx

@@ -29,10 +29,10 @@ export const createFoodJournal = (params) => {
     })
 }
 
-export const editFoodJournal = (params) => {
+export const editFoodJournal = (params,id) => {
     return new Promise((resolve, reject) => {
         request({
-            url: API_FOOD, method: 'POST', data: { ...params }
+            url: API_FOOD + `/${id}`, method: 'POST', data: { ...params }
         }).then(res => {
             resolve(res);
             console.log(res);