vue-insagent-app/pages/roadRescue/trailer.vue

<template>
	<view class="page">
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="address p-4 mb-4">
			<view class="mb-3" @click="stopMap">
				<view class="title dis a-c">
					<view class="round"></view>
					<text>起点</text>
				</view>
				<view class="dis j-s a-start ">
					<text style="width: 80%;color: #000;">{{dataInfo.rescueStarting}}</text>
					<u-icon name="arrow-right" color="#b0afb7" size="30" style="margin-top: 5px;"></u-icon>
				</view>
			</view>
			<view class="mb-3" @click="stopMap1">
				<view class="title dis a-c">
					<view class="round" style="background-color: #19d8ac;"></view>
					<text>终点</text>
				</view>
				<view class="dis j-s a-start ">
					<text style="width: 80%;color: #000;">{{dataInfo.rescuePosition}}</text>
					<u-icon name="arrow-right" color="#b0afb7" size="30" style="margin-top: 5px;"></u-icon>
				</view>
			</view>
		</view>
		<view class="address p-4 mb-4">
			<text class="title">填写详细信息</text>
			<view class="mt-2 dis j-s a-c">
				<text style="width: 30%;">救援场景</text>
				<view class="dis a-c j-s" style="width: 70%;">
					<view class="status-data dis a-c j-c" :class="item.label==dataInfo.rescueScene? 'active':''"
						v-for="(item,index) in sceneList" :key="index" @tap="sceneclick(item.label)"> {{item.label}}
					</view>
				</view>
			</view>
			<view class="mt-2 dis j-s a-c">
				<text style="width: 35%;">车牌号</text>
				<u-input style="width: 40%;" v-model="dataInfo.licencePlate" type="text" placeholder="请输入车牌号" />
				<u-icon name="arrow-right" color="#b0afb7" size="30"></u-icon>
			</view>
			<view class="mt-2 dis j-s a-c">
				<text style="width: 35%;">救援联系人</text>
				<u-input style="width: 40%;" v-model="dataInfo.rescueUser" type="text" placeholder="请输入联系人姓名" />
			</view>
			<view class="mt-2 dis j-s a-c">
				<text style="width: 35%;">联系人手机号</text>
				<u-input style="width: 40%;" v-model="dataInfo.phoneNumber" type="text" placeholder="请输入联系人手机号" />
			</view>
		</view>
		<view class="footerFixed dis j-s a-end">
			<view class="price">
				<text>￥</text>
				<text>{{dataInfo.rescueSum}}</text>
				<text>.00</text>
			</view>
			<view class="order dis a-c j-c" @click="plaorder">
				<text>立即购买</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataInfo: {
					rescueStarting: null, //救援起点
					startingLatitude: "", //起点纬度
					startingLongitude: "", //起点经度
					rescuePosition: null, //救援终点
					positionLatitude: "", //终点纬度
					positionLongitude: "", //终点经度
					rescueScene: "地面", //救援场景
					licencePlate: "", //车牌号
					rescueUser: "", //联系人
					phoneNumber: "", //电话
					serveCode: "202", //服务类型
					rescueSum: "168", //救援金额
				},
				sceneList: [{
						label: "地面"
					},
					{
						label: "地下一层"
					},
					{
						label: "地下多层"
					}
				]
			}
		},
		onShow() {
			if (!this.dataInfo.rescueStarting) {
				this.getCurrentLocation();
			}

		},
		onLoad() {},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			getCurrentLocation() {
				//获取当前的地理位置
				let vthis = this;
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						let address = res.address.province + res.address.city + res.address.district + res
							.address.street + res.address.poiName;
						vthis.startingLatitude = res.latitude;
						vthis.startingLongitude = res.longitude;
						vthis.dataInfo.rescueStarting = address;
					},
					fail: function(err) {
						// #ifdef APP-PLUS
						uni.showModal({
							title: '提示',
							content: '请打开定位服务',
							success: ({
								confirm,
								cancel
							}) => {
								if (confirm) {
									// android平台
									if (uni.getSystemInfoSync().platform == 'android') {
										var Intent = plus.android.importClass(
											'android.content.Intent');
										var Settings = plus.android.importClass(
											'android.provider.Settings');
										var intent = new Intent(Settings
											.ACTION_LOCATION_SOURCE_SETTINGS);
										var main = plus.android.runtimeMainActivity();
										main.startActivity(intent); // 打开系统设置GPS服务页面

									}
								}
								// 用户取消前往开启定位服务
								if (cancel) {
									uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
										delta: 1
									});
								}
							}
						});
						// #endif
					}
				});
			},
			stopMap() {
				uni.navigateTo({
					url: "/pages/roadRescue/map?type=1"
				})
			},
			stopMap1() {
				uni.navigateTo({
					url: "/pages/roadRescue/map?type=2"
				})
			},
			async plaorder() {
				let res = await this.$http.post('/ser/rescue/insert/rescueOrder', this.dataInfo);
				if (res.code == '200') {
					uni.showToast({
						title: '下单成功',
						duration: 2000,
						icon: "success"
					});
				}
			},
			sceneclick(e) {
				this.dataInfo.rescueScene = e;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		background-color: #f5f6f8;
		padding: 20px;
	}

	.address {
		background-color: white;

		.title {
			font-size: 18px;
			font-weight: bold;

			text {
				margin-left: 8px;
			}

			.round {
				width: 8px;
				height: 8px;
				background-color: #3466ed;
				border-radius: 50%;
			}
		}
	}

	.footerFixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 60px;
		background-color: white;
		padding-left: 20px;

		view:first-child {
			width: 65%;
		}

		.price {
			color: #3267eb;
			font-weight: bold;
			font-size: 18px;
		}

		text:nth-child(2) {
			font-size: 34px;
			line-height: 1.2;
		}

		.order {
			width: 35%;
			height: 100%;
			background-color: #3267eb;
			color: #f5f6f8;
			font-size: 18px;
		}
	}

	.status-data {
		width: 140rpx;
		padding: 2px 10px;
		box-sizing: border-box;
		font-size: 12px;
		border: 1px solid #9b99a7;
		border-radius: 5px;
		cursor: pointer;
		color: #9d9ba6;

	}

	.active {
		background: #e0fef4;
		color: #11c391;
		border: 1px solid #e0fef4;
		border: none;
	}
</style>