优化组件

This commit is contained in:
weipengfei 2023-07-29 15:10:05 +08:00
parent 778510b9a7
commit cc6e201c0f
6 changed files with 273 additions and 39 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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>

View File

@ -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;

View File

@ -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>

View File

@ -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 {
data() {
return {
}
},
onLoad() {},
onShow() {},
methods: {},
onPullDownRefresh() {
import { Toast } from "../../libs/uniApi"
import { informationAdd } from "@/api/information.js"
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)
}
})
}
})
},
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss">
.card {
background-color: #fff;
margin: 28rpx;
padding: 28rpx;
border-radius: 14rpx;
</style>
.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>