vue-insagent-app/pages/ticket/confirmorder.vue

<template>
	<view class="">
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="wab1 shu1">
			<view>晋 <text style="font-weight: bold;">RX4066</text> 的罚单缴费</view>
			<view class="binhao">
				<text>处罚决定书编号</text>
				<text>{{bianhao}}</text>
			</view>
			<view class="shu1 wab_data">
				<view class="heng">
					<text>处罚决定书编号</text>
					<text>{{bianhao}}</text>
				</view>
				<view class="heng">
					<text>车牌号</text>
					<text>晋RX4066</text>
				</view>
				<view class="heng">
					<text>认罚金额</text>
					<text>￥100</text>
				</view>
				<view class="heng">
					<text>电话号码</text>
					<text>18335592986</text>
				</view>
				<view class="heng">
					<text>认罚日期</text>
					<text>2021-09-28</text>
				</view>
			</view>
			<text style="font-size: 24rpx;color: #999999;text-align: center;cursor: pointer;">信息有误，点击返回编辑</text>
		</view>
		<view class="wab1 shu1" style="color: #607c92;font-size: 24rpx;">
			<text>
				<u-icon name="checkmark-circle-fill" color="#2979ff" class="icon_photo">
				</u-icon>四小时内办结，无需再跑车管所
			</text>
			<text>
				<u-icon name="checkmark-circle-fill" color="#2979ff" class="icon_photo">
				</u-icon>已为5000万+车主完成代办，品质值得信赖
			</text>
		</view>
		<view class="wab1 shu1 money wab_data">
			<view class="heng">
				<text>罚款金额</text>
				<text>￥100</text>
			</view>
			<view class="heng">
				<text>服务费</text>
				<text>￥15</text>
			</view>
		</view>
		<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 class="flexd shu1">
			<view class="flexd_tishi heng2">
				<u-icon name="info-circle" color="#f1622a" class="icon_photo">
				</u-icon>罚单不及时办理将产生每天3%的滞纳金，请尽快办理
			</view>
			<view class="flexd_btn heng">
				<view class="heng2">
					<text>合计￥</text>
					<text>115</text>
				</view>
				<view class="heng1" @click="zhifu">
					去支付
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				bianhao: "1234562358652415",
				agree: false,
				list: [{
					name: '同意《罚款代缴服务协议》',
					checked: false,
					disabled: false
				}, ],

			}
		},
		onLoad() {
			this.bianhao = this.bianhao.substr(0, 4) + " " + this.bianhao.substr(4, 4) + " " + this.bianhao.substr(8, 4) +
				" " + this.bianhao.substr(12, 4);
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f4f3f8;
		padding: 10rpx 36rpx;
		box-sizing: border-box;
	}

	.wab1 {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		box-shadow: 0 0 12rpx 0 #F2F2F2;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		margin: 20rpx 0;
	}

	.shu1 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

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

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

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

	.shu {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.binhao {
		margin: 20rpx 0;
	}

	.binhao>text {
		color: #2163ad;
		background: #3796ff26;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.wab_data .heng>text:nth-child(1) {
		color: #6c6c6c;
	}

	.wab_data .heng>text:nth-child(2) {
		font-weight: bold;
	}

	.icon_photo {
		margin-right: 10rpx;
	}

	.flexd {
		height: auto;
		position: fixed;
		left: 36rpx;
		right: 36rpx;
		bottom: 60rpx;
		background-color: #fffdee;
		border-bottom-left-radius: 60rpx;
		border-bottom-right-radius: 60rpx;
	}

	.flexd_btn {
		width: 100%;
		height: 100rpx;
		border-radius: 60rpx;
		box-shadow: 0 6px 10px -6px #aaacac;

	}

	.flexd_btn>view:nth-child(1) {
		width: 70%;
		height: 100%;
		background-color: #FFFFFF;
		border-top-left-radius: 60rpx;
		border-bottom-left-radius: 60rpx;
		font-weight: bold;
		font-size: 32rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.flexd_btn>view:nth-child(2) {
		width: 30%;
		height: 100%;
		background-color: #007BFF;
		border-top-right-radius: 60rpx;
		border-bottom-right-radius: 60rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.flexd_tishi {
		width: 100%;
		height: 60rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		color: #f1622a;
		font-size: 24rpx;
	}
</style>