feats

.eslintrc

@@ -2,6 +2,8 @@
   "extends": ["taro/react"],
   "rules": {
     "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "jsx-quotes": "off",
+    "no-unused-vars": "warn"
   }
 }

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "./dist",
   "projectname": "myApp",
   "description": "xiaofang",
-  "appid": "touristappid",
+  "appid": "wx1a0fa56e6d0b78b3",
   "setting": {
     "urlCheck": true,
     "es6": false,

src/app.config.js

@@ -5,9 +5,10 @@ export default {
   ],
   window: {
     backgroundTextStyle: 'light',
+    backgroundColor: '#F7F8FA',
     navigationBarBackgroundColor: '#fff',
     navigationBarTitleText: 'WeChat',
-    navigationBarTextStyle: 'black'
+    navigationBarTextStyle: 'black'    
   },
   tabBar: {
     list: [{

src/app.less

@@ -0,0 +1,9 @@
+page {
+  width: 100%;
+  height: 100%;
+  background-color: #F7F8FA;
+}
+
+form {
+  display: block;
+}

src/components/Uploader.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Uploader } from '@antmjs/vantui';
+import upload from '@/services/upload';
+
+export default (props) => {
+
+  const { value, onChange } = props;
+
+  const fileList = React.useMemo(() => {
+    return value ? [{ url: value }] : []
+  }, [value]);
+  
+  const onAfterRead = (e) => {
+    const { file } = e.detail;
+    upload(file.url).then(v => onChange({ detail: v }));
+  }
+
+  const onDelete = () => {
+    onChange({ detail: undefined });
+  }
+
+  return (
+    <Uploader
+      multiple={false}
+      accept="image"
+      fileList={fileList}
+      onAfterRead={onAfterRead}
+      onDelete={onDelete}
+    />
+  )
+}

src/pages/index/index.jsx

@@ -1,13 +1,112 @@
-import { Component } from 'react'
-import { View } from '@tarojs/components'
-import { Button } from '@antmjs/vantui'
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import Uploader from '@/components/Uploader';
+import { Button, Form, FormItem, Radio, RadioGroup, Icon, Field } from '@antmjs/vantui';
+import { saveBind } from '@/services/bind';
+import useRequest from '@/utils/useRequest';
 import './index.less'
 
 export default (props) => {
+  const form = Form.useForm();
+
+  const [loading, request] = useRequest(saveBind);
+
+  const onScan = () => {
+    Taro.scanCode({
+      success: ({ result }) => {
+        form.setFieldsValue('deviceNo', result);
+      },
+      fail: (err) => {
+        console.error(err);
+      }
+    })
+  }
+
+  const onFinish = (errs, values) => {
+    console.log(errs, values);
+    if (!errs) {
+      request(values).then(res => {
+        Taro.switchTab({
+          url: '/pages/mine/index',
+        });
+      });
+    }
+  }
 
   return (
     <View>
-      <Button type="warning">123</Button>
+      <Form className="bind-form" form={form} onFinish={onFinish}>
+        <FormItem
+          required
+          label="设备类型"
+          name="deviceType"
+          validateTrigger="onBlur"
+        >
+          <RadioGroup direction="horizontal">
+            <Radio name="shensong" checkedColor="#07c160">深松</Radio>
+            <Radio name="feifang" checkedColor="#07c160">飞防</Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem
+          required
+          label="设备编号"
+          name="deviceNo"
+          validateTrigger="onBlur"
+          renderRight={<View className='scan-btn' onClick={onScan} ><Icon name="scan" size="18px" /></View>}
+        >
+          <Field placeholder="请输入" clearable />
+        </FormItem>
+        <FormItem
+          required
+          label="农机编号"
+          name="machineryName"
+          validateTrigger="onBlur"
+        >
+          <Field placeholder="请输入" clearable />
+        </FormItem>
+        <FormItem
+          required
+          label="农机图片"
+          name="machineryThumb"
+        >
+          <Uploader />
+        </FormItem>
+        <FormItem
+          required
+          label="归 属 人"
+          name="userName"
+          validateTrigger="onBlur"
+        >
+          <Field placeholder="请输入" clearable />
+        </FormItem>
+        <FormItem
+          required
+          label="手 机 号"
+          name="phone"
+          validateTrigger="onBlur"
+        >
+          <Field placeholder="请输入" clearable />
+        </FormItem>
+        <FormItem
+          required
+          label="身 份 证"
+          name="idCard"
+          validateTrigger="onBlur"
+        >
+          <Field placeholder="请输入" clearable />
+        </FormItem>
+        <View className="submit-wrapper">
+          <Button
+            block
+            type="primary"
+            formType="submit"
+            loading={loading}
+          >
+            提交
+          </Button>
+        </View>
+      </Form>
     </View>
   )
 }

src/pages/index/index.less

@@ -0,0 +1,30 @@
+
+.bind-form {
+  background: #fff;
+  border-radius: 16px;
+  margin: 0 1em;
+  width: calc(100% - 2em);
+  overflow: hidden;
+
+  .scan-btn {
+    padding: 0 24px;
+  }
+
+  .submit-wrapper {
+    padding: 48px;
+  }
+  
+  .vant-form-formItem {
+    border-bottom: 1px solid rgb(235, 237, 240);
+  }
+
+  .van-field {
+    padding: 0;
+  }
+
+  .van-cell {
+    &::after {
+      border: 0;
+    }
+  }
+}

src/services/bind.js

@@ -0,0 +1,3 @@
+import request from "@/utils/request";
+
+export const saveBind = data => request('/tcBind', { method: 'post', data })

src/services/upload.js

@@ -0,0 +1,5 @@
+import { upload } from "@/utils/request";
+
+export default (filePath) => {
+  return upload('/image', filePath);
+}

src/utils/request.js

@@ -19,14 +19,46 @@ import Taro from '@tarojs/taro'
   return arr.filter(Boolean).join('&')
 }
 
+export function upload(url, tempFilePath) {
+  return new Promise((resolve, reject) => {
+    Taro.uploadFile({
+      // eslint-disable-next-line no-undef
+      url: `${HOST}/api/${url}`.replace('api//', 'api/'),
+      filePath: tempFilePath,
+      name: 'file',
+      success: (res) => {
+        const { data, code, message } = JSON.parse(res.data);
+        if (code === 1000) {
+          resolve(data);
+        } else {
+          reject(message);
+          Taro.showToast({
+            title: message,
+            icon: 'none',
+          })
+        }
+      },
+      fail: (err) => {
+        console.error(err);
+        const errMsg = err.message || err.msg || err.errMsg || err;
+        reject(errMsg);
+        Taro.showToast({
+          title: errMsg,
+          icon: 'none',
+        })
+      }
+    });
+  });
+}
+
 
 export default (url, options) => {
-  const { params, skipError, header, ...leftOptions } = options || {}
+  const { params, skipError, header, method = 'GET', ...leftOptions } = options || {}
   const queryStr = getQueryString(params)
 
   const urlWithParams = queryStr ? `${url}?${queryStr}` : url;
   // eslint-disable-next-line no-undef
-  const nwUrl = `${HOST}/api/${urlWithParams}`
+  const nwUrl = `${HOST}/api/${urlWithParams}`.replace('api//', 'api/');
 
   const authToken = Taro.getStorageSync('token')
   const tokenHeader = authToken ? { Authorization: authToken } : {}
@@ -39,6 +71,7 @@ export default (url, options) => {
     Taro.request({
       ...leftOptions,
       url: nwUrl,
+      method,
       header: nwHeader,
       success: (res) => {
         const { code, message, data, token } = res.data
@@ -48,7 +81,15 @@ export default (url, options) => {
         }
 
         if (code === 1000) {
-          resolve(data)
+          resolve(data);
+
+          if (['post', 'put', 'delete'].indexOf(method.toLocaleLowerCase()) > -1) {
+            Taro.showToast({
+              title: '操作成功',
+              icon: 'success',
+              duration: 2000
+            });            
+          }
 
         } else {
           if (!skipError) {
@@ -64,7 +105,7 @@ export default (url, options) => {
       fail: (err) => {
         console.error(err)
 
-        const message = err.message || err.errMsg || err
+        const message = err.message || err.errMsg || err || '服务不存在或异常'
 
         if (!skipError) {
           Taro.showToast({

src/utils/useForceUpdate.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+export function useForceUpdate() {
+  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+
+  return forceUpdate;
+}

src/utils/useRequest.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+export default function useRequest(api) {
+  const [loading, setLoading] = React.useState(false);
+
+  const request = React.useCallback((...args) => {
+    return new Promise((resovle, reject) => {
+      setLoading(true);
+      api(...args).then(res => {
+        setLoading(false);
+        resovle(res);
+      }).catch(er => {
+        reject(er);
+        setLoading(false);
+      })
+    });
+  }, [api]);
+
+  return [loading, request];
+}