feats

src/components/Form/FormItem.jsx

@@ -0,0 +1,13 @@
+import { Slot } from '@tarojs/components';
+import FieldLabel from './FieldLabel'
+
+export default function (props) {
+  const { title, required = false } = props
+
+  return (
+    <mp-cell>
+      <Slot name='title'><FieldLabel required={required}>{title}</FieldLabel></Slot>
+      {props.children}
+    </mp-cell>
+  )
+}

src/pages/setDogInfo/index.jsx

@@ -1,8 +1,8 @@
-import { View, Button, Slot, Picker, Input, ScrollView } from '@tarojs/components'
+import { View, Button, Picker, Input, ScrollView } from '@tarojs/components'
 import Taro, { useRouter } from '@tarojs/taro';
 import { useState, useEffect } from 'react';
 import Form from '@/components/Form';
-import FieldLabel from '@/components/Form/FieldLabel'
+import FormItem from '@/components/Form/FormItem'
 import { addDogInfo, getDogInfo, getDogType, setDogInfo } from '@/services/dogAPI';
 import { useModel } from '@/store'
 import { handleFile } from '@/utils/request';
@@ -19,7 +19,6 @@ const rules = {
 
 export default (props) => {
   const {dogs, setDogs} = useModel('userData')
-  const [dogDate, setDogDate] = useState({ birthday: '请选择生日', sex: '请选择性别', petType: '请选择犬种' })
   const [dogType, setDogType] = useState([])
   const [formData, setFormData] = useState()
 
@@ -35,7 +34,6 @@ export default (props) => {
     if (petId) {
       getDogInfo(petId).then((e) => {
         setFormData(e)
-        setDogDate(e)
       })
     }
     return;
@@ -97,41 +95,31 @@ export default (props) => {
     <ScrollView scrollY style={{ height: '100vh' }}>
       <View class='page' >
         <Form rules={rules} onSubmit={formSubmit}>
-          <mp-form>
-            <mp-cells>
-              <mp-cell>
-                <Slot name='title'><FieldLabel required>狗狗名称</FieldLabel></Slot>
-                <Input name='name' value={formData?.name} placeholder='请输入狗狗名称' />
-              </mp-cell>
-              <mp-cell>
-                <Slot name='title'><FieldLabel required>狗狗性别</FieldLabel></Slot>
-                <s-picker name='sex' rangeKey='text' rangeValue='value' range={dogSex} value={formData?.sex} />
-              </mp-cell>
-              <mp-cell>
-                <Slot name='title'><FieldLabel required>犬种</FieldLabel></Slot>
-                <s-picker name='petType' rangeKey='text' rangeValue='value' range={dogType} value={formData?.petType} />
-              </mp-cell>
-              <mp-cell>
-                <Slot name='title'><FieldLabel required>生日</FieldLabel></Slot>
-                <Picker name='birthday' mode='date' onChange={handleBirthday}>
-                  { formData?.birthday ? (
-                    <View className='picker'>
-                      {formData?.birthday }
-                    </View>
-                    ) : <View style={{ color: '#858585' }}>请选择...</View>
-                  }
-                </Picker>
-              </mp-cell>
-              <mp-cell>
-                <Slot name='title'><FieldLabel required>毛色</FieldLabel></Slot>
-                <Input name='color' placeholder='请输入毛色' value={formData?.color} />
-              </mp-cell>
-              <mp-cell>
-                <Slot name='title'><FieldLabel required>狗狗照片</FieldLabel></Slot>
-                <uploader name='image' value={formData?.image} onFile={handleFile} />
-              </mp-cell>
-            </mp-cells>
-          </mp-form>
+          <FormItem title='狗狗名称' required>
+            <Input name='name' value={formData?.name} placeholder='请输入狗狗名称' />
+          </FormItem>
+          <FormItem title='狗狗性别' required>
+            <s-picker name='sex' rangeKey='text' rangeValue='value' range={dogSex} value={formData?.sex} />
+          </FormItem>
+          <FormItem title='犬种' required>
+            <s-picker name='petType' rangeKey='text' rangeValue='value' range={dogType} value={formData?.petType} />
+          </FormItem>
+          <FormItem title='生日' required>
+            <Picker name='birthday' mode='date' onChange={handleBirthday}>
+              { formData?.birthday ? (
+                <View className='picker'>
+                  {formData?.birthday }
+                </View>
+                ) : <View style={{ color: '#858585' }}>请选择...</View>
+              }
+            </Picker>
+          </FormItem>
+          <FormItem title='毛色' required>
+            <Input name='color' placeholder='请输入毛色' value={formData?.color} />
+          </FormItem>
+          <FormItem title='狗狗照片' required>
+            <uploader name='image' value={formData?.image} onFile={handleFile} />
+          </FormItem>
           <View slot='button' style={{ margin: '4em 0 2em 0' }}>
             <Button style={{ backgroundColor: '#fbd804', borderRadius: '40px', color: '#000', border: '0px' }} class='weui-btn' type='primary' loading={false} formType='submit'>确定</Button>
           </View>

src/pages/setDogLicense/index.config.js

@@ -10,8 +10,8 @@ export default {
     "mp-form-page": "weui-miniprogram/form-page/form-page",
     "mp-form": "weui-miniprogram/form/form",
     "mp-dialog": "weui-miniprogram/dialog/dialog",
+    "mp-toptips": "weui-miniprogram/toptips/toptips",
     "s-picker": "../../components/s-picker/index"
-
   }
 
 }

src/pages/setDogLicense/index.jsx

@@ -1,14 +1,14 @@
-import { View, Button, Text, RadioGroup, Picker, Image, Input, Radio, Label, ScrollView } from '@tarojs/components'
-import Taro, { useDidShow } from '@tarojs/taro';
+import { View, Button, Text, RadioGroup, Picker, Image, Input, Radio, Label, ScrollView, Slot } from '@tarojs/components'
+import Taro, { useDidShow, useRouter } from '@tarojs/taro';
 import { useState } from 'react';
 import Form from '@/components/Form';
+import FieldLabel from '@/components/Form/FieldLabel';
 import AuthProfile from '@/components/Authorize/AuthProfile';
-
-import { addDogList, addlication, getDogInfo } from '../../services/dogAPI';
-import { useModel } from '../../store';
+import { addDogList, addlication, getDogInfo } from '@/services/dogAPI';
+import { uploadFile } from '@/utils/request';
+import { useModel } from '@/store';
 
 import './style.less'
-import { uploadFile } from '../../utils/request';
 
 export default (props) => {
   const { dogs, person } = useModel('userData')
@@ -17,6 +17,9 @@ export default (props) => {
   const [dogDate, setDogDate] = useState({ immunizationDate: '请选择日期', petBirthday: '请选择生日', petSex: [], petType: [] })
   const [imgUrl, setImgUrl] = useState({ img1: null, immunizationImg: null })
   const [mainDog, setMainDog] = useState([])
+
+
+
   useDidShow(() => {
     addDogList().then((res) => {
       setMainDog(res.records)
@@ -152,6 +155,7 @@ export default (props) => {
           <mp-form  >
             <mp-cells >
               <mp-cell title='犬主姓名' extClass=''>
+                <Slot><FieldLabel></FieldLabel> </Slot>
                 <View >{person?.nickName}</View>
               </mp-cell>
               <mp-cell title='狗狗名称' extClass=''>

src/pages/setUser/index.jsx

@@ -5,7 +5,7 @@ import { setPersons } from '@/services/dogAPI';
 import { useModel } from '@/store';
 import { handleFile } from '@/utils/request';
 import Form from '@/components/Form';
-import FieldLabel from '@/components/Form/FieldLabel';
+import FormItem from '@/components/Form/FormItem'
 
 import './style.less'
 
@@ -63,30 +63,21 @@ export default (props) => {
     <ScrollView scrollY style={{ height: '100vh' }}>
       <View class='page' >
         <Form rules={rules} onSubmit={formSubmit}>
-          <mp-form>
-            <mp-cells>
-              <mp-cell>
-                <Slot name='title'><FieldLabel required>姓名</FieldLabel></Slot>
-                <Input name='nickName' placeholder='请输入姓名' value={person?.nickName} />
-              </mp-cell>
-              <mp-cell>
-                <Slot name='title'><FieldLabel required>性别</FieldLabel></Slot>
-                <s-picker name='sex' rangeKey='text' rangeValue='value' range={userSex} value={person?.sex} />
-              </mp-cell>
-              <mp-cell>
-                <Slot name='title'><FieldLabel required>手机号</FieldLabel></Slot>
-                <Input name='phone' type='number' placeholder='请输入手机号' maxlength={11} value={person?.phone} />
-              </mp-cell>
-              <mp-cell>
-                <Slot name='title'><FieldLabel required>身份证号</FieldLabel></Slot>
-                <Input name='idCard' placeholder='请输入身份证号' type='idcard' maxlength={18} value={person?.idCard} />
-              </mp-cell>
-              <mp-cell>
-                <Slot name='title'><FieldLabel required>身份证图片</FieldLabel></Slot>
-                <uploader name='cardImg1' value={person?.cardImg1} onFile={handleFile} />
-              </mp-cell>
-            </mp-cells>
-          </mp-form>
+          <FormItem title='姓名' required>
+            <Input name='nickName' placeholder='请输入姓名' value={person?.nickName} />
+          </FormItem>
+          <FormItem title='性别' required>
+            <s-picker name='sex' rangeKey='text' rangeValue='value' range={userSex} value={person?.sex} />
+          </FormItem>
+          <FormItem title='手机号' required>
+            <Input name='phone' type='number' placeholder='请输入手机号' maxlength={11} value={person?.phone} />
+          </FormItem>
+          <FormItem title='身份证号' required>
+            <Input name='idCard' placeholder='请输入身份证号' type='idcard' maxlength={18} value={person?.idCard} />
+          </FormItem>
+          <FormItem title='身份证图片' required>
+            <uploader name='cardImg1' value={person?.cardImg1} onFile={handleFile} />
+          </FormItem>
           <View style={{ margin: '4em 0 2em 0' }}>
             <Button style={{ backgroundColor: '#fbd804', borderRadius: '40px', color: '#000', border: '0px' }} class='weui-btn' type='primary' loading={false} formType='submit'>确定</Button>
           </View>