414 lines
10 KiB
Vue
414 lines
10 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="form">
|
||
<view class="form_item">
|
||
<view class="form_top">
|
||
选择站点:
|
||
</view>
|
||
<view class="form_bot">
|
||
<picker @change="bindPickerChange" :value="index" :range="array">
|
||
<view class="dates">
|
||
<view class="uni-input" v-if="!survMulchRecord.stationName" style="color: #808080;">请选择监测站点</view>
|
||
<view class="uni-input" v-else>{{survMulchRecord.stationName}}</view>
|
||
</view>
|
||
<image class="dateimg" src="../../../static/xiala.png" mode="" style="width: 32rpx;height: 16rpx;"></image>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="form_item">
|
||
<view class="form_top">
|
||
采样时间:
|
||
</view>
|
||
<view class="form_bot">
|
||
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
|
||
<view class="dates">
|
||
<view class="uni-input" style="color: #808080;" v-if="!survMulchRecord.sampTime">请选择采样时间</view>
|
||
<view class="uni-input" v-else>{{survMulchRecord.sampTime}}</view>
|
||
</view>
|
||
<image class="dateimg" src="../../static/data.png" mode=""></image>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="form_item">
|
||
<view class="form_top">
|
||
覆膜作物:
|
||
</view>
|
||
<view class="form_bot">
|
||
<input type="text" placeholder="请输入覆膜作物" v-model="survMulchRecord.cropName" @blur="crop">
|
||
</view>
|
||
</view>
|
||
<view class="form_item">
|
||
<view class="form_top">
|
||
秸秆残留量:
|
||
</view>
|
||
<view class="form_bot">
|
||
<input type="text" placeholder="请输入秸秆残留量" v-model="survMulchRecord.strawRemain" @blur="cropRemain">
|
||
</view>
|
||
</view>
|
||
<view class="form_item">
|
||
<view class="form_top">
|
||
覆膜年份:
|
||
</view>
|
||
<view class="form_bot">
|
||
<picker mode="date" fields="year" :value="year" :start="startDate" :end="endDate" @change="bindDateChangeyear">
|
||
<view class="dates">
|
||
<view class="uni-input" style="color: #808080;" v-if="!survMulchRecord.mulchYear">请选择覆膜年份</view>
|
||
<view class="uni-input" v-else>{{survMulchRecord.mulchYear}}</view>
|
||
</view>
|
||
<image class="dateimg" src="../../static/data.png" mode=""></image>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="form_item">
|
||
<view class="form_top">
|
||
覆膜残留量:
|
||
</view>
|
||
<view class="form_bot" style="display: flex;">
|
||
<input type="text" placeholder="请输入覆膜残留量" v-model="survMulchRecord.mulchRemain" style="width: 90%;">
|
||
<span class="dw">kg/hm²</span>
|
||
</view>
|
||
</view>
|
||
<view class="item_pic">
|
||
<view class="pic_top">
|
||
相关图片:
|
||
</view>
|
||
<view class="pic_bot">
|
||
<view class="imgList">
|
||
<image class="imgs2" src="../../static/upload.png" mode="" @click="uploadimg()"></image>
|
||
<view class="imgs1" v-for="(item,index) in imglist" :key="index">
|
||
<image class="imgs" @click="seepic(item)" :src="baseUrl + '/applet/common/static/' + item.path" mode=""></image>
|
||
<image class="delet" src="../../static/del_people.png" mode="" @click="todelet(index)"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bz_item">
|
||
<view class="bz_top">
|
||
备<span class="bz">注:</span>
|
||
</view>
|
||
<view class="bz_bot">
|
||
<textarea v-model="survMulchRecord.mNote" style="width: 100%;" @blur="mNote"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bot_btn">
|
||
<button class="primary" @click="tosubmit()">提 交</button>
|
||
</view>
|
||
<view class="pagebot"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import api from "@/api/api"
|
||
import configService from '@/common/service/config.service.js';
|
||
export default{
|
||
data(){
|
||
return{
|
||
array:[],
|
||
arrays:[],
|
||
survMulchRecord:{
|
||
sampTime:'',
|
||
mulchYear:'',
|
||
mulchRemain:'',
|
||
cropName:'',
|
||
strawRemain:'',
|
||
stationName:'',
|
||
stationCode:'',
|
||
mNote:'',
|
||
mPics:[]
|
||
},
|
||
index:'',
|
||
imglist:[],
|
||
mpics:[],
|
||
baseUrl:configService.apiUrl,
|
||
uploadUrl:'/applet/common/upload',
|
||
reload:'true'
|
||
}
|
||
},
|
||
onLoad() {
|
||
},
|
||
onShow() {
|
||
this.getazsurvMulchRecord()
|
||
},
|
||
methods:{
|
||
getazsurvMulchRecord(){
|
||
this.array = []
|
||
this.arrays = []
|
||
this.$http.get('/applet/survStationInfo/list').then(res=>{
|
||
for(var i=0;i<res.data.data.length;i++){
|
||
this.arrays.push({
|
||
label:res.data.data[i].stationName,
|
||
value:res.data.data[i].stationCode
|
||
})
|
||
this.array.push(res.data.data[i].stationName)
|
||
}
|
||
})
|
||
},
|
||
bindPickerChange: function(e) {
|
||
this.index = e.detail.value
|
||
this.survMulchRecord.stationName = this.array[this.index]
|
||
for(var i=0;i<this.arrays.length;i++){
|
||
if(this.survMulchRecord.stationName == this.arrays[i].label){
|
||
this.survMulchRecord.stationCode = this.arrays[i].value
|
||
}
|
||
}
|
||
},
|
||
bindDateChange: function(e) {
|
||
this.survMulchRecord.sampTime = e.detail.value
|
||
},
|
||
bindDateChangeyear: function(e){
|
||
this.survMulchRecord.mulchYear = e.detail.value
|
||
},
|
||
mNote(e){
|
||
this.survMulchRecord.mNote = e.detail.value
|
||
},
|
||
crop(e){
|
||
this.survMulchRecord.cropName = e.detail.value
|
||
},
|
||
cropRemain(e){
|
||
this.survMulchRecord.strawRemain = e.detail.value
|
||
},
|
||
uploadimg(){
|
||
var that = this
|
||
uni.chooseImage({
|
||
count: 9,
|
||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album', 'camera'], //从相册选择
|
||
success: function (res) {
|
||
var tempFilesSize = res.tempFiles[0].size; //获取图片的大小，单位B
|
||
if (tempFilesSize <= 2000000) { //图片小于或者等于2M时 可以执行获取图片
|
||
let params = {}
|
||
params.file = res.tempFilePaths[0]
|
||
params.biz = 'busi'
|
||
var tempFilePaths = res.tempFilePaths
|
||
for(var i=0;i<tempFilePaths.length;i++){
|
||
that.$http.upload(that.baseUrl+that.uploadUrl,{
|
||
filePath: res.tempFilePaths[i],
|
||
name: 'file',
|
||
formData:{
|
||
file:res.tempFilePaths[i],
|
||
biz:'busi'
|
||
}
|
||
}).then(res =>{
|
||
var imglist = that.imglist
|
||
imglist.push({
|
||
path:res.data.data.savePath,
|
||
fileid:res.data.data.savePath
|
||
})
|
||
var mpics = that.mpics
|
||
mpics.push(res.data.data.savePath)
|
||
})
|
||
}
|
||
}else {
|
||
uni.showToast({
|
||
title: '上传图片不能大于2M!', //标题
|
||
icon: 'none' //图标 none不使用图标，详情看官方文档
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 预览图片
|
||
seepic(item) {
|
||
let photoList = this.imglist.map(item => {
|
||
return this.baseUrl + '/applet/common/static/' + item.path;
|
||
});
|
||
uni.previewImage({
|
||
current: 0, // 当前显示图片的链接/索引值
|
||
urls: photoList, // 需要预览的图片链接列表，photoList要求必须是数组
|
||
loop:true // 是否可循环预览
|
||
});
|
||
},
|
||
todelet(index){
|
||
this.imglist.splice(index,1)
|
||
this.mpics.splice(index,1)
|
||
},
|
||
tosubmit(){
|
||
this.survMulchRecord.mPics = this.mpics
|
||
if(!this.survMulchRecord.stationCode){
|
||
uni.showToast({
|
||
title: "请选择站点",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if(!this.survMulchRecord.sampTime){
|
||
uni.showToast({
|
||
title: "请选择采样时间",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if(!this.survMulchRecord.cropName){
|
||
uni.showToast({
|
||
title: "请输入覆膜作物",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if(!this.survMulchRecord.strawRemain){
|
||
uni.showToast({
|
||
title: "请输入秸秆残留量",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if(!this.survMulchRecord.mulchYear){
|
||
uni.showToast({
|
||
title: "请选择覆膜年份",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if(!this.survMulchRecord.mulchRemain){
|
||
uni.showToast({
|
||
title: "请输入覆膜残留量",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if(this.survMulchRecord.mPics.length == 0){
|
||
uni.showToast({
|
||
title: "请至少上传一张图片",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
this.$http.post('/applet/survMulchRecord/add',this.survMulchRecord).then(res=>{
|
||
uni.showLoading({
|
||
title: '正在提交...'
|
||
});
|
||
if(res.data.code == 0){
|
||
uni.hideLoading();
|
||
uni.navigateBack()
|
||
let pages = getCurrentPages();
|
||
let prevPage = pages[ pages.length - 2 ];
|
||
prevPage.$vm.reload = this.reload;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
height: 100%;
|
||
background-color: white;
|
||
}
|
||
.form{
|
||
padding: 0 30rpx;
|
||
}
|
||
.form_item{
|
||
padding-top: 33rpx;
|
||
padding-bottom: 25rpx;
|
||
border-bottom: 1rpx solid #e6e6e6;
|
||
}
|
||
.form_top{
|
||
margin-bottom: 26rpx;
|
||
font-weight: bold;
|
||
}
|
||
.form_bot{
|
||
position: relative;
|
||
}
|
||
.dates{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.dateimg{
|
||
height: 32rpx;
|
||
width: 32rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.dw{
|
||
color: #2ac066;
|
||
}
|
||
.item_pic{
|
||
border-bottom:1rpx solid #e4e4e4;
|
||
padding: 30rpx 0rpx;
|
||
font-weight: 500;
|
||
}
|
||
.imgList{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.imgs2{
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
margin-right: 24rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.imgs1{
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
position: relative;
|
||
margin-right: 24rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.imgs{
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
}
|
||
.imgs1:nth-child(4n){
|
||
margin-right: 0rpx;
|
||
}
|
||
.imgs image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.bz_item{
|
||
padding: 40rpx 0rpx;
|
||
}
|
||
.bz_top{
|
||
font-weight: bold;
|
||
margin-bottom: 26rpx;
|
||
}
|
||
.bz{
|
||
margin-left: 30rpx;
|
||
}
|
||
.pic_top{
|
||
font-weight: bold;
|
||
margin-bottom: 26rpx;
|
||
}
|
||
.bz_bot{
|
||
color: #767676;
|
||
line-height: 50rpx;
|
||
border: 1rpx solid #ececec;
|
||
border-radius: 10rpx;
|
||
padding: 16rpx;
|
||
}
|
||
.bot_btn{
|
||
padding: 0 30rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
.primary{
|
||
width: 100%;
|
||
height: 90rpx;
|
||
background-color: #0F6EFF;
|
||
border: none;
|
||
border-radius: 50rpx;
|
||
color:#fff;
|
||
font-weight: bold;
|
||
}
|
||
.pagebot{
|
||
height: 200rpx;
|
||
}
|
||
.delet{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
position: absolute;
|
||
top: -10rpx;
|
||
right: -10rpx;
|
||
}
|
||
</style> |