xinyongguanlishi/pages/mine/info.vue

<template>
	<view class="main">
		<view class="head_bg">
			<u-avatar size="150" @click="chooseAvatar" :src="form.avatar" mode="circle">
			</u-avatar>
		</view>
		<view style="border-radius: 16rpx;box-shadow: 6rpx 6rpx 10rpx rgba(122, 122, 122, 0.2);"
			class="u-margin-left-20 u-margin-right-20 u-margin-top-20 bg-white padding">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" label-width="125" :border-bottom="true">
					<u-input border placeholder="请输入您的真实姓名" v-model="form.name" />
				</u-form-item>
				<u-form-item label="年龄" label-width="125" :border-bottom="true">
					<u-input border type="number" maxlength="18" placeholder="请输入您的年龄" v-model="form.age" />
				</u-form-item>
				<u-form-item label="手机号" label-width="125" :border-bottom="true">
					<u-input border type="number" maxlength="11" placeholder="请输入您的手机号码" v-model="form.phone" />
				</u-form-item>
				<u-form-item label="所属地区" label-width="125" :border-bottom="true">
					<u-input border placeholder="请选择所属地区" border type="select" @click="show = true"
						v-model="form.cityName" />
				</u-form-item>
			</u-form>
			<u-picker mode="region" @confirm="selectReg" v-model="show"
				:area-code='[form.province, form.city, form.area]'>
			</u-picker>
		</view>
		<u-button shape="circle" hover-class="none" :custom-style="customStyle" @click="editInfo" throttle-time="1000">
			提交</u-button>
	</view>
</template>

<script>
	import store from '@/store'
	export default {
		data() {
			return {
				form: {
					avatar: '',
					name: '',
					city: '1303',
					sex: 1,
					age: '',
					phone: '',
					area: '130304',
					province: '13',
					cityName: ''
				},
				show: false,
				customStyle: {
					marginTop: '30rpx',
					marginLeft: '20rpx',
					marginRight: '20rpx',
					// width:'182rpx',
					height: '74rpx',
					color: '#fff',
					background: '#FBC600',
					border: 'none'
				},
			}
		},
		onLoad() {
			if (this.vuex_user.name != null) {
				this.form = {
					...store.state.vuex_user
				}
				if (this.form.province.length != 2) {
					this.form.province = (this.form.province / 10000) + ''
				}
				if (this.form.city.length != 4) {
					this.form.city = (this.form.city / 100) + ''
				}
				console.log(this.form)
			}

		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				// 可以在此上传到服务端
				uni.uploadFile({
					url: this.$upload + '/common/uploadImg',
					filePath: path,
					name: 'file',
					complete: (res) => {
						this.form.avatar = JSON.parse(res.data).data.file_url
					}
				});
			})
		},
		methods: {
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 300,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			selectReg(e) {
				this.form.province = e.province.value
				this.form.city = e.city.value
				this.form.area = e.area.value
				this.form.cityName = e.province.label + '-' + e.city.label + '-' + e.area.label
			},
			async editInfo() {
				let province = this.form.province + "0000"
				let city = this.form.city + "00"
				let res = await this.$u.post("manager/updateUser", {
					...this.form,
					province,
					city
				})
				if (res.code == 200) {
					let obj = {
						...this.form,
					}
					this.$u.vuex('vuex_user', obj)
					uni.showToast({
						title: "修改成功",
						icon: "none",
						duration: 1000
					})
					setTimeout(() => {
						uni.switchTab({
							url: "./mine"
						})
					}, 1000)
				}else{
					uni.showToast({
						title:res.message,
						icon:"none"
					})
					return false
				}
			}
		}

	}
</script>

<style>
	.head_bg {
		background-color: #FBC600;
		height: 350rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* border-radius: 0 0 50rpx 50rpx; */
	}
</style>