gas-cylinder-app/pages/mine/personal.vue

<template>
	<!-- 个人资料 -->
	<view>
		<u-navbar title="个人资料" autoBack placeholder></u-navbar>
		<view class="card_form">
			<x-form ref="personage" :userType="userType" :list="list" :model="model" :rules="rules"
				@clientele="clientele"></x-form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					field: 'name',
					label: '姓名',
					placeholder: '请输入姓名',
					type: 'input',
					disabled: true,
					required: true,
				}, {
					field: 'idCard',
					label: '身份证号',
					placeholder: '请输入身份证号',
					type: 'input',
					inputType: 'idcard',
					disabled: true,
					required: true,
				}, {
					field: 'phone',
					label: '电话',
					placeholder: '请输入电话',
					type: 'input',
					inputType: 'number',
					required: true,
				}, {
					field: 'description',
					label: '备注',
					placeholder: '请输入备注',
					type: 'textarea',
				}, {
					field: 'line',
					label: '《燃气从业资格证》信息',
					type: 'line',
				}, {
					field: 'lines',
					label: '《道路运输从业人员从业资格证》信息',
					type: 'line',
				}, {
					field: 'certificateNo',
					label: '证书编号',
					placeholder: '请输入证书编号',
					type: 'input',
					required: true,
				}, {
					field: 'issueAuthority',
					label: '发证机关',
					placeholder: '请输入发证机关',
					type: 'input',
					required: true,
				}, {
					field: 'remarks',
					label: '备注',
					placeholder: '请输入备注',
					type: 'textarea',
				}, {
					field: 'imgUrl',
					label: '燃气从业资格证',
					placeholder: '请上传燃气从业资格证',
					type: 'upload',
					required: true,
				}, {
					field: 'imgUrls',
					label: '道路运输从业人员从业资格证',
					placeholder: '请上传道路运输从业人员从业资格证',
					type: 'upload',
					required: true,
				}],
				model: {
					name: '',
					idCard: '',
					phone: '',
					description: '',
					certificateNo: '',
					issueAuthority: '',
					remarks: '',
					imgUrl: '',
					imgUrls: '',
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'idCard': {
						type: 'string',
						required: true,
						message: '请输入身份证号码',
						trigger: ['blur', 'change']
					},
					'phone': [{
						required: true,
						message: '请输入电话号码',
						trigger: ['blur', "change"]
					}, {
						// 自定义验证函数，见上说明
						pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['blur'],
					}],
					'certificateNo': {
						type: 'string',
						required: true,
						message: '请输入证书编号',
						trigger: ['blur', 'change']
					},
					'issueAuthority': {
						type: 'string',
						required: true,
						message: '请输入发证机关',
						trigger: ['blur', 'change']
					},
					'imgUrl': {
						type: 'string',
						required: true,
						message: '请上传燃气从业资格证',
						trigger: ['blur', 'change']
					},
					'imgUrls': {
						type: 'string',
						required: true,
						message: '请上传燃气从业资格证',
						trigger: ['blur', 'change']
					},
				},
				userInfo: {},
				userType: 5,
			}
		},
		onLoad() {
			this.getLayout()
		},
		mounted() {
			this.getUser()
		},
		methods: {
			getLayout() {
				this.list.forEach(value => {
					if (this.userType == 3) {
						if (value.field == 'imgUrls' || value.field == 'lines') {
							value.visible = true
						} else {
							value.visible = false
						}
					} else if (this.userType == 4) {
						if (value.field == 'imgUrl' || value.field == 'line') {
							value.visible = true
						} else {
							value.visible = false
						}
					} else {
						if (['imgUrl', 'imgUrls', 'line', 'lines', 'certificateNo', 'issueAuthority',
								'issueAuthority', 'remarks',
							].includes(value.field)) {
							value.visible = true
						} else {
							value.visible = false
						}
					}
				})
			},
			getUser() {
				this.$api.get('/api/user/profile').then(res => {
					if (res.code == 200) {
						const param = res.data.user
						this.userInfo = param
						this.$nextTick(() => {
							this.userType = param.provUser.userType
							this.getLayout()
							this.model.name = param.provUser.name
							this.model.idCard = param.provUser.idCard
							this.model.phone = param.provUser.phone
							this.model.description = param.provUser.description
							if (this.userType == 3) {
								this.model.certificateNo = param.provStoreUserBindCertificate.certificateNo
								this.model.issueAuthority = param.provStoreUserBindCertificate
									.issueAuthority
								this.model.imgUrl = param.provStoreUserBindCertificate.imgUrl
								if (param.provStoreUserBindCertificate.remarks) {
									this.model.remarks = param.provStoreUserBindCertificate.remarks
								} else {
									this.model.remarks = ''
								}
							} else if (this.userType == 4) {
								this.model.certificateNo = param.provTruckUserBindCertificate.certificateNo
								this.model.issueAuthority = param.provTruckUserBindCertificate
									.issueAuthority
								this.model.imgUrls = param.provTruckUserBindCertificate.imgUrl
								if (param.provTruckUserBindCertificate.remarks) {
									this.model.remarks = param.provTruckUserBindCertificate.remarks
								} else {
									this.model.remarks = ''
								}
							}
							let arrImg = []
							let arrImg1 = []
							if (param.provStoreUserBindCertificate.imgUrl && this.userType == 3) {
								arrImg = param.provStoreUserBindCertificate.imgUrl.split(',')
							} else if (param.provTruckUserBindCertificate.imgUrl && this.userType == 4) {
								arrImg = param.provTruckUserBindCertificate.imgUrl.split(',')
							}
							arrImg.forEach(item => {
								let arr = {
									thumb: this.$baseUrl + item,
									url: this.$baseUrl + item,
								}
								arrImg1.push(arr)
							})
							this.$refs.personage.fileList1 = arrImg1
						})
						// console.log(this.model, 26)
					}
				})
			},
			// 修改个人信息
			clientele() {
				let param = {
					id: this.userInfo.id,
					roleId: this.userInfo.roleId,
					provUser: {
						name: this.model.name,
						cmpCode: this.model.cmpCode,
						phone: this.model.phone,
						description: this.model.description,
					},
					provStoreUserBindCertificate: {
						certificateNo: this.model.certificateNo,
						issueAuthority: this.model.issueAuthority,
						imgUrl: this.model.imgUrl,
						remarks: this.model.remarks,
					},
					provTruckUserBindCertificate: {
						certificateNo: this.model.certificateNo,
						issueAuthority: this.model.issueAuthority,
						imgUrl: this.model.imgUrls,
						remarks: this.model.remarks,
					}
				}
				if (this.model.addressImg != undefined) {
					param.provTruckUserBindCertificate.imgUrl = this.model.addressImg
				}
				if (this.userType == 3) {
					delete param.provTruckUserBindCertificate
				} else if (this.userType == 4) {
					delete param.provStoreUserBindCertificate
				}
				uni.showLoading({
					mask: true,
				});
				uni.hideLoading();
				this.$api.put('/api/sys-user', param).then(res => {
					if (res.code == 200) {
						this.getUser()
						uni.$u.toast(res.msg)
					}
					uni.hideLoading();
				}).catch(() => {
					uni.hideLoading();
				})
			},
			eliminateImge(img) {
				let arr = img.split(',')
				console.log(img,arr,1)
				let imgArr = []
				arr.forEach(item => {
					let img = item.split(this.$baseUrl)
					imgArr.push(img[1])
				})
				let imgList = imgArr.join()
				console.log(imgList,26)
				return imgList
			}
		}
	}
</script>

<style lang="scss">
	.card_form {
		margin: 10rpx 40rpx;
	}
</style>