anmo-user/pages/my/hehuo.vue

<template>
	<view>
		<view class="hehuo_view">
			<image class="background_image" src="/static/image/high_zmjs.png"></image>
			<view class="text_view">
				<view class="item_view">
					<view class="item_title">服务城市 </view>
					<input @click="goCity" type="text" v-model="city" placeholder="请输入服务城市 " />
					<view class="xian"></view>
				</view>

				<view class="item_view">
					<view class="item_title">姓名</view>
					<input type="text" v-model="userName" placeholder="请输入姓名" />
					<view class="xian"></view>
				</view>
				<view class="item_view">
					<view class="item_title">联系电话</view>
					<input type="number" v-model="phone" maxlength="11" placeholder="请输入联系电话" />
					<view class="xian"></view>
				</view>
				<view class="item_view">
					<view class="item_title">年龄</view>
					<input type="number" v-model="age" maxlength="11" placeholder="请输入年龄" />
					<view class="xian"></view>
				</view>
				<view class="item_view">
					<view class="item_title">地址</view>
					<input type="text" v-model="address" placeholder="请输入地址" />
					<view class="xian"></view>
				</view>
				<view class="item_view">
					<view class="item_title">身份证号码</view>
					<input type="text" v-model="idNumber" placeholder="请输入身份证号码" />
					<view class="xian"></view>
				</view>
				<view class="item_view" @click="openBirthdatePicker">
					<view class="item_title">出生日期</view>
					<input type="text" v-model="birthdate" placeholder="请选择出生日期" disabled />
					<view class="xian"></view>
				</view>
				<view class="item_view" @click="openSexPicker">
					<view class="item_title">性别</view>
					<input type="text" v-model="sexText" placeholder="请选择性别" disabled />
					<view class="xian"></view>
				</view>
			<view class="flex justify-between">
				<view class="item_view">
					<view class="item_title">头像上传</view>
					<view class="flex" style="overflow: hidden;flex-direction: initial;">
						<view v-if="headImg.length">
							<view class="margin-top flex margin-right-sm">
								<view class="flex"
									style="width: 150upx;height: 150upx;margin-right: 10rpx;position: relative;">
									<image :src="headImg" style="width: 100%;height: 100%;"></image>
									<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
										@click="headImgremove(index)">
										<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="margin-top" @click="addImage('head')" v-if="headImg.length<=0">
							<view style="width: 150upx;height: 150upx;background: #F5F5F5;"
								class="flex justify-center align-center">
								<view>
									<view class="text-center">
										<image src="../../static/images/my/add.png"
											style="width: 54upx;height: 47upx;position: relative;">
										</image>
									</view>
									<view class="text-center text-xs margin-top-xs">上传图片</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item_view">
					<view class="item_title">身份证正面</view>
					<view class="flex" style="overflow: hidden;flex-direction: initial;">
						<view v-if="front.length">
							<view class="margin-top flex margin-right-sm">
								<view class="flex"
									style="width: 150upx;height: 150upx;margin-right: 10rpx;position: relative;">
									<image :src="front" style="width: 100%;height: 100%;"></image>
									<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
										@click="frontRemove">
										<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="margin-top" @click="addImage('front')" v-if="front.length<=0">
							<view style="width: 150upx;height: 150upx;background: #F5F5F5;"
								class="flex justify-center align-center">
								<view>
									<view class="text-center">
										<image src="../../static/images/my/add.png"
											style="width: 54upx;height: 47upx;position: relative;"></image>
									</view>
									<view class="text-center text-xs margin-top-xs">上传图片</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item_view">
					<view class="item_title">身份证反面</view>
					<view class="flex" style="overflow: hidden;flex-direction: initial;">
						<view v-if="back.length">
							<view class="margin-top flex margin-right-sm">
								<view class="flex"
									style="width: 150upx;height: 150upx;margin-right: 10rpx;position: relative;">
									<image :src="back" style="width: 100%;height: 100%;"></image>
									<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
										@click="backRemove">
										<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="margin-top" @click="addImage('back')" v-if="back.length<=0">
							<view style="width: 150upx;height: 150upx;background: #F5F5F5;"
								class="flex justify-center align-center">
								<view>
									<view class="text-center">
										<image src="../../static/images/my/add.png"
											style="width: 54upx;height: 47upx;position: relative;"></image>
									</view>
									<view class="text-center text-xs margin-top-xs">上传图片</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
				<!-- <view class="audit_message" v-if="auditContent != '' && bb == 3">拒绝原因：{{auditContent}}</view> -->
				<view class="save_btn" @tap="save" v-if="bb !=0">提交申请</view>
				<!-- <view class="save_btn" v-if="status == 0">审核中</view> -->
			</view>
		</view>
		<u-action-sheet :list="sexOptions" v-model="showSex" @click="handleSexSelect"></u-action-sheet>
		<u-picker v-model="showBirthdate" :params="dateParams" @confirm="handleBirthdateConfirm"></u-picker>
	</view>
</template>

<script>
	import configdata from '../../common/config.js';
	export default {
		data() {
			return {
				hotCitys: ['杭州', '天津', '北京', '上海', '深圳', '广州', '成都', '重庆', '厦门'],
				locationValue: '正在定位...',
				// auditContent: '',
				city: '',
				money: '',
				teamNumber: '',
				userName: '',
				phone: '',
				age: '',
				address: '',
				idNumber: '',
				birthdate: '',
				sex: '',
				sexText: '',
				front: '',
				back: '',
				showSex: false,
				sexOptions: [{
					text: '男'
				}, {
					text: '女'
				}],
				showBirthdate: false,
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				headImg: [],
				bb: true,
			}
		},
		onLoad() {
			this.getChannel();
		},
		methods: {
			// 本人近期照删除
			headImgremove(index) {
				this.headImg = ''
			},
			// 身份证正面删除
			frontRemove() {
				this.front = ''
			},
			// 身份证反面删除
			backRemove() {
				this.back = ''
			},
			openBirthdatePicker() {
				this.showBirthdate = true
			},
			handleBirthdateConfirm(value) {
				this.birthdate = value.year + '-' + value.month + '-' + value.day
			},
			openSexPicker() {
				this.showSex = true
			},
			handleSexSelect(index) {
				this.sex = index
				this.sexText = this.sexOptions[index].text
			},
			getChannel() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/app/artificer/selectAgencyById?userId=' + userId).then(res => {
					if (res.code == 0) {
						if (res.data == null) {
							this.bb = 1;
						} else {
							this.bb = res.data.status;
							this.city = res.data.city;
							this.age = res.data.age;
							this.headImg = res.data.img;
							this.userName = res.data.name;
							this.phone = res.data.phone;
							// this.userCertification = res.data.userCertification
							this.sex = res.data.userCertification.sex
							this.back = res.data.userCertification.back? res.data.userCertification.back:''
							this.front = res.data.userCertification.front ? res.data.userCertification.front:''
							this.idNumber = res.data.userCertification.idNumber
							this.birthdate = res.data.userCertification.birthdate
							this.address = res.data.userCertification.address
							this.sexText = res.data.userCertification.sex==0?'男':'女'
							
						}
						console.log(this.bb)
						// this.auditContent = res.data.auditContent;
					}
				});
			},
			//获取省市区
			Getcity(latitude, longitude) {
				this.$Request.get("/app/Login/selectCity", {
					lat: latitude,
					lng: longitude
				}).then(res => {
					console.log(res)
					this.city = res.data.city
					console.log(this.address)
				});
			},
			goCity() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						// that.city = res.address || '郑州'
						that.Getcity(res.latitude, res.longitude)
					}
				});
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	geocode: true,
				// 	success: function(res) {
				// 		console.log('当前位置：' + res.address.city);
				// 		that.city = res.address.city || '郑州'
				// 	}
				// });
			},
			save() {
				// let isStudent = this.$queue.getData("isStudent");
				// if (isStudent != 2) {
				// 	uni.showModal({
				// 		title: '温馨提示',
				// 		content: '您还没有进行实名认证，请认证完成之后再来操作吧！',
				// 		showCancel: true,
				// 		cancelText: '取消',
				// 		confirmText: '确认',
				// 		success: res => {
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: '/offlinetask/pages/public/authentication'
				// 				});
				// 			}
				// 		}
				// 	});
				// 	return;
				// }
				// this.form.headImg = this.headImg
				// this.headImg = this.headImg.toString();
				if (this.city === '') {
					this.$queue.showToast('请输入服务城市 ')
					return;
				}
				if (this.userName === '') {
					this.$queue.showToast('请输入姓名')
					return;
				}
				if (this.phone === '' || this.phone.length != 11) {
					this.$queue.showToast('请输入正确的手机号！')
					return;
				}
				if (this.age === '') {
					this.$queue.showToast('请输入年龄')
					return;
				}
				if (this.headImg == '') {
					this.$queue.showToast('请上传头像')
					return;
				}
				if (this.address === '') {
					this.$queue.showToast('请输入地址')
					return;
				}
				if (this.idNumber === '') {
					this.$queue.showToast('请输入身份证号码')
					return;
				}
				let idNumberReg =
					/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if (!idNumberReg.test(this.idNumber)) {
					this.$queue.showToast('请输入正确的身份证号码')
					return;
				}
				if (this.birthdate === '') {
					this.$queue.showToast('请选择出生日期')
					return;
				}
				if (this.sex === '') {
					this.$queue.showToast('请选择性别')
					return;
				}
				if (this.front === '') {
					this.$queue.showToast('请上传身份证正面')
					return;
				}
				if (this.back === '') {
					this.$queue.showToast('请上传身份证反面')
					return;
				}
				let userId = this.$queue.getData('userId');
				let agencyData = {
					userId: userId,
					name: this.userName,
					phone: this.phone,
					age: this.age,
					city: this.city,
					img: this.headImg,
				}
				this.$Request.postJson('/app/artificer/insertAgency', agencyData).then(res => {
					if (res.code == 0) {
						let certificationBody = {
							back: this.back,
							front: this.front,
							idNumber: this.idNumber,
							name: this.userName,
							userId: userId
						}
						let certificationQuery = [
							['address', this.address],
							['birthdate', this.birthdate],
							['classify', 1],
							['phone', this.phone],
							['sex', this.sex],
							['back',this.back],
							['front',this.front],
							['idNumber',this.idNumber],
							['userName',this.userName],
							['userId',this.userId],
						].map(item => item[0] + '=' + encodeURIComponent(item[1])).join('&')
						let certificationUrl = '/app/userCertification/insert?' + certificationQuery
						this.$Request.postJson(certificationUrl, certificationBody).then(certificationRes => {
							uni.hideLoading()
							if (certificationRes.code == 0) {
								this.$queue.showToast('提交成功！')
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							} else {
								this.$queue.showToast(certificationRes.msg || '实名认证提交失败')
							}
						}).catch(() => {
							uni.hideLoading()
							this.$queue.showToast('网络请求失败，请稍后重试')
						})
					} else {
						uni.hideLoading()
						this.$queue.showToast(res.msg || '提交申请失败')
					}
				}).catch(() => {
					uni.hideLoading()
					this.$queue.showToast('网络请求失败，请稍后重试')
				})
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
			addImage(type) {
				let that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < 1; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									try {
										let imageUrl = JSON.parse(uploadFileRes.data).data
										if (!imageUrl) {
											throw new Error('上传结果缺少图片地址')
										}
										if (type === 'front') {
											that.front = imageUrl
										} else if (type === 'back') {
											that.back = imageUrl
										} else {
											that.headImg = imageUrl
										}
									} catch (error) {
										that.$queue.showToast('图片上传失败')
									}
									uni.hideLoading()
								},
								fail: () => {
									uni.hideLoading()
									that.$queue.showToast('图片上传失败')
								}
							});
						}
					}
				})
			},
		}
	}
</script>

<style lang="less">
	@import '../../static/less/index.less';
	@import '../../static/css/index.css';

	.hehuo_view {
		width: 750rpx;
		height: 2900upx;

		.background_image {
			width: 750rpx;
			height: 2900upx;
			background-size: 100%;
			position: absolute;
		}

		.text_view {
			position: absolute;
			z-index: 1;
			width: 84%;
			margin: 1000rpx 50rpx 30rpx;

			.audit_message {
				color: red;
				width: 650rpx;
				height: 50rpx;
				margin-top: 50rpx;
			}

			.save_btn {
				width: 650rpx;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 10rpx;

				text-align: center;
				line-height: 88rpx;
				/* #ifdef MP-WEIXIN */
				margin-top: 150rpx;
				/* #endif */
				/* #ifdef H5 */
				margin-top: 100rpx;
				/* #endif */
				/* #ifdef APP-PLUS */
				margin-top: 180rpx;
				/* #endif */
			}

			.save_btn1 {
				width: 650rpx;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				margin-top: 100rpx;
				text-align: center;
				line-height: 88rpx;
			}

			.item_view {
				margin-top: 30rpx;

				.item_title {
					font-size: 28rpx;
					font-family: PingFang SC Heavy, PingFang SC Heavy-Heavy;
					font-weight: 800;
					color: #333333;
				}

				input {
					margin-top: 20rpx;
					height: 40rpx;
					font-size: 24rpx;
					font-family: PingFang SC Regular, PingFang SC Regular-Regular;
					font-weight: 400;
					color: #333333;
				}

				.xian {
					width: 630rpx;
					height: 1rpx;
					border: 1rpx solid #77D7B0;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>