partnerApp/pages/caragent/confirmorder.vue

<template>
	<view class="">
		<view class="headers p rgb">
			<u-steps :list="numList" :current="0"></u-steps>
		</view>
		<view class="wab1 shu p rgb">
			<text>晋TF6F14六年年检代办服务</text>
			<view class="heng2" style="margin-top: 10rpx;">
				<u-tag text="代预约" size="mini" style="margin-right: 20rpx;" />
				<u-tag text="代办理" size="mini" />
			</view>
			<view>
				<view style="font-size: 24rpx;">
					<u-icon name="checkmark-circle-fill" color="#58748a" size="30" style="margin-right: 20rpx;">
					</u-icon>
					<text>资料无误，1至2天闪电办完，不需要跑车管所</text>
				</view>
				<view style="font-size: 24rpx;">
					<u-icon name="checkmark-circle-fill" color="#58748a" size="30" style="margin-right: 20rpx;">
					</u-icon>
					<text>已为100多万车主完成代办，品质值得信赖</text>
				</view>
			</view>
		</view>
		<view class="wab1 shu p rgb">
			<u-form :model="form" ref="uForm" label-width="230">
				<u-form-item label="车主姓名">
					<u-input placeholder="请输入车主本人姓名" v-model="form.name" type="text"></u-input>
				</u-form-item>
				<u-form-item label="车主手机号">
					<u-input placeholder="请输入车主本人手机号码" v-model="form.name" type="text"></u-input>
				</u-form-item>
				<u-form-item label="请选择邮寄地址" :border-bottom="false">
					<u-input type="select" :select-open="addressshow" v-model="form.region" placeholder="请选择地区"
						@click="addressshow = true"></u-input>
					<u-picker mode="region" v-model="addressshow" @confirm="regionConfirm"></u-picker>
				</u-form-item>
				<u-form-item>
					<u-input placeholder="请输入详细地址,年检办完将回寄合格标志给您" height="150" :border="border" v-model="form.name"
						type="textarea"></u-input>
				</u-form-item>
				<u-form-item label="行驶证副本编号" :border-bottom="false">
					<u-input placeholder="请输入行驶证副本编号" v-model="form.name" type="text"></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="wab1 heng p rgb">
			<text>服务费</text>
			<text style="color: red;">￥98</text>
		</view>
		<view class="flexd rgb  shu">
			<view class="" style="padding: 0 20rpx;box-sizing: border-box;">
				<u-checkbox-group size="26">
					<u-checkbox v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name">
						<view style="font-size: 24rpx;">
							{{item.name}}
						</view>
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="flexd_btn heng">
				<view style="">
					<text>合计￥</text>
					<text>98</text>
				</view>
				<view class="heng1" style="">
					<text>去支付</text>
				</view>
			</view>
		</view>
		<u-popup v-model="show" border-radius="14" mode="center" width="70%">
			<view class="shu1 shili">
				<text>温馨提示</text>
				<text>你的车检还未办理，逾期可能会扣款罚款且无法出价，是否确认离开？</text>
			</view>
			<view class="heng shili_btn">
				<view class="heng1" @click="fanhui">确认离开</view>
				<view class="heng1" @click="zhifu">立即支付</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				addressshow: false,
				border: true,
				numList: [{
					name: '支付订单'
				}, {
					name: '上传资料'
				}, {
					name: '年检办理'
				}, {
					name: '回寄标志'
				}, ],
				form: {
					name: '',
					region: '',
					sex: '',
					goodsType: "",
					time: "",
				},
				list: [{
					name: '同意《罚款代缴服务协议》',
					checked: false,
					disabled: false
				}, ],
			}
		},
		//自定义返回事件
		onBackPress(options) {
			if (options.from === 'backbutton') {
				this.show = true;
				return true;
			} else if (options.from === 'navigateBack') {
				return false;
			}
			return true;
		},
		onLoad() {

		},
		methods: {
			//确认离开
			fanhui() {
				this.show = false;
				uni.navigateBack(1)
			},
			//立即支付
			zhifu() {
				this.show = false;
			},
			regionConfirm(e) {
				console.log(e)
				this.form.region = e.province.label + e.city.label + e.area.label;
			}
		}

	}
</script>

<style>
	page {
		background-color: #f2f2f2;
		padding-bottom: 200rpx;
	}

	.flexd {
		position: fixed;
		bottom: 0;

	}

	.flexd_btn {
		border-top: 2rpx solid #F2F2F2;
		height: 90rpx;
		font-weight: bold;
	}
	.flexd_btn>view:nth-child(1) {
		width: 70%;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.flexd_btn>view:nth-child(2) {
		width: 30%;
		height: 100%;
		background-color: #007BFF;
		color: #FFFFFF;
	}
	.wab1 {
		margin-top: 20rpx;
	}

	.wab1>text {
		font-weight: bold;
		font-size: 28rpx;
	}

	.wab1>view:nth-child(3) {
		margin-top: 40rpx;
		border-top: 2rpx solid #F2F2F2;
		padding-top: 20rpx;
		box-sizing: border-box;
		color: #58748a;
	}

	.rgb {
		width: 100%;
		background-color: #FFFFFF;
	}

	.headers {
		height: auto;
	}

	.p {
		padding: 36rpx;
		box-sizing: border-box;
	}

	.shili_btn {
		width: 100%;
		height: 90rpx;
		border-top: 2rpx solid #F2F2F2;
	}

	.shili_btn>view {
		width: 50%;
		height: 100%;
		background-color: #ffffff;
		cursor: pointer;
	}

	.shili_btn>view:nth-child(2) {
		color: #FFFFFF;
		background-color: #007BFF;
	}

	.shili {
		padding: 40rpx;
		box-sizing: border-box;
	}

	.shili>text:nth-child(1) {
		font-weight: bold;
	}

	.heng {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.heng1 {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.heng2 {
		display: flex;
		align-items: center;
	}

	.shu {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
	}
	.shu1 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		
	}
</style>