添加组件

src/components/col-field/index.module.less

@@ -0,0 +1,14 @@
+.formTitle {
+  font-size: 17px;
+  color: #000;
+  line-height: 24px;
+  &::before {
+    content: '*';
+    color: #FF4E19;
+    font-size: 17px;
+  }
+}
+
+.col-field {
+  margin-bottom: 16px;
+}

src/components/col-field/index.tsx

@@ -0,0 +1,29 @@
+import { Col, Field, Row } from "vant";
+import { defineComponent } from "vue";
+import styles from './index.module.less';
+
+export default defineComponent({
+  name: 'input',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    border: {
+      type: Boolean,
+      default: true
+    }
+  },
+  render() {
+    return (
+      <Row class={styles['col-field']}>
+        <Col span={24} class={styles.formTitle}>
+          {this.title}
+        </Col>
+        <Col span={24} class={this.border ? 'van-hairline--bottom' : null}>
+          {this.$slots.default && this.$slots.default()}
+        </Col>
+      </Row>
+    )
+  }
+})

src/teacher/teacher-cert/cert-one.tsx

@@ -1,8 +1,9 @@
 import { Cell, CellGroup, Col, DatetimePicker, Field, Popup, Row } from "vant"
 import { defineComponent } from "vue";
 import dayjs from "dayjs";
+import ColField from "@/components/col-field";
 import { teacherState } from "./teacherState";
-import styles from './certOne.module.less';
+import styles from './cert-one.module.less';
 
 export default defineComponent({
   name: 'certOne',
@@ -35,7 +36,16 @@ export default defineComponent({
     return (
       <div class={styles.certOne}>
         <CellGroup border={false}>
-          <Row style={{ marginBottom: '16px' }}>
+          <ColField title="真实姓名">
+            <Field
+              v-model={teacherState.teacherCert.username}
+              name="真实姓名"
+              placeholder="请输入您的真实姓名"
+              type="tel"
+              maxlength={11}
+            />
+          </ColField>
+          {/* <Row style={{ marginBottom: '16px' }}>
             <Col span={24} class={styles.formTitle}>真实姓名</Col>
             <Col span={24} class="van-hairline--bottom">
               <Field
@@ -46,7 +56,7 @@ export default defineComponent({
                 maxlength={11}
               />
             </Col>
-          </Row>
+          </Row> */}
           <Row style={{ marginBottom: '16px' }}>
             <Col span={24} class={styles.formTitle}>身份证号</Col>
             <Col span={24} class="van-hairline--bottom">
@@ -62,8 +72,8 @@ export default defineComponent({
           <Row style={{ marginBottom: '16px' }}>
             <Col span={24} class={styles.formTitle}>性别</Col>
             <Col span={24} class={styles.radioGroup}>
-              <div onClick={() => teacherState.teacherCert.sex = 1 } class={[styles.radio, teacherState.teacherCert.sex === 1 ? styles.active : null]}>男</div>
-              <div onClick={() => teacherState.teacherCert.sex = 0 } class={[styles.radio,teacherState.teacherCert.sex === 0 ? styles.active : null]}>女</div>
+              <div onClick={() => teacherState.teacherCert.sex = 1} class={[styles.radio, teacherState.teacherCert.sex === 1 ? styles.active : null]}>男</div>
+              <div onClick={() => teacherState.teacherCert.sex = 0} class={[styles.radio, teacherState.teacherCert.sex === 0 ? styles.active : null]}>女</div>
             </Col>
           </Row>
           <Row>