feats

src/components/Authorize/AuthProfile.jsx

@@ -0,0 +1,22 @@
+import Taro from '@tarojs/taro';
+import { useModel } from '@/store';
+
+// 需要引入 mp-dialog
+export default function (props) {
+  const { person, pets } = useModel('userData')
+
+  const show = !person.phone || !pets || !pets.length
+  const message = !person.phone ? '请先维护个人信息' : '请先维护狗狗信息'
+
+  const handleTap = () => {
+    if (!show) return;
+    const url = !person.phone ? '/pages/setUser/index' : '/pages/setDogInfo/index'
+    Taro.navigateTo({ url })
+  }
+
+  return (
+    <mp-dialog show={show} title='提示' maskClosable={false} buttons={[{ text: '确定' }]} onButtontap={handleTap} >
+      {message}
+    </mp-dialog>
+  )
+}

src/components/Form/FieldLabel.jsx

@@ -0,0 +1,13 @@
+import Taro from '@tarojs/taro';
+import { View, Text } from '@tarojs/components'
+
+export default function (props) {
+  const { required } = props
+
+  return (
+    <View className='weui-label'>
+      {required && <Text style={{ color: 'red' }}>*</Text>}
+      {props.children}
+    </View>
+  )
+}

src/components/Form/index.jsx

@@ -8,21 +8,23 @@ export default function (props) {
   const { onSubmit, onError, rules, ...leftProps } = props
 
   const handleSubmit = (e) => {
+    const formData = Object.assign({}, e.detail.value)
+    console.log('--表单内容--', formData)
     if (!rules) {
       if (onSubmit) {
-        onSubmit(e.detail.value)
+        onSubmit(formData)
       }
       return;
     }
 
     const validator = new Schema(rules);
-    validator.validate(e.detail.value).then(() => {
+    validator.validate(formData).then(() => {
       if (onSubmit) {
-        onSubmit(e.detail.value)
+        onSubmit(formData)
       }
-    }).catch((...args) => {
+    }).catch(({ errors }) => {
       if (onError) {
-        onError(...args)
+        onError(errors)
       }
     })
   }

src/components/s-picker/index.js

@@ -8,7 +8,7 @@ Component({
       type: String
     },
     value: {
-      type: undefined,
+      type: null,
       observer (val) {
         if (val === undefined || val === null) {
           if (this.data.index !== undefined) {

src/components/uploader/index.js

@@ -0,0 +1,47 @@
+Component({
+  behaviors: ['wx://form-field'],
+  options: {
+    addGlobalClass: true,
+  },
+  properties: {
+    name: {
+      type: String
+    },
+    value: {
+      type: null,
+    },
+  },
+  methods: {
+    handleValue (value) {
+      this.setData({ value })
+    },
+    handleUpload() {
+      const next = this.handleValue.bind(this)
+      const emit = this.triggerEvent.bind(this)
+
+      // eslint-disable-next-line no-undef
+      wx.chooseImage({
+        count: 1, // 默认9
+        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
+        success: function (res) {
+          const file = res.tempFiles[0];
+          emit('file', { file, next })
+        },
+        fail (err) {
+          console.error('----上传失败----', err)
+          if (err.errMsg === 'chooseImage:fail cancel') {
+            return;
+          }
+
+          // eslint-disable-next-line no-undef
+          wx.showToast({
+            title: err.errMsg,
+            icon: 'error',
+            duration: 1000
+          })
+        }
+      })
+    }
+  }
+})

src/components/uploader/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

src/components/uploader/index.wxml

@@ -0,0 +1,4 @@
+<view>
+  <view class="uploader-icon" wx:if="{{!value}}" bind:tap="handleUpload">+</view>
+  <image class="uploader-thumb" wx:else src="{{value}}" mode="aspectFit" bind:tap="handleUpload" />
+</view>

src/components/uploader/index.wxss

@@ -0,0 +1,15 @@
+
+.uploader-icon {
+  width: 96rpx;
+  height: 96rpx;
+  border: 1px dashed #858585;
+  line-height: 96rpx;
+  font-size: 48rpx;
+  color: #333;
+  text-align: center;
+}
+
+.uploader-thumb {
+  width: 128rpx;
+  height: 96rpx;
+}

src/pages/setDogLicense/index.jsx

@@ -2,6 +2,7 @@ import { View, Button, Text, RadioGroup, Picker, Image, Input, Radio, Label, Scr
 import Taro, { useDidShow } from '@tarojs/taro';
 import { useState, useEffect } from 'react';
 import Form from '@/components/Form';
+import AuthProfile from '@/components/Authorize/AuthProfile';
 
 import { addDogList, addlication, getDogCardList, getDogInfo } from '../../services/dogAPI';
 import { useModel } from '../../store';
@@ -85,17 +86,6 @@ export default (props) => {
   }
 
   const buttons = [{ text: '确定' }]
-  // const dogSex = [
-  //   {
-  //     value: 1,
-  //     text: '雄',
-  //   },
-  //   {
-  //     value: 2,
-  //     text: '雌',
-  //   },
-
-  // ]
 
   const modeList = [
     {
@@ -176,11 +166,7 @@ export default (props) => {
 
   return (
     <ScrollView scrollY style={{ height: '100vh' }} >
-      <mp-dialog show={showDialog} title='提示' maskClosable={false} buttons={buttons} onButtonTap={handleDialog} >
-        <View>
-          请先添加本人信息或狗狗信息
-        </View>
-      </mp-dialog>
+      <AuthProfile />
       <View class='page' >
         <Form onSubmit={formSubmit} >
           <mp-form  >

src/pages/setUser/index.config.js

@@ -9,7 +9,9 @@ export default {
     "mp-cell": "weui-miniprogram/cell/cell",
     "mp-form-page": "weui-miniprogram/form-page/form-page",
     "mp-form": "weui-miniprogram/form/form",
-    "s-picker": "../../components/s-picker/index"
+    "mp-toptips": "weui-miniprogram/toptips/toptips",
+    "s-picker": "../../components/s-picker/index",
+    "uploader": "../../components/uploader/index"
   }
 
 }

src/pages/setUser/index.jsx

@@ -1,21 +1,31 @@
-import { View, Button, Text, Image, Switch, Input, Radio, Label, ScrollView } from '@tarojs/components'
+import { View, Button, Text, Image, Slot, Input, ScrollView } from '@tarojs/components'
 import Taro from '@tarojs/taro';
 import { useEffect, useState } from 'react';
 import { setPersons } from '@/services/dogAPI';
 import { useModel } from '@/store';
 import { uploadFile } from '@/utils/request';
 import Form from '@/components/Form';
+import FieldLabel from '@/components/Form/FieldLabel';
 
 import './style.less'
 
+const rules = {
+  nickName: [{ required: true, message: '请填写姓名' }],
+  sex: [{ type: 'number', required: true, message: '请选择性别' }],
+  phone: [{ required: true, message: '请填写手机号' }, { len: 11, message: '请输入11位手机号' }],
+  idCard: [{ required: true, message: '请填写身份证号码' }, { len: 18, message: '请输入18位身份证号码' }],
+  cardImg1: [{ required: true, message: '请上传身份证照片' }],
+}
+
 export default (props) => {
+  const [showTopTips, setShowTopTips] = useState(false)
+  const [errorMsg, setErrorMsg] = useState()
   const { setPerson, person, setDogs } = useModel('userData')
   // const [imgUrl, setImgUrl] = useState()
   const [userInfo, setUserInfo] = useState({ cardImg1: null, sex: '请选择性别' })
   useEffect(() => {
     if (person) {
       setUserInfo(person)
-
     }
   }, [person])
 
@@ -31,10 +41,6 @@ export default (props) => {
 
   ]
 
-  const addImage = () => {
-
-
-  }
   const formSubmit = e => {
     const formData = e
     console.log(e)
@@ -55,20 +61,25 @@ export default (props) => {
     })
   }
 
+  const handleError = (errors) => {
+    setErrorMsg(errors[0].message)
+    setShowTopTips(true)
+  }
 
+  const handleFile = (e) => {
+    const { file, next } = e.detail
+    uploadFile(file.path).then(next)
+  }
 
   const handleSetUser = (type, value) => {
     // console.log(e)
-    if (type == 'sex') {
-      setUserInfo({ ...userInfo, sex: userSex[value] })
-      console.log("🚀 ~ file: index.jsx ~ line 38 ~ handleSetUser ~ value", value)
-
-    } else {
+    if (type == 'img') {
       Taro.chooseImage({
         count: 1, // 默认9
         sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
         sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有，在H5浏览器端支持使用 `user` 和 `environment`分别指定为前后摄像头
         success: function (res) {
+          console.log('-------chooseImage----->', res)
           // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
           var tempFilePaths = res.tempFilePaths
           uploadFile(tempFilePaths[0]).then((res2) => {
@@ -89,36 +100,39 @@ export default (props) => {
   }
 
   return (
-    <ScrollView scrollY style={{
-      height: '100vh'
-    }}
-    >
+    <ScrollView scrollY style={{ height: '100vh' }}>
+      <mp-toptips msg={errorMsg} type='error' show={showTopTips} onHide={() => setShowTopTips(false)}></mp-toptips>
       <View class='page' >
-        <Form onSubmit={formSubmit}>
+        <Form rules={rules} onSubmit={formSubmit} onError={handleError}>
           <mp-form>
-            <mp-cells title=' '>
-              <mp-cell title='姓名' extClass=''>
+            <mp-cells>
+              <mp-cell>
+                <Slot name='title'><FieldLabel required>姓名</FieldLabel></Slot>
                 <Input name='nickName' placeholder='请输入姓名' value={person?.nickName} />
               </mp-cell>
-              <mp-cell title='性别' extClass=''>
-                {/* <Input name='sex' placeholder='请输入卡号' /> */}
-                <s-picker name='sex' rangeKey='text' rangeValue='value' range={userSex} value={person?.sex} onChange={(e) => handleSetUser('sex', e.detail.data.value)} />
+              <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 title='手机号' extClass=''>
+              <mp-cell>
+                <Slot name='title'><FieldLabel required>手机号</FieldLabel></Slot>
                 <Input name='phone' type='number' placeholder='请输入手机号' maxlength={11} value={person?.phone} />
               </mp-cell>
-              <mp-cell title='身份证号' extClass=''>
+              <mp-cell>
+                <Slot name='title'><FieldLabel required>身份证号</FieldLabel></Slot>
                 <Input name='idCard' placeholder='请输入身份证号' type='idcard' maxlength={18} value={person?.idCard} />
               </mp-cell>
-              <mp-cell title='身份证图片' extClass=''>
-                {
+              <mp-cell>
+                <Slot name='title'><FieldLabel required>身份证图片</FieldLabel></Slot>
+                <uploader name='cardImg1' value={person?.cardImg1} onFile={handleFile} />
+                {/* {
                   !userInfo.cardImg1 ?
                     <View className='addImage' onClick={(e) => handleSetUser('img', e.detail.value)} >
                       <Text>+</Text>
                     </View>
                     :
                     <Image className='userImg1' name='cardImg1' src={userInfo.cardImg1} onClick={(e) => handleSetUser('img', e.detail.value)} />
-                }
+                } */}
               </mp-cell>
             </mp-cells>
           </mp-form>