uniapp/pages/unprocessDetail/unprocessDetail.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-red sm">未处理</button>
		</view>

		<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" @tap="goOpeDataDetail">点击查看</text>
				</view>
				<view>
					<text>视频：</text>
					<text class="checkMore" @tap="goVideoDetail">点击查看</text>
				</view>
			</view>
		</view>

		<!-- 处理状态start -->
		<view class="processStatus">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				处理状态
			</view>
			<view class="padding-lr padding-bottom-lg">
				<form action="">
					<radio-group class="block" @change="RadioChange">
						<view class=" flex align-center ">
							<radio class="blue mr-sm margin-right-xs" :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false"
							 value="A"></radio>
							<view class="title">单个处理</view>
							<radio class="blue margin-left-lg margin-right-xs" :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false"
							 value="B"></radio>
							<view class="title ">批量处理</view>
						</view>
					</radio-group>

					<view class="cu-form-group margin-top">
						<!-- <textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="备注信息,最多可输入50个字..."></textarea>-->
						<textarea class="JTxtArea lg" placeholder="备注信息,最多可输入50个字..." :maxlength="50" :data-maxnum="reason.length+'/50'"
						 auto-height v-model="reason"></textarea>
					</view>

					<view class="btn-area">
						<button class="bg-orange round missReport margin-top">误 报 </button>
						<button class="bg-blue round  missReport margin-top ">非 误 报 </button>
					</view>

				</form>



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

	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio: 'A',
				radio: 'B',
				modalName: null,
				reason: '',
			}
		},
		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');
				            }
				        });
				    }
				});
			},

			// 页面跳转
			goOpeDataDetail() {
				uni.navigateTo({
					url: '/pages/unprocessDetail/opeDataDetail/opeDataDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goVideoDetail() {
				uni.navigateTo({
					url: '/pages/unprocessDetail/videoDetail/videoDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

			},


			RadioChange(e) {
				this.radio = e.detail.value
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
			// textarea
			inputReason(e) {
				this.reason = e.detail.value;
			}


		}
	}
</script>

<style lang="scss">
	/* // 处理内容 */
	.cu-form-group {
		background: #f5f5f5;

	}

	.processStatus {
		radio {
			transform: scale(0.77)
		}

		textarea {
			background: #F5F5F5;
			color: #999999;
		}

	}
	

	// textarea
	.JTxtArea {
		position: relative;

		&.sm {
			min-height: 60rpx;
		}

		&.lg {
			min-height: 100rpx;
		}

		&:after {
			content: attr(data-maxnum);
			position: absolute;
			right: 10rpx;
			bottom: 0px;
		}
	}
</style>