TraceabilityAPP/pages/addLand/addLand1.vue

504 lines
12 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content">
<view class="card">
<u--form labelPosition="top" labelWidth='100' :model="formData" :rules="rules" ref="form">
<u-form-item label="土地名称" prop="formData.title" borderBottom ref='item1' required>
<up-input placeholder="请输入土地名称" border="surround" v-model="formData.title"></up-input>
</u-form-item>
<u-form-item label="土地面积" prop="formData.area" borderBottom required>
<up-input placeholder="请输入土地面积" border="surround" v-model="formData.area"></up-input>
</u-form-item>
<u-form-item label="所在省份" prop="formData.province_code" borderBottom required>
<up-input placeholder="请选择所在省份" border="surround" v-model="province_name" disabled="true"
@click="isshow1"></up-input>
</u-form-item>
<u-form-item label="所在城市" prop="formData.city_code" borderBottom required>
<up-input placeholder="请选择所在城市" border="surround" v-model="city_name" @click="isshow2"
disabled="true"></up-input>
</u-form-item>
<u-form-item label="所在区县" prop="formData.county_code" borderBottom required>
<up-input placeholder="请选择所在区县" border="surround" v-model="county_name" @click="isshow3"
disabled="true"></up-input>
</u-form-item>
<u-form-item label="所在镇街" prop="formData.town_code" borderBottom required>
<up-input placeholder="请选择所在镇街" border="surround" v-model="town_name" @click="isshow4"
disabled="true"></up-input>
</u-form-item>
<u-form-item label="所在乡村" prop="formData.village_code" borderBottom required>
<up-input placeholder="请选择所在乡村" border="surround" v-model="village_name" @click="isshow5"
disabled="true"></up-input>
</u-form-item>
<u-form-item label="所在小队" prop="formData.group_code" borderBottom required>
<up-input placeholder="请选择所在小队" border="surround" v-model="group_name" @click="isshow6"
disabled="true"></up-input>
</u-form-item>
<u-form-item label="土地负责人" prop="formData.master_name" borderBottom required>
<up-input placeholder="请输入土地负责人" border="surround" v-model="formData.master_name"></up-input>
</u-form-item>
<u-form-item label="负责人电话" prop="formData.master_phone" borderBottom required>
<up-input placeholder="请输入负责人电话" type="number" border="surround"
v-model="formData.master_phone"></up-input>
</u-form-item>
<view class="card-li">
<view class="card-li-tit">
土地图片
</view>
<view class="code-img">
<view class="" @click="updateImgFn">
<view class="" v-if="formData.pic">
<u-image :src="formData.buy_cert" width="637.85rpx" height="350.47rpx"></u-image>
</view>
<view class="carime-icon" v-else>
<u-image src="/static/img/DJSC.png" width="91.12rpx" height="91.12rpx"></u-image>
<view class="">
点击上传图片
</view>
</view>
</view>
</view>
</view>
</u--form>
</view>
<u-action-sheet :show="show" keyName="name" closeOnClickOverlay :actions="columns" title="请选择"
@close="show = false" @select="leavaType1">
</u-action-sheet>
<u-action-sheet :show="show1" keyName="name" :actions="columns1" title="请选择" @close="show1 = false"
@select="leavaType2">
</u-action-sheet>
<u-action-sheet :show="show2" keyName="name" :actions="columns2" title="请选择" @close="show2 = false"
@select="leavaType3">
</u-action-sheet>
<u-action-sheet :show="show3" keyName="name" :actions="columns3" title="请选择" @close="show3 = false"
@select="leavaType4">
</u-action-sheet>
<u-action-sheet :show="show4" keyName="name" :actions="columns4" title="请选择" @close="show4 = false"
@select="leavaType5">
</u-action-sheet>
<u-action-sheet :show="show5" keyName="name" :actions="columns5" title="请选择" @close="show5 = false"
@select="leavaType6">
</u-action-sheet>
<!-- <view class="up-img confim-btn">
+上传播种图片
</view> -->
<view class="confirm">
<view class="confirm-btn" style="color: white;background-color: #0AA565;" @click="addFn">
完成添加
</view>
</view>
<!-- <view class="today-btn confim-btn" @tap="sowFn">
今日播种
</view> -->
</view>
</template>
<script setup>
import uplodeImg from "@/utils/uplodeImg.js"
import {
reactive,
ref
} from "vue";
import {
onLoad,
onReady
} from "@dcloudio/uni-app"
import {
addland,
province,
city,
county,
towns,
villages,
groups
} from '@/api/api.js'
const form = ref(null);
const formData = ref({
title: '',
area: '',
province_code: '',
city_code: '',
county_code: '',
code: '',
village_code: '',
group_code: '',
master_name: '',
master_phone: ''
})
const rules = reactive({
title: {
type: 'string',
required: true,
message: '请填写土地名称',
trigger: ['blur']
},
area: {
type: 'string',
required: true,
message: '请填写土地面积',
trigger: ['blur', 'change']
},
province_code: {
type: 'string',
required: true,
message: '请请选择所在省份',
trigger: ['blur', 'change']
},
city_code: {
type: 'string',
required: true,
message: '请选择所在城市',
trigger: ['blur', 'change']
},
county_code: {
type: 'string',
required: true,
message: '请选择所在区县',
trigger: ['blur', 'change']
},
town_code: {
type: 'string',
required: true,
message: '请选择所在镇街',
trigger: ['blur', 'change']
},
village_code: {
type: 'string',
required: true,
message: '请选择所在乡村',
trigger: ['blur', 'change']
},
group_code: {
type: 'string',
required: true,
message: '请选择小队',
trigger: ['blur', 'change']
},
master_name: {
type: 'string',
required: true,
message: '请天下负责人',
trigger: ['blur', 'change']
},
master_phone: [{
required: true,
message: '请输入手机号',
trigger: ['change', 'blur'],
},
{
// 自定义验证函数,见上说明
validator: (rule, value, callback) => {
// 上面有说返回true表示校验通过返回false表示不通过
// this.$u.test.mobile()就是返回true或者false的
// return this.$u.test.mobile(value);
},
message: '手机号码不正确',
// 触发器可以同时用blur和change
trigger: ['change', 'blur'],
}
],
})
const province_name = ref(null)
const city_name = ref(null)
const county_name = ref(null)
const town_name = ref(null)
const village_name = ref(null)
const group_name = ref(null)
const show = ref(false)
const show1 = ref(false)
const show2 = ref(false)
const show3 = ref(false)
const show4 = ref(false)
const show5 = ref(false)
const columns = reactive([])
const columns1 = reactive([])
const columns2 = reactive([])
const columns3 = reactive([])
const columns4 = reactive([])
const columns5 = reactive([])
const provincen = () => {
province().then((res) => {
columns.splice(0, columns.length, ...res.data.map((step, index) => {
return {
name: step.province_name,
id: step.province_code,
};
}));
});
}
const cityn = (id) => {
console.log(id)
city({
province_code: id
}).then((res) => {
columns1.splice(0, columns.length, ...res.data.map((step, index) => {
return {
name: step.city_name,
id: step.city_code,
};
}));
});
}
const countyn = (id) => {
county({
city_code: id
}).then((res) => {
columns2.splice(0, columns.length, ...res.data.map((step, index) => {
return {
name: step.county_name,
id: step.county_code,
};
}));
});
}
const townsn = (id) => {
towns({
county_code: id
}).then((res) => {
columns3.splice(0, columns.length, ...res.data.map((step, index) => {
return {
name: step.town_name,
id: step.town_code,
};
}));
});
}
const villagesn = (id) => {
villages({
town_code: id
}).then((res) => {
columns4.splice(0, columns.length, ...res.data.map((step, index) => {
return {
name: step.village_name,
id: step.village_code,
};
}));
});
}
const groupsn = () => {
groups().then((res) => {
columns5.splice(0, columns.length, ...res.data.map((step, index) => {
return {
name: step.group_name,
id: step.group_code,
};
}));
});
}
// 地址 省 市 街道 乡村 小队
const isshow1 = () => {
show.value = true
}
const isshow2 = () => {
show1.value = true
}
const isshow3 = () => {
show2.value = true
}
const isshow4 = () => {
show3.value = true
}
const isshow5 = () => {
show4.value = true
}
const isshow6 = () => {
show5.value = true
}
const leavaType1 = (e) => {
console.log('Received value:', e)
province_name.value = e.name
formData.province_code = e.id
cityn(e.id)
}
const leavaType2 = (e) => {
city_name.value = e.name
formData.city_code = e.id
countyn(e.id)
}
const leavaType3 = (e) => {
county_name.value = e.name
formData.county_code = e.id
townsn(e.id)
}
const leavaType4 = (e) => {
town_name.value = e.name
formData.town_code = e.id
villagesn(e.id)
}
const leavaType5 = (e) => {
village_name.value = e.name
formData.village_code = e.id
groupsn()
}
const leavaType6 = (e) => {
group_name.value = e.name
formData.group_code = e.id
}
const navgo = (url) => {
uni.navigateTo({
url
})
}
const addFn = () => {
console.log('11111');
form.value.validate((valid) => {
console.log(valid);
if (valid) {
uni.showToast({
icon: "none",
title: "表单验证通过"
})
addland(this.formData).then((res) => {
console.log(res)
})
} else {
uni.$u.toast('校验失败')
}
})
// form.value.validate().then(res => {
// console.log(6)
// }).catch(errors => {
// uni.$u.toast('校验失败')
// })
// console.log()
// return
// this.$refs.form.validate(valid).then(res => {
// console.log(valid)
// uni.$u.toast('校验通过')
// }).catch(errors => {
// uni.$u.toast('校验失败')
// })
// navgo('/pages/index/index')
}
const updateImgFn = async () => {
let res = await uplodeImg()
formData.buy_cert = res.data.image
}
onLoad((options) => {
provincen()
})
</script>
<style lang='scss' scoped>
.tit {
display: flex;
justify-content: space-between;
}
.card-li {
margin-bottom: 20rpx;
}
.confim-btn {
margin: 0 auto;
width: 196.26rpx;
height: 66.59rpx;
/* border: ; */
border: #00A15E 1px solid;
color: #00A15E;
display: flex;
align-items: center;
justify-content: center;
border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
}
.up-img {
width: 341.71rpx
}
.today-btn {
width: 588.79rpx;
background-color: #00A15E;
color: white;
position: fixed;
bottom: 40rpx;
/* transform: ; */
left: 50%;
transform: translateX(-50%);
background: linear-gradient(to right, #00A15E, #4CC593);
/* margin: 0 auto; */
}
.code-img {
background-color: #F4F4F4;
height: 350.47rpx;
position: relative;
margin-bottom: 100rpx;
.carime-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
}
}
.confirm {
position: fixed;
height: 84.11rpx;
display: flex;
bottom: 30rpx;
width: 750rpx;
.confirm-btn {
width: 315.42rpx;
height: 84.11rpx;
border: #00A15E 1px solid;
margin: 0 auto;
border-radius: 80rpx;
text-align: center;
line-height: 84rpx;
}
}
</style>