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

<template>
	<view>
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="headers"></view>
		<view class="wab">
			<view class="wab_query shu">
				<view class="heng">
					<view>处罚决定书编号<u-icon name="info-circle" @click="show=true" color="#2979ff" size="36"
							style="margin-left: 10rpx;cursor: pointer;">
						</u-icon>
					</view>
					<text style="color:#FE9A0E;font-size: 24rpx;">现在下单，四小时内办结</text>
				</view>
				<view class="heng" style="position: relative;">
					<u-input v-model="value" type="text" height="90" :border="border" placeholder="请输入15-16位处罚决定书编号"
						placeholder-style="font-weight:bold" style="2px solid #dcdfe6;"></u-input>
					<u-icon name="camera" color="#2979ff" size="50" class="icon_photo" @tap="chooseImage()">
					</u-icon>
				</view>
				<u-button type="primary" shape="square" style="border-radius: 50px;font-weight: bold;"
					@click="inquire()">立即查询</u-button>
				<view style="text-align: center;">
					<view>点击查询即同意 <text style="color:#2682E7">用户服务协议</text>及<text style="color: #2682E7">平台隐私政策</text>
					</view>
				</view>
			</view>
			<view class="shu web_tell">
				<view style="color:#5D5F6C;">告知单编号≠处罚决定书编号<u-icon name="info-circle" @click="show1=true" color="#2979ff"
						size="36" style="margin-left: 10rpx;cursor: pointer;">
					</u-icon>
				</view>
				<image src="../../static/ticket/shili1.png" mode=""
					style="width: 100%;height: 260rpx;margin: 40rpx 0;cursor: pointer;" @click="show1=true">
				</image>
				<text style="color:#ABAAAF;font-size: 24rpx;">以实际现场单或处罚决定书为准</text>
			</view>
		</view>
		<view class="shu flexd color">
			<view class="heng1 " style="margin: 30px 0;font-size: 16px;">
				<text @click="issue()" style="cursor: pointer;">常见问题</text>
				<view style="width: 2rpx;height: 40rpx;margin: 0 50rpx;background-color: #E9EAEE;"></view>
				<text @click="order()" style="cursor: pointer;">我的订单</text>
			</view>
			<view class="shu">
				<view class="heng1">
					<view class="logo"></view>
					<view>本服务由晋掌柜提供</view>
				</view>
				<text>客服电话：020-62936789</text>
			</view>
		</view>
		<!-- 弹出示例 -->
		<u-popup v-model="show" border-radius="14" mode="center">
			<view class="shu shili">
				<text>处罚决定书示例</text>
				<image src="../../static/ticket/shili4.png" mode="" style="width: 400rpx;"></image>
			</view>
			<view class="shili_btn" @click="show=false">
				<text>我知道了</text>
			</view>
		</u-popup>
		<u-popup v-model="show1" border-radius="14" mode="center" width="80%">
			<view class="shili">
				<image src="../../static/ticket/shili3.png" mode="" style="width:100%;height:550px;"></image>
			</view>
		</u-popup>
		<u-popup v-model="show2" border-radius="14" mode="bottom" height="auto">
			<view class="shu ping">
				<view class="shu">
					<text style="color: #5e5e5e;">处罚决定书编号</text>
					<text style="font-weight: 700;color: #000000;">1232323232333333</text>
				</view>
				<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 v-model="form.time" type="select" placeholder="罚单签字日期,不是违法日期" @click="showtime=true">
						</u-input>
						<u-picker v-model="showtime" mode="time" @confirm="confirm"></u-picker>
					</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="手机号码">
						<u-input placeholder="手机号码" v-model="form.name" type="text"></u-input>
					</u-form-item>
				</u-form>

				<u-notice-bar :autoplay="autoplay" :playState="playState" :speed="speed" :mode="mode" :show="noticeshow"
					:type="type" :list="list" :moreIcon="moreIcon" :volumeIcon="volumeIcon" :duration="duration"
					bgColor="" padding="8rpx 24rpx" :isCircular="isCircular" style="margin: 60rpx 0;"></u-notice-bar>
				<u-button type="primary" shape="square" style="border-radius: 50px;font-weight: bold;"
					@click="banli()">立即办理</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				border: true,
				show: false,
				show1: false,
				show2: false,
				showtime: false,
				form: {
					name: '',
					intro: '',
					sex: '',
					goodsType: "",
					time: "",
				},
				noticeshow: true,
				autoplay: true,
				type: 'warning',
				list: ['交管局规定,如逾期滞纳金按每日3%累计,请尽快办理。'],
				mode: 'horizontal',
				playState: 'play',
				speed: 160,
				duration: 1000,
				moreIcon: true,
				volumeIcon: true,
				isCircular: true,
			}
		},
		onLoad() {

		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: "compressed",
					success(res) {}

				});
			},
			//跳转优惠券
			issue() {
				uni.navigateTo({
					url: "/pages/ticket/issue"
				})
			},
			//跳转订单
			order() {
				uni.navigateTo({
					url: "/pages/ticket/order"
				})
			},
			//根据编号查询接口
			inquire() {
				this.show2 = true;
			},
			banli() {
				this.show2 = false;
				uni.navigateTo({
					url: "/pages/ticket/confirmorder"
				})
			},
			//认罚日期
			confirm(e) {
				console.log(e);
				this.form.time = e.year + "-" + e.month + "-" + e.day;
			},
		}
	}
</script>

<style>
	page {
		background-color: #F3F4F8;
	}

	.headers {
		width: 100%;
		height: 240rpx;
		background-image: url(../../static/image/claim/claimtop.png);
		background-size: 100% 100%;
	}

	.wab {
		width: 100%;
		height: auto;
		padding: 0 36rpx;
		box-sizing: border-box;
	}

	.wab_query {
		width: 100%;
		height: 400rpx;
		border-radius: 15rpx;
		background-color: #FFFFFF;
		box-shadow: 0 0 10px 0 #a8bbca;
		margin-top: -40px;
		padding: 20rpx 20rpx;
	}

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

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

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

	.icon_photo {
		position: absolute;
		right: 20rpx;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.web_tell {
		padding: 36rpx;
		box-sizing: border-box;
		margin-top: 10px;
	}

	.flexd {
		margin: 60rpx 0;

	}

	.color {
		color: #696A6E;
	}

	.logo {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-image: url(../../static/bigLogo.png);
		background-size: 100% 100%;
	}

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

	.shili>text {
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.shili_btn {
		height: 52px;
		border-top: 1px solid #F2F2F2;
		text-align: center;
		cursor: pointer;
	}

	.shili_btn>text {
		line-height: 50px;
		color: #007BFF;
	}

	.ping {
		padding: 60rpx 40rpx;
		box-sizing: border-box;
	}
</style>