<template> <view class="page"> <view class="form"> <u-form :model="form" ref="uForm"> <u-form-item label-width="150" label="修改头像" prop="nickname" @click.native="pageTo('/pages/user/setting/avatar')"> <u-icon name="arrow-right" style="float: right;" size="24" label="请选择" labelPos="left"></u-icon> </u-form-item> <!-- <u-form-item label-width="150" label="昵称" prop="nickname" required> <u-input placeholder="请输入昵称" v-model="form.nickname" inputAlign="right" type="text"></u-input> </u-form-item> --> <!-- <u-form-item label-width="150" label="身份" prop="groupTypeName" required> <u-input type="select" inputAlign="right" :select-open="groupTypeSelectShow" v-model="form.groupTypeName" placeholder="请选择身份" @click="groupTypeSelectShow = true"></u-input> </u-form-item> --> <u-form-item label-width="150" label="密码" prop="password"> <u-input placeholder="非必填,填了就会重置密码" v-model="form.password" inputAlign="right" type="text"></u-input> </u-form-item> </u-form> <u-gap height="60"></u-gap> <u-button type="primary" @click="submitHandle">提交</u-button> <u-gap></u-gap> </view> <!-- utoast --> <u-toast ref="uToast" /> <u-select mode="single-column" :list="groupTypeSelectList" v-model="groupTypeSelectShow" @confirm="groupTypeSelectConfirm"></u-select> </view> </template> <script> var that; export default { data() { return { groupTypeSelectShow: false, groupTypeSelectList: [], maskShow: false, form: { nickname: null, password: null, }, rules: { nickname: [ { required: true, message: '昵称不得为空', trigger: ['change', 'blur'] }, ], // groupTypeName: [ // { // required: true, // message: '身份不得为空', // trigger: ['change', 'blur'] // }, // ], }, } }, onLoad(params) { const userInfo2 = uni.getStorageSync('MD_userInfo2') this.form.nickname = userInfo2.nickname this.form.group_type = userInfo2.group_type const dictObj = uni.getStorageSync('MD_dict') let list = dictObj.group_type || [] let groupTypeSelectList = [] list.forEach(item => { if (item.val == userInfo2.group_type) { this.form.groupTypeName = item.key } groupTypeSelectList.push({ value: item.val, label: item.key, }) }) this.groupTypeSelectList = [...groupTypeSelectList] }, // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕 onReady() { this.$refs.uForm.setRules(this.rules); }, methods: { groupTypeSelectConfirm(e) { e.map((val, index) => { this.form.group_type = val.value; this.form.groupTypeName = val.label; }); }, pageTo(path) { // console.log(path) if (path === 'dev') { uni.$msg('开发中~') return } uni.navigateTo({ url: path }) }, submitHandle() { this.$refs.uForm.validate(valid => { if (valid) { let params = { nickname: this.form.nickname, // group_type: this.form.group_type } if (this.form.password) { params.password = this.form.password } uni.api.base.apiuseredit(params).then(res => { uni.$msgConfirm('编辑成功', () => { uni.reLaunch({ url: '/pages/user/setting/setting' }) }, () => { uni.reLaunch({ url: '/pages/user/setting/setting' }) }) }) } }) } } }; </script> <style lang="scss"> .page { background-color: #ffffff; } .form { border-radius: 10rpx; padding: 0 40rpx; } .popup-body { .tips-title { font-size: $u-p; margin-bottom: 20rpx; } .tips-content { font-size: $u-p2; color: $u-tips-color; margin-bottom: 60rpx; } } .id_card { color: #606266; width: 100%; height: 350rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f4f5f6; font-size: $u-p2; border-radius: 10rpx; image { border-radius: 10rpx; } } .footer { position: relative; text-align: center; font-size: $u-p2; left: 0; bottom: 20rpx; .agreement { color: $u-theme-color; } } .slot-content { font-size: 28rpx; color: $u-content-color; padding: 20rpx; } .warp { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .rect { width: 400rpx; height: 400rpx; background-color: #fff; } </style>