update

src/components/input/Slider.scss

@@ -16,16 +16,23 @@
     border-radius: 60px;
     left: 0;
     top: 0;
-    background-color: #fff;
+    background-color: #ffffff66;
     overflow: hidden;
 }
 
+.slider-item-bg::after{
+    background-color: red;
+}
+
 .slider-item {
     position: absolute;
     left: 0;
     top: 0;
-    width: 100%;
-    height: 100%;
+    min-width: 120px;
+    height: 120px;
+    border-radius: 60px;
+    // width: 100%;
+    // height: 100%;
 }
 
 .slider-top {

src/components/input/Slider.tsx

@@ -82,7 +82,7 @@ export default function () {
             if (decimal >= 3 && decimal <= 7) {
                 return result + 0.5;
             } else if (decimal >= 8 && decimal <= 9) {
-                if (result==9){
+                if (result == 9) {
                     return 9.5
                 }
                 return result + 1;
@@ -100,22 +100,27 @@ export default function () {
             onTouchMove={handleTouchMove}
             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>
+            <View className='slider-item' style={{
+                width: brightness * 0.01 * rpxToPx(600 - 120) + rpxToPx(120),
+                backgroundColor: brightness <= 50 ? ColorType.fast : ColorType.food,
+                opacity: calculateOpacity(brightness),
+            }}>
+
+            </View>
+            <View className='slider-text-bg'>
+                <Text className='slider-text'>{value}</Text>
             </View>
 
         </View>
-        <View style={{ display: 'flex', flexDirection: 'row' }}>
+        {/* <View style={{ display: 'flex', flexDirection: 'row' }}>
             {
                 colors.map(item => {
                     return <View style={{ width: 15, height: 40, backgroundColor: item }} />
                 })
             }
-        </View>
+        </View> */}
     </View>
 }

src/features/food/FoodConsole.scss

@@ -4,4 +4,68 @@
     margin-left: 40px;
     margin-right: 40px;
     background-color: #00ffff;
+}
+
+.demo1{
+    width: 100px;
+    height: 100px;
+    position: relative;
+    // background-color: red;
+}
+
+.demo1::before{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: pink;
+    z-index: 1;
+}
+
+.demo1::after{
+    background-color: #ffffff66;
+}
+
+.camera_bg{
+    width: 300px;
+    height: 300px;
+    border-radius: 32px;
+    background-color: #2b2b2b;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+}
+
+.album_bottom{
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 33%;
+}
+
+.camera_icon{
+    width: 72px;
+    height: 60px;
+    margin-top: 76px;
+}
+
+.camera_text{
+    margin-top: 16px;
+    font-size: 28px;
+    line-height: 30px;
+    color: #fff;
+    opacity: 0.4;
+    font-weight: bold;
+}
+
+.album_text{
+    margin-top: 64px;
+    font-size: 24px;
+    line-height: 26px;
+    color: #fff;
+    opacity: 0.2;
+    font-weight: bold;
 }

src/features/food/FoodConsole.tsx

@@ -41,14 +41,15 @@ export default function Component(props: { addItem: Function }) {
             success: function (res) {
                 console.log(res)
                 var tempFilePaths = res.tempFilePaths
-                Taro.saveFile({
+                Taro.getFileSystemManager().saveFile({
                     tempFilePath: tempFilePaths[0],
-                    apFilePath: '',
                     success: function (res) {
                         var savedFilePath = res.savedFilePath
                         Taro.setStorageSync('pic', savedFilePath)
                         console.log(savedFilePath)
                         setImgUrl(savedFilePath as any)
+
+                        uploadFile(savedFilePath)
                     }
                 })
             }
@@ -57,7 +58,7 @@ export default function Component(props: { addItem: Function }) {
 
 
     function clearFile() {
-        Taro.getSavedFileList({
+        Taro.getFileSystemManager().getSavedFileList({
             success: function (res) {
                 if (res.fileList.length > 0) {
                     Taro.removeSavedFile({
@@ -94,9 +95,12 @@ export default function Component(props: { addItem: Function }) {
         )
     }
 
-    function uploadFile(e) {
-        var dot = imgUrl.lastIndexOf('.')
-        var fileExt = dot > 0 ? imgUrl.substring(dot) : ''
+    function uploadFile(path) {
+        Taro.showLoading({
+            title:'加载中'
+        })
+        var dot = path.lastIndexOf('.')
+        var fileExt = dot > 0 ? path.substring(dot) : ''
         // console.log(avatarUrl)
         Taro.request({
             method: 'GET',
@@ -112,16 +116,18 @@ export default function Component(props: { addItem: Function }) {
                 console.log(rsp)
                 Taro.uploadFile({
                     url: rsp.data.upload_url,
-                    filePath: imgUrl,
+                    filePath: path,
                     name: 'file',
                     formData: rsp.data.fields,
                     success: rlt => {
                         console.log(rlt)
                         createData(rsp.data.view_url)
+                        
                         // uploadAvatar(rsp.data.view_url)
                         // _this.changeAvatar(rsp.data.view_url);
                     },
                     fail: rlt => {
+                        Taro.hideLoading()
                         Taro.showModal({
                             content: rlt.errMsg
                         })
@@ -146,8 +152,9 @@ export default function Component(props: { addItem: Function }) {
             clearFile()
             setImgUrl('')
             Taro.removeStorageSync('pic')
+            Taro.hideLoading()
         }).catch(e => {
-
+            Taro.hideLoading()
         })
     }
 
@@ -155,14 +162,21 @@ export default function Component(props: { addItem: Function }) {
         <View style={{ display: 'flex', width: rpxToPx(750), alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
             <View style={{ display: 'flex', flexDirection: 'column' }}>
                 <Slider />
-                <View className='box11' onClick={()=>choose(true)}>{
+                {/* <View className='box11' onClick={()=>choose(true)}>{
                     imgUrl && <Image style={{ width: '100%', height: '100%' }} src={imgUrl} mode="aspectFill" />
                 }
+                </View> */}
+                <View className='camera_bg' onClick={()=>choose(false)}>
+                    <Image src={require('@assets/images/camera2.png')} className='camera_icon'/>
+                    <Text className='camera_text'>拍摄食物</Text>
+                    <Text className='album_text'>从相册选择</Text>
+                    <View className='album_bottom' onClick={(e)=>{choose(true);e.stopPropagation()}}/>
                 </View>
                 <Slider />
             </View>
-            <Text style={{ color: '#fff',marginBottom:20 }} onClick={()=>choose(false)}>拍照</Text>
-            <Text style={{ color: '#fff' }} onClick={uploadFile}>上传</Text>
+            <View className='demo1'/>
+            {/* <Text style={{ color: '#fff',marginBottom:20 }} onClick={()=>choose(false)}>拍照</Text>
+            <Text style={{ color: '#fff' }} onClick={uploadFile}>上传</Text> */}
 
         </View>
     </View>

src/features/food/FoodJournal.tsx

@@ -90,6 +90,7 @@ export default function Component() {
             {
                 user.isLogin && list && <FoodTimeline array={list} />
             }
+            <View style={{height:60}}/>
         </View>
     }
 

src/features/food/FoodTimeline.tsx

@@ -3,6 +3,7 @@ import './FoodTimeline.scss'
 import FoodTimelineItem from './FoodTimelineItem'
 import { useEffect, useState } from 'react'
 import { delFoodJournal } from '@/services/foodJournal'
+import Taro from '@tarojs/taro'
 
 export default function Component(props: { array: any }) {
     const [list, setList] = useState(props.array)
@@ -19,10 +20,22 @@ export default function Component(props: { array: any }) {
 
         })
     }
+
+    function preview(index){
+        var urls:any = []
+        list.map(item=>{
+            urls.push(item.cover)
+        })
+        Taro.previewImage({
+            current: list[index].cover,
+            urls: urls
+        })
+    }
+
     return <View style={{ flexDirection: 'column', display: 'flex' }}>
         {
             list.map((item, index) => {
-                return <FoodTimelineItem data={item} key={index} delete={() => del(index)} />
+                return <FoodTimelineItem data={item} key={index} delete={() => del(index)} preview={()=>preview(index)}/>
             })
         }
     </View>

src/features/food/FoodTimelineItem.tsx

@@ -3,22 +3,27 @@ import './FoodTimelineItem.scss'
 import Taro from "@tarojs/taro";
 import { useTranslation } from "react-i18next";
 import { editFoodJournal } from "@/services/foodJournal";
-import { useState } from "react";
+import { useEffect, 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 }) {
+export default function Component(props: { data: any, delete: Function, preview: Function }) {
     const [detail, setDetail] = useState(props.data)
     const [showModal, setShowModal] = useState(false)
     const [isStart, setIsStart] = useState(false)
     const { t } = useTranslation()
 
+    useEffect(() => {
+        setDetail(props.data)
+    }, [props.data])
+
     function preview() {
-        Taro.previewImage({
-            current: props.data.cover,
-            urls: [props.data.cover]
-        })
+        // Taro.previewImage({
+        //     current: props.data.cover,
+        //     urls: [props.data.cover]
+        // })
+        props.preview()
     }
 
     function showActionSheet() {
@@ -71,7 +76,7 @@ export default function Component(props: { data: any, delete: Function }) {
         })
     }
 
-    function updateTime(e){
+    function updateTime(e) {
         console.log(e)
     }