sadjv3_user/pages/my/hehuo.vue

<template>
	<view class="hehuo_view">
		<view class="advantage-title">
			<image style="width: 35rpx; height: 35rpx; margin-right:10rpx; margin-top: 5rpx;" src="../../static/technician.png"></image>申请合作技师</view>
		<view class="advantage-bor" style="margin-right: 10rpx;"></view>
		<view class="text_view">
			<!-- <view class="item_view">
				<view class="item_title">服务城市 </view>
				<u-input @click="goCity" type="text" v-model="city" placeholder="请输入服务城市 " />
				<view class="xian"></view>
			</view> -->
			
			<uni-forms ref="baseForm" :disabled="true" v-if="city">
				<uni-forms-item label="选择城市" required :disabled="true">
					<picker class="addRess" :disabled="true" range-key="AreaName" mode="multiSelector">
						<view class="uni-input">
							<text>{{city}}</text>
						</view>
					</picker>
				</uni-forms-item>
			</uni-forms>
			<uni-forms ref="baseForm" v-else>
				<uni-forms-item label="服务城市" required>
					<picker class="addRess" @change="bindPickerChange" @columnchange="pluginclass" :value="pickVal" :range="cityArr"
						range-key="AreaName" mode="multiSelector">
						<view class="qing" v-if="pickVal2.length==0">请选择城市</view>
						<view v-else class="uni-input">
							<text>{{cityData}}</text>
						</view>
					</picker>
				</uni-forms-item>
			</uni-forms>
			<view class="item_view">
				<view class="item_title">姓名</view>
				<u-input type="text" v-model="userName" placeholder="请输入姓名" />
				<view class="xian"></view>
			</view>
			<view class="item_view">
				<view class="item_title">联系电话</view>
				<u-input type="number" v-model="phone" maxlength="11" placeholder="请输入联系电话" />
				<view class="xian"></view>
			</view>
			<view class="item_view">
				<view class="item_title">年龄</view>
				<u-input type="number" v-model="age" maxlength="11" placeholder="请输入年龄" />
				<view class="xian"></view>
			</view>
			<view class="item_view">
				<view class="item_title">请选合作项目</view>
				<view class="guke-list">
					<view class="guke-btn huiBtn" :class="{ lanBtn: selected.includes(item) }"
						@click="gukeBtn(item)" v-for="(item,index) in typeList" :key="index">
						{{item.value}}
					</view>
				</view>
			</view>
			<view class="item_view">
				<view class="item_title" style="margin-bottom: 10px;">上传身份证正面</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;margin-top: -1px;right: 0px;"
									@click="frontremove(index)">
									<u-icon name="close-circle-fill" color="#039d88" size="50rpx"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="margin-top" @click="addImage()" v-else>
						<view class="flex justify-center align-center margin-top-view">
							<view>
								<view class="text-center">
									<image style="width: 43.06rpx;height: 38.19rpx;" src="../../static/orderDetail/img-shang.png" mode=""></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" style="margin-bottom: 10px;">上传身份证反面</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;margin-top: -1px;right: 0px;"
									@click="frontremoves(index)">
									<u-icon name="close-circle-fill" color="#039d88" size="50rpx"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="margin-top" @click="addImageBack()" v-else>
						<view class="flex justify-center align-center margin-top-view">
							<view>
								<view class="text-center">
									<image style="width: 43.06rpx;height: 38.19rpx;" src="../../static/orderDetail/img-shang.png" mode=""></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" style="margin-bottom: 10px;">上传资格证书（可多张）</view>
				<view class="flex" style="overflow: hidden;flex-direction: initial;">
					<view class="margin-top flex margin-right-sm flex-wrap" v-if="certification.length">
						<view class="flex" style="width: 150upx;height: 150upx;margin-right: 10rpx;position: relative;"
							v-for="(image,index) in  certification" :key="index">
							<image :src="image" style="width: 100%;height: 100%;"></image>
							<view style="z-index: 9;position: absolute;margin-top: -1px;right: 0px;"
								@click="frontremoveC(index)">
								<u-icon name="close-circle-fill" color="#039d88" size="50rpx"></u-icon>
							</view>
						</view>
					</view>
					<view class="margin-top" @click="addImageC()" v-if="certification.length < 6">
						<view class="flex justify-center align-center margin-top-view">
							<view>
								<view class="text-center">
									<image style="width: 43.06rpx;height: 38.19rpx;" src="../../static/orderDetail/img-shang.png" mode=""></image>
								</view>
								<view class="text-center text-xs margin-top-xs">上传图片</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		
		</view>
		<view  class="push-button">
			<view class="que-btn" @tap="save" v-if="bb!=0">提交申请</view>
		</view>
		
	</view>
</template>

<script>
	import * as websocketUtils from 'utils/websocketUtils.js';
	export default {
		data() {
			return {
				selected:[],
				pickVal: [0, 0, 0], // 选择器默认值
				pickVal2:[],   // 辅助城市名字线索
				cityArr: [],   // 所有城市
				hotCitys: ['杭州', '天津', '北京', '上海', '深圳', '广州', '成都', '重庆', '厦门'],
				locationValue: '正在定位...',
				// auditContent: '',
				city: '',
				money: '',
				teamNumber: '',
				userName: '',
				phone: '',
				age: '',
				front: '',
				back:'',
				certification:[],
				bb:'1',
				cityData:'',
				typeId: '',
				typeList:[]
			}
		},
		onLoad() {
			this.getChannel();
			this.loadProvinces();
			this.fuwuType()
		},
		methods: {
			gukeBtn(item) {
				var index = this.selected.indexOf(item);
				if (index === -1) {
					this.selected.push(item);
				} else {
					this.selected.splice(index, 1);
				}
				var data = [];
				for (var i = 0; i < this.selected.length; i++) {
						data.push(this.selected[i].id)
				}
				this.typeId = data.join(",")
			},
			fuwuType(){
				this.$Request.get("/app/dict/list", {
					type: '服务类型'
				}).then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.typeList = res.data
						}
					}
				});
			},
			loadProvinces() { // 加载省份
				uni.request({
					url: 'http://test-api.tiananhub.com/api/province/GetListProvince',
					method: 'get',
					success: async (res) => {
						let {
							data
						} = res.data
						console.log(data)
						this.cityArr[0] = data
						this.loadCities(data[0].AreaId)
						this.$forceUpdate()
					},
					fail: async (res) => {}
				})
			},
			// 请求地级市
			loadCities(AreaId) {
				uni.request({
					url: 'http://test-api.tiananhub.com/api/province/GetListCity',
					data: {
						AreaId
					},
					method: 'get',
					success: async (res) => {
						let {
							data
						} = res.data
						this.cityArr[1] = data
						this.loadAreas(data[0].AreaId)
			
						this.$forceUpdate()
					},
					fail: async (res) => {}
				})
			},
			// 请求县区市
			loadAreas(AreaId) {
				uni.request({
					url: 'http://test-api.tiananhub.com/api/province/GetListCity',
					data: {
						AreaId
					},
					method: 'get',
					success: async (res) => {
						let {
							data
						} = res.data
						this.cityArr[2] = data
			
						this.$forceUpdate()
					},
					fail: async (res) => {}
				})
			},
			// 确定其他选择的值
			bindPickerChange(data) {
				this.pickVal=data.target.value;
				this.pickVal2=data.target.value;
				console.log("data====",this.pickVal2)
				this.cityData=this.cityArr[0][this.pickVal2[0]].AreaName+'-'+this.cityArr[1][this.pickVal2[1]].AreaName+'-'+this.cityArr[2][this.pickVal2[2]].AreaName
				
			},
			// 选择时且未点击确定是的值
			pluginclass(e) {
				if (e.detail.column == 0) {
					this.loadCities(this.cityArr[0][e.detail.value].AreaId);
				}
				if (e.detail.column == 1) {
					this.loadAreas(this.cityArr[1][e.detail.value].AreaId);
				}
			},
			// 身份证正面删除
			frontremove(index) {
				this.front = ''
			},
			// 身份证反面删除
			frontremoves(index) {
				this.back = ''
			},
			// 资质证书删除
			frontremoveC(index) {
				this.certification = []
			},
			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.userName = res.data.name;
							this.phone = res.data.phone;
							if(res.data.certification!=null){
								this.certification = res.data.certification.split(',')
							}
							if(res.data.front!=null){
								this.front = res.data.front;
							}
							if(res.data.back!=null){
								this.back=res.data.back;
							}
							console.log('111111111',this.certification)
						}
						// 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.Getcity(res.latitude, res.longitude)
					}
				});
			},
			save() {
				if (this.cityData === '') {
					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.typeId) {
					this.$queue.showToast('请选合作项目')
					return;
				}
				if (this.front == '') {
					this.$queue.showToast('请上身份证正面')
					return;
				}
				if (this.back == '') {
					this.$queue.showToast('请上身份证反面')
					return;
				}
				
				this.certification = this.certification.toString();
				let userId = this.$queue.getData('userId');
				let data = {
					userId: userId,
					name: this.userName,
					phone: this.phone,
					age: this.age,
					city: this.cityData,
					front: this.front,
					back:this.back,
					certification:this.certification,
					classifyId: this.typeId,
				}
				this.$Request.postJson('/app/artificer/insertAgency', data).then(res => {
					if (res.code == 0) {
						uni.hideLoading();
						this.$queue.showToast('提交成功！');
						setTimeout(d => {
							uni.navigateBack();
						}, 1000);
					} else {
						uni.hideLoading();
						this.$queue.showToast(res.msg);
					}
				});
			},
			addImageC() {
				let that = this
				uni.chooseImage({
					count: 4,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认两者都有
					sourceType: ['album', 'camera'],
					success: res => {
						that.$queue.showLoading("上传中...");
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							var tempFilePaths=res.tempFilePaths[i]
							console.log("tempFilePaths----",res)
							that.checkImageSize(tempFilePaths, (isValid) => {
							        if (isValid) {
										uni.uploadFile({ // 上传接口
											url: websocketUtils.uploadFileUrl(), //真实的接口地址
											filePath: tempFilePaths,
											name: 'file',
											success: (uploadFileRes) => {
												console.log(uploadFileRes.data)
												that.certification.push(JSON.parse(uploadFileRes.data)
													.data)
												// that.certification = JSON.parse(uploadFileRes.data).data
												console.log(that.certification)
												uni.hideLoading();
											}
										});
							          // 图片校验通过后的逻辑
							          console.log('图片校验通过，可以上传');
							        } else {
							          console.log('图片超出大小限制，请重新选择');
							        }
							});
						}
						
					}
				})
			},
			addImageBack() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认两者都有
					sourceType: ['album', 'camera'],
					success: res => {
						that.$queue.showLoading("上传中...");
						var tempFilePaths=res.tempFilePaths[0]
						console.log("tempFilePaths----",res)
						that.checkImageSize(tempFilePaths, (isValid) => {
						        if (isValid) {
									uni.uploadFile({ // 上传接口
										url: websocketUtils.uploadFileUrl(), //真实的接口地址
										filePath: res.tempFilePaths[0],
										name: 'file',
										success: (uploadFileRes) => {
											console.log(uploadFileRes.data)
											that.back = JSON.parse(uploadFileRes.data).data
											console.log(that.back)
											uni.hideLoading();
										}
									});
						          // 图片校验通过后的逻辑
						          console.log('图片校验通过，可以上传');
						        } else {
						          console.log('图片超出大小限制，请重新选择');
						        }
					    });
					}
				})
			},
			addImage() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认两者都有
					sourceType: ['album', 'camera'],
					success: res => {
						that.$queue.showLoading("上传中...");
						var tempFilePaths=res.tempFilePaths[0]
						console.log("tempFilePaths----",res)
						that.checkImageSize(tempFilePaths, (isValid) => {
						        if (isValid) {
						          // 图片校验通过后的逻辑
								  uni.uploadFile({ // 上传接口
								  	url: websocketUtils.uploadFileUrl(), //真实的接口地址
								  	filePath: res.tempFilePaths[0],
								  	name: 'file',
								  	success: (uploadFileRes) => {
								  		console.log(uploadFileRes.data)
								  		that.front = JSON.parse(uploadFileRes.data).data
								  		console.log(that.front)
								  		uni.hideLoading();
								  	}
								  });
						          console.log('图片校验通过，可以上传');
						        } else {
						          console.log('图片超出大小限制，请重新选择');
						        }
					    });
					}
				})
			},
			// 检查图片尺寸
			checkImageSize(filePath, callback) {
			  let that = this
			  uni.getFileInfo({
			    filePath: filePath,
			    success: (infoRes) => {
			      const size = infoRes.size;
			      if (size / 1024 / 1024 > 4) {
			        // 图片大于2MB
					uni.showToast({
						icon:'error',
						title:'图片超出2MB限制,请重新选择'
					})
			        callback(false);
			      } else {
			        // 图片小于等于2MB
			        callback(true);
			      }
			    },
			    fail: () => {
			      callback(false);
			    }
			  });
			},
		}
	}
</script>

<style lang="less" scoped>
	@import '../../static/less/index.less';
	@import '../../static/css/index.css';
	.huiBtn {
		color:#333;
		background: #f3f3f3;
		// color: #333333;
	}
	.lanBtn {
		color:#fff;
		background: #049F89;
	}
	.guke-btn {
		width:30%;
		line-height:34px;
		text-align: center;
		font-weight: bold;
		font-size:11px;
		border-radius: 6px;
		margin-top:5px;
		margin-right:6px;
	}
	.guke-list {
		width: 100%;
		margin-top: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		box-sizing: border-box;
		background-color: #fff;
		justify-content: flex-start;
	}
	/deep/.is-required{
		display: none;
	}
	/deep/.uni-forms-item__label{
		width:100% !important;
		font-size: 16px;
		font-family: PingFang SC Heavy, PingFang SC Heavy-Heavy;
		color: #333333;
		margin-bottom: 4px;
	}
	/deep/.uni-forms-item{
		flex-direction: column !important;
	}
	.qing{
		color: rgb(192, 196, 204);
	}
	.push-button{
		    width: 100%;
		    height: 48px;
		    position: fixed;
		    bottom: 0px;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
			margin: 0 auto;
	}
	.que-btn{
		display: inline-block;
		width: 90%;
		text-align: center;
		background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
		height: 40px;
		border-radius: 28px;
		color: #ffffff;
		line-height: 40px;
		margin-top: 4px;
		font-size: 34rpx;
	}
	
	.margin-top-view{
		width: 150upx;
		height: 150upx;
		background: #f7f7f7;
	}
	.advantage-title{
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 60rpx;
		margin-left: 35rpx;
	}
	.advantage-bor{
		width: 80px;
		height: 6px;
		border-radius: 3px;
		bottom: 0;
		background: linear-gradient(90deg, rgba(234, 248, 245, 0.7), rgba(132, 211, 196, 0.7));
		margin-bottom: 80rpx;
		margin-left: 35rpx;
		
	}
	.hehuo_view {
		width: 100%;
		padding-top: 10px;
		height: 100vh;
		background:#fff url(../../static/cooperate/cooperate6.png)no-repeat ;
		background-size: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		//align-items: center;
		
		.text_view {
			width: 95%;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 10px;
			padding: 20px;
			.audit_message {
				color: red;
				width: 650rpx;
				height: 50rpx;
				margin-top: 50rpx;
			}

			

			.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: 32rpx;
					font-family: PingFang SC Heavy, PingFang SC Heavy-Heavy;
					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: 100%;
					border-bottom: 1rpx solid #f7f7f7;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>