web-app-v1/pages/feedback/index.vue

<template>
	<view class="">
		<view class="page">
			<view class="uni-form-item uni-column">
			    <view class="title">身份证号<text>*</text></view>
			    <view>
			        <input type="idcard" value="" v-model="form.cre_num" placeholder="请输入您的身份证号码" placeholder-style="font-size:32rpx;color:#ccc"/>
			    </view>
			</view>
			<view class="uni-form-item uni-column">
			    <view class="title">所在地区<text>*</text></view>
			    <view style="position: relative;">
			        <input type="text" 
					disabled 
					v-model="region"
					@click="lotusAddressData.visible=true" 
					style="background-color: #F8F8F8;" 
					placeholder="省市区、县乡镇等" 
					placeholder-style="font-size:32rpx;color:#ccc"
					/>
					<view class="three" @click="lotusAddressData.visible=true"></view>
					<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
			    </view>
			</view>
			<view class="uni-form-item uni-column">
			    <view class="title">详细地址<text>*</text></view>
			    <view>
			        <textarea placeholder-style="font-size:32rpx;color:#ccc" v-model="form.address" placeholder="街道、楼牌号等"/>
			    </view>
			</view>
		</view>
		<view class="showTotal" v-if="submit">
			<view class="box">
				<view style="position: relative;">
					<image 
					:src="success?'../../static/team/success.png':'../../static/team/err.png'" 
					mode="widthFix" 
					class="box-image"></image>
				</view>
				<view class="show">
					<view class="show-top">
						{{success?'提交成功':'提交失败'}}
					</view>
					<view class="show-middle">
						{{success?'您已提交成功，可以使用系统！':'提交失败，请核对信息是否正确'}}
					</view>
					<view 
					class="show-button"
					@click="toIndex"
					:style="success?'background: linear-gradient(267deg, #5FBC23 0%, #85CE52 100%);':'background: linear-gradient(90deg, #F97C55 0%, #F44545 100%)'">
						知道了
					</view>
				</view>
			</view>
			<view class="over"></view>
		</view>
		<view class="button" @click="button">立即提交</view>
	</view>
</template>

<script>
	// import {IDCard} from "../../common/util/validator.js"
	import { _API_fillStatus } from '../../apis/user.js';
	import {getIdcardInfo } from '../../common/util/validator.js'
	import lotusAddress from "../../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
	export default{
		components:{
		    "lotus-address":lotusAddress
		},
		data(){
			return{
				address:'',
				cre_num:'',
				moreAdress:'',
				IDCard:'',
				submit:false,
				form:{
					cre_num:'',
					address:'',
					province:'',
					city:'',
					country:''
				},
				lotusAddressData:{
				    visible:false,
				    provinceName:'',
				    cityName:'',
				    townName:'',
				},
				region:'',
				success:false
			}
		},
		methods:{
			//打开picker
			openPicker() {
			    this.lotusAddressData.visible = true
			},
			//回传已选的省市区的值
			choseValue(res){
			//res数据源包括已选省市区与省市区code
				console.log(res);
				this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if(res.isChose){
					this.form.province = res.province;//省
					this.form.city = res.city;//市
					this.form.country = res.town;//区
					this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
				}
			},
			button(){
				if(this.form.cre_num && this.form.address && this.region){
					//匹配数字字符开头18位数并允许最后一位是X
					// let reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
					let info = getIdcardInfo(this.form.cre_num); 
					if(!info){
							uni.showToast({title:"身份证格式不正确！", icon:"none"})
					}else{
						var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",
						   21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",
						   33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",
						   42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",
						   51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",
						   63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"
						  };
						var province = this.form.cre_num.substr(0,2);
							if(vcity[province] == undefined)
							{
							   uni.showToast({title:"身份证号输入有误！", icon:"none"})
							}else{
								let code =this.form.cre_num
								if (code.length == 18) {
								    code = code.split('');
								    //∑(ai×Wi)(mod 11)
								    //加权因子
								    var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
								    //校验位
								    var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
								    var sum = 0;
								    var ai = 0;
								    var wi = 0;
								    for (var i = 0; i < 17; i++) {
								        ai = code[i];
								        wi = factor[i];
								        sum += ai * wi;
								    }
								    var last = parity[sum % 11];
								    if (parity[sum % 11] != code[17]) {
										uni.showToast({title:"身份证号输入有误！", icon:"none"})
								    }
									else{	
										// console.log("身份证格式正确")
										_API_fillStatus(this.form).then(res=>{
											console.log(22)
											if(res.code == 200){
												this.submit=true
												this.success=true
											}else{
												this.submit=true
												this.success=false
											}
										})
									}
								}
							}
					}
				}else{
					// console.log(this.cre_num,this.address,this.region)
					uni.showToast({title:"请补全信息!", icon:"none"})
					console.log("验证失败")
				}   
			},
			toIndex(){
				if(this.success=true){
					uni.switchTab({
					    url: '../index/index'
					});
				}
			},
		
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.page {
		background-color: #fff;
		padding:30rpx
		}
	.uni-form-item{
		margin-bottom: 30rpx;
		text{
			color: #F7684F;
			margin-left: 5rpx;
		}
		input{
			background-color: #F8F8F8;
			height:104rpx ;
			padding: 30rpx;
			border-radius: 8rpx;
		}
		textarea{
			background-color: #F8F8F8;
			width: 100%;
			height:378rpx ;
			padding: 30rpx;
			border-radius: 8rpx;
		}
		.three{
			 position: absolute;
			 top: 40rpx;
			 right: 30rpx;
			 width: 0;
			 height: 0;
			 border: 16rpx solid transparent;
			 border-top-color:#BABABA;
		}
		.title{
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
		
	}
	.button{
		width: 750rpx;
		line-height: 104rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 0;
		background-image: linear-gradient(#F97C55,#F44545);//渐变
	}
	.showTotal{
		.box{
			width: 620rpx;
			height: 384rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			right: 0;
			top:300rpx;
			margin: auto;
			z-index: 10000;
			border-radius: 26rpx;
			&-image{
				width: 200rpx;
				position:absolute;
				top: -50rpx;
				left: 225rpx;
			}
			.show{
				height: 384rpx;
				padding-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: column;
				&-top{
					// width: 620rpx;
					margin-top: 120rpx;
					font-size: 36rpx;
					color: #333;
					font-weight: bold;
				}
				&-middle{
					font-size:32rpx;
					color: #999;
				}
				&-button{
					width: 528rpx;
					line-height: 88rpx;
					text-align: center;
					color: #fff;
					border-radius: 44rpx;
				}
			}
			
		}
		.over{
			width: 100%;
			height: 100%;
			background-color: #000;
			opacity: 0.6;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
		}
		.button{
			width: 400rpx;
			height: 96rpx;
			background: linear-gradient(90deg, #F97C55 0%, #F44545 100%);
		}
	}
</style>