feat: 打卡签到

src/pages/home/components/CheckIn/index.tsx

@@ -13,23 +13,46 @@ import Taro from "@tarojs/taro";
 import { getCurrentInstance } from "@tarojs/taro";
 import React, { useCallback, useEffect, useState } from "react";
 import "./index.scss";
+import { Uploader } from "@antmjs/vantui";
 
 const CheckIn = () => {
   const formIt = Form.useForm();
   const [bottomheight, setbottomheight] = useState(0);
-  let newBottom =0
+
+  const [value, setValue] = useState([
+    // {
+    //   url: "https://img.yzcdn.cn/vant/leaf.jpg",
+    //   name: "图片1",
+    // },
+    // {
+    //   url: "https://img.yzcdn.cn/vant/tree.jpg",
+    // },
+  ]);
+
+  const afterRead = (event) => {
+    const { file, name } = event.detail;
+    // 可在此处新增云上传图片操作
+    console.log("file", file);
+    setValue(value.concat(file));
+    uploadTaro([file?.url]);
+  };
+
+  const deleteAction = (event) => {
+    const { index } = event.detail;
+    const valueNew = JSON.parse(JSON.stringify(value));
+    valueNew.splice(index, 1);
+    setValue(valueNew);
+  };
+
+  let newBottom = 0;
 
   useEffect(() => {
     const { screenHeight, safeArea = {} } = Taro.getSystemInfoSync();
     // @ts-ignore
-     newBottom = screenHeight - safeArea?.bottom ?? 0;
+    newBottom = screenHeight - safeArea?.bottom ?? 0;
     setbottomheight(newBottom);
   }, []);
 
-  let $instance: any = getCurrentInstance();
-  const { fileID } = $instance?.router?.params;
-  console.log("fileID---", fileID);
-
   useEffect(() => {
     // 设置标题
     definePageConfig({
@@ -37,6 +60,31 @@ const CheckIn = () => {
     });
   }, []);
 
+  let $instance: any = getCurrentInstance();
+  const { fileID } = $instance?.router?.params;
+  console.log("fileID---", fileID);
+
+  useEffect(() => {
+    if ($instance?.router?.params?.fileID) {
+      uploadTaro([fileID]);
+    }
+  }, []);
+
+  const uploadTaro = (tempFilePaths: any) => {
+    // 云开发存储文件 [/自动创建文件路径]
+    Taro.cloud.uploadFile({
+      cloudPath: `images/dev/${new Date()?.getTime()}.png`,
+      filePath: tempFilePaths?.[0], // 文件路径
+      success: (res: any) => {
+        console.log("res", res?.fileID);
+      },
+      fail: (err: any) => {
+        // handle error
+        console.log("err", err);
+      },
+    });
+  };
+
   return (
     <View className="CheckIn">
       <Form
@@ -49,9 +97,12 @@ const CheckIn = () => {
         form={formIt}
         onFinish={(errs, res) => console.info(errs, res)}
       >
+        {/* 图片 */}
         <View>
           <Image width="100%" height="500px" fit="cover" src={fileID} />
         </View>
+
+        {/* 留言 */}
         <FormItem
           label="留言"
           name="userName"
@@ -68,14 +119,30 @@ const CheckIn = () => {
           //   renderRight={<Icon name="user-o" />}
         >
           <Field
-            //   label="留言"
+            // label="留言"
             type="textarea"
-            placeholder="请输入留言"
-            autosize={{ minHeight: "30px" }}
-            border={false}
+            placeholder="分享你的心情和故事吧~"
+            autosize={{ minHeight: "100px" }}
+            border={true}
           />
         </FormItem>
-        <View style={{ bottom: `${bottomheight ?? 0}px` }}>
+
+        {/* 文件上传 */}
+        {/* <Uploader
+          fileList={value}
+          onAfterRead={afterRead}
+          onDelete={deleteAction}
+          deletable
+          maxCount={1}
+        /> */}
+
+        <View
+          style={{
+            bottom: `${bottomheight ?? 0}px`,
+            position: "fixed",
+            width: "95%",
+          }}
+        >
           <Button type="primary" block>
             提交
           </Button>

src/pages/home/index.tsx

@@ -23,6 +23,8 @@ import "./index.scss";
 import { Search } from "@antmjs/vantui";
 import ActiveCard from "../components/ActiveCard";
 import { Dialog } from "@antmjs/vantui";
+import { Loading } from '@antmjs/vantui'
+
 
 const Home = () => {
   // const { images } = COMMON
@@ -63,8 +65,36 @@ const Home = () => {
     // getTableid(objParams);
   }, []);
 
+  const uploadTaro=(tempFilePaths:any)=>{
+     
+    // 云开发存储文件 [/自动创建文件路径]
+    Taro.cloud.uploadFile({
+      cloudPath: `images/dev/${new Date()?.getTime()}.png`,
+      filePath: tempFilePaths?.[0], // 文件路径
+      success: (res: any) => {
+        // get resource ID
+        console.log("res", res.fileID);
+
+        //  跳转到目的页面，打开新页面
+        // Taro.navigateTo({
+        //   url: `/pages/home/components/CheckIn/index?fileID=${res?.fileID}`,
+        // });
+
+        // Toast.success({
+        //   message: "打卡成功",
+        //   selector: "#vanToast-demo2",
+        // });
+      },
+      fail: (err: any) => {
+        // handle error
+        console.log("err", err);
+      },
+    });
+  }
+
   return (
     <View className="homeContent">
+      {/* <Loading type="spinner" /> */}
       <View>
         <Dialog
           id="vanDialog3"
@@ -161,30 +191,11 @@ const Home = () => {
                 // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                 let tempFilePaths = res.tempFilePaths;
                 console.log("tempFilePaths===", tempFilePaths);
-
-                // 云开发存储文件 [/自动创建文件路径]
-                Taro.cloud.uploadFile({
-                  cloudPath: `images/dev/${new Date()?.getTime()}.png`,
-                  filePath: tempFilePaths?.[0], // 文件路径
-                  success: (res: any) => {
-                    // get resource ID
-                    console.log("res", res.fileID);
-
-                    //  跳转到目的页面，打开新页面
-                    Taro.navigateTo({
-                      url: `/pages/home/components/CheckIn/index?fileID=${res?.fileID}`,
-                    });
-
-                    // Toast.success({
-                    //   message: "打卡成功",
-                    //   selector: "#vanToast-demo2",
-                    // });
-                  },
-                  fail: (err: any) => {
-                    // handle error
-                    console.log("err", err);
-                  },
+                Taro.navigateTo({
+                  url: `/pages/home/components/CheckIn/index?fileID=${tempFilePaths?.[0]}`,
                 });
+                // uploadTaro(tempFilePaths)
+
               },
             });
           }}