newmyj/pages/user/model/mymodel.vue

<template>
	<view class="content ">

		<view class="item-name">
			上传头像
		</view>
		<view class="con_box">
			<view class="con_image">
				<image class="img" @click="navCroper(400,400,'one')" :src="updata.avatar||`../../../static/image/upImg.png`">
				</image>
			</view>
		</view>
		<view class="item-name">
			基本信息
		</view>
		<view class="listBox">
			<view class="list">
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="font-color-red font-size-sm">✲</text> <text class="title">真实姓名</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="updata.name" type="text" placeholder="请填写真实姓名"
							placeholder-class="placeholder" />
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="font-color-red font-size-sm">✲</text><text class="title">手机号</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="updata.phone" type="text" placeholder="请填写手机号"
							placeholder-class="placeholder" />
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="font-color-red font-size-sm">✲</text><text class="title">身份证号</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="updata.cardId" type="text" placeholder="请填写身份证号"
							placeholder-class="placeholder" />
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">从业时长</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="updata.work_year" type="number" placeholder="请填写从业时长"
							placeholder-class="placeholder" />
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">籍贯</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="updata.ancestral_place" type="number" placeholder="请填写籍贯"
							placeholder-class="placeholder" />
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">学历</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="updata.education" type="number" placeholder="请填写学历"
							placeholder-class="placeholder" />
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">民族</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="updata.minority" type="number" placeholder="请填写民族"
							placeholder-class="placeholder" />
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">出生日期</text>
					</view>
					<view class="right flex">
						<picker class="input" value='2000-01-01' mode="date" @change="changetime">
							<view>
								{{updata.time||'请选择日期'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="font-color-red font-size-sm">✲</text><text class="title">职业</text>
					</view>
					<view class="right flex">
						<picker class="input" :range='workTypeList' range-key='title' mode="selector"
							@change="changeWorkType">
							<view>
								{{updata.word.title||'选择职业'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="font-color-red font-size-sm">✲</text><text class="title">收费类型</text>
					</view>
					<view class="right flex">
						<picker class="input" :range='timeTypeList' range-key='title' mode="selector"
							@change="changetimetype">
							<view>
								{{updata.timetype.title||'收费时间类型'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="font-color-red font-size-sm">✲</text><text class="title">最低价</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="updata.minMoney" type="number" placeholder="请输入最低收费价"
							placeholder-class="placeholder" />
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="font-color-red font-size-sm">✲</text><text class="title">最高价</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="updata.maxMoney" type="number" placeholder="请输入最高收费价"
							placeholder-class="placeholder" />
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="font-color-red font-size-sm">✲</text><text class="title">服务区域</text>
					</view>
					<view class="right">
						<view class="citylist">
							<view class="flex margin-b-20" v-for="(item,ind) in updata.onCity" :key="ind">
								<view></view>
								<view>
									{{item.province+item.city+item.district}}
									<text class="margin-l-10 del" @click="updata.onCity.splice(ind,1)">
										删除
									</text>
								</view>
							</view>
							<view class="flex">
								<view></view>
								<pickerAddress class="buttom" @change="onCityClick">添加地区</pickerAddress>
							</view>
						</view>

					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="font-color-red font-size-sm">✲</text><text class="title">服务内容</text>
					</view>
					<view class="right">
						<checkbox-group @change="checkTypeChange">
							<label class="flex timetype margin-b-10" v-for="(item,ind) in typeList" :key="item.id">
								<view class="margin-r-10">{{item.title}}</view>
								<view>
									<checkbox :value="`${item.id}`" :checked="item.checked" />
								</view>
							</label>
						</checkbox-group>
					</view>
				</view>
			</view>
		</view>
		<view class="item-name">
			自评
		</view>
		<view class="listBox">
			<view class="list">
				<view class="listItem">
					<textarea auto-height :maxlength='-1' v-model="updata.mymask" type="text" placeholder="请填写自评内容"
						placeholder-class="placeholder" />
				</view>
			</view>
			<view class="con_box">
				<view class="con_image" v-for="(item,ind) in updata.imageList">
					<image class="img" @click="navCroper(400,400,'tab',ind)"
						:src="item"></image>
					<image @click="updata.imageList.splice(ind,1)" class="tip" src="../../../static/icon/goodsExit.png" mode="scaleToFill"></image>
				</view>
				<view class="con_image">
					<image class="img" @click="navCroper(400,400,'all')"
						src="../../../static/image/upImg.png"></image>
				</view>
			</view>
		</view>
		<view class="item-name">
			我的证书
		</view>
		<view class="listBox">
			<view class="con_box">
				<view class="con_image" v-for="(item,ind) in updata.service_audit_imgs">
					<image class="img" @click="navCroper(400,400,'audit',ind)"
						:src="item"></image>
					<image @click="updata.service_audit_imgs.splice(ind,1)" class="tip" src="../../../static/icon/goodsExit.png" mode="scaleToFill"></image>
				</view>
				<view class="con_image">
					<image class="img" @click="navCroper(400,400,'auditall')"
						src="../../../static/image/upImg.png"></image>
				</view>
			</view>
		</view>
		<view class="item-name">
			服务展示
		</view>
		<view class="listBox">
			<view class="con_box">
				<view class="con_image" v-for="(item,ind) in updata.service_imgs">
					<image class="img" @click="navCroper(400,400,'service',ind)"
						:src="item"></image>
					<image @click="updata.service_imgs.splice(ind,1)" class="tip" src="../../../static/icon/goodsExit.png" mode="scaleToFill"></image>
				</view>
				<view class="con_image">
					<image class="img" @click="navCroper(400,400,'serviceall')"
						src="../../../static/image/upImg.png"></image>
				</view>
			</view>
		</view>
		<view class="base-buttom" :class="{ 'bg-gray': loding }" @click="loding ? '' : confirm()">提交</view>
	</view>
</template>

<script>
	import {
		getServiceTimeTypeList,
		getServiceTypeList,
		subInfoAudit,
		getUserWorkTypeList
	} from '@/api/model.js';

	import {
		isCardNo
	} from '@/utils/rocessor.js';
	import {
		mapState
	} from "vuex"

	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';

	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				// 上传数据
				updata:{
					avatar: '', //用户头像
					name: '', //用户名称
					phone: '', //手机号
					cardId: '', //身份证号
					minMoney: '',//最低价
					maxMoney: '',//最高价
					checkedType: [], //选中的服务类型
					time: '', //出生日期
					timetype: {
						title: '',
						code:''
					}, //选中的时间类型
					onCity: [], //选中的城市
					mymask:'',//自评
					imageList: [], //自评上传图片列表
					ancestral_place:'',//籍贯
					education:'',//学历
					ancestral_place:'',//籍贯
					minority:'',//民族
					
					work_year:'',//从业时长
					word: {
						title: '',
						id:''
					},
					service_audit_imgs: [], //我的证书
					service_imgs: [], //服务展示
				},
				typeList: [], //服务类型
				timeTypeList: [], //时间类型
				workTypeList: [], //工作类型
				loding: false, //是否载入中

			};
		},
		onLoad(options) {
			this.init()
		},
		computed: {
			// #ifdef H5
			...mapState(['urlFile']),
			// #endif
			...mapState(['baseURL']),
		},
		methods: {
			// 初始化
			init() {
				const that = this;
				getServiceTimeTypeList().then(
					(res) => {
						that.timeTypeList = res.data.list
						that.updata.timetype=that.timeTypeList[0];
						console.log(res);
					}
				).catch(
					(res) => {
						console.log(res);
					}
				)
				getServiceTypeList().then(
					(res) => {
						that.typeList = res.data.list
						console.log(res);
					}
				).catch(
					(res) => {
						console.log(res);
					}
				)
				getUserWorkTypeList().then(
					(res) => {
						console.log(res);
						that.workTypeList = res.data.list
						that.updata.word=that.workTypeList[0]
					}
				).catch(
					(res) => {
						console.log(res);
					}
				)
			},
			// 选中的服务类型
			checkTypeChange(type) {
				this.updata.checkedType = type.detail.value;
				console.log(type)
			},
			// 选中的工作类型
			changeWorkType(type){
				this.updata.word =  this.workTypeList[type.detail.value];
				console.log(this.updata.word)
			},
			// 选择时间类型
			changetimetype(res) {
				this.updata.timetype = this.timeTypeList[res.detail.value];
			},
			// 时间选择
			changetime(time) {
				this.updata.time = time.detail.value;
				console.log(time);
			},
			// 选择省市区
			onCityClick({
				data
			}) {
				let address = {};
				address.province = data[0];
				address.city = data[1];
				address.district = data[2];
				this.updata.onCity.push(address)
				console.log(this.onCity, 'cs');
			},
			upLoad(path) {
				// #ifdef H5
				console.log(path, 'h5');
				// #endif
				uni.showLoading({
					title: '图片上传中',
					mask: true
				});
				return new Promise((resolve, error) => {
					uni.uploadFile({
						url: this.baseURL + '/api/user/qiniuUpload', //仅为示例，非真实的接口地址
						filePath: path,
						name: 'file',
						header: {
							"token": uni.getStorageSync('token')
						},
						success: (uploadFileRes) => {
							if ("string" === typeof uploadFileRes.data) {
								resolve(JSON.parse(uploadFileRes.data).data)
							} else {
								resolve(uploadFileRes.data.data)
							}
						},
						complete() {
							uni.hideLoading()
						}
					});
				})
			},
			// 图片裁切
			/**
			 * @param {Number} w 裁切宽度比例
			 * @param {Number} h 裁切高度比例
			 * @param {Number} mw 图片最小宽度
			 * @param {Number} mh 图片最小高度
			 * @param {String} url url修改
			 */
			navCroper(w, h, type, ind) {
				let that = this;
				let tt = (type == 'upimg' ? 2 : 1)
				this.onImg(tt).then((url) => {
					uni.navigateTo({
						url: `../realName/cropper?width=${w}&height=${h}`,
						events: {
							uploadSuccess(res) {
								that.upLoad(res).then((urldata) => {
									console.log(urldata);
									if (type == 'one') {
										that.updata.avatar = urldata.img
									} else if (type == 'all') {
										that.updata.imageList.push(urldata.img)
									} else if (type == 'tab') {
										that.updata.imageList.splice(ind, 1, urldata.img)
									}else if (type == 'audit') {
										that.updata.service_audit_imgs.splice(ind, 1, urldata.img)
									}else if (type == 'auditall') {
										that.updata.service_audit_imgs.push( urldata.img)
									}else if (type == 'service') {
										that.updata.service_imgs.splice(ind, 1, urldata.img)
									}else if (type == 'serviceall') {
										that.updata.service_imgs.push( urldata.img)
									}
								})
							}
						},
						success: function(res) {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('urlNext', {
								url
							})
						}
					})
				})
			},
			onImg(type) {
				const _this = this
				return new Promise((ok, erro) => {
					// 判断是否需要选择
					if (type == 1) {
						uni.showActionSheet({
							itemList: ['拍照', '选择一张照片'],
							success: function(res) {
								_this.chooseImage(res.tapIndex).then((url) => {
									ok(url)
								}).catch((res) => {
									erro(res)
								})
							},
							fail: function(res) {
								erro(res)
								console.log(res.errMsg);
							}
						});
					}
					// 判断是否只需要拍照
					if (type == 2) {
						_this.chooseImage(0).then((url) => {
							ok(url)
						}).catch((res) => {
							erro(res)
						})
					}
				})

			},
			chooseImage: function(index) {
				const _this = this
				return new Promise((ok, error) => {
					// 从相册/相机选择
					// 如需直接开相机或直接选相册，请只使用一个选项
					const sourceType = index === 0 ? ['camera'] : ['album']
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: sourceType,
						success: function(res) {
							ok(res.tempFilePaths[0])
						},
						fail(e) {
							uni.showModal({
								title: '文件打开错误',
								content: '请设置授权文件存储权限',
								showCancel: false,
							});
							error(e)
						}
					});
				})

			},

			// 实名认证
			confirm(e) {
				const that = this;
				if (!that.updata.avatar) {
					uni.showModal({
						title: '错误',
						content: '请上传头像',
						showCancel: false,
					});
					return
				}
				
				if (!that.updata.name) {
					uni.showModal({
						title: '错误',
						content: '请填写姓名',
						showCancel: false,
					});
					return
				}
				if (!that.updata.cardId) {
					uni.showModal({
						title: '错误',
						content: '请填写身份证号',
						showCancel: false,
					});
					return
				}else if(!isCardNo(that.updata.cardId)){
					uni.showModal({
						title: '错误',
						content: '请填写正确的身份证号',
						showCancel: false,
					});
					return
				}
				if (!that.updata.phone) {
					uni.showModal({
						title: '错误',
						content: '请填写手机号',
						showCancel: false,
					});
					return
				}
				if (!that.updata.timetype.code) {
					uni.showModal({
						title: '错误',
						content: '请选择收费时间类型',
						showCancel: false,
					});
					return
				}
				if (!that.updata.minMoney) {
					uni.showModal({
						title: '错误',
						content: '请填写最低收费价',
						showCancel: false,
					});
					return
				}
				if (!that.updata.maxMoney) {
					uni.showModal({
						title: '错误',
						content: '请填写最高收费价',
						showCancel: false,
					});
					return
				}
				if (that.updata.onCity.length==0) {
					uni.showModal({
						title: '错误',
						content: '请选择服务区域',
						showCancel: false,
					});
					return
				}
				if (that.updata.checkedType.length==0) {
					uni.showModal({
						title: '错误',
						content: '请选择服务内容',
						showCancel: false,
					});
					return
				}
				that.loding = true;
				subInfoAudit({
						avatar:that.updata.avatar,
						name:that.updata.name,
						mobile:that.updata.phone,
						idcard:that.updata.cardId,
						service_type:that.updata.timetype.code,
						service_min_price:that.updata.minMoney,
						service_max_price:that.updata.maxMoney,
						service_area:that.updata.onCity.map((arr)=>{
							return arr.district
						}),
						service_project:that.updata.checkedType,
						service_intro_content:that.updata.mymask,
						service_intro_imgs:that.updata.imageList,
						work_year:that.updata.work_year,
						ancestral_place:that.updata.ancestral_place,
						education:that.updata.education,
						minority:that.updata.minority,
						service_audit_imgs:that.updata.service_audit_imgs,
						service_imgs:that.updata.service_imgs,
						user_work_type_id:that.updata.word.id,
					})
					.then((e) => {
						that.loding = false;
						this.$api.msg(e.msg);
					})
					.catch(err => {
						this.loding = false;
						console.log(err);
					});
			}
		}
	};
</script>

<style lang="scss">
	.content,
	page {
		min-height: 100%;
	}

	.content {
		padding-bottom: 150rpx;
	}

	.item-name {
		margin: $page-row-spacing;
		font-size: $font-lg;
		font-weight: bold;
		color: $font-color-dark;
	}

	.con_box {
		margin: $page-row-spacing;

		.con_image {
			width: 150rpx;
			height: 150rpx;
			display: inline-block;
			margin-right: 20rpx;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}

			.tip {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				width: 30rpx;
				height: 30rpx;
				background-color: #FFF;
				border-radius: 99rpx;
			}
		}
	}

	.listBox {
		margin: $page-row-spacing;
		margin-top: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.list {
		.input {
			text-align: right;
			font-size: $font-base;
			color: $color-gray;
			width: 100%;
		}

		.listItem {
			padding: 35rpx 40rpx;
			border-bottom: 1px solid $page-color-light;
		}

		.listIconImg {
			width: 36rpx;
		}

		.right {
			color: $font-color-light;
			font-size: $font-base;
			flex-grow: 1;
			justify-content: flex-end;

			.timetype {
				width: 100%;
				justify-content: flex-end;
			}

			.citylist {
				.del {
					color: $color-red;
					font-size: $font-sm;
					border: 1px solid $color-red;
					border-radius: 10rpx;
					line-height: 1;
					padding: 5rpx 15rpx;
				}
			}

			.img {
				width: 26rpx;
			}

			.buttom {
				color: $base-color;
				border: 1px solid $base-color;
				border-radius: 10rpx;
				line-height: 1;
				padding: 10rpx 20rpx;
			}
		}

		.titleBox {
			.title {
				color: $font-color-base;
				font-size: $font-base;
			}
		}
	}

	.bg-gray {
		background-color: $color-gray;
	}

	.base-buttom {
		position: fixed;
		bottom: 30rpx;
		right: 0rpx;
		left: 0rpx;
	}
</style>