app_tree_planting/pages/user/mine_certif_search.vue

<template>
	<view class="page">
		<view class="content">
			<view class="title-box"></view>
			<view class="state-bar">
				<image src="../../static/images/ic_arrow_left.png" mode="aspectFill" @click="closePage()"></image>
				<text>证书查询</text>
			</view>
			<image src="/static/images/ic_search_certif_icon.png" mode="scaleToFill"
				style="width: 262rpx;height: 106rpx;position: absolute;left:104rpx;top:214rpx;"></image>
			<view :class="currentIndex==1? 'bg-1':'bg-2'">
				<view class="tab-bar">
					<view :class="currentIndex==1? 'tab-active' : 'tab-default'" @click="tabChange(1)">个人证书</view>
					<view :class="currentIndex==2? 'tab-active' : 'tab-default'" @click="tabChange(2)">单位证书</view>
				</view>
				<view class="centent-box" v-if="currentIndex==1">
					<view class="box-item">
						<text>姓名</text>
						<input @input="inputName" placeholder="请输入姓名" :value="name" />
					</view>
					<view class="box-item">
						<text>手机号</text>
						<input @input="inputPhone" placeholder="请输入手机号" :value="phone" />
					</view>
					<view class="box-item">
						<text>身份证号</text>
						<input @input="inputIdcard" placeholder="请输入身份证号码" :value="idcard" />
					</view>
				</view>
				<view class="centent-box" v-if="currentIndex==2" style="margin-top: 120rpx;">
					<view class="box-item">
						<text>手机号</text>
						<input @input="inputPhone" placeholder="请输入手机号" :value="phone" />
					</view>
					<view class="box-item">
						<text>单位名称</text>
						<input @input="inputUnitName" placeholder="请输入单位名称" :value="unitname" />
					</view>
				</view>
				<view class="btn" @click="doSearch">查询</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 1,
				bg1: "/static/images/ic_certify_tab_2.png",
				bg: "/static/images/ic_certify_tab_2.png",
				bg2: "/static/images/ic_certify_tab_1.png",
				name: "",
				phone: "",
				idcard: "",
				unitname: ""
			}
		},
		methods: {
			tabChange(i) {
				this.currentIndex = i;
				if (i == 1) {
					this.bg = this.bg1
				} else {
					this.bg = this.bg2
				}
			},
			inputName(event) {
				this.name = event.target.value
			},
			inputPhone(event) {
				this.phone = event.target.value
			},
			inputIdcard(event) {
				this.idcard = event.target.value
			},
			inputUnitName(event) {
				this.unitname = event.target.value
			},
			closePage() {
				uni.navigateBack()
			},
			doSearch() {
				var _self = this;
				if (_self.currentIndex == 1) {
					//个人证书
					if (_self.name == "") {
						uni.showToast({
							icon: 'error',
							title: "请输入姓名"
						});
						return;
					}
					if (_self.phone == "") {
						uni.showToast({
							icon: 'error',
							title: "请输入手机号码"
						})
						return;
					}
					if (_self.idcard == "") {
						uni.showToast({
							icon: 'error',
							title: "请输入身份证号码"
						})
						return;
					}
					console.log("查询")
					uni.navigateTo({
						url: "/pages/user/mine_duty_certif?name=" + _self.name + "&phone=" + _self.phone +
							"&idcard=" + _self.idcard,
					})
				} else {
					if (_self.phone == "") {
						uni.showToast({
							icon: 'error',
							title: "请输入手机号码"
						})
						return;
					}
					//单位证书
					if (_self.unitname == "") {
						uni.showToast({
							icon: 'error',
							title: "请输入单位名称"
						})
						return;
					}
					uni.navigateTo({
						url: "/pages/user/mine_duty_certif_unit?name=" + _self.unitname + "&phone=" + _self.phone,
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;

	}

	.page {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: auto;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		position: relative;

	}

	.box {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		min-height: 700rpx;
		height: auto;
		width: 92%;
		position: absolute;
		top: 470rpx;
		left: 50%;
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		box-shadow: 0rpx 7rpx 33rpx 16rpx rgba(188, 226, 204, 0.15);
		border-radius: 30rpx;
		overflow: hidden;


	}

	.centent-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		margin-top: 15rpx;

		.box-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20rpx 40rpx;
			font-size: 30rpx;
			width: 100%;

			text {
				flex: 0.4;
				margin: 0rpx;
				padding: 0rpx;
				font-size: 30rpx;
			}

			input {
				padding: 0rpx;
				margin: 0rpx;
				font-size: 30rpx;
			}
		}
	}

	.btn {
		background-color: #00821E;
		text-align: center;
		margin: 50rpx 30rpx;
		padding: 20rpx 30rpx;
		color: white;
		border-radius: 30rpx;
		font-size: 30rpx;
	}

	.tab-bar {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding-top: 15rpx;

		.tab-active {
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			color: #00821E;
		}

		.tab-default {
			text-align: center;
			font-size: 40rpx;
			font-weight: 200;
			color: #00821E;
		}
	}

	.title-box {
		width: 100%;
		height: 800rpx;
		background-image: url('../../static/images/ic_certify_title_bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.bg-1 {
		width: 88%;
		height: 800rpx;
		background-image: url('../../static/images/ic_certify_tab_2.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// position: fixed;
		// top: 400rpx;
		// left: 40rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.bg-2 {
		background-image: url('../../static/images/ic_certify_tab_1.png');
		width: 88%;
		height: 800rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// position: fixed;
		// top: 400rpx;
		// left: 40rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.state-bar {
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		margin: 45rpx 0rpx;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-left: 20rpx;
		}

		text {
			color: white;
			font-size: 40rpx;
			align-self: center;
			text-align: center;
			width: 100%;
			margin-left: -70rpx;
		}
	}
</style>