yogaApp/pages/user/userEdit.vue

<template>
	<view class="page">

		<!-- 基础表单校验 -->
		<uni-forms ref="valiForm" :modelValue="valiFormData" label-position="left">
			<view class="example">

				<uni-forms-item label="头像" labelWidth="180rpx" required name="avatar">
					<view class="avatar">
						<view style="display: flex;flex:1"></view>
						<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
							file-mediatype="image" :value="avatars" @select="upload">
							<image style="width: 40rpx; height: 40rpx;" src="/static/icon/head.png"></image>
						</uni-file-picker>
						<uni-icons custom-prefix="iconfont" type="right" size="16" color="#777777"></uni-icons>
					</view>
				</uni-forms-item>

				<uni-forms-item label="昵称" labelWidth="180rpx" required name="nickName">
					<uni-easyinput v-model="valiFormData.nickName" maxlength="10" placeholder="请输入" :inputBorder="false"
						placeholderStyle="color: #999;font-size:32rpx"
						style="borderColor:#FFF;color:#0E1521;font-size:32rpx" />
				</uni-forms-item>

				<uni-forms-item label="性别" labelWidth="180rpx" required name="sex">
					<uni-data-checkbox v-model="valiFormData.sex" :localdata="sexs" style="margin-top: 10rpx;" />
				</uni-forms-item>
				<uni-forms-item label="个性签名" labelWidth="180rpx" required name="signature">
					<uni-easyinput v-model="valiFormData.signature" maxlength="10" placeholder="请输入" :inputBorder="false"
						placeholderStyle="color: #999;font-size:32rpx" style="borderColor:#FFF;color:#0E1521;font-size:32rpx" />
				</uni-forms-item>

			</view>
		</uni-forms>

		<view class="submitcon">
			<button type="primary" class="bbtn" @click="submit('valiForm')">保存</button>
		</view>

		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>

	</view>
</template>

<script>
	import { myCache } from '@/utils/utils.js';
	export default {
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				imageStyles: {
					width: 40,
					height: 40,
					border: false
				},
				listStyles: {
					border: false
				},
				id: '',
				avatars: [],
				messageText: '', //错误提示框
				msgType: 'error',
				sexs: [
					{
						text: '未知',
						value: 0
					}, 
					{
					text: '男',
					value: 2
				}, {
					text: '女',
					value: 1
				}],
				// 校验表单数据
				valiFormData: {
					id: 1,
					nickName: "",
					avatar: "",
					sex: "",
					signature: '',
				},
				// 校验规则
				rules: {
					nickName: {
						rules: [{
							required: true,
							errorMessage: '昵称不能为空'
						}]
					},
					sex: {
						rules: [{
							required: true,
							errorMessage: '性别不能为空'
						}]
					},
					signature: {
						rules: [{
							required: true,
							errorMessage: '个性签名不能为空'
						}]
					}
				},
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.valiForm.setRules(this.rules);
		},
		onLoad(options) {
			// 获取用户信息
			this.getmember();
		},
		onShow() { 
			this.iflogin();
		},
		methods: {
			iflogin(){
				this.openId = myCache('openId');
				var user = myCache('user');
				this.userid = user.userid? user.userid:'';
				this.phone = user.userphone;
				if(this.userid==""||this.userid=="0"||this.phone==""){
					uni.navigateTo({
						url: `/pages/login/login`
					});
					return false;
				}
				else{
					return true;
				}
			},
			upload(e) {
				var that = this;
				const tempFilePaths = e.tempFilePaths; //e是获取的图片源
				console.log(tempFilePaths)
				uni.showLoading({
					title: '头像上传中...'
				});
				tempFilePaths.forEach(item => {
					console.log(item)
					this.upimg(item)
				});
			},
			// 先上传图片
			upimg(tempFilePaths) {
				var that = this;
				var token = uni.getStorageSync("token");
				try{
					uni.uploadFile({
						url: 'https://www.sanduolantoyoga.com/yoga/api/my/avatarUpload', //上传图片的后端接口
						filePath: tempFilePaths,
						name: 'file',
						header: {
							// 'content-type': 'multipart/form-data',
							'Authorization': token
						},
						success: res => {
							uni.hideLoading();
							myCache("ifuserEdit", true); 
							var data = JSON.parse(res.data);
							if (data.success) {
								uni.showToast({
									title: "头像上传成功！",
									icon: 'success'
								});
								that.valiFormData.avatar = data.data;
								that.avatars = [];
								var img = {
									url:  data.data,
									imgurl: data.data
								}
								that.avatars.push(img);
							} else {
								uni.showToast({
									title: "头像上传失败！" + data.msg,
									icon: 'error'
								});
							}
						}
					});
				}
				catch(e){
					console.log(e)
				}
			},
			// 获取用户基本编辑信息
			async getmember() {
				const { data: res } = await uni.$http.get("/api/my/myInformation");
				if (res.data) {
					myCache('member', res.data);
					this.valiFormData.id = res.data.id ? res.data.id : '';
					this.valiFormData.nickName = res.data.nickName ? res.data.nickName : '';
					this.valiFormData.avatar = res.data.avatar ? res.data.avatar : '';
					this.valiFormData.sex = res.data.sex ? res.data.sex : '';
					this.valiFormData.signature = res.data.signature ? res.data.signature : '';
					if (this.valiFormData.avatar) {
						this.avatars.push({
							imgurl: this.valiFormData.avatar,
							url: this.valiFormData.avatar
						})
					}
					this.$forceUpdate();
				}
			},
			submit(ref) {
				var that = this;
				this.$refs[ref].validate().then(res => {
					that.savedo();
				}).catch(err => {
					console.log('err', err);
				});
			},
			async savedo() {
				var that = this;
				try { 
					uni.showLoading({
						title: '信息保存中....'
					});
					const { data: res } = await uni.$http.post("/api/my/modifyMyInformation", that.valiFormData);
					if (res.success) {
						this.msgType = 'success';
						this.messageText = `提交成功！`;
						this.$refs.message.open();
						myCache("ifuserEdit", true); 
						setTimeout(() => {
							// 返回  关闭当前页面
							uni.navigateBack({
								delta: 1
							});
						}, 2000);
					} else {
						this.msgType = 'error';
						this.messageText = res.msg ? res.msg : '提交失败！';
						this.$refs.message.open();
					}
				} catch (res) {
					this.msgType = 'error';
					this.messageText = res.msg ? res.msg : '提交失败！';
					this.$refs.message.open();
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-icon-wrapper {
		padding: 0 0 0 8rpx !important;
	}

	::v-deep .uni-forms-item {
		display: flex;
		align-items: center;
		justify-items: flex-start;
		justify-content: center;
		border-radius: 0 !important;
		border-bottom: 2rpx solid #eeeeee !important;
		padding-bottom: 10rpx !important;
		margin-top: 20rpx !important;
		margin-bottom: 20rpx !important;
	}

	::v-deep .uni-forms-item__label {
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #0E1521;
	}

	::v-deep .uni-data-checklist .checklist-group {
		justify-content: flex-end !important;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box {
		margin-left: 20px;
		margin-right: 5px;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
		font-size: 32rpx !important;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400 !important;
		color: #0E1521 !important;
	}

	::v-deep .uni-easyinput__content-input {
		text-align: right;
	}

	.avatar {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		width: 200rpx;
		height: 80rpx;
		position: absolute;
		right: 0;
		top: -40rpx;
	}

	.ftext {
		height: 44rpx;
		line-height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #0E1521;
	}

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

	.tvalue {
		display: flex;
		flex: 1;
		justify-content: flex-end;
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #0E1521;
		height: 40rpx;
		line-height: 40rpx;
		margin-right: 16rpx;
	}

	.nvalue {
		display: flex;
		flex: 1;
		justify-content: flex-end;
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		height: 40rpx;
		line-height: 40rpx;
		margin-right: 16rpx;
	}

	.page {
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		box-shadow: 0rpx -4rpx 60rpx 2rpx rgba(1, 31, 63, 0.1);
		background: #f7f8fa;
	}

	.submitcon {
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bbtn {
		margin: 20rpx 10rpx 54rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		width: 560rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #89965f;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
		border-radius: 10rpx;
		opacity: 1;
		&::after{
			border:none;
		}
	}

	.example {
		width: 750rpx;
		height: 800rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding: 10rpx 48rpx;
		box-sizing: border-box;
	}
</style>