manage_mobile/pages/patrolGarden/detail.vue

<style lang="less" scoped>
	.container{
		min-height: 100%;
		background:#f6f6f6;
		padding:30rpx 0 1rpx 0;
		.card{
			margin-top:0;
			position:relative;
			&:before{
				position:absolute;
				height:34rpx;
				line-height: 34rpx;
				width:133rpx;
				text-align: center;
				color:#fff;
				top:0;
				right:0;
			}
			&.handle:before{
				content:"已处理";
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66.965' height='17.019' viewBox='0 0 66.965 17.019'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%2310c176;%7D%3C/style%3E%3C/defs%3E%3Cg transform='translate(-215 -495.575)'%3E%3Cpath class='a' d='M218.295,495.627s-.028,3.42,0,3.45c.036-.036,6.616,0,6.616,0s.032,3.089,0,3.059h-2.17s-.015,3.341,0,3.379c-.036-.036,3.344,0,3.344,0s-.021.044,0,3.628h-3.344s-.072,3.442,0,3.365c.071.036,59.224.085,59.224.085v-8.346a9.109,9.109,0,0,0-8.4-8.62C273.261,495.511,218.295,495.627,218.295,495.627Z'/%3E%3Ccircle class='a' cx='1.5' cy='1.5' r='1.5' transform='translate(217 502.1)'/%3E%3Cellipse class='a' cx='1.5' cy='1.725' rx='1.5' ry='1.725' transform='translate(217 495.62)'/%3E%3Cellipse class='a' cx='1.5' cy='1.7' rx='1.5' ry='1.7' transform='translate(221 509.12)'/%3E%3Cellipse class='a' cx='1.5' cy='1.705' rx='1.5' ry='1.705' transform='translate(221.4 502.1)'/%3E%3Crect class='a' width='5' height='3' rx='1.5' transform='translate(215 509)'/%3E%3C/g%3E%3C/svg%3E");
			}
			&.unhandle:before{
				content:"未处理";
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66.965' height='17.019' viewBox='0 0 66.965 17.019'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23cd0916;%7D%3C/style%3E%3C/defs%3E%3Cg transform='translate(-215 -495.575)'%3E%3Cpath class='a' d='M218.295,495.627s-.028,3.42,0,3.45c.036-.036,6.616,0,6.616,0s.032,3.089,0,3.059h-2.17s-.015,3.341,0,3.379c-.036-.036,3.344,0,3.344,0s-.021.044,0,3.628h-3.344s-.072,3.442,0,3.365c.071.036,59.224.085,59.224.085v-8.346a9.109,9.109,0,0,0-8.4-8.62C273.261,495.511,218.295,495.627,218.295,495.627Z'/%3E%3Ccircle class='a' cx='1.5' cy='1.5' r='1.5' transform='translate(217 502.1)'/%3E%3Cellipse class='a' cx='1.5' cy='1.725' rx='1.5' ry='1.725' transform='translate(217 495.62)'/%3E%3Cellipse class='a' cx='1.5' cy='1.7' rx='1.5' ry='1.7' transform='translate(221 509.12)'/%3E%3Cellipse class='a' cx='1.5' cy='1.705' rx='1.5' ry='1.705' transform='translate(221.4 502.1)'/%3E%3Crect class='a' width='5' height='3' rx='1.5' transform='translate(215 509)'/%3E%3C/g%3E%3C/svg%3E");
			}
			.item{
				&+.item{
					border-top:2rpx solid rgba(216, 216, 216, 0.2);
				}
				text-indent:0;
				padding:10rpx 0;
				display: flex;
				justify-content: space-between;
				.label{
					flex-shrink: 0;
					margin-right:20rpx;
					color:#777;
				}
				&.block{
					flex-direction: column;
					.label{
						margin-bottom:20rpx;
					}
					.imgs{
						display: flex;
						flex-wrap: wrap;
						margin-right:-20rpx;
						image{
							width:calc(100%/3 - 20rpx);
							margin-right:20rpx;
							height:160rpx;
							border-radius: 10rpx;
						}
					}
					.dec{
						background:#F7F7F7;
						color:#999;
						font-size:28rpx;
						border-radius: 24rpx;
						padding:20rpx;
					}
					map{
						width:100%;
						height:400rpx;
						border-radius: 10rpx;
					}
					.cu-btn{
						margin-top:40rpx;
						height:60rpx;
					}
				}
			}
			.d-form /deep/{
				.u-form-item{
					color:red;
				}
				.u-form-item__body{
					flex-direction: column;
				}
			}
		}
	}
</style>
<template>
	<view class="container">
		<view class="card">
			<view class="item">
				<text class="label">基地名称</text>
				<text class="val">{{detail.baseName}}</text>
			</view>
			<view class="item block">
				<text class="label">凭证</text>
				<view class="imgs">
					<image v-for="(v,k) in detail.pic" :key="k" :src="`${host}/${v}`"/>
				</view>
			</view>
			<view class="item block">
				<text class="label">描述</text>
				<text class="dec">{{detail.remark||'无'}}</text>
			</view>
			<view class="item block">
				<text class="label">经纬度</text>
				<map id="amap" :longitude="102.712251" :latitude="25.040609"/>
			</view>
		</view>

		<view class="card" v-if="record" :class="({0:'unhandle',1:'handle'})[record.flagDeal]">
			<view class="item">
				<text class="label">位置</text>
				<text class="val">{{record.position}}</text>
			</view>

			<u-form v-if="record" class="inline" :model="record" :rules="rules" ref="form" labelWidth="auto" errorType="toast">
				<d-form label="凭证" required field="pic" :num="3" type="upImg" :value="record.imgs" @imgs="record.pic=$event"/>
				<d-form label="描述" type="textarea" v-model="record.remark"/>
				<d-form label="是否处理" type="radio" :columns="[{label:'是',value:'1'},{label:'否',value:'0'}]" v-model="record.flagDeal"/>
			</u-form>
			<button class="cu-btn round bg-green shadow submit" @click="submit">保存修改</button>
		</view>
	</view>
</template>
<script>
import request,{host} from '@/common/request'
export default {
	data(){
		return{
			map:null,
			demo:"",
			host:host('imgUrl'),
			detail:{},
			record:null,
			rules:{
				pic:{requried:true,message:"请上传凭证！",trigger:'blur'},
			},
			eventChannel:null,
		}
	},
	async onReady(){
		this.eventChannel=this.getOpenerEventChannel()
		this.eventChannel.on("detail",e=>{
			this.detail=e
			
			/* #ifdef APP-PLUS */
			if(this.detail.detailVos){
				for(var i in this.detail.detailVos){
					var marker=new plus.maps.Marker(new plus.maps.Point(this.detail.detailVos[i].lng, this.detail.detailVos[i].lat))
					marker.setIcon(`/static/patrolGarden/${({0:'unhandle',1:'handle'})[this.detail.detailVos[i].flagDeal]}.png?i=${i}`)
					marker.setLabel(this.detail.detailVos[i].position)
					marker.onclick=e=>{
						var val=this.detail.detailVos[e.icon.match(/i=(\d+)/)[1]]
						this.record={
							...val,
							imgs:(val.pic||'').split(',').filter(v=>v),
							index:e.icon.match(/i=(\d+)/)[1],
						}
					}
					this.detail.detailVos[i].marker=marker
					this.maps.addOverlay(marker)
				}
				this.maps.setCenter(new plus.maps.Point(this.detail.detailVos[0].lng, this.detail.detailVos[0].lat))
			}
			/* #endif */
		})
		/* #ifdef APP-PLUS */
			this.maps=uni.createMapContext("amap",this).$getAppMap()
		/* #endif */
	},
	methods:{
		async submit(){
			this.$refs.form.validate().then(async valid=>{
				if(valid){
					var res=await request("/api/basetour/updateTourDetailInfo",{
						method:"post",
						body: {
							id:this.record.id,
							pic:this.record.pic,
							remark:this.record.remark,
							flagDeal:this.record.flagDeal,
						}
					})
					if(res.statu){
						uni.showToast({title:"修改成功",icon:"success"})
						this.detail.detailVos[this.record.index]=this.record
						this.detail.detailVos[this.record.index].marker.setIcon(`/static/patrolGarden/${({0:'unhandle',1:'handle'})[this.record.flagDeal]}.png?i=${this.record.index}`)
					}else{
						uni.showModal({
							title:"提示",
							content:res.msg||"修改失败！",
							showCancel:false,
						})
					}
				}
			})
		},
	}
}
</script>