uniapp/pages/processedDetail/processedDetail.vue

<template>
	<view>
		<view class="timeBox flex justify-between align-center padding-lr-sm">
			<view class="time">2021-01-18 15:16:45</view>
			<button class="cu-btn radius bg-green sm">已处理</button>
		</view>
		<!-- 基本信息start -->
		<view class="basic-info">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				基本信息
			</view>
			<view class="info-content">
				<view class="info-one-info ">
					<text>站点名称：</text>
					<text>测试站点一</text>
				</view>
				<view>
					<text>线路名称：</text>
					<text>进线一</text>
				</view>
				<view>
					<text>警告信息：</text>
					<text>母线停电</text>
				</view>
				<view>
					<text>警告状态：</text>
					<text>复归</text>
				</view>
				<view>
					<text>采集终端：</text>
					<text>DA00012784</text>
				</view>
				<view>
					<text>站点地址：</text>
					<text>沪太路8786弄155号<text class="icon iconfont map" @click="mapLocation()">&#xe612;</text></text>
				</view>
				<view>
					<text>联系人：</text>
					<text>韩正义</text>
				</view>
				<view>
					<text>联系方式：</text>
					<text>15122423833<text class="phone icon iconfont" @click="submit()">&#xe61d;</text></text>
				</view>
				<view>
					<text>运行数据：</text>
					<text class="checkMore">点击查看</text>
				</view>
				<view>
					<text>视频：</text>
					<text class="checkMore">点击查看</text>
				</view>
			</view>
		</view>
		<!-- 基本信息end -->

		<!-- 处理信息start -->
		<view class="processStatus">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				处理信息
			</view>
			<view class="info-content">
				<view class="info-one-info ">
					<text>是否误报：</text>
					<text>误报</text>
				</view>
				<view>
					<text>处理人：</text>
					<text>13262908415</text>
				</view>
				<view>
					<text>处理时间：</text>
					<text>2021-01-27 09:41:12</text>
				</view>
				<view>
					<text>处理内容：</text>
					<text>测试</text>
				</view>

			</view>


		</view>
		<!-- 处理状态end -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio: 'A',
				radio: 'B',
				modalName: null,

			}
		},
		methods: {
			
			submit() {
				uni.makePhoneCall({
					phoneNumber: '15122423833' //仅为示例
				});
			},
			mapLocation(){
				uni.getLocation({
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
				        const latitude =31.469465;
				        const longitude = 121.327514;
						console.log(latitude);
				        uni.openLocation({
				            latitude: latitude,
				            longitude: longitude,
				            success: function () {
				                console.log('success');
				            }
				        });
				    }
				});
			},
			
			RadioChange(e) {
				this.radio = e.detail.value
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},

		}
	}
</script>

<style lang="scss">
	.timeBox {
		height: 88rpx;
		background: #EFF4FF;
		line-height: 88rpx;

		.time {
			color: #333
		}
	}

	.info-tit {
		color: #4074E7;
		line-height: 90rpx;
		height: 90rpx;
	}

	// 基本信息
	.info-content>view {
		margin-left: 24rpx;
		border-bottom: 1px solid #EDEDED;
		line-height: 92rpx;
		color: #666;
	}

	.info-content view text:first-child {
		width: 160rpx;
		display: inline-block
	}
</style>