manage_mobile/pages/home/newsDetail.vue

<style lang="less" scoped>
	.container{
		padding:0 30rpx;
		&>view{
			display:flex;
			align-items: center;
			justify-content: space-between;
			padding:20rpx 0;
			&+view{
				border-top:2rpx solid rgba(216, 216, 216, 0.2);
			}
			text{
				&:first-child{
					color:var(--b,#777);
					margin-right:20rpx;
				}
				&:nth-child(2){
					color:var(--f,#333);
					font-size:var(--size,28rpx);
					&.agr{
						color:#10C176;
						margin-top:13rpx;
						min-height:20rpx;
					}
					&.account{
						margin-top:13rpx;
						padding:30rpx;
						border-radius: 24rpx;
						color:#999;
						background: #F7F7F7;
						width:calc(100% - 60rpx);
					}
				}
			}
			&.info{
				--b:#333;
				--f:#777;
				--size:24rpx;
			}
			&.vertical{
				flex-direction: column;
				align-items: flex-start;
				.imgs{
					margin-top:15rpx;
					min-height:160rpx;
				}
			}
		}
	}
</style>
<template>
	<view class="container">
		<template v-if="intoPage=='news'">
			<view class="info">
				<text>基本信息</text> <text>推送时间：{{detail.sendTime}}</text>
			</view>
			<view>
				<text>品种名称</text> <text class="over">{{detail.cropName}}</text>
			</view>
			<view>
				<text>作物类型</text> <text class="over">{{detail.cropType}}</text>
			</view>
			<view>
				<text>生长过程</text> <text class="over">{{detail.growthProcess}}</text>
			</view>
			<view>
				<text>病虫害部位</text> <text class="over">{{detail.pestSite}}</text>
			</view>
			<view>
				<text>显著症状</text> <text class="over">{{detail.symptom}}</text>
			</view>
			<view class="vertical">
				<text>推荐农资</text> <text class="agr">{{detail.agrMaterialsName}}</text>
			</view>
			<view class="vertical">
				<text>推荐理由</text> <text class="account">{{detail.content}}</text>
			</view>
		</template>
		<template v-else>
			<view class="info">
				<text>基本信息</text> <text>推送时间：{{detail.time}}</text>
			</view>
			<view>
				<text>负责人</text> <text class="over">{{detail.principal}}</text>
			</view>
			<view>
				<text>操作类型</text> <text class="over">{{detail.type}}</text>
			</view>
			<view>
				<text>农资名称</text> <text class="over">{{detail.inputName}}</text>
			</view>
			<view>
				<text>生长过程</text> <text class="over">{{detail.growthProcess}}</text>
			</view>
			<view>
				<text>病虫害部位</text> <text class="over">{{detail.pestSite}}</text>
			</view>
			<view>
				<text>显著症状</text> <text class="over">{{detail.symptom}}</text>
			</view>
			<view class="vertical">
				<text>病虫名称</text> <text class="agr">{{detail.pestName}}</text>
			</view>
			<view class="vertical">
				<text>凭证</text>
				<view class="imgs">
					<u-image v-for="(v,k) in detail.images" :key="k" width="220rpx" height="160rpx" radius="10rpx" :src="`${host}/${v}`">
						<text slot="error" class="plant-xiaopangchetupianjiazaishibai"/>
					</u-image>
				</view>
			</view>
			<view class="vertical">
				<text>备注</text> <text class="account">{{detail.remark}}</text>
			</view>
		</template>
	</view>
</template>
<script>
import {host} from '@/common/request.js'
export default {
	data(){
		return{
			intoPage:"",
			detail:{},
			host:host('imgUrl'),
			eventChannel:null,
		}
	},
	onLoad(options){
		this.intoPage=options.intoPage
		this.eventChannel=this.getOpenerEventChannel()
		this.eventChannel.on("detail",e=>this.detail=e)
		uni.setNavigationBarTitle({
			title:({farming:"农事记录",news:"消息详情"})[options.intoPage]
		})
	},
}
</script>