wlred/pages/share/search.vue

<template>
	<view class="content">
		<image src="../../static/img/bz-bg.png" mode="widthFix" class="bz-bg"></image>
		<view class="bz-tit flex">
			<view class="hx"></view>
			<view class="">
				申请进度查询
			</view>
			<view class="hx"></view>
		</view>
		<view class="tab ">
			<view class="bd-wrap flex">
				<!--  -->
				<view class="bg-val">
					<input type="text" value="" placeholder="请输入您的身份证号" class="val-ipt" v-model="cid" />
				</view>
				<view class="btn" @click="search">
					查询
				</view>
			</view>
		</view>
		<view class="tab" v-if="loaded">
			<view class="search-tit">
				查询结果:
			</view>
			<view class="search-result" v-show="msg">
				<view class="">
					进度：{{msg}}
				</view>
				<view class="flex" style="padding-top: 20rpx;" v-show="resoon">
					<text style="flex-shrink: 0;">拒绝理由：</text><text>{{resoon}}</text>
				</view>
			</view>
			<view class="" v-show="msg == ''" style="padding: 20rpx;background-color: #fff;">
				您提交的身份证号码未查到提交记录
			</view>
		</view>
	</view>
</template>

<script>
	//孕期检查信息(母子健康中心小程序上将带有孕妇姓名 的检查页进行截屏上传)
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		upload,
		addrescuer,
		verify,
		sub_list,
		search
	} from '@/api/ask.js';
	export default {
		data() {
			return {
				cid: '',
				msg: '',
				resoon: '',
				loaded: false
			}
		},
		filters: {

		},
		watch: {

		},
		computed: {

		},
		onShow() {

		},
		methods: {
			search() {
				let obj = this
				if (obj.cid == '') {
					return obj.$api.msg('请输入身份证号码')
				}
				search({
					cid: obj.cid
				}).then(res => {
					obj.loaded = true
					// if (res.msg != 'ok') {

					// 	obj.msg = ''
					// } else {
					// 	console.log(res)
					// 	obj.msg = res.data.msg
					// 	if (res.data.refuse) {
					// 		obj.resoon = res.data.refuse
					// 	}
					// }
					if (res.msg == 'ok') {
						obj.msg = res.data.msg
						if (res.data.refuse) {
							obj.resoon = res.data.refuse
						}
					} else if (res.msg == '未发起申请') {
						obj.msg = ''
					} else {
						obj.msg = res.msg
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-tit {
		padding: 20rpx;
		background-color: #fff;
		color: #f74342;
		font-size: 28rpx;
	}

	.search-result {
		padding: 20rpx 20rpx 20rpx 60rpx;
		background-color: #fff;
		font-size: 26rpx;
	}

	.bz-bg {
		width: 750rpx;
	}

	.bz-tit {
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #f3392c;

		.hx {
			width: 70rpx;
			height: 2rpx;
			background-color: #f99a93;
			margin: 0 25rpx;
		}
	}

	.tab {
		width: 690rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 36rpx auto 0;
		box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2);
	}

	.bd-wrap {
		width: 690rpx;
		height: 100rpx;
		background-color: #fff;
		border-bottom: 1px solid #f2f2f2;
		line-height: 100rpx;
		font-size: 32rpx;
		position: relative;

		.code {
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			right: 10rpx;
			color: #f64342;
			font-size: 23rpx;
		}

		.bg-name {
			width: 260rpx;
			height: 100%;
			padding-left: 20rpx;
		}

		.bg-val {
			width: 540rpx;
			height: 100%;

			.val-ipt {
				display: inline-block;
				width: 100%;
				height: 100%;
				// background-color: #009100;
				padding-left: 10rpx;

			}
		}

		.btn {
			width: 150rpx;
			height: 100rpx;
			background-color: #f74342;
			color: #fff;
			text-align: center;
		}
	}

	.sub {
		margin-top: 100rpx;
		text-align: center;
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
		line-height: 100rpx;
		width: 750rpx;
		background-color: #f3392c;
	}

	.sm-wrap {
		background-color: #fff;
		padding-bottom: 28rpx;
		border-bottom: 1px solid #f2f2f2;
		position: relative;

		.sm-tit {
			// line-height: 87rpx;
			padding: 20rpx;
			font-size: 32rpx;
			line-height: 1.5;
			// padding-left: 20rpx;
		}

		.text-area {
			height: 156rpx;
			width: 634rpx;
			border-radius: 20rpx;
			border: 1px solid #e8e8e8;
			margin: auto;
			padding: 10rpx;
		}

		.pic-num {
			position: absolute;
			width: 75rpx;
			line-height: 34rpx;
			border-radius: 17rpx;
			background-color: #f3392c;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			right: 10rpx;
			top: 22rpx;
		}

		.img-list {
			padding-left: 28rpx;

			.img-item {
				width: 160rpx;
				height: 160rpx;
				position: relative;
				margin-right: 20rpx;

				.upimg {
					width: 160rpx;
					height: 160rpx;
				}

				.delimg {
					width: 39rpx;
					height: 38rpx;
					position: absolute;
					top: 0;
					right: 0;
				}

			}

		}
	}
</style>