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

<template>
	<view class="page">
		<view class="pageMain">
			<view class="padding-tb-20 padding-lr-30">
				<view class="text-32 text-bold margin-bottom-10">
					<text v-if="type == 1">疏散宽度计算</text>
					<text v-if="type == 2">疏散距离查询</text>
					<text v-if="type == 3">安全出口数量查询</text>
					<text v-if="type == 4">楼梯类型查询</text>
					<text v-if="type == 5">防火间距查询</text>
				</view>
				<view class="margin-bottom-10 flex align-center border-bottom-ed">
					<view class="text-30">请选择场所</view>
					<view class="flex-one margin-left-30">
						<picker :range="places" range-key="name" :value="placeIndex" @change="changePlace"
							class="width-100p">
							<view class="flex line-height-100 align-center justify-end">
								<view class="text-30 text-cut-one" :class="placeIndex == null ? 'text-aa' : ''">
									{{placeIndex == null ? '请选择' : places[placeIndex].name}}
								</view>
								<view class="tyIcon-huaban text-aa text-24 margin-left-5"></view>
							</view>
						</picker>
					</view>
				</view>

				<view class="flex align-center border-bottom-ed" v-if="type == 1">
					<view class="text-30">位置</view>
					<view class="flex-one flex line-height-100 align-center justify-end" v-if="placeIndex == null"
						@click="noPlace">
						<view class="text-30 text-aa">请选择</view>
						<view class="tyIcon-huaban text-aa text-24 margin-left-5"></view>
					</view>
					<view class="flex-one margin-left-30" v-if="placeIndex !=null">
						<picker :range="positions" range-key="name" :value="positionIndex" @change="changePosition"
							class="width-100p">
							<view class="flex line-height-100 align-center justify-end">
								<view class="text-30 text-cut-one" :class="positionIndex == null ? 'text-aa' : ''">
									{{positionIndex == null ? '请选择' : positions[positionIndex].name}}
								</view>
								<view class="tyIcon-huaban text-aa text-24 margin-left-5"></view>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomBox">
			<view class="bg-2f9 line-height-100 radius-50 text-center text-fe text-32 text-bold" v-if="type == 1" @click="toNext">
				下一步
			</view>
			<view class="bg-2f9 line-height-100 radius-50 text-center text-fe text-32 text-bold" v-else @click="tapSearch">
				查询
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0, //1-疏散宽度计算 2-疏散距离查询 3-安全出口数量查询 4-楼梯类型查询 5-防火间距查询
				places: [],
				placeIndex: null,
				positions: [],
				positionIndex: null
			}
		},
		onLoad(options) {
			this.type = options.type;
			if(this.type == 1){
				this.getPlace1()
			}else{
				this.getPlace2()
			}
		},
		methods: {
			// 获取场所
			getPlace1(){
				this.rq.getData('calculator/api/Calculator/listPlace').then(res=>{
					if(res.code == 0){
						this.places = res.data.place_list;
					}
				})
			},
			getPlace2(){
				this.rq.getData('calculator/api/Calculator/listOtherPlace',{
					category_id :Number(this.type) - 1
				}).then(res=>{
					if(res.code == 0){
						this.places = res.data.place_list;
					}
				})
			},
			changePlace(e) {
				this.placeIndex = e.detail.value;
				if(this.type == 1){
					this.rq.getData('calculator/api/Calculator/listPositionByPlace',{
						place_id:this.places[this.placeIndex].id
					}).then(res=>{
						if(res.code == 0){
							this.positionIndex = null;
							this.positions = res.data.position_list;
						}
					})
				}
			},
			noPlace() {
				this.cn.alert('请先选择场所');
			},
			changePosition(e) {
				this.positionIndex = e.detail.value;
			},
			toNext(){
				if(this.placeIndex == null){
					this.cn.alert('请选择场所');
					return;
				}
				if(this.positionIndex == null){
					this.cn.alert('请选择位置');
					return;
				}
				uni.navigateTo({
					url:'/pages/home/calculatorNext?placeId=' + this.places[this.placeIndex].id + '&positionId=' + this.positions[this.positionIndex].id
				})
			},
			tapSearch(){
				if(this.placeIndex == null){
					this.cn.alert('请选择场所');
					return;
				}
				uni.navigateTo({
					url:'/pages/home/calculatorRichText?placeId=' + this.places[this.placeIndex].id
				})
			}
		}
	}
</script>

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