kly_uniapp/pages/personal/perInfo.vue

<!-- 商户/非商户个人信息维护 -->

<template>
	<view style="padding-bottom: 100upx;" class="main_width">
		<view>
			<view>
				<view class="form_item">
					<image class="rht" @click="upload_img" style="width: 110upx;height: 110upx;border-radius: 55upx;"
						:src="sub_data.profile_photo==''?'../../static/user.png': (sub_data.profile_photo.indexOf('http://')==0||sub_data.profile_photo.indexOf('https://')==0)?sub_data.profile_photo:(serverUrl+ sub_data.profile_photo)">
				</view>

				<view class="form_item" :key="item.key"
					v-for="(item, index) in (sys_role==0? user_info_item:user_info_item_merchant)">
					<view class="rht">{{item.name}}</view>
					<input :value="sub_data[item.key]||''" :data-index="item.key" @input="ipt_change" :type="item.type"
						:placeholder="'请输入'+item.name" />
				</view>

				<!-- 商户显示 -->
				<view v-if="sys_role==1">
					<view class="form_item">
						<view class="rht">联系人性别</view>
						<radio-group style="margin-right: 30upx;" @change="sex_change_merchant">
							<label>
								<radio color="#2bcfb4" value="男" :checked="sub_data.linker_gender=='0'||sub_data.linker_gender=='男'" />
								<text>男</text>
							</label>
							<label style="margin-left: 50upx;">
								<radio color="#2bcfb4" value="女" :checked="sub_data.linker_gender=='1'||sub_data.linker_gender=='女'" />
								<text>女</text>
							</label>
						</radio-group>
					</view>
				</view>
				<!-- 非商户显示 -->
				<view v-if="sys_role==0">
					<view class="form_item">
						<view class="rht">性别</view>
						<radio-group style="margin-right: 30upx;" @change="sex_change">
							<label>
								<radio color="#2bcfb4" value="男" :checked="sub_data.gender=='男'" />
								<text>男</text>
							</label>
							<label style="margin-left: 50upx;">
								<radio color="#2bcfb4" value="女" :checked="sub_data.gender=='女'" />
								<text>女</text>
							</label>
						</radio-group>
					</view>
					<view class="form_item">
						<view class="rht">出生日期</view>
						<view style="width: 435upx;">
							<uni-datetime-picker type='date' :value="sub_data.birthday" start="1900-01-01"
								:end="end_start" @change="date_change" />
						</view>
					</view>
					<view class="form_item">
						<view class="rht">学历</view>
						<view @click="select_education" style="margin-right: 30upx;color: #8f8f91;">
							{{sub_data.edulevel_name||''}}<text
								style="color: #8E97AE;font-size: 28upx;margin-left: 15upx;">点击切换</text>
						</view>
					</view>
				</view>
			</view>

			<view style="display: block;" class="form_item" :key="item.key"
				v-for="(item, index) in (sys_role==0? resume_info_item_edit:resume_info_item_edit_merchant)">
				<view class="rht">{{item.name}}</view>
				<textarea class="main_text_area" :value="sub_data[item.key]||''" :data-index="item.key"
					@input="ipt_change" :placeholder="'请输入'+item.name" />
			</view>

			<view v-if="sys_role==0" style="display: block;position: relative;" class="form_item">
				<image v-if="sub_data.certificates.length<5" @click="upload_img_certificates"
					style="width: 40upx;height: 40upx;position: absolute;right: 20upx;top: 36upx;"
					src="../../static/add_img.png"></image>
				<view style="width: 100%;padding-bottom: 25upx;" class="rht">相关证书（最多上传5张图片，长按图片可删除）</view>
				<view @longtap="delete_certificates(index)" class="cert_img_box" :key="index"
					v-for="(item,index) in sub_data.certificates">
					<image :src="item" style="width: 100%;" mode="widthFix"></image>
				</view>
			</view>
			<view style="height: 80upx;"></view>
		</view>
		<view @click="sub" class="conf_btn_per">确定</view>
	</view>
</template>

<script>
	import commonData from '../../commonData.js'
	import commonFun from '../../commonFun.js'

	export default {
		data() {
			return {
				end_start: '',
				serverUrl: commonFun.serverUrl,
				user_info_item: commonData.user_info_item,
				user_info_item_merchant: commonData.user_info_item_merchant,
				resume_info_item_edit: commonData.resume_info_item_edit,
				resume_info_item_edit_merchant: commonData.resume_info_item_edit_merchant,
				sys_role: commonData.sys_role,
				sub_data: {
					profile_photo: '',
					certificates: [],
				}, //个人信息
				education_arr: ['初中及以下', '中专', '高中', '专科', '本科', '硕士及以上']
			}
		},
		onLoad() {
			this.end_start = commonFun.formatDate2(new Date())
			if (commonFun.sys_role == 1) {
				uni.setNavigationBarTitle({
					title: '企业信息'
				})
			}
			this.get_info()
		},
		onPullDownRefresh() {
			this.get_info()
		},
		methods: {
			// 出生日期
			date_change(e) {
				let sub_data = {
					...this.sub_data
				}
				sub_data.birthday = e
				this.sub_data = sub_data
			},
			// 删除证书
			delete_certificates(index) {
				uni.showModal({
					title: '确认删除?',
					success: (res) => {
						if (res.confirm) {
							let sub_data = {
								...this.sub_data
							}
							sub_data.certificates = sub_data.certificates.splice(index, 1)
							this.certificates = sub_data
						}
					}
				})
			},
			// 上传证书
			upload_img_certificates() {
				commonFun.uploadFileApiOSS(res => {
					if (res.status) {
						let sub_data = {
							...this.sub_data
						}
						let certificates = sub_data.certificates
						certificates.push(res.data)
						sub_data.certificates = certificates
						this.certificates = sub_data
					}
				})
			},
			// 上传头像
			upload_img(e) {
				commonFun.uploadFileApiOSS(res => {
					if (res.status) {
						let sub_data = {
							...this.sub_data
						}
						sub_data.profile_photo = res.data
						this.sub_data = sub_data
					}
				})
			},
			// 获取个人信息
			get_info() {
				uni.showLoading({
					title: '加载中...',
					mask: true,
				})
				commonFun.get_user_info(res => {
					if (res.status) {
						uni.hideLoading()
						let sub_data = res.data.Result
						sub_data.certificates = sub_data.certificates ? sub_data.certificates : []
						this.sub_data = sub_data
						console.log('个人信息页面获取个人信息')
						console.log(this.sub_data)
					}
					uni.stopPullDownRefresh()
				})
			},
			// 选择学历
			select_education(e) {
				let sub_data = {
					...this.sub_data
				}
				uni.showActionSheet({
					itemList: this.education_arr,
					success: (res) => {
						sub_data.edulevel_name = this.education_arr[res.tapIndex]
						this.sub_data = sub_data
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			// 性别选择
			sex_change(e) {
				let sub_data = {
					...this.sub_data
				}
				sub_data.gender = e.target.value
				this.sub_data = sub_data
			},
			// 商家性别选择
			sex_change_merchant(e) {
				let sub_data = {
					...this.sub_data
				}
				sub_data.linker_gender = e.target.value
				this.sub_data = sub_data
			},
			// 输入框输入
			ipt_change(e) {
				const key = e.currentTarget.dataset.index
				let sub_data = {
					...this.sub_data
				}
				sub_data[key] = e.target.value
				this.sub_data = sub_data
			},
			// 点击确定提交
			sub() {
				let sub_data = {
					...this.sub_data,
				}
				let gender = sub_data.gender == '男' ? '0' : sub_data.gender == '女' ? '1' : '-1'
				let linker_gender = sub_data.linker_gender == '男' ? '0' : sub_data.linker_gender == '女' ? '1' : '0'
				sub_data.gender = gender
				sub_data.linker_gender = linker_gender
				console.log(sub_data)
				// return
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				commonFun.requestUrl('&WsAjaxBiz=Worker&WsAjaxAction=registerInfo', {
					...sub_data
				}, res => {
					if (res.status) {
						uni.hideLoading()
						uni.showToast({
							title: '修改成功'
						})
						uni.showModal({
							content: '修改成功！',
							showCancel: false,
							success: () => {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					}
				})
			},
		}
	}
</script>

<style>
	.conf_btn_per {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		background: linear-gradient(90deg, #26daad 0%, #68d7c4 100%);
		color: white;
		text-align: center;
		z-index: 10000;
		border-radius: 15upx;
	}

	.form_item {
		justify-content: flex-start;
	}

	.form_item .rht {
		width: 200upx;
		/* background-color: #00C7B2; */
	}

	.form_item input {
		text-align: left;
		/* background-color: #07C160; */
		width: 430upx;
	}

	.cert_img_box {
		background-color: #f5f5f5;
		overflow: hidden;
		margin: 15upx auto;
		width: 95%;
		border-radius: 20upx;
	}
</style>