优化组件

components/districtSelector/districtSelector.vue

@@ -1,5 +1,6 @@
 <template>
-  <view>
+  <view class="component">
+    <view class="title">地区信息</view>
     <u--form labelPosition="left" :model="formData" :rules="rules" ref="districtForm">
       <u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom>
         <u--input :value="formDataText.province" disabled disabledColor="#fff" placeholder="请选择省"></u--input>
@@ -231,6 +232,21 @@
   }
 </script>
 
-<style>
+<style lang="scss">
+.component{
+  .title {
+    font-weight: 500;
+    font-size: 34rpx;
   
+    &::before {
+      width: 8rpx;
+      height: 26rpx;
+      border-radius: 4rpx;
+      background-color: #3175f9;
+      content: "";
+      display: inline-block;
+      margin-right: 8rpx;
+    }
+  }
+}
 </style>

components/newArchives/breeding.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="">
-
+    <view class="title">种养殖</view>
     <block v-for="(item, index) in formData">
       <u--form labelPosition="left" :model="item" :rules="rules" ref="breedingForm">
         <u-form-item labelWidth="auto" label="耕地总面积" required prop="cultivated_area" borderBottom>
@@ -252,6 +252,21 @@
 </script>
 
 <style lang="scss">
+  .title {
+    margin-top: 30rpx;
+    font-weight: 500;
+    font-size: 34rpx;
+  
+    &::before {
+      width: 8rpx;
+      height: 26rpx;
+      border-radius: 4rpx;
+      background-color: #3175f9;
+      content: "";
+      display: inline-block;
+      margin-right: 8rpx;
+    }
+  }
   .delete {
     margin: 22rpx 0;
     // margin-bottom: 40rpx;

components/newArchives/productionInputs.vue

@@ -1,22 +0,0 @@
-<template>
-  <view class="">
-    <input type="text" v-model="text">
-  </view>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        text:''
-      }
-    },
-    methods: {
-      
-    },
-  }
-</script>
-
-<style lang="scss">
-
-</style>

components/newArchives/residents.vue

@@ -1,6 +1,7 @@
 <!-- 常住人口 -->
 <template>
   <view class="">
+    <view class="title">常住人口</view>
     <u--form labelPosition="left" :model="residents" :rules="rules" ref="residentsForm">
       <block value="人口">
         <block value="人员信息" v-for="(item, index) in residents.family" :key="'user'+index">
@@ -201,6 +202,21 @@
 </script>
 
 <style lang="scss">
+  .title {
+    margin-top: 30rpx;
+    font-weight: 500;
+    font-size: 34rpx;
+  
+    &::before {
+      width: 8rpx;
+      height: 26rpx;
+      border-radius: 4rpx;
+      background-color: #3175f9;
+      content: "";
+      display: inline-block;
+      margin-right: 8rpx;
+    }
+  }
   .delete {
     margin: 22rpx 0;
     // margin-bottom: 40rpx;

subpkg/newArchives/newArchives.vue

@@ -64,7 +64,7 @@
           <breeding ref="breedingRef"></breeding>
         </view>
       </u--form>
-      <button @click="addArchives" type="primary" class="btn">创建</button>
+      <button @click="addArchives" type="primary" class="btn">完成登记</button>
     </view>
   </view>
 </template>

subpkg/updateArchives/updateArchives.vue

@@ -1,23 +1,232 @@
 <template>
-  <view class=""></view>
+  <view class="">
+    <view class="card">
+      <u--form labelPosition="left" :model="formData" :rules="rules" ref="archives">
+        <view class="item">
+          <view class="title">基本信息</view>
+          <u-form-item labelWidth="auto" label="户主姓名" required prop="name" borderBottom>
+            <u--input v-model="formData.name" placeholder="请输入姓名"></u--input>
+          </u-form-item>
+          <u-form-item label="性别" required prop="sex" borderBottom>
+            <u-radio-group v-model="formData.sex" style="margin: 16rpx;">
+              <u-radio :customStyle="{marginRight: '16px'}"
+                v-for="(item, index) in [{value:1,label:'男'},{value:0,label:'女'}]" :key="index" :label="item.label"
+                :name="item.value">
+              </u-radio>
+            </u-radio-group>
+          </u-form-item>
+          <u-form-item label="年龄" required prop="age" borderBottom>
+            <u--input v-model="formData.age" placeholder="请输入年龄"></u--input>
+          </u-form-item>
+          <u-form-item labelWidth="auto" label="身份证号" required prop="id_card" borderBottom>
+            <u--input v-model="formData.id_card" placeholder="请输入身份证号" type="idcard"></u--input>
+          </u-form-item>
+          <u-form-item labelWidth="auto" label="联系方式" required prop="phone" borderBottom>
+            <u--input v-model="formData.phone" placeholder="请输入手机号" type="number"></u--input>
+          </u-form-item>
+        </view>
+        <view class="item">
+          <districtSelector ref="districtSelectorRef"></districtSelector>
+          <u-form-item labelWidth="auto" label="详细地址" required prop="address" borderBottom>
+            <u--input v-model="formData.address" placeholder="请输入详细地址"></u--input>
+          </u-form-item>
+          <u-form-item labelWidth="auto" label="汽车是否能到家" required prop="highway" borderBottom>
+            <u-radio-group v-model="formData.highway" style="margin: 16rpx;">
+              <u-radio :customStyle="{marginRight: '16px'}"
+                v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
+                :name="item.value">
+              </u-radio>
+            </u-radio-group>
+          </u-form-item>
+          <block value="智能手机">
+            <u-form-item labelWidth="auto" label="是否使用智能手机" required prop="smart_phone" borderBottom>
+              <u-radio-group v-model="formData.smart_phone" style="margin: 16rpx;">
+                <u-radio :customStyle="{marginRight: '16px'}"
+                  v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
+                  :name="item.value">
+                </u-radio>
+              </u-radio-group>
+            </u-form-item>
+            <block v-if="formData.smart_phone>0">
+              <u-form-item labelWidth="auto" label="微信号" required borderBottom>
+                <u--input v-model="formData.wechat" placeholder="请输入微信号"></u--input>
+              </u-form-item>
+            </block>
+          </block>
+        </view>
+        <residents ref="residentsRef"></residents>
+        <!-- <breeding ref="breedingRef"></breeding> -->
+        <store></store>
+      </u--form>
+      <button @click="addArchives" type="primary" class="btn">完成更新</button>
+    </view>
+  </view>
 </template>
 
 <script>
-export default {
+  import { Toast } from "../../libs/uniApi"
-  data() {
+  import { informationAdd } from "@/api/information.js"
-    return {
+  import districtSelector from "@/components/districtSelector/districtSelector.vue" //地区选择器
+  import residents from "@/components/newArchives/residents.vue" // 常住人口
+  import breeding from "@/components/newArchives/breeding.vue" // 种养殖
+  import store from "@/components/newArchives/store.vue" // 开设店铺
+  export default {
+    components:{districtSelector, residents, breeding, store},
+    data() {
+      return {
+        formData: {
+          id_card: '254566198003032255',
+          sex: 0,
+          name: '方法',
+          phone: '18555555555', //电话
+          highway: 1,//汽车是否能到家
+          smart_phone: 1,//是否使用智能手机
+          wechat: '15434535', //微信号
+          address: '十分士大夫但是',//家庭地址
+          age: '23',//年龄
+          category_id: '1',
+          category_child: '2',
+        },
+        rules: {
+          phone: {
+            required: true,
+            pattern: /^(1[3456789]\d{9})$/,
+            message: '请输入正确的手机号码',
+            trigger: ['change', 'blur']
+          },
+          id_card: {
+            required: true,
+            pattern: /^\d{17}[\dX]$|^\d{15}[\dX]$/,
+            message: '请输入正确的身份证号',
+            trigger: ['change', 'blur']
+          },
+          sex: {
+            type: 'number',
+            max: 1,
+            required: true,
+            message: '请选择男或女',
+            trigger: ['blur', 'change']
+          },
+          age: {
+            type: 'number',
+            required: true,
+            message: '请输入年龄',
+            trigger: ['blur', 'change']
+          },
+          name: {
+            type: 'string',
+            required: true,
+            message: '姓名不能为空',
+            trigger: ['change', 'blur']
+          },
+          address: {
+            type: 'string',
+            required: true,
+            message: '地址不能为空',
+            trigger: ['change', 'blur']
+          },
+          highway: {
+            validator: (rule, value, callback )=>{
+              typeof value==='number'?callback():callback('不能为空')
+            },
+            trigger: ['change', 'blur']
+          },
+          smart_phone: {
+            validator: (rule, value, callback )=>{
+              typeof value==='number'?callback():callback('不能为空')
+            },
+            trigger: ['change', 'blur']
+          },
+        },
+      }
+    },
+    onLoad() {},
+    onShow() {},
+    methods: {
+      // 新增档案
+      async addArchives() {
+        return Toast('开发中')
+        let flag1 = this.$refs.districtSelectorRef.validate();
+        let flag2 = this.$refs.residentsRef.validate();
+        let flag3 = this.$refs.breedingRef.validate();
+        this.$refs.archives.validate().then(async (e) => {
+          if (e&&flag1&&flag2&&flag3) {
+            uni.showLoading()
+            let districtForm = {
+              area_id:this.$refs.districtSelectorRef.formData.area,
+              street_id:this.$refs.districtSelectorRef.formData.street,
+              village_id:this.$refs.districtSelectorRef.formData.village,
+              brigade_id:this.$refs.districtSelectorRef.formData.brigade,
+            }
+            let res = await informationAdd({
+              ...this.formData,
+              ...districtForm,
+              ...this.$refs.residentsRef.residents,
+              datas:{
+                ...this.$refs.breedingRef.formData
+              }
+            });
+            uni.hideLoading()
+            uni.showToast({
+              icon: "none",
+              title: "添加成功",
+              success: () => {
+                setTimeout(() => {
+                  uni.navigateBack()
+                }, 1000)
+              }
+            })
+          }
+        })
 
-    }
+      },
-  },
+    },
-  onLoad() {},
+    onPullDownRefresh() {
-  onShow() {},
-  methods: {},
-  onPullDownRefresh() {
       uni.stopPullDownRefresh()
     }
   }
 </script>
 
 <style lang="scss">
+  .card {
+    background-color: #fff;
+    margin: 28rpx;
+    padding: 28rpx;
+    border-radius: 14rpx;
 
+    .item {
+      margin-top: 30rpx;
+
+      &:nth-child(1) {
+        margin-top: 0;
+      }
+
+      .title {
+        font-weight: 500;
+        font-size: 34rpx;
+
+        &::before {
+          width: 8rpx;
+          height: 26rpx;
+          border-radius: 4rpx;
+          background-color: #3175f9;
+          content: "";
+          display: inline-block;
+          margin-right: 8rpx;
+        }
+      }
+    }
+
+    .btn {
+      margin-top: 32rpx;
+      // margin-bottom: 40rpx;
+      width: 100%;
+      height: 84rpx;
+      background: $theme-oa-color;
+      border-radius: 42rpx 42rpx 42rpx 42rpx;
+      color: #fff;
+      line-height: 80rpx;
+      text-align: center;
+    }
+  }
 </style>