198 lines
4.3 KiB
Vue
198 lines
4.3 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="form">
|
||
<view class="form_item" v-if="survMulchRecord.stationName">
|
||
<view class="left">选择站点:</view>
|
||
<view class="nr">{{survMulchRecord.stationName}}</view>
|
||
</view>
|
||
<view class="form_item" v-if="survMulchRecord.sampTime">
|
||
<view class="left">采样时间:</view>
|
||
<view class="nr">{{survMulchRecord.sampTime}}</view>
|
||
</view>
|
||
<view class="form_item" v-if="survMulchRecord.cropName">
|
||
<view class="left">覆膜作物:</view>
|
||
<view class="nr">{{survMulchRecord.cropName}}</view>
|
||
</view>
|
||
<view class="form_item" v-if="survMulchRecord.strawRemain">
|
||
<view class="left">秸秆残留量:</view>
|
||
<view class="nr">{{survMulchRecord.strawRemain}}</view>
|
||
</view>
|
||
<view class="form_item" v-if="survMulchRecord.mulchYear">
|
||
<view class="left">覆膜年份:</view>
|
||
<view class="nr">{{survMulchRecord.mulchYear}}年</view>
|
||
</view>
|
||
<view class="form_item" v-if="survMulchRecord.mulchRemain">
|
||
<view class="left">覆膜残留量:</view>
|
||
<view class="nr">{{survMulchRecord.mulchRemain}}kg/hm²</view>
|
||
</view>
|
||
<view class="item_pic" v-if="imglist.length!=0">
|
||
<view class="pic_top">
|
||
相关图片:
|
||
</view>
|
||
<view class="pic_bot">
|
||
<view class="imgList">
|
||
<image @click="seepic(item)" v-for="(item,index) in imglist" :key="index" :src="item.path" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bz_item" v-if="survMulchRecord.mNote">
|
||
<view class="bz_top">
|
||
备<span class="bz">注:</span>
|
||
</view>
|
||
<view class="bz_bot">
|
||
<textarea v-model="survMulchRecord.mNote" disabled="true" placeholder="请输入备注" style="width: 100%;"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bot_btn">
|
||
<button class="primary" @click="toback()">返 回</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:'',
|
||
stationName:'',
|
||
stationCode:'',
|
||
mNote:'',
|
||
mPics:[],
|
||
id:''
|
||
},
|
||
index:'',
|
||
imglist:[],
|
||
mpics:[],
|
||
baseUrl:configService.apiUrl,
|
||
uploadUrl:'/applet/common/upload',
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.survMulchRecord = JSON.parse(decodeURIComponent(options.item));
|
||
this.mpics = this.survMulchRecord.mPics
|
||
this.imglist = []
|
||
var imglist = this.imglist
|
||
for(var i=0;i<this.mpics.length;i++){
|
||
imglist.push({
|
||
path:this.baseUrl + '/applet/common/static/' + this.mpics[i],
|
||
fileid:this.mpics[i]
|
||
})
|
||
}
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods:{
|
||
toback(){
|
||
uni.navigateBack({
|
||
delta:1
|
||
})
|
||
},
|
||
// 预览图片
|
||
seepic(item) {
|
||
let photoList = this.imglist.map(item => {
|
||
return item.path;
|
||
});
|
||
uni.previewImage({
|
||
current: 0, // 当前显示图片的链接/索引值
|
||
urls: photoList, // 需要预览的图片链接列表，photoList要求必须是数组
|
||
loop:true // 是否可循环预览
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
height: 100%;
|
||
background-color: #fff;
|
||
}
|
||
.form{
|
||
padding: 0 30rpx;
|
||
}
|
||
.form_item{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 30rpx 0rpx;
|
||
border-bottom:1rpx solid #e4e4e4;
|
||
// font-weight: 500
|
||
}
|
||
.left{
|
||
font-weight: bold;
|
||
}
|
||
.nr{
|
||
flex: 1;
|
||
color: #767676;
|
||
padding-left: 16rpx;
|
||
text-align: right;
|
||
}
|
||
.dw{
|
||
color: greenyellow;
|
||
}
|
||
.item_pic{
|
||
border-bottom:1rpx solid #e4e4e4;
|
||
padding: 30rpx 0rpx;
|
||
font-weight: 500;
|
||
}
|
||
.imgList{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.imgList image{
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
margin-right: 24rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.imgList image:nth-child(4n){
|
||
margin-right: 0rpx;
|
||
}
|
||
.bz_item{
|
||
padding: 40rpx 0rpx;
|
||
}
|
||
.bz_top{
|
||
// font-weight: 500;
|
||
margin-bottom: 20rpx;
|
||
font-weight: bold;
|
||
}
|
||
.pic_top{
|
||
font-weight: bold;
|
||
}
|
||
.bz{
|
||
margin-left: 30rpx;
|
||
}
|
||
.bz_bot{
|
||
color: #767676;
|
||
line-height: 50rpx;
|
||
}
|
||
.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;
|
||
}
|
||
.dw{
|
||
margin-left: 5rpx;
|
||
}
|
||
.pagebot{
|
||
height: 200rpx;
|
||
}
|
||
</style> |