bjhedasx/webcode/uni-app/pages/home/calculatorResult.vue

<template>
	<view class="page" v-if="showPage">
		<view class="pageMain">
			<view class="padding-top-20 padding-bottom-30 padding-lr-30">
				<view class="text-32 text-bold margin-bottom-30">
					疏散宽度计算
				</view>
				<view class="flex line-40 margin-bottom-25 text-28">
					<view>建筑类型</view>
					<view class="flex-one margin-left-30 text-right text-77">{{detailData.place_name}}</view>
				</view>
				<view class="flex line-40 margin-bottom-25 text-28">
					<view>位置</view>
					<view class="flex-one margin-left-30 text-right text-77">{{detailData.position_name}}</view>
				</view>
				<view class="flex line-40 margin-bottom-25 text-28" v-if="detailData.refractory_name">
					<view>耐火等级</view>
					<view class="flex-one margin-left-30 text-right text-77">{{detailData.refractory_name}}</view>
				</view>
				<view class="flex line-40 text-28">
					<view>{{detailData.calculation_type == 1 ? '疏散人数' : '输入面积（㎡）'}}</view>
					<view class="flex-one margin-left-30 text-right text-77">{{detailData.input_value}}</view>
				</view>
				<view class="margin-top-30 padding-tb-20 padding-lr-25 bg-f7f8 radius-10 flex align-center">
					<view class="flex-one">
						<view class="text-28 text-33 text-bold margin-bottom-10 line-40">最小疏散净宽度（m）</view>
						<view>
							<text class="text-44 text-bold line-60 text-2f9">{{detailData.finish_value}}</text>
							<text class="text-24 text-77 text-bold margin-left-5">米</text>
						</view>
					</view>
					<view class="resultImg">
						<image src="/static/home/resultImg.png" class="width-100p height-100p block"></image>
					</view>
				</view>
				<view class="margin-top-40">
					<view class="resultHeader">
						<image src="/static/home/resultHeader.png" class="width-100p height-100p block"></image>
					</view>
					<view class="bg-ff resultMsg">
						<view class="text-28 text-33 text-bold line-40 margin-bottom-10">
							公式
						</view>
						<view class="text-28 text-77 line-40 margin-bottom-30" style="white-space: pre-line;">
							{{detailData.formula}}
						</view>
						<view class="text-28 text-33 text-bold line-40 margin-bottom-10">
							其他参数值
						</view>
						<view class="margin-bottom-30 ">
							<view class="flex text-28 line-40" v-for="(item,index) in detailData.other_param" :key="index"
								:class="index == 0 ? '' : 'margin-top-15'">
								<view class="text-77">{{item.param_name}}</view>
								<view class="flex-one margin-left-30 text-right text-33">{{item.param_value}}</view>
							</view>
						</view>
						<view class="text-28 text-33 text-bold line-40 margin-bottom-10">
							公式替换
						</view>
						<view class="text-28 text-77 line-40 margin-bottom-30" style="white-space: pre-line;">
							{{detailData.formula_replace}}
						</view>
						<view class="text-28 text-33 text-bold line-40 margin-bottom-10">
							计算结果
						</view>
						<view class="text-28 text-77 line-40" style="white-space: pre-line;">
							{{detailData.calculation_result}}
						</view>
					</view>
				</view>
				<view class="margin-top-30">
					<view class="text-28 text-33 text-bold line-40 margin-bottom-10">
						备注说明：
					</view>
					<view class="text-28 text-33 line-40">
						<ty-text-rich-text :html="detailData.remark"></ty-text-rich-text>
					</view>
				</view>
				<view class="margin-top-40 noticeBox">
					<text class="icon-icon-tishi iconfont text-28"></text>
					<text class="text-26 text-bold margin-left-5">特别声明：</text>
					<text class="text-26">计算结果仅供参考，不承担任何法律效应。</text>
				</view>
			</view>
		</view>
		<view class="bottomBox">
			<view class="bg-2f9 line-height-100 radius-50 text-center text-fe text-32 text-bold position-relative">
				转发结果
				<button open-type="share" class="shareBtn"></button>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeId: '', //场所ID
				positionId: '', //位置ID
				refractoryId: '', //耐火等级ID
				inputValue: '', //输入的值
				showPage:false,
				detailData:{},
			}
		},
		onLoad(options) {
			console.log(7999, options)
			this.placeId = options.placeId;
			this.positionId = options.positionId;
			this.refractoryId = options.refractoryId ? options.refractoryId : '';
			this.inputValue = options.inputValue;
			this.getPageData();
		},
		onShareAppMessage() {
			var path = '';
			if (this.refractoryId == '') {
				path = '/pages/home/calculatorResult?placeId=' + this.placeId +
					'&positionId=' +
					this.positionId + '&inputValue=' + this.inputValue
			} else {
				path = '/pages/home/calculatorResult?placeId=' + this.placeId +
					'&positionId=' +
					this.positionId + '&refractoryId=' + this.refractoryId + '&inputValue=' + this.inputValue
			}
			return {
				title: '消防计算器',
				path: path
			}
		},
		methods: {
			getPageData() {
				this.rq.getData('calculator/api/Calculator/getCalculatorResult', {
					place_id: this.placeId,
					position_id: this.positionId,
					refractory_id: this.refractoryId,
					input_value: this.inputValue
				}).then(res => {
					if (res.code == 0) {
						this.detailData = res.data;
						this.showPage = true;
					}
				})
			},
		}
	}
</script>

<style>
	.pageMain {
		width: 100vw;
		min-height: 100vh;
		background: #fff;
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.resultImg {
		width: 114rpx;
		height: 98rpx;
		margin-left: 20rpx;
	}

	.resultHeader {
		width: 100%;
		height: 120rpx;
	}

	.resultMsg {
		width: 100%;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1rpx solid #EDEDED;
		margin-top: -10rpx;
		position: relative;
		padding: 25rpx 25rpx 35rpx;
		box-sizing: border-box;
	}

	.noticeBox {
		width: 100%;
		padding: 25rpx 10rpx;
		box-sizing: border-box;
		background: #FFF5EE;
		border-radius: 10rpx;
		color: #FF8534;
	}


	.bottomBox {
		width: 100vw;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.shareBtn {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}
</style>