food begin

src/app.config.ts

@@ -2,8 +2,7 @@ const appConfig = defineAppConfig({
   pages: [
     'pages/clock/Clock',
     'pages/demo',
-    
-
+    'pages/food/Food',
     'pages/index/index',
     'pages/account/Login',
     'pages/account/Auth',
@@ -77,6 +76,10 @@ process.env.TARO_ENV === 'weapp' && (appConfig.tabBar = {
       pagePath: 'pages/metric/Metric',
       text: '指标',
     },
+    {
+      pagePath: 'pages/food/Food',
+      text: '饮食',
+    },
     {
       pagePath: 'pages/activity/Activity',
       text: '运动',

src/components/input/Slider.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/Slider.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

@@ -201,15 +201,18 @@ export default function Component(props: {
         // </View>
     }
 
-    var svg2 = `<svg xmlns="http://www.w3.org/2000/svg" width="${list.length * 10 - 8}" height="50">`;
-    for (var i = 0; i < list.length; i++) {
-        var obj = list[i];
-        svg2 += `<line x1="${i * 10}" y1="0" x2="${i * 10}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}"  stroke-width="2"/>`
-        if (obj.showBig) {
-            svg2 += `<text x="${i * 10}" y="${rpxToPx(30 + 36)}" text-anchor="middle" fill="white" font-size="${rpxToPx(36)}">${obj.value}</text>`
-        }
-    }
-    svg2 += `</svg>`
+    // var svg2 = `<svg xmlns="http://www.w3.org/2000/svg" width="${list.length * 10 - 8}" height="50">`;
+    // for (var i = 0; i < list.length; i++) {
+    //     var obj = list[i];
+    //     svg2 += `<line x1="${i * 10}" y1="0" x2="${i * 10}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}"  stroke-width="2"/>`
+    //     if (obj.showBig) {
+    //         svg2 += `<text x="${i * 10}" y="${rpxToPx(30 + 36)}" text-anchor="middle" fill="white" font-size="${rpxToPx(36)}">${obj.value}</text>`
+    //     }
+    // }
+    // svg2 += `</svg>`
+
+    // console.log(svg2)
+    // debugger
 
     return <View className="slidng">
         <View className="number_bg" style={{ opacity: enableText ? 1 : 0.4 }}>
@@ -238,7 +241,7 @@ export default function Component(props: {
                 <View className="scrollContent">
                     <View className="scrollPadding" style={{ width: rpxToPx(372) }} />
                     <View className="content">
-                        {/* {
+                        {
                             list.map((item, index) => {
                                 return <View className={(item as any).showBig ? 'slidng_item_big' : (item as any).showMiddle ? 'slidng_item_middle' : 'slidng_item'}
                                     style={{ width: 2, marginRight: list.length - 1 == index ? 0 : 8, backgroundColor: props.themeColor, zIndex: 0 }} key={index}>
@@ -247,10 +250,10 @@ export default function Component(props: {
                                     }
                                 </View>
                             })
-                        } */}
-                        <View style={{ width: list.length * 10 - 8, height: 200 }}>
+                        }
+                        {/* <View style={{ width: list.length * 10 - 8, height: 200 }}>
                             <mysvg src={svg2} />
-                        </View>
+                        </View> */}
                     </View>
                     <View className="scrollPadding" />
 

src/components/navigation/TabBar.tsx

@@ -29,6 +29,11 @@ export default function Component(props:{index:number}) {
                     url: '/pages/account/Profile'
                 })
                 break;
+            case 4:
+                Taro.switchTab({
+                    url: '/pages/food/Food'
+                })
+                break;
         }
     }
 
@@ -39,6 +44,9 @@ export default function Component(props:{index:number}) {
         <View className={selIndex == 1 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(1)}>
             <Text>指标</Text>
         </View>
+        <View className={selIndex == 4 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(4)}>
+            <Text>饮食</Text>
+        </View>
         <View className={selIndex == 2 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(2)}>
             <Text>运动</Text>
         </View>

src/pages/account/Profile.tsx

@@ -12,7 +12,7 @@ import { useTranslation } from "react-i18next";
 import TableCell from "@/components/layout/TableCell";
 import { useEffect, useState } from "react";
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
-import Tabbar from "@/components/navigation/Tabbar";
+import Tabbar from "@/components/navigation/TabBar";
 let useNavigation;
 if (process.env.TARO_ENV == 'rn') {
     useNavigation = require("@react-navigation/native").useNavigation

src/pages/activity/Activity.tsx

@@ -2,7 +2,7 @@ import { View, Text } from "@tarojs/components";
 import Activity from '@/features/trackSomething/components/Activity'
 import { useDidShow, useReady, useShareAppMessage } from "@tarojs/taro";
 import { activityCards } from "@/services/trackSomething";
-import Tabbar from "@/components/navigation/Tabbar";
+import Tabbar from "@/components/navigation/TabBar";
 import { useTranslation } from "react-i18next";
 
 export default function Page() {

src/pages/clock/Clock.weapp.tsx

@@ -1,6 +1,6 @@
 import { Component, PropsWithChildren, useEffect, useRef, useState } from 'react'
 import { View, Text, Button, Input, Picker, Swiper, SwiperItem, Icon, PageContainer } from '@tarojs/components'
-import Tabbar from "@/components/navigation/Tabbar";
+import Tabbar from "@/components/navigation/TabBar";
 import '../index/index.scss'
 import './Clock.scss'
 // import './context/locales/index'

src/pages/demo.config.ts

@@ -3,5 +3,5 @@ export default definePageConfig({
       // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
       // 'demo':'../../components/demo'
     },
-    "disableScroll": true,
+    "disableScroll": false,
   })

src/pages/demo.scss

@@ -1,3 +1,11 @@
 .virtual-waterfall-0-left{
     height: 0;
+}
+
+.box11{
+    width: 304px;
+    height: 304px;
+    margin-left: 40px;
+    margin-right: 40px;
+    background-color: #00ffff;
 }

src/pages/demo.tsx

@@ -9,6 +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';
 
 
 
@@ -31,7 +32,7 @@ export default function Demo() {
   <text x="3000" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
 </svg>`
 
-const svg2 = `
+  const svg2 = `
 <svg xmlns="http://www.w3.org/2000/svg" width="400" height="50">
   <!-- 尺子底部线条 -->
   <line x1="10" y1="25" x2="390" y2="25" stroke="white" stroke-width="2" />
@@ -60,6 +61,17 @@ const svg2 = `
   </g>
 </svg>`
 
+  function choose() {
+    Taro.chooseImage({
+      count: 1,
+      sizeType: ['original'],
+      sourceType: ['camera'],
+      success: function (res) {
+
+      }
+    })
+  }
+
 
   return (
     <View>
@@ -68,6 +80,15 @@ const svg2 = `
           <mysvg src={svg2} />
         </View>
       </ScrollView>
+      <View style={{ display: 'flex', width: rpxToPx(750), alignItems: 'center', justifyContent: 'center' }}>
+        <View style={{ display: 'flex', flexDirection: 'row' }}>
+          <Slider />
+          <View className='box11' onClick={choose} />
+          <Slider />
+        </View>
+
+      </View>
+
 
     </View>
 

src/pages/food/Food.tsx

@@ -0,0 +1,9 @@
+import { View } from "@tarojs/components";
+import Tabbar from "@/components/navigation/TabBar";
+import './Food.scss'
+
+export default function Page(){
+    return <View>
+        <Tabbar index={4}/>
+    </View>
+}

src/pages/metric/Metric.tsx

@@ -1,7 +1,7 @@
 import { View, Text } from "@tarojs/components";
 import Metric from "@/features/trackSomething/components/Metric";
 import { useDidShow, usePullDownRefresh, useShareAppMessage } from "@tarojs/taro";
-import Tabbar from "@/components/navigation/Tabbar";
+import Tabbar from "@/components/navigation/TabBar";
 import { useTranslation } from "react-i18next";
 
 export default function Page() {