partnerApp/pages/roadRescue/replacement.vue

<template>
	<view class="page">
		<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: "", //救援地址
					rescueSum: "168", //救援金额
					licencePlate: "", //车牌号
					rescueUser: "", //联系人
					phoneNumber: "", //电话
					serveCode: "203",
				}
			}
		},
		onShow() {

		},
		onLoad() {
			this.getCurrentLocation();
		},
		methods: {
			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;
					}
				});
			},
			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>