miniapp-assign-platform/ruoyi-app/pages/mine/info/edit.vue

<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="form" :model="user" labelWidth="80px">
				<uni-forms-item label="用户昵称" name="nickName">
					<uni-easyinput v-model="user.nickName" placeholder="请输入昵称" type="nickname" @blur="nickNameBlur"/>
				</uni-forms-item>
				<uni-forms-item label="性别" name="sex" required>
					<uni-data-checkbox v-model="user.sex" :localdata="sexs" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit" :style="{backgroundColor: themeColor}">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		getMiniAppUserInfo,
		updateMiniAppUser
	} from "@/api/basics/miniAppUser.js"

	import storage from '@/utils/storage'
	import constant from '@/utils/constant'

	export default {
		data() {
			return {
				user: {
					nickName: "",
					sex: ""
				},
				sexs: [{
					text: '女',
					value: "0"
				}, {
					text: '男',
					value: "1"
				}],
				rules: {
					nickName: {
						rules: [{
							required: true,
							errorMessage: '用户昵称不能为空'
						}]
					}
					
				},
				themeColor:getApp().globalData.config.appInfo.themeColor
			}
		},
		onLoad() {
			this.getUser()
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			getUser() {
				getMiniAppUserInfo().then(response => {
					this.user = response.data
				})
			},
			submit(ref) {
				this.$refs.form.validate().then(res => {
					updateMiniAppUser(this.user).then(response => {
						this.$modal.msgSuccess("修改成功")
					})
				})
			},
			nickNameBlur(e){
				this.user.nickName = e.detail.value
				console.log(e);
			}
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>