5-31-1

main.js

@@ -11,7 +11,7 @@ Vue.prototype.$store = store
  *  css部分使用了App.vue下的全局样式和iconfont图标，有需要图标库的可以留言。
  *  示例使用了uni.scss下的变量, 除变量外已尽量移除特有语法,可直接替换为其他预处理器使用
  */
-const msg = (title, duration=1500, mask=false, icon='none')=>{
+const msg = (title, duration=2500, mask=false, icon='none')=>{
 	//统一提示方便全局修改
 	if(Boolean(title) === false){
 		return;

pages/index/index.vue

@@ -14,7 +14,8 @@
 					孕妇姓名：
 				</view>
 				<view class="bg-val">
-					<input type="text" value="" placeholder="请输入您的姓名" class="val-ipt" v-model="name"/>
+					<input type="text" value="" placeholder="请输入您的姓名" class="val-ipt" v-model="name" :focus="fous.name"
+						ref="name"  />
 				</view>
 			</view>
 			<view class="bd-wrap flex">
@@ -22,7 +23,8 @@
 					身份证号：
 				</view>
 				<view class="bg-val">
-					<input type="idcard" value="" placeholder="请输入您的身份证号" class="val-ipt" v-model="cid"/>
+					<input type="idcard" value="" placeholder="请输入您的身份证号" class="val-ipt" v-model="cid"
+						:focus="fous.cid" ref="cid" />
 				</view>
 			</view>
 			<view class="bd-wrap flex">
@@ -30,7 +32,8 @@
 					户籍地址：
 				</view>
 				<view class="bg-val">
-					<input type="text" value="" placeholder="请输入户籍地址" class="val-ipt" v-model="reg"/>
+					<input type="text" value="" placeholder="请输入户籍地址" class="val-ipt" v-model="reg" :focus="fous.reg"
+						ref="reg" />
 				</view>
 			</view>
 			<view class="bd-wrap flex">
@@ -38,7 +41,8 @@
 					现居住地址：
 				</view>
 				<view class="bg-val">
-					<input type="text" value="" placeholder="请输入现居住地址" class="val-ipt" v-model="address"/>
+					<input type="text" value="" placeholder="请输入现居住地址" class="val-ipt" v-model="address"
+						:focus="fous.address" ref="address" />
 				</view>
 			</view>
 			<view class="bd-wrap flex">
@@ -46,7 +50,8 @@
 					联系电话：
 				</view>
 				<view class="bg-val">
-					<input type="text" value="" placeholder="请输入联系电话" class="val-ipt" v-model="phone"/>
+					<input type="text" value="" placeholder="请输入联系电话" class="val-ipt" v-model="phone"
+						:focus="fous.phone" ref="phone" />
 				</view>
 			</view>
 			<view class="bd-wrap flex">
@@ -54,7 +59,7 @@
 					孕妇银行卡号：
 				</view>
 				<view class="bg-val">
-					<input type="text" value="" placeholder="请输入银行卡号" class="val-ipt" v-model="bcd"/>
+					<input type="text" value="" placeholder="请输入银行卡号" class="val-ipt" v-model="bcd" :focus="fous.bcd" ref="bcd"/>
 				</view>
 			</view>
 			<view class="bd-wrap flex">
@@ -62,7 +67,8 @@
 					配偶姓名：
 				</view>
 				<view class="bg-val">
-					<input type="text" value="" placeholder="请输入您的配偶姓名" class="val-ipt" v-model="sname"/>
+					<input type="text" value="" placeholder="请输入您的配偶姓名" class="val-ipt" v-model="sname"
+						:focus="fous.sname" ref="sname" />
 				</view>
 			</view>
 			<view class="bd-wrap flex">
@@ -70,7 +76,8 @@
 					配偶身份证号：
 				</view>
 				<view class="bg-val">
-					<input type="idcard" value="" placeholder="请输入配偶身份证号" class="val-ipt" v-model="scid"/>
+					<input type="idcard" value="" placeholder="请输入配偶身份证号" class="val-ipt" v-model="scid"
+						:focus="fous.scid" ref="scid"/>
 				</view>
 			</view>
 			<view class="bd-wrap flex">
@@ -78,7 +85,8 @@
 					配偶户籍地址：
 				</view>
 				<view class="bg-val">
-					<input type="text" value="" placeholder="请输入配偶户籍地址" class="val-ipt" v-model="preg"/>
+					<input type="text" value="" placeholder="请输入配偶户籍地址" class="val-ipt" v-model="preg"
+						:focus="fous.preg" ref="preg" />
 				</view>
 			</view>
 			<view class="bd-wrap flex">
@@ -86,7 +94,8 @@
 					配偶现居住地址：
 				</view>
 				<view class="bg-val">
-					<input type="text" value="" placeholder="请输入配偶现居住地址" class="val-ipt" v-model="paddress"/>
+					<input type="text" value="" placeholder="请输入配偶现居住地址" class="val-ipt" v-model="paddress"
+						:focus="fous.paddress" ref="paddress" />
 				</view>
 			</view>
 			<view class="sm-wrap">
@@ -98,13 +107,13 @@
 						<view class="">
 							产前筛查高风险
 						</view>
-						<radio value="r1" :checked="gfx" color="#ff404c" clase="dd"/>
+						<radio value="r1" :checked="gfx" color="#ff404c" clase="dd" />
 					</view>
 					<view class="radio flex" @click="ycd = !ycd">
 						<view class="">
 							预产期年龄>35周岁
 						</view>
-						<radio value="r1" :checked="ycd" color="#ff404c" clase="dd"/>
+						<radio value="r1" :checked="ycd" color="#ff404c" clase="dd" />
 					</view>
 				</view>
 			</view>
@@ -116,11 +125,11 @@
 					{{hkb | showNum}}/2
 				</view>
 				<view class="img-list flex">
-					<view class="img-item" v-for="(sfzItem,sfzIndex) in hkb" @click="upImag(sfzIndex,hkb)" >
+					<view class="img-item" v-for="(sfzItem,sfzIndex) in hkb" @click="upImag(sfzIndex,hkb)">
 						<image :src="sfzItem" mode="" class="upimg" v-if="sfzItem"></image>
 						<image src="../../static/img/up-img.png" mode="" class="upimg" v-else></image>
-						<image src="../../static/icon/delimg.png" mode="" class="delimg" @click.stop="delImg(sfzIndex,hkb)"
-							v-if="sfzItem"></image>
+						<image src="../../static/icon/delimg.png" mode="" class="delimg"
+							@click.stop="delImg(sfzIndex,hkb)" v-if="sfzItem"></image>
 					</view>
 				</view>
 			</view>
@@ -148,11 +157,11 @@
 					{{cidimg | showNum}}/2
 				</view>
 				<view class="img-list flex">
-					<view class="img-item" v-for="(sfzItem,sfzIndex) in cidimg" @click="upImag(sfzIndex,cidimg)" >
+					<view class="img-item" v-for="(sfzItem,sfzIndex) in cidimg" @click="upImag(sfzIndex,cidimg)">
 						<image :src="sfzItem" mode="" class="upimg" v-if="sfzItem"></image>
 						<image src="../../static/img/up-img.png" mode="" class="upimg" v-else></image>
-						<image src="../../static/icon/delimg.png" mode="" class="delimg" @click.stop="delImg(sfzIndex,cidimg)"
-							v-if="sfzItem"></image>
+						<image src="../../static/icon/delimg.png" mode="" class="delimg"
+							@click.stop="delImg(sfzIndex,cidimg)" v-if="sfzItem"></image>
 					</view>
 				</view>
 			</view>
@@ -197,11 +206,11 @@
 					{{yscc | showNum}}/2
 				</view>
 				<view class="img-list flex">
-					<view class="img-item" v-for="(sfzItem,sfzIndex) in yscc" @click="upImag(sfzIndex,yscc)" >
+					<view class="img-item" v-for="(sfzItem,sfzIndex) in yscc" @click="upImag(sfzIndex,yscc)">
 						<image :src="sfzItem" mode="" class="upimg" v-if="sfzItem"></image>
 						<image src="../../static/img/up-img.png" mode="" class="upimg" v-else></image>
-						<image src="../../static/icon/delimg.png" mode="" class="delimg" @click.stop="delImg(sfzIndex,yscc)"
-							v-if="sfzItem"></image>
+						<image src="../../static/icon/delimg.png" mode="" class="delimg"
+							@click.stop="delImg(sfzIndex,yscc)" v-if="sfzItem"></image>
 					</view>
 				</view>
 			</view>
@@ -217,12 +226,12 @@
 					<view class="img-item" v-for="(sfzItem,sfzIndex) in bxfp" @click="upImag(sfzIndex,bxfp)">
 						<image :src="sfzItem" mode="" class="upimg" v-if="sfzItem"></image>
 						<image src="../../static/img/up-img.png" mode="" class="upimg" v-else></image>
-						<image src="../../static/icon/delimg.png" mode="" class="delimg" @click.stop="delImg(sfzIndex,bxfp)"
-							v-if="sfzItem"></image>
+						<image src="../../static/icon/delimg.png" mode="" class="delimg"
+							@click.stop="delImg(sfzIndex,bxfp)" v-if="sfzItem"></image>
 					</view>
 				</view>
 			</view>
-			
+
 			<view class="sm-wrap">
 				<view class="sm-tit" style="padding-right: 30rpx;">
 					其他需补充提交材料
@@ -234,12 +243,12 @@
 					<view class="img-item" v-for="(checkItem,checkIndex) in other" @click="upImag(checkIndex,other)">
 						<image :src="checkItem" mode="" class="upimg" v-if="checkItem"></image>
 						<image src="../../static/img/up-img.png" mode="" class="upimg" v-else></image>
-						<image src="../../static/icon/delimg.png" mode="" class="delimg" @click.stop="delImg(checkIndex,other)"
-							v-if="checkItem"></image>
+						<image src="../../static/icon/delimg.png" mode="" class="delimg"
+							@click.stop="delImg(checkIndex,other)" v-if="checkItem"></image>
 					</view>
 				</view>
 			</view>
-			
+
 		</view>
 		<view class="sub" @click="sub">
 			提交申请
@@ -256,6 +265,18 @@
 	export default {
 		data() {
 			return {
+				fous: {
+					name: false,
+					cid: false,
+					sname: false,
+					scid: false,
+					bcd: false,
+					phone: false,
+					address: false,
+					paddress: false,
+					reg: false,
+					preg: false,
+				},
 				name: '', //姓名
 				cid: '', //身份证号
 				sname: '', //配偶姓名
@@ -265,54 +286,54 @@
 				address: '', //地址
 				paddress: '', //配偶地址
 				reg: '', //户籍
-				preg: '',//配偶户籍
-				gfx: false,//产前高风险
-				ycd: false,//预产期年龄>35周岁
-				hkb:['',''],//户口本
-				jhz: '',//结婚证
-				cidimg: ['',''], //身份证正反面
+				preg: '', //配偶户籍
+				gfx: false, //产前高风险
+				ycd: false, //预产期年龄>35周岁
+				hkb: ['', ''], //户口本
+				jhz: '', //结婚证
+				cidimg: ['', ''], //身份证正反面
 				bcdimg: '', //银行卡图片
-				cqsc: '',//产前筛查高风险报告单
-				yscc:['',''],//羊水穿刺病历记录单
-				bxfp:['',''],//报销发票(含羊水穿刺收费项目明细)
-				other: ['',''],//其他需补充提交材料
+				cqsc: '', //产前筛查高风险报告单
+				yscc: ['', ''], //羊水穿刺病历记录单
+				bxfp: ['', ''], //报销发票(含羊水穿刺收费项目明细)
+				other: ['', ''], //其他需补充提交材料
 				loadingType: 'more',
 			}
 		},
 		filters: {
 			showNum(val) {
 				let i = 0
-				if(Array.isArray(val)) {
-					if(val) {
+				if (Array.isArray(val)) {
+					if (val) {
 						val.forEach(e => {
-							if(e) {
+							if (e) {
 								i++
 							}
 						})
 					}
-				}else {
-					if(val != '') {
+				} else {
+					if (val != '') {
 						i++
 					}
 				}
-				
+
 				return i
 			}
 		},
 		onShow() {
-			
+
 		},
 		methods: {
-			jy(arr,length) {
+			jy(arr, length) {
 				let i = 0
 				arr.forEach(item => {
-					if(item != '') {
+					if (item != '') {
 						i++
 					}
 				})
 				return i == length
 			},
-			upImag(index,list) {
+			upImag(index, list) {
 				console.log('上传')
 				let obj = this
 				upload({
@@ -333,10 +354,10 @@
 				}).then(res => {
 					// console.log(res[0].url)
 					// obj.bcdimg = res[0].url
-					obj.$set(obj,item,res[0].fullurl)
+					obj.$set(obj, item, res[0].fullurl)
 				});
 			},
-			delImg(index,list) {
+			delImg(index, list) {
 				console.log('删除')
 				// this.sfzShow = false
 				// list[index] = ''
@@ -344,64 +365,84 @@
 				list.splice(index, 1, '')
 			},
 			delImg1(name) {
-				this.$set(this,name,'')
+				this.$set(this, name, '')
+			},
+			jump(name) {
+				let obj = this
+				obj.$nextTick(() => {
+					obj.$refs[name]._focus()
+					obj.fous[name] = true
+				}, 50)
 			},
 			sub() {
 				let obj = this
-				if(obj.loadingType == 'loading') {
+				if (obj.loadingType == 'loading') {
 					return
 				}
 				// 校验
 				if (obj.name == '') {
+					obj.jump('name')
 					return obj.$api.msg('请输入您的姓名')
 				}
 				if (obj.cid == '') {
+					obj.jump('cid')
 					return obj.$api.msg('请输入您的身份证号')
 				}
-				if( !IdentityCodeValid(obj.cid.toUpperCase())) {
+				if (!IdentityCodeValid(obj.cid.toUpperCase())) {
+					obj.jump('cid')
 					return obj.$api.msg('请输入正确的身份证号')
 				}
-				if (obj.sname == '') {
-					return obj.$api.msg('请输入您的配偶姓名')
-				}
-				if (obj.scid == '') {
-					return obj.$api.msg('请输入您的配偶身份证号')
-				}
-				if( !IdentityCodeValid(obj.scid.toUpperCase())) {
-					return obj.$api.msg('请输入正确的配偶身份证号')
+				if (obj.reg == '') {
+					obj.jump('reg')
+					return obj.$api.msg('请输入户籍地址')
 				}
-				if (obj.bcd == '') {
-					return obj.$api.msg('请输入您的银行卡号')
+				if (obj.address == '') {
+					obj.jump('address')
+					return obj.$api.msg('请输入现居住地址')
 				}
 				if (obj.phone == '') {
+					obj.jump('phone')
 					return obj.$api.msg('请输入您的联系电话')
 				}
 				var re = /^1[2,3,4,5,6,7,8,9][0-9]{9}$/;
-				if(!re.test(obj.phone)) {
+				if (!re.test(obj.phone)) {
+					obj.jump('phone')
 					return obj.$api.msg('请输入正确的手机号码')
 				}
-				if (obj.address == '') {
-					return obj.$api.msg('请输入现居住地址')
+				if (obj.bcd == '') {
+					obj.jump('bcd')
+					return obj.$api.msg('请输入您的银行卡号')
 				}
-				if (obj.reg == '') {
-					return obj.$api.msg('请输入户籍地址')
+				if (obj.sname == '') {
+					obj.jump('sname')
+					return obj.$api.msg('请输入您的配偶姓名')
 				}
-				if (obj.paddress == '') {
-					return obj.$api.msg('请输入配偶现居住地址')
+				if (obj.scid == '') {
+					obj.jump('scid')
+					return obj.$api.msg('请输入您的配偶身份证号')
+				}
+				if (!IdentityCodeValid(obj.scid.toUpperCase())) {
+					obj.jump('scid')
+					return obj.$api.msg('请输入正确的配偶身份证号')
 				}
 				if (obj.preg == '') {
+					obj.jump('preg')
 					return obj.$api.msg('请输入配偶户籍地址')
 				}
+				if (obj.paddress == '') {
+					obj.jump('paddress')
+					return obj.$api.msg('请输入配偶现居住地址')
+				}
 				//户口本
-				if(!obj.jy(obj.hkb,2)) {
+				if (!obj.jy(obj.hkb, 2)) {
 					return obj.$api.msg('请上传户口本信息')
 				}
 				// 结婚证
-				if(obj.jhz == '') {
+				if (obj.jhz == '') {
 					return obj.$api.msg('请上传结婚证')
 				}
 				//身份证正反面
-				if(!obj.jy(obj.cidimg,2)) {
+				if (!obj.jy(obj.cidimg, 2)) {
 					return obj.$api.msg('请上传身份证正反面')
 				}
 				//银行卡图片
@@ -413,36 +454,36 @@
 					return obj.$api.msg('请上传产前筛查高风险报告单')
 				}
 				//羊水穿刺病历记录单
-				if(!obj.jy(obj.yscc,2)) {
+				if (!obj.jy(obj.yscc, 2)) {
 					return obj.$api.msg('请上传羊水穿刺病历记录单')
 				}
 				//报销发票
-				if(!obj.jy(obj.bxfp,2)) {
+				if (!obj.jy(obj.bxfp, 2)) {
 					return obj.$api.msg('请上传报销发票')
 				}
 				//其他需补充提交材料0
 				obj.loadingType = 'loading'
 				let sett = ''
-				if(obj.gfx && obj.ycd) {
+				if (obj.gfx && obj.ycd) {
 					// sett = ['产前筛查高风险','预产期年龄>35周岁']
-					sett ="产前筛查高风险,预产期年龄≥35周岁"
+					sett = "产前筛查高风险,预产期年龄≥35周岁"
 					// sett = '产前筛查高风险,预产期年龄≥35周岁'
-				}else if(obj.gfx){
+				} else if (obj.gfx) {
 					sett = '产前筛查高风险'
-				}else if(obj.ycd) {
+				} else if (obj.ycd) {
 					sett = '预产期年龄≥35周岁'
-				}else {
-					
+				} else {
+
 				}
 				sub_list({
 					user_name: obj.name, //姓名
 					idcard: obj.cid, //身份证号
 					address: obj.reg, //地址
 					current_address: obj.address,
-					phone: obj.phone,//
+					phone: obj.phone, //
 					card: obj.bcd,
 					mate: obj.sname, //配偶姓名
-					mate_idcard: obj.scid,//配偶身份证号
+					mate_idcard: obj.scid, //配偶身份证号
 					mate_address: obj.paddress,
 					mate_current_address: obj.preg,
 					diagnosis: sett,
@@ -507,6 +548,7 @@
 		line-height: 100rpx;
 		font-size: 32rpx;
 		position: relative;
+
 		.code {
 			position: absolute;
 			width: 100rpx;
@@ -515,6 +557,7 @@
 			color: #f64342;
 			font-size: 23rpx;
 		}
+
 		.bg-name {
 			width: 260rpx;
 			height: 100%;
@@ -609,19 +652,22 @@
 
 		}
 	}
+
 	.radio {
 		padding: 10rpx;
 		background-color: #f3f3f3;
 		margin-left: 20rpx;
 		font-size: 26rpx;
 		align-items: center;
+
 		view {
 			flex-shrink: 0;
 			padding-right: 10rpx;
 		}
+
 		.dd {
 			width: 35rpx !important;
 			height: 35rpx !important;
 		}
 	}
-</style>
+</style>

unpackage/dist/build/h5/index.html

@@ -1,2 +1,2 @@
 <!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>温岭市产前诊断报销申请表</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
-            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/index/static/index.63b34199.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/index/static/js/chunk-vendors.6b921e0b.js></script><script src=/index/static/js/index.cc925982.js></script></body></html>
+            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/index/static/index.63b34199.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/index/static/js/chunk-vendors.8c6d70a4.js></script><script src=/index/static/js/index.b654903b.js></script></body></html>