bc_wx_applet/pages/user/myInfo.vue

<template>
	<view>
		<view style="margin: 20px; background-color: #fff;">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
				<u-form-item label="姓名" prop="userInfo.name">
					<u--input v-model="userInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="头像" prop="userInfo.avg">
					<view slot="right" class="flex-row" @click="onInfo">
						<u-avatar :src="getFilePath(userInfo.avg ? userInfo.avg : null)" size="50"
							@click="uploadAvator"></u-avatar>
						<view class="flex-grow-1">
							<u-icon name="arrow-right" color="#96989e"></u-icon>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="生日" prop="userInfo.birthday">
					<u--input v-model="userInfo.birthday" border="none" placeholder="请选择生日"></u--input>
					<u-icon slot="right" name="arrow-right" color="#96989e"></u-icon>
				</u-form-item>
				<u-form-item label="手机号" prop="userInfo.phone" labelWidth="100px">
					<u--input v-model="userInfo.phone" border="none"></u--input>
					<u-button type="primary" shape="circle" size="small" slot="right"
						color="linear-gradient(to right, #F54319, #FF6D20)" text="解绑">
					</u-button>
				</u-form-item>
			</u--form>
		</view>
		<view class="cart-bottom padding-sm dflex-b">
			<view class="go-cart dflex-c">保存编辑</view>
			<view class="go-buy dflex-c background-gradient">退出登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: 'uView UI',
					avg: '',
					birthday: '',
					phone: ''
				},
				rules: {
					// 字段名称
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.phone()就是返回true或者false的
								return uni.$u.test.phone(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}

			}
		},
		methods: {
			uploadAvator() { // 上传头像
				uni.chooseImage({
					success: (file) => {
						uni.showLoading({
							title: '请稍后',
						})

						// 上传头像文件
						uni.uploadFile({
							url: `${this.serverPath}/resource/oss/upload`,
							name: 'file',
							filePath: file.tempFilePaths[0],
							header: {
								tenantId: this.tenantId
							},
							success: async (response) => {
								const data = JSON.parse(response.data)
								// 更新用户头像
								const result = await this.$request('post',
									'/userinfo/account/update', {
										avatarUrl: data.data.url,
										aid: this.userdata.aid
									}, false, true)

								if (result) {
									// 记录埋点
									this.$setPoint('user_update_avatarUrl', {
										avatarUrl: data.data.url
									})
									uni.showToast({
										title: '上传成功',
										icon: 'success'
									})
									this.userdata.avatarUrl = data.data.url
									this.setStoreData('vuex_user', this.userdata)
								}
							},
							fail: (e) => {

							}
						})
					},
					fail: (e) => {

					}
				})
			},
		},
	}
</script>
<style scoped lang="less">
	.cart-bottom {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 130rpx;
		box-sizing: border-box;
		background-color: #FFF;
		z-index: 10;
		box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.15);

		.go-cart {
			height: 80%;
			box-sizing: border-box;
			border: solid 1px #BBBBBB;
			font-size: 14px;
			color: #000;
			border-radius: 50upx;
			margin: 0 10px;
			width: 45%;
		}

		.go-buy {
			height: 80%;
			width: 45%;
			background-color: #FF0000;
			color: #FFF;
			border-radius: 50upx;
			font-size: 14px;
		}
	}

	.flex-row {
		display: flex;
		align-items: center;
	}

	.flex-grow-1 {
		flex-grow: 1;
		margin-left: 10px;
	}
</style>