feat: 个人版打卡

2022-11-25 14:21:16 +08:00
parent 8688f5b040
commit fdf1963adc
17 changed files with 460 additions and 376 deletions
--- a/src/pages/home/components/CheckIn/index.tsx
+++ b/src/pages/home/components/CheckIn/index.tsx
@@ -1,237 +1,237 @@
-// import {
-//   Button,
-//   CellGroup,
-//   Dialog,
-//   Field,
-//   Form,
-//   Image,
-//   FormItem,
-//   Icon,
-//   Toast,
-//   Cell,
-//   Tag,
-// } from "@antmjs/vantui";
-// import { Input, View } from "@tarojs/components";
-// 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";
-// import { getparams, getTable, updateTableid } from "../../../../utils/index";
+import {
+  Button,
+  CellGroup,
+  Dialog,
+  Field,
+  Form,
+  Image,
+  FormItem,
+  Icon,
+  Toast,
+  Cell,
+  Tag,
+} from "@antmjs/vantui";
+import { Input, View } from "@tarojs/components";
+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";
+import { getparams, getTable, updateTableid } from "../../../../utils/index";

-// const CheckIn = () => {
-//   const formIt = Form.useForm();
-//   const [bottomheight, setbottomheight] = useState(0);
-//   const [cloudfileID, setcloudfileID] = useState();
-//   const [address, setaddress] = useState(); //地址
-//   const [openid, setopenid] = useState();
-//   const [fileID, setfileID] = useState("");
-//   const [value, setValue] = useState([
-//     // {
-//     //   url: "https://img.yzcdn.cn/vant/leaf.jpg",
-//     //   name: "图片1",
-//     // },
-//     // {
-//     //   url: "https://img.yzcdn.cn/vant/tree.jpg",
-//     // },
-//   ]);
+const CheckIn = () => {
+  const formIt = Form.useForm();
+  const [bottomheight, setbottomheight] = useState(0);
+  const [cloudfileID, setcloudfileID] = useState();
+  const [address, setaddress] = useState(); //地址
+  const [openid, setopenid] = useState();
+  const [fileID, setfileID] = useState("");
+  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 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);
-//   };
+  const deleteAction = (event) => {
+    const { index } = event.detail;
+    const valueNew = JSON.parse(JSON.stringify(value));
+    valueNew.splice(index, 1);
+    setValue(valueNew);
+  };

-//   let newBottom = 0;
+  let newBottom = 0;

-//   useEffect(() => {
-//     const { screenHeight, safeArea = {} } = Taro.getSystemInfoSync();
-//     // @ts-ignore
-//     newBottom = screenHeight - safeArea?.bottom ?? 0;
-//     setbottomheight(newBottom);
-//   }, []);
+  useEffect(() => {
+    const { screenHeight, safeArea = {} } = Taro.getSystemInfoSync();
+    // @ts-ignore
+    newBottom = screenHeight - safeArea?.bottom ?? 0;
+    setbottomheight(newBottom);
+  }, []);

-//   useEffect(() => {
-//     // 设置标题
-//     definePageConfig({
-//       navigationBarTitleText: "打卡签到",
-//     });
-//   }, []);
+  useEffect(() => {
+    // 设置标题
+    definePageConfig({
+      navigationBarTitleText: "打卡签到",
+    });
+  }, []);

-//   useEffect(() => {
-//     let $instance: any = getCurrentInstance();
-//     let fileID: any = $instance?.router?.params?.fileID;
-//     if (fileID) {
-//       setfileID(fileID)
-//       uploadTaro([fileID]);
-//     }
+  useEffect(() => {
+    let $instance: any = getCurrentInstance();
+    let fileID: any = $instance?.router?.params?.fileID;
+    if (fileID) {
+      setfileID(fileID)
+      uploadTaro([fileID]);
+    }

-//     Taro.cloud.callFunction({
-//       name: "getOpenid",
-//       complete: async (res: any) => {
-//         // console.log("callFunction test result: ", res);
-//         let openid = res?.result?.event?.userInfo?.openId;
-//         setopenid(openid);
-//       },
-//     });
-//   }, []);
+    Taro.cloud.callFunction({
+      name: "getOpenid",
+      complete: async (res: any) => {
+        // console.log("callFunction test result: ", res);
+        let openid = res?.result?.event?.userInfo?.openId;
+        setopenid(openid);
+      },
+    });
+  }, []);

-//   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);
-//         setcloudfileID(res?.fileID);
-//       },
-//       fail: (err: any) => {
-//         // handle error
-//         console.log("err", err);
-//       },
-//     });
-//   };
+  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);
+        setcloudfileID(res?.fileID);
+      },
+      fail: (err: any) => {
+        // handle error
+        console.log("err", err);
+      },
+    });
+  };

-//   return (
-//     <View className="CheckIn">
-//       <Form
-//         initialValues={{
-//           //   userName: "我是初始值",
-//           singleSelect: "1",
-//           rate: 2,
-//           slider: "50",
-//         }}
-//         form={formIt}
-//         onFinish={(errs, res) => console.info(errs, res)}
-//       >
-//         {/* 图片 */}
-//         <View>
-//           <Image width="100%" height="300px" fit="cover" src={fileID} />
-//         </View>
+  return (
+    <View className="CheckIn">
+      <Form
+        initialValues={{
+          //   userName: "我是初始值",
+          singleSelect: "1",
+          rate: 2,
+          slider: "50",
+        }}
+        form={formIt}
+        onFinish={(errs, res) => console.info(errs, res)}
+      >
+        {/* 图片 */}
+        <View>
+          <Image width="100%" height="300px" fit="cover" src={fileID} />
+        </View>

-//         {/* 留言 */}
-//         <FormItem
-//           label="留言"
-//           name="remark"
-//           // required
-//           layout="vertical"
-//         >
-//           <Field
-//             // label="留言"
-//             type="textarea"
-//             placeholder="分享你的心情和故事吧~"
-//             autosize={{ minHeight: "100px" }}
-//             border={true}
-//           />
-//         </FormItem>
+        {/* 留言 */}
+        <FormItem
+          label="留言"
+          name="remark"
+          // required
+          layout="vertical"
+        >
+          <Field
+            // label="留言"
+            type="textarea"
+            placeholder="分享你的心情和故事吧~"
+            autosize={{ minHeight: "100px" }}
+            border={true}
+          />
+        </FormItem>

-//         <View>
-//           <Cell
-//             value=""
-//             icon="location"
-//             isLink
-//             onClick={() => {
-//               Taro.chooseLocation({
-//                 success: (res: any) => {
-//                   console.log("res", res);
-//                   const { address } = res;
-//                   setaddress(res?.address);
-//                   // setaddress(res?.name)
+        <View>
+          <Cell
+            value=""
+            icon="location"
+            isLink
+            onClick={() => {
+              Taro.chooseLocation({
+                success: (res: any) => {
+                  console.log("res", res);
+                  const { address } = res;
+                  setaddress(res?.address);
+                  // setaddress(res?.name)

-//                   // address: "广东省深圳市宝安区创业一路1号"
-//                   // errMsg: "chooseLocation:ok"
-//                   // latitude: 22.55329  //纬度
-//                   // longitude: 113.88308  //经度
-//                   // name: "宝安区创业一路(深圳市宝安区人民政府)"
-//                 },
-//               });
-//             }}
-//             renderTitle={
-//               <View>
-//                 <View className="address">{address}</View>
-//               </View>
-//             }
-//           />
-//         </View>
+                  // address: "广东省深圳市宝安区创业一路1号"
+                  // errMsg: "chooseLocation:ok"
+                  // latitude: 22.55329  //纬度
+                  // longitude: 113.88308  //经度
+                  // name: "宝安区创业一路(深圳市宝安区人民政府)"
+                },
+              });
+            }}
+            renderTitle={
+              <View>
+                <View className="address">{address}</View>
+              </View>
+            }
+          />
+        </View>

-//         <View
-//           style={{
-//             bottom: `${bottomheight ?? 0}px`,
-//             position: "fixed",
-//             width: "95%",
-//           }}
-//           onClick={async () => {
-//             // formIt?.submit()
-//             formIt?.validateFields((errorMessage: any, fieldValues: any) => {
-//               console.log("fieldValues---", fieldValues);
+        <View
+          style={{
+            bottom: `${bottomheight ?? 0}px`,
+            position: "fixed",
+            width: "95%",
+          }}
+          onClick={async () => {
+            // formIt?.submit()
+            formIt?.validateFields((errorMessage: any, fieldValues: any) => {
+              console.log("fieldValues---", fieldValues);

-//               // 提交打卡记录
+              // 提交打卡记录

-//               let postData = {
-//                 tableName: "userInfo",
-//                 keyValue: { openId: openid },
-//                 okFun: (res: any) => {
-//                   console.log("提交打卡,res", res);
+              let postData = {
+                tableName: "userInfo",
+                keyValue: { openId: openid },
+                okFun: (res: any) => {
+                  console.log("提交打卡,res", res);

-//                   let newobj = {
-//                     tableName: "userInfo",
-//                     id: res?.data?.[0]?._id,
-//                     objData: {
-//                       checkInArr: [
-//                         ...(res?.data?.[0]?.checkInArr ?? []),
-//                         {
-//                           imageUrl: cloudfileID,
-//                           remark: fieldValues?.remark,
-//                           location: address,
-//                         },
-//                       ],
-//                     },
-//                     okFun: (okFunres: any) => {
-//                       console.log("提交打卡,res", okFunres);
-//                       Toast.success({
-//                         message: "打卡成功",
-//                         selector: "#vanToast-demo2",
-//                         duration: 2000,
-//                         onClose: () => {
-//                           // 跳转到打卡页面
+                  let newobj = {
+                    tableName: "userInfo",
+                    id: res?.data?.[0]?._id,
+                    objData: {
+                      checkInArr: [
+                        ...(res?.data?.[0]?.checkInArr ?? []),
+                        {
+                          imageUrl: cloudfileID,
+                          remark: fieldValues?.remark,
+                          location: address,
+                        },
+                      ],
+                    },
+                    okFun: (okFunres: any) => {
+                      console.log("提交打卡,res", okFunres);
+                      Toast.success({
+                        message: "打卡成功",
+                        selector: "#vanToast-demo2",
+                        duration: 2000,
+                        onClose: () => {
+                          // 跳转到打卡页面

-//                           // 返回首页 [上一页]
-//                           Taro.navigateBack({
-//                             // url: "/pages/home/index",
-//                             delta: 1,
-//                           });
-//                         },
-//                       });
-//                     },
-//                   };
-//                   updateTableid({ ...newobj });
-//                 },
-//               };
+                          // 返回首页 [上一页]
+                          Taro.navigateBack({
+                            // url: "/pages/home/index",
+                            delta: 1,
+                          });
+                        },
+                      });
+                    },
+                  };
+                  updateTableid({ ...newobj });
+                },
+              };

-//               // 查询openid
-//               getTable({ ...postData });
-//             });
-//           }}
-//         >
-//           <Button type="primary" block>
-//             签到打卡
-//           </Button>
-//         </View>
+              // 查询openid
+              getTable({ ...postData });
+            });
+          }}
+        >
+          <Button type="primary" block>
+            签到打卡
+          </Button>
+        </View>

-//         <Dialog id="form-demo3" />
-//         <Toast id="vanToast-demo2" />
-//       </Form>
-//     </View>
-//   );
-// };
+        <Dialog id="form-demo3" />
+        <Toast id="vanToast-demo2" />
+      </Form>
+    </View>
+  );
+};

-// export default CheckIn;
+export default CheckIn;
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -19,7 +19,12 @@ import { NoticeBar } from "@antmjs/vantui";
 import Taro from "@tarojs/taro";
 import { Tabbar, TabbarItem } from "@antmjs/vantui";
 import TabbarCom from "../components/TabbarCom";
-import { getTable, getTableid, phoneLogin } from "../../utils/index";
+import {
+  getTable,
+  getTableid,
+  phoneLogin,
+  updateTableid,
+} from "../../utils/index";
 import { Icon } from "@antmjs/vantui";
 import "./index.scss";
 import { Search } from "@antmjs/vantui";
@@ -41,7 +46,9 @@ const Home = () => {
  // 系统配置
  const [systemConfig, setsystemConfig] = useState<any>({});

-  // const [openid,setopenid]=useState()
+  const [openid,setopenid]=useState()
+  const [isIn,setisIn]=useState(false)
+

  const onChange = (e) => {};

@@ -64,6 +71,17 @@ const Home = () => {
    getdetails(); //获取活动详情
  }, []);

+  useEffect(()=>{
+    Taro.cloud.callFunction({
+      name: "getOpenid",
+      complete: async (res: any) => {
+        console.log("callFunction test result: ", res);
+        let newopenid = res?.result?.event?.userInfo?.openId;
+        setopenid(newopenid)
+      },
+    });
+  },[isIn])
+
  const getdetails = async () => {
    let objParams = {
      tableName: "details",
@@ -88,24 +106,22 @@ const Home = () => {
    await getTable(objParams);
  };

+  // 上传到云存储
  const uploadTaro = (tempFilePaths: any) => {
    // 云开发存储文件 [/自动创建文件路径]
    Taro.cloud.uploadFile({
-      cloudPath: `images/dev/${new Date()?.getTime()}.png`,
+      cloudPath: `images/checkIn/${new Date()?.getTime()}.png`,
      filePath: tempFilePaths?.[0], // 文件路径
      success: (res: any) => {
        // get resource ID
-        console.log("res", res.fileID);
+        console.log("res", res?.fileID);
+        checkIn({imageUrl:res?.fileID})

        //  跳转到目的页面，打开新页面
        // Taro.navigateTo({
        //   url: `/pages/home/components/CheckIn/index?fileID=${res?.fileID}`,
        // });

-        // Toast.success({
-        //   message: "打卡成功",
-        //   selector: "#vanToast-demo2",
-        // });
      },
      fail: (err: any) => {
        // handle error
@@ -128,6 +144,52 @@ const Home = () => {
    // Toast.show(`onCancel`);
  };

+  // 签到
+  const checkIn = async (data:any) => {
+    let postData = {
+      tableName: "userInfo",
+      keyValue: { openId: openid },
+      okFun: (res: any) => {
+        console.log("提交打卡,res", res);
+
+        let newobj = {
+          tableName: "userInfo",
+          id: res?.data?.[0]?._id,
+          objData: {
+            checkInArr: [
+              // ...(res?.data?.[0]?.checkInArr ?? []),
+              {
+                imageUrl: data?.imageUrl,
+                // remark: fieldValues?.remark,
+                // location: address,
+              },
+            ],
+          },
+          okFun: (okFunres: any) => {
+            console.log("提交打卡,res", okFunres);
+            Toast.success({
+              message: "打卡成功",
+              selector: "#vanToast-demo2",
+              duration: 2000,
+              onClose: () => {
+                // 跳转到打卡页面
+
+                // 返回首页 [上一页]
+                // Taro.navigateBack({
+                //   delta: 1,
+                // });
+              },
+            });
+          },
+        };
+        updateTableid({ ...newobj });
+      },
+    };
+
+    // 查询openid
+    getTable({ ...postData });
+  };
+
  // 获取地理位置
  const getLocation = async () => {
    // 获取地理位置
@@ -156,10 +218,11 @@ const Home = () => {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        let tempFilePaths = res.tempFilePaths;
        console.log("tempFilePaths===", tempFilePaths);
-        Taro.navigateTo({
-          url: `/pages/home/components/CheckIn/index?fileID=${tempFilePaths?.[0]}`,
-        });
-        // uploadTaro(tempFilePaths)
+        // 跳转页面
+        // Taro.navigateTo({
+        //   url: `/pages/home/components/CheckIn/index?fileID=${tempFilePaths?.[0]}`,
+        // });
+        uploadTaro(tempFilePaths);
      },
    });
  };
@@ -263,14 +326,15 @@ const Home = () => {

      {/* 模块 */}
      <Grid>
-        {/* <GridItem
+        <GridItem
          icon="star"
          text="打卡"
          className="iconStyle"
-          onClick={async() => {
+          onClick={async () => {
            // getLocation();
-            let isin: any =await phoneLogin();
-            console.log('isin',isin)
+            let isin: any = await phoneLogin();
+            setisIn(true)
+            console.log("isin", isin);
            if (isin) {
              chooseImage();
            } else {
@@ -280,7 +344,7 @@ const Home = () => {
              });
            }
          }}
-        /> */}
+        />
        <GridItem
          icon="like"
          className="iconStyle"
--- a/src/pages/my/index.tsx
+++ b/src/pages/my/index.tsx
@@ -242,7 +242,7 @@ const my = (props: any) => {
      />

      <View className="cellArr">
-        {type !== "people" && (
+        {type !== "people" ||true && (
          <Cell
            icon="manager"
            title="打卡记录"
@@ -269,7 +269,7 @@ const my = (props: any) => {
          <Icon name="wechat" size="16px" className="icon"></Icon>
          {/* <Text>微信客服</Text> */}
          <Button open-type="contact" className="wecahtBtn">
-            微信客服
+            联系我们
          </Button>
        </View>