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

<template>
	<view class="page">
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="address p-3 mb-4" @click="stopMap">
			<view class="title">
				<u-icon name="map" color="#2c2a35" size="38"></u-icon>
				<text>救援位置</text>
			</view>
			<view class="dis j-s a-start mt-2">
				<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 class="address p-3 mb-4">
			<text class="title">填写详细信息</text>
			<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: {
					rescuePosition: null, //救援地址
					rescueSum: "168", //救援金额
					licencePlate: "", //车牌号
					rescueUser: "", //联系人
					phoneNumber: "", //电话
					serveCode: "203",
				}
			}
		},
		onShow() {
			if (!this.dataInfo.rescuePosition) {
				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.dataInfo.rescuePosition = 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"
				})
			},
			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"
					});
				}
			},
		}
	}
</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;
			}
		}
	}

	.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;
		}
	}
</style>