feat: 实名认证页面

src/app.config.ts

@@ -3,6 +3,7 @@ export default {
     // "pages/index/index",
     "pages/home/index",
     "pages/home/components/CheckIn/index",
+    "pages/home/components/Certified/index", //认证
     "pages/activityList/index",
     "pages/formSubmit/index",
     "pages/activityList/components/details/index",

src/pages/home/components/Certified/index.scss

@@ -0,0 +1,44 @@
+.Certified {
+  padding: 20px;
+  .info {
+    padding-top: 20px;
+    width: 100%;
+    height: 300px;
+    background-color: #73d13d;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .icon {
+    //   font-size: 50px;
+    color: #ffffff;
+    }
+    .infoText{
+        padding: 50px;
+        color: #ffffff;
+    }
+  }
+
+  .myImage{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .text{
+      padding: 50px;
+        color: #8c8c8c;
+    }
+  }
+
+  .submitBtn{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .checkItem{
+    padding: 50px;
+    font-size: 24px;
+  }
+}

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

@@ -0,0 +1,100 @@
+import { Button, Checkbox, Form, FormItem, Icon, Image } from "@antmjs/vantui";
+import { Input, View, Text } from "@tarojs/components";
+import react from "react";
+import "./index.scss";
+
+const Certified = () => {
+  const formIt = Form.useForm();
+  const [state, setState] = react.useState({});
+  const [value, setValue] = react.useState(true);
+  return (
+    <View className="Certified">
+      <Form
+        initialValues={{
+          userName: "",
+          singleSelect: "1",
+          rate: 2,
+          slider: "50",
+        }}
+        form={formIt}
+        onFinish={(errs, res) => console.info(errs, res)}
+      >
+        {/* 说明 */}
+        <View className="info">
+          <View>
+            <Icon name="checked" size="50px" className="icon"></Icon>
+          </View>
+          <View className="infoText">
+            官方鼓励真是,真诚的交友方式,进行实名认证后,才会享受参与实名用户组队参与活动的权益
+          </View>
+        </View>
+
+        <FormItem
+          label="姓名"
+          name="userName"
+          required
+          rules={{
+            // @ts-ignore
+            rule: /[\u4e00-\u9fa5]/,
+            message: "用户名仅支持中文",
+          }}
+          trigger="onInput"
+          validateTrigger="onBlur"
+          // taro的input的onInput事件返回对应表单的最终值为e.detail.value
+          valueFormat={(e) => e.detail.value}
+          //   renderRight={<Icon name="user-o" />}
+        >
+          <Input placeholder="请输入用户名（中文）" />
+        </FormItem>
+
+        <FormItem
+          label="证件号"
+          name="cardId"
+          required
+          valueFormat={(e) => e.detail.value}
+          rules={[]}
+          trigger="onInput"
+        >
+          <Input placeholder={``} />
+        </FormItem>
+
+        <View className={`myImage`}>
+          <Image
+            round
+            width="100px"
+            height="100px"
+            src="cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/images/images-2.jpg"
+          />
+          <View className="text">
+            你的头像,姓名,身份证号,将用于公安那系统校验,校验成功后即可认证成功.身份证信息仅供本次认证使用,本程序将严格保密
+          </View>
+        </View>
+
+        <View className="submitBtn">
+          <Button style={{width:'200px'}} type="primary" round>确认授权</Button>
+        </View>
+
+        {/* <FormItem
+          label={false}
+          name="cardId"
+          required
+          valueFormat={(e) => e.detail.value}
+          rules={[]}
+          trigger="onInput"
+        >
+          <Checkbox value={value} onChange={(e:any) => setValue(e.detail)}>
+            {`已阅读并同意<<腾讯云E证通服务使用协议>>和<<eID数字身份小程序服务协议>>`}
+          </Checkbox>
+        </FormItem> */}
+
+        <View className="checkItem">
+          <Checkbox value={value} onChange={(e: any) => setValue(e.detail)}>
+            {`已阅读并同意<<腾讯云E证通服务使用协议>>和<<eID数字身份小程序服务协议>>`}
+          </Checkbox>
+        </View>
+      </Form>
+    </View>
+  );
+};
+
+export default Certified;

src/pages/home/index.tsx

@@ -10,7 +10,7 @@ import {
   Toast,
 } from "@antmjs/vantui";
 import { Input, View } from "@tarojs/components";
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Swiper, SwiperItem, Image } from "@antmjs/vantui";
 import react from "react";
 import { NoticeBar } from "@antmjs/vantui";
@@ -23,8 +23,7 @@ import "./index.scss";
 import { Search } from "@antmjs/vantui";
 import ActiveCard from "../components/ActiveCard";
 import { Dialog } from "@antmjs/vantui";
-import { Loading } from '@antmjs/vantui'
-
+import { Loading } from "@antmjs/vantui";
 
 const Home = () => {
   // const { images } = COMMON
@@ -34,6 +33,8 @@ const Home = () => {
   const [show, setShow] = react.useState(false);
   const [value, setValue] = react.useState("");
 
+  const [SearchValue, setSearchValue] = useState("");
+
   const onChange = (e) => {};
   const images = [
     "cloud://cloud1-5g5xrgza12a0dd6d.636c-cloud1-5g5xrgza12a0dd6d-1253665791/download.jpg",
@@ -65,8 +66,7 @@ const Home = () => {
     // getTableid(objParams);
   }, []);
 
-  const uploadTaro=(tempFilePaths:any)=>{
-     
+  const uploadTaro = (tempFilePaths: any) => {
     // 云开发存储文件 [/自动创建文件路径]
     Taro.cloud.uploadFile({
       cloudPath: `images/dev/${new Date()?.getTime()}.png`,
@@ -90,7 +90,21 @@ const Home = () => {
         console.log("err", err);
       },
     });
-  }
+  };
+  const onSearch = (e: any) => {
+    console.log("e---", e);
+    // Toast.show(`search: ${e.detail}`);
+    // setSearchValue(e?.detail);
+    setSearchValue("");
+
+    // 跳转到目的页面，打开新页面
+    Taro.navigateTo({
+      url: "/pages/activityList/index",
+    });
+  };
+  const onCancel = (e: any) => {
+    // Toast.show(`onCancel`);
+  };
 
   return (
     <View className="homeContent">
@@ -134,7 +148,10 @@ const Home = () => {
       </View>
 
       {/* 通知条 */}
-      <NoticeBar leftIcon="volume-o" text="疫情期间,请留意各个景区的开放时间" />
+      <NoticeBar
+        leftIcon="volume-o"
+        text="疫情期间,请留意各个景区的开放状态以及时间"
+      />
       {/* 顶部 */}
       {/* <View>
         <Row>
@@ -150,8 +167,17 @@ const Home = () => {
             深圳
           </Tag>
         </View>
+
+        {/* 搜索框 */}
         <View>
-          <Search placeholder="请输入搜索关键词" style={{ width: "320px" }} />
+          <Search
+            value={SearchValue}
+            onChange={(e) => setSearchValue(e.detail)}
+            placeholder="请输入搜索关键词"
+            style={{ width: "320px" }}
+            onSearch={onSearch}
+            // onCancel={onCancel}
+          />
         </View>
       </View>
 
@@ -195,7 +221,6 @@ const Home = () => {
                   url: `/pages/home/components/CheckIn/index?fileID=${tempFilePaths?.[0]}`,
                 });
                 // uploadTaro(tempFilePaths)
-
               },
             });
           }}
@@ -223,7 +248,7 @@ const Home = () => {
           }}
         />
 
-        <GridItem
+        {/* <GridItem
           icon="manager"
           className="iconStyle"
           text="组队"
@@ -233,6 +258,18 @@ const Home = () => {
               url: "/pages/formSubmit/index",
             });
           }}
+        /> */}
+
+        <GridItem
+          icon="manager"
+          className="iconStyle"
+          text="认证"
+          onClick={() => {
+            // 跳转到目的页面，打开新页面
+            Taro.navigateTo({
+              url: "/pages/home/components/Certified/index",
+            });
+          }}
         />
       </Grid>