taro/src/features/food/FoodConsole.tsx

import { View, Image, Text, Switch } from '@tarojs/components'
import './FoodConsole.scss'
import { rpxToPx } from '@/utils/tools'
import Taro from '@tarojs/taro'
import Slider from '@/components/input/Slider'
import { useEffect, useState } from 'react'
import { baseUrl } from '@/services/http/api'
import { createFoodJournal } from '@/services/foodJournal'
import { useSelector } from 'react-redux'
import { jumpPage } from '../trackTimeDuration/hooks/Common'
import { IconShare } from '@/components/basic/Icons'
import { useTranslation } from 'react-i18next'
import { ColorType } from '@/context/themes/color'
let useNavigation;
if (process.env.TARO_ENV == 'rn') {
    useNavigation = require("@react-navigation/native").useNavigation
}

export default function Component(props: { addItem: Function, firstItem: any }) {
    const user = useSelector((state: any) => state.user);
    const [modeOn, setModeOn] = useState(false)
    const [firstData, setFirstData] = useState(props.firstItem)
    const [lastUnFinished, setLastUnFinished] = useState(false)
    const { t } = useTranslation()
    const [imgUrl, setImgUrl] = useState('')
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    useEffect(() => {
        setFirstData(props.firstItem)
    }, [props.firstItem, props.firstItem.feel.post_meal])

    useEffect(() => {
        if (firstData &&
            firstData.mindful_mode == 'AWARE' &&
            firstData.status != 'ABANDONED' &&
            (!firstData.feel.post_meal || !firstData.feel.pre_meal)) {
            setLastUnFinished(true)
            setModeOn(true)
        }
        else {
            setLastUnFinished(false)
            var isOn = Taro.getStorageSync('food_switch')
            setModeOn(isOn)
            // Taro.setStorageSync('food_switch',e.detail.value)
        }
    }, [firstData])

    useEffect(() => {
        // var str = Taro.getStorageSync('pic')
        // if (str && str.length > 0) {
        //     setImgUrl(str)
        // }
    }, [])

    function choose(isAlbum = true) {
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
            return;
        }
        clearFile()
        Taro.chooseMedia({
            count: 1,
            sizeType: ['compressed'],
            mediaType: ['image'],
            sourceType: [isAlbum ? 'album' : 'camera'],
            success: function (res) {
                var tempFilePath = res.tempFiles[0].tempFilePath
                // Taro.editImage({
                //     src:tempFilePath,
                //     success:function(res){
                //         console.log(res)
                //     }
                // })
                Taro.getFileSystemManager().saveFile({
                    tempFilePath: tempFilePath,
                    success: function (res) {
                        var savedFilePath = res.savedFilePath
                        Taro.setStorageSync('pic', savedFilePath)
                        console.log(savedFilePath)
                        setImgUrl(savedFilePath as any)

                        uploadFile(savedFilePath, isAlbum ? 'album' : 'camera')
                    }
                })
            }
        })
    }


    function clearFile() {
        Taro.getFileSystemManager().getSavedFileList({
            success: function (res) {
                if (res.fileList.length > 0) {
                    Taro.removeSavedFile({
                        filePath: res.fileList[0].filePath,
                        complete: function (res) {
                            console.log(res)
                            console.log('remove success')
                        }
                    })
                }
            }
        })
    }

    function getCache(key: string) {
        var value = Taro.getStorageSync(key)
        if (value) {
            return JSON.parse(value)
        }
        return null;
    }

    function saveCache(key: string) {
        var strList = Taro.getStorageSync('food_operate')
        var list: any = []
        if (strList) {
            list = JSON.parse(strList)
        }
        list.add({
            key,
            timestamp: new Date().getTime()
        })
        Taro.setStorageSync('food_operate', JSON.stringify(list)
        )
    }

    function uploadFile(path, source) {
        Taro.showLoading({
            title: '加载中'
        })
        var dot = path.lastIndexOf('.')
        var fileExt = dot > 0 ? path.substring(dot) : ''
        // console.log(avatarUrl)
        Taro.request({
            method: 'GET',
            url: `${baseUrl}/api/thirdparty/aliyun/oss-form-upload`,
            header: {
                'Authorization': 'bearer ' + global.token
            },
            data: {
                type: 'FOOD_JOURNAL',
                file_ext: fileExt
            },
            success: (rsp) => {
                if (rsp.statusCode != 200) {
                    Taro.showToast({
                        title: '操作失败，请检查网络',
                        icon: 'none'
                    })
                    return
                }
                Taro.uploadFile({
                    url: rsp.data.upload_url,
                    filePath: path,
                    name: 'file',
                    formData: rsp.data.fields,
                    success: rlt => {
                        createData(rsp.data.view_url, source)

                        // uploadAvatar(rsp.data.view_url)
                        // _this.changeAvatar(rsp.data.view_url);
                    },
                    fail: rlt => {
                        Taro.hideLoading()
                        Taro.showModal({
                            content: rlt.errMsg
                        })
                    }
                })
            }
        })
    }

    function createData(url, source) {
        var date = new Date();
        var time = date.getTime()
        var strDate = (date.getFullYear() + '') + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());

        createFoodJournal({
            media: [{
                url,
                type: url.indexOf('mp4') != -1 ? 'video' : 'image',
                source: source
            }],
            start: {
                timestamp: time,
                date: strDate
            },
            mindful_mode: modeOn ? 'AWARE' : 'NORMAL'

        }).then(res => {
            props.addItem(res)
            clearFile()
            setImgUrl('')
            Taro.removeStorageSync('pic')
            Taro.hideLoading()
            setFirstData(res)
            // if (modeOn) {
            //     setSwitchDisable(true)
            // }
        }).catch(e => {
            Taro.hideLoading()
        })
    }

    function modeChange(e) {
        setModeOn(e.detail.value)
        Taro.setStorageSync('food_switch', e.detail.value)
    }

    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>

        </View>
        {
            !lastUnFinished && <View style={{ display: 'flex', 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' />
                        <Text className='camera_text'>{t('feature.food.camera')}</Text>
                        <Text className='album_text'>{t('feature.food.album')}</Text>
                        <View className='album_bottom' onClick={(e) => { choose(true); e.stopPropagation() }} />
                    </View>
                    {
                        modeOn && <View style={{ height: rpxToPx(60) }} />
                    }
                    {modeOn && <Slider edit={true}/>}
                </View>
            </View>
        }

    </View>
}