gas-cylinder-h5/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" @confirm="confirm"
				@clientele="clientele"></x-form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					field: 'name',
					label: '姓名',
					placeholder: '请输入姓名',
					type: 'input',
					required: true,
				}, {
					field: 'principalPhone',
					label: '手机号码',
					placeholder: '请输入手机号码',
					type: 'input',
					required: true,
				}, {
					field: 'type',
					label: '类型',
					placeholder: '请选择类型',
					type: 'radio',
					required: true,
					options: [{
							label: '商户',
							value: 0,
						},
						{
							label: '私人',
							value: 1,
						}
					],
				}, {
					field: 'region',
					label: '所在城市/地区',
					placeholder: '请选择所在城市/地区',
					type: 'cascader',
					required: true,
				}, {
					field: 'address',
					label: '地址',
					placeholder: '请输入详细地址',
					type: 'input',
					required: true,
				}, {
					field: 'addressImg',
					label: '现场图片',
					placeholder: '请上传现场图片',
					type: 'upload',
					required: true,
				}, {
					field: 'remark',
					label: '备注',
					placeholder: '请输入备注',
					type: 'textarea',
				}],
				model: {
					name: '',
					principalPhone: '',
					type: '',
					region: '',
					address: '',
					addressImg: '',
					remark: '',
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'principalPhone': {
						type: 'string',
						required: true,
						message: '请输入手机号码',
						trigger: ['blur', 'change']
					},
					'type': {
						type: 'number',
						required: true,
						message: '请选择客户类型',
						trigger: ['blur', 'change']
					},
					'region': {
						type: 'string',
						required: true,
						message: '请选择所在城市/地区',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					},
					'addressImg': {
						required: true,
						message: '请上传现场图片',
						trigger: ['blur', 'change']
					},
				},
				userInfo: {},
				userType: 5,
			}
		},
		mounted() {
			this.getUser()
		},
		methods: {
			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.model.name = param.provUser.name
							this.model.idCard = param.provUser.idCard
							this.model.phone = param.provUser.phone
							this.model.description = param.provUser.description
							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: 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.userType == 3) {
					delete param.provTruckUserBindCertificate
				} else if (this.userType == 4) {
					delete param.provStoreUserBindCertificate
				}
				this.$api.put('/api/sys-user', param).then(res => {
					if (res.code == 200) {
						this.getUser()
						uni.$u.toast(res.msg)
					}
				})
			}
		}
	}
</script>

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