feats

src/pages/setDogLicense/index.config.js

     "mp-form": "weui-miniprogram/form/form",
     "mp-dialog": "weui-miniprogram/dialog/dialog",
     "mp-toptips": "weui-miniprogram/toptips/toptips",
-    "s-picker": "../../components/s-picker/index"
+    "s-picker": "../../components/s-picker/index",
+    "uploader": "../../components/uploader/index"
   }
 
 }

src/pages/setDogLicense/index.jsx

 import Taro, { useDidShow, useRouter } from '@tarojs/taro';
 import { useState } from 'react';
 import Form from '@/components/Form';
-import FieldLabel from '@/components/Form/FieldLabel';
+import FormItem from '@/components/Form/FormItem';
 import AuthProfile from '@/components/Authorize/AuthProfile';
 import { addDogList, addlication, getDogInfo } from '@/services/dogAPI';
-import { uploadFile } from '@/utils/request';
+import { handleFile } from '@/utils/request';
 import { useModel } from '@/store';
 
 import './style.less'
   const [formData, setFormData] = useState()
 
   const [dogDate, setDogDate] = useState({ immunizationDate: '请选择日期', petBirthday: '请选择生日', petSex: [], petType: [] })
-  const [imgUrl, setImgUrl] = useState({ img1: null, immunizationImg: null })
   const [mainDog, setMainDog] = useState([])
 
-
+  const router = useRouter()
+  const applyType = router.params.type || 'first'
 
   useDidShow(() => {
     addDogList().then((res) => {
       const petType = [{ value: 0, name: e?.petType }];
 
       setDogDate({ ...dogDate, petBirthday: e?.birthday, petSex: sex, petType: petType })
-      setImgUrl({ ...imgUrl, img1: e.image })
       console.log('test', e);
 
     })
   }
 
-
-
   const onDateChange = (type, value) => {
     console.log('dogDate', dogDate);
 
       value: 2,
       text: '自取',
     },
-
   ]
 
-  const addImage = (e) => {
-
-    if (e == 'img1') {
-      Taro.chooseImage({
-        count: 1, // 默认9
-        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
-        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
-        success: function (res) {
-          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
-          var tempFilePaths = res.tempFilePaths
-          uploadFile(tempFilePaths[0]).then((res2) => {
-            console.log("🚀 ~ file: index.jsx ~ line 61 ~ uploadFile ~ res2", res2)
-            setImgUrl({ ...imgUrl, img1: res2 })
-
-
-          })
-        },
-        fail () {
-          Taro.showToast({
-            title: '上传失败请重试',
-            icon: 'error',
-            duration: 1000
-          })
-        }
-      })
-
-    } else {
-      Taro.chooseImage({
-        count: 1, // 默认9
-        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
-        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
-        success: function (res) {
-          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
-          var tempFilePaths = res.tempFilePaths
-          uploadFile(tempFilePaths[0]).then((res2) => {
-            console.log("🚀 ~ file: index.jsx ~ line 61 ~ uploadFile ~ res2", res2)
-            setImgUrl({ ...imgUrl, immunizationImg: res2 })
-
-
-          })
-        },
-        fail () {
-          Taro.showToast({
-            title: '上传失败请重试',
-            icon: 'error',
-            duration: 1000
-          })
-        }
-      })
-    }
-
-
-  }
   // ...dogDate,
   const formSubmit = value => {
-    addlication({ ...value, ...imgUrl, applyType: 'first' }).then((res) => {
+    addlication({ ...value, applyType }).then((res) => {
       console.log('dogInfo xinwe', res);
       Taro.showToast({
         title: '保存成功',
         <Form onSubmit={formSubmit} >
           <mp-form  >
             <mp-cells >
-              <mp-cell title='犬主姓名' extClass=''>
-                <Slot><FieldLabel></FieldLabel> </Slot>
+              <FormItem title='犬主姓名' required>
                 <View >{person?.nickName}</View>
-              </mp-cell>
-              <mp-cell title='狗狗名称' extClass=''>
-                {/* <Input name='petName' placeholder='请输入狗狗名称' /> */}
+              </FormItem>
+              <FormItem title='狗狗名称' required>
                 <s-picker name='petName' rangeKey='name' rangeValue='value' range={mainDog} value={formData?.name} onChange={getMainDogChange} />
-                <View onClick={onDateChange}>log打印</View>
-                {/* <Picker name='petSex' mode='selector' range={selector} onChange={(e) => { onDateChange('petSex', e.detail.value) }}>
-                  <View className='picker'>
-                    {dogDate.petSex}
-                  </View>
-                </Picker> */}
-              </mp-cell>
-              <mp-cell title='狗狗性别' extClass=''>
+              </FormItem>
+              <FormItem title='狗狗性别' required>
                 <s-picker name='petSex' rangeKey='text' rangeValue='value' range={dogDate.petSex} value={formData?.sex} />
-              </mp-cell>
-              <mp-cell title='犬种' extClass=''>
+              </FormItem>
+              <FormItem title='犬种' required>
                 <s-picker name='petType' rangeKey='name' rangeValue='name' range={dogDate.petType} value={formData?.petType} />
-              </mp-cell>
-              <mp-cell title='生日' extClass=''>
+              </FormItem>
+              <FormItem title='生日' required>
                 <Picker name='petBirthday' mode='date' onChange={(e) => { onDateChange('petBirthday', e.detail.value) }}>
                   <View className='picker' style={!formData ? { "color": '#858585' } : {}}>
                     {dogDate.petBirthday}
                   </View>
                 </Picker>
-              </mp-cell>
-              <mp-cell title='毛色' extClass=''>
+              </FormItem>
+              <FormItem title='毛色' required>
                 <Input name='petColor' placeholder='请输入毛色' value={formData?.color} />
-              </mp-cell>
-              <mp-cell title='狗狗照片' extClass=''>
-                {
-                  !imgUrl.img1 ?
-                    <View className='addImage' onClick={() => addImage('img1')} >
-                      <Text>+</Text>
-                    </View>
-                    :
-                    <Image className='dogImg1' name='img1' src={imgUrl.img1} onClick={() => addImage('img1')} />
-                }
-
-              </mp-cell>
-              <mp-cell title='最近免疫日期' extClass=''>
+              </FormItem>
+              <FormItem title='狗狗照片' required>
+                <uploader name='dogImg1' onFile={handleFile} />
+              </FormItem>
+              <FormItem title='最近免疫日期' required>
                 <Picker name='immunizationDate' mode='date' onChange={(e) => { onDateChange('immunizationDate', e.detail.value) }}>
                   <View className='picker' style={!formData ? { "color": '#858585' } : {}}>
                     {dogDate.immunizationDate}
                   </View>
                 </Picker>
-              </mp-cell>
-              <mp-cell title='免疫证号' extClass=''>
+              </FormItem>
+              <FormItem title='免疫证号' required>
                 <Input name='immunizationCode' placeholder='请输入免疫证号' />
-              </mp-cell>
-              <mp-cell title='免疫证明' extClass=''>
-                {
-                  !imgUrl.immunizationImg ?
-                    <View className='addImage' onClick={() => addImage('immunizationImg')} >
-                      <Text>+</Text>
-                    </View>
-                    :
-                    <Image className='dogImg1' name='immunizationImg' src={imgUrl.immunizationImg} onClick={() => addImage('immunizationImg')} />
-                }
-                {/* <Input name='immunizationImg' placeholder='请输入身份证号' type='idcard' /> */}
-              </mp-cell>
-              <mp-cell title='详细地址' extClass=''>
+              </FormItem>
+              <FormItem title='免疫证明' required>
+                <uploader name='immunizationImg' onFile={handleFile} />
+              </FormItem>
+              <FormItem title='详细地址' required>
                 <Input name='address' placeholder='请输入详细地址' />
-              </mp-cell>
-              <mp-cell title='申领方式' extClass=''>
+              </FormItem>
+              <FormItem title='申领方式' extClass=''>
                 <View className='radio-list'>
                   <RadioGroup name='applyMethod'>
                     {modeList.map((item, i) => {
                     })}
                   </RadioGroup>
                 </View>
-              </mp-cell>
+              </FormItem>
 
             </mp-cells>
           </mp-form>