feat: 打卡签到

2022-11-20 13:56:15 +08:00
parent ae8396fcce
commit b812ece697
16 changed files with 230 additions and 116 deletions
--- a/src/pages/home/components/CheckIn/index.tsx
+++ b/src/pages/home/components/CheckIn/index.tsx
@@ -0,0 +1,77 @@
+import {
+  Button,
+  CellGroup,
+  Dialog,
+  Field,
+  Form,
+  Image,
+  FormItem,
+  Icon,
+} from "@antmjs/vantui";
+import { Input, View } from "@tarojs/components";
+import React, { useCallback, useEffect } from "react";
+import './index.scss'
+
+const CheckIn = () => {
+  const formIt = Form.useForm();
+  useEffect(() => {
+    // 设置标题
+    definePageConfig({
+      navigationBarTitleText: "打卡签到",
+    });
+  }, []);
+
+  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="180px"
+            fit="cover"
+            src="https://img.yzcdn.cn/vant/cat.jpeg"
+          />
+        </View>
+        <FormItem
+          label="留言"
+          name="userName"
+          required
+          layout='vertical'
+          //   rules={{
+          //     rule: /[\u4e00-\u9fa5]/,
+          //     message: '用户名仅支持中文',
+          //   }}
+          trigger="onInput"
+          validateTrigger="onBlur"
+          // taro的input的onInput事件返回对应表单的最终值为e.detail.value
+          valueFormat={(e) => e.detail.value}
+          //   renderRight={<Icon name="user-o" />}
+        >
+          <Field
+            //   label="留言"
+            type="textarea"
+            placeholder="请输入留言"
+            autosize={{ minHeight: "30px" }}
+            border={false}
+          />
+        </FormItem>
+
+        <Button type="primary" block>
+          提交
+        </Button>
+        <Dialog id="form-demo3" />
+      </Form>
+    </View>
+  );
+};
+
+export default CheckIn;