add functionclass

src/pages/main/index.jsx

@@ -29,8 +29,9 @@ export default (props) => {
           <View>文明养狗，遵纪守法</View>
         </View>
         <View className='user-box-Card-right' onClick={goSetUser}>
-          <ViewIcon icon='bianji' size={19} color='#2f2f2f' />
-
+          <View style={{ paddingRight: '5px' }}>
+            <ViewIcon icon='bianji' size={19} color='#2f2f2f' />
+          </View>
           修改信息
         </View>
       </View>
@@ -48,6 +49,3 @@ export default (props) => {
   )
 }
 
-
-
-

src/pages/setDogInfo/index.jsx

@@ -193,8 +193,6 @@ export default (props) => {
                 </View>
               </mp-cell>
 
-
-
             </mp-cells>
           </mp-form>
           <View slot='button' style={{ margin: '4em 0 2em 0' }}>

src/pages/setUser/index.jsx

@@ -1,86 +1,120 @@
 import { View, Button, Form, Text, Image, Picker, Switch, Input, Radio, Label, ScrollView } from '@tarojs/components'
 import Taro from '@tarojs/taro';
 import { useState } from 'react';
+import { setPerson } from '../../services/dogAPI';
 
 import './style.less'
 
 export default (props) => {
-  const [imgUrl, setImgUrl] = useState()
+  // const [imgUrl, setImgUrl] = useState()
+  const [userInfo, setUserInfo] = useState({ cardImg1: null, sex: '请选择性别' })
+
+  const userSex = [
+    {
+      value: 1,
+      text: '男',
+    },
+    {
+      value: 2,
+      text: '女',
+    },
+
+  ]
 
   const addImage = () => {
-    Taro.chooseImage({
-      count: 1, // 默认9
-      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
-      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
-      success: function (res) {
-        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
-        var tempFilePaths = res.tempFilePaths
-        setImgUrl(tempFilePaths)
-      },
-      fail () {
-        Taro.showToast({
-          title: '上传失败请重试',
-          icon: 'error',
-          duration: 1000
-        })
-      }
-    })
+
 
   }
   const formSubmit = e => {
     console.log(e)
+    const value = e.detail.value
+    Taro.showToast({
+      title: '保存成功',
+      icon: 'none',
+      duration: 1000
+    })
+    Taro.navigateBack({
+      delta: 1
+    })
+    // setPerson({ ...value, ...userInfo }).then((e) => {
+    //   console.log('e', e);
+
+    // })
   }
 
-  const formReset = e => {
-    console.log(e)
+
+  const handleSetUser = (type, value) => {
+    console.log("🚀 ~ file: index.jsx ~ line 38 ~ handleSetUser ~ value", value)
+    // console.log(e)
+    if (type == 'sex') {
+      if (value == 0) {
+        setUserInfo({ ...userInfo, sex: 1 })
+
+      } else {
+        setUserInfo({ ...userInfo, sex: 2 })
+      }
+    } 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
+          setUserInfo({ ...userInfo, cardImg1: tempFilePaths[0] })
+        },
+        fail () {
+          Taro.showToast({
+            title: '上传失败请重试',
+            icon: 'error',
+            duration: 1000
+          })
+        }
+      })
+    }
   }
-  const rules = [
-    {
-      name: 'name',
-      rules: { required: true, message: '请填写收货人姓名' },
-    },
-    {
-      name: 'telNumber',
-      rules: [{ required: true, message: '请填写收货人电话' }, { mobile: true, message: '电话格式不对' }]
-    },
-  ]
+
   return (
     <ScrollView scrollY style={{
       height: '100vh'
     }}
     >
       <View class='page' >
-        <Form onSubmit={formSubmit} onReset={formReset} >
-
-          <mp-form rules={rules} >
-            <mp-cells title='我是提示信息'>
+        <Form onSubmit={formSubmit}  >
+          <mp-form  >
+            <mp-cells title=' '>
               <mp-cell title='姓名' extClass=''>
-                <Input name='nickName' placeholder='请输入卡号' />
+                <Input name='nickName' placeholder='请输入姓名' />
               </mp-cell>
               <mp-cell title='性别' extClass=''>
-                <Input name='sex' placeholder='请输入卡号' />
+                {/* <Input name='sex' placeholder='请输入卡号' /> */}
+                <Picker name='sex' mode='selector' range={userSex} rangeKey='text' onChange={(e) => { handleSetUser('sex', e.detail.value - 0) }}>
+                  <View className='picker'>
+                    {userInfo.sex == 1 ? '男' : userInfo.sex == 2 ? '女' : userInfo.sex}
+                  </View>
+                </Picker>
               </mp-cell>
               <mp-cell title='手机号' extClass=''>
-                <Input name='phone' type='number' placeholder='请输入宠养区域' />
+                <Input name='phone' type='number' placeholder='请输入手机号' maxlength={11} />
               </mp-cell>
               <mp-cell title='身份证号' extClass=''>
-                <Input name='idCard' placeholder='请输入身份证号' type='idcard' />
+                <Input name='idCard' placeholder='请输入身份证号' type='idcard' maxlength={18} />
               </mp-cell>
               <mp-cell title='身份证图片' extClass=''>
                 {
-                  !imgUrl ?
-                    <View className='addImage' onClick={addImage} >
+                  !userInfo.cardImg1 ?
+                    <View className='addImage' onClick={(e) => handleSetUser('img', e.detail.value)} >
                       <Text>+</Text>
                     </View>
                     :
-                    <Image className='userImg1' name='cardImg1' src={imgUrl} onClick={addImage} />
+                    <Image className='userImg1' name='cardImg1' src={userInfo.cardImg1} onClick={(e) => handleSetUser('img', e.detail.value)} />
                 }
               </mp-cell>
 
             </mp-cells>
           </mp-form>
           <View slot='button' style={{ margin: '4em 0 2em 0' }}>
-            <Button type='primary' loading={false} formType='submit'>确定 Loading</Button>
+            <Button class='weui-btn' type='primary' loading={false} formType='submit'>确定</Button>
           </View>
         </Form>
       </View>

src/services/dogAPI.js

@@ -10,6 +10,15 @@ import request from '../utils/request'
  */
 export const login = (data) => request('/login', { data, method: 'POST' })
 
+/**
+ * 人员信息
+ * @param {*} data
+ * @returns
+ */
+export const setPerson = (data) => request('/person', { data, method: 'PUT' })
+
+
+
 /**
  * 狗狗信息维护
  * @param {*} data