123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- <template>
- <view class="page-container">
- <u--form label-width="auto" labelAlign="right"
- ref="uForm"
- :model="model"
- :rules="rules"
- :labelStyle="{
- fontSize: '28rpx',
- fontWeight: '500',
- }"
- >
- <u-cell-group :border="false">
-
- <u-cell :border="true" :isLink="false" :clickable="true">
- <view slot="value" class="value">
- <u-form-item label="用户昵称" prop="form.nickName" :required="true">
- <u--input
- v-model="model.form.nickName"
- placeholder="请输入用户昵称"
- border="none"
- type="text"
- :clearable="true"
- inputAlign="right"
- >
- </u--input>
- </u-form-item>
- </view>
- </u-cell>
-
- <u-cell :border="true" :isLink="false" :clickable="true">
- <view slot="value" class="value">
- <u-form-item label="角色">
- {{renderItem(userInfo,'roles',[]).length>0 ?userInfo.roles[0].roleName : ''}}
- </u-form-item>
- </view>
- </u-cell>
-
- <u-cell :border="true" :isLink="false" :clickable="true">
- <view slot="value" class="value">
- <u-form-item label="所属单位">
- {{renderItem(userInfo,'deptName','--')}}
- </u-form-item>
- </view>
- </u-cell>
-
- <u-cell :border="true" :isLink="false" :clickable="true">
- <view slot="value" class="value">
- <u-form-item label="手机号码" prop="form.phonenumber" :required="true">
- <u--input
- v-model="model.form.phonenumber"
- placeholder="请输入手机号码"
- border="none"
- type="text"
- :clearable="true"
- inputAlign="right"
- maxlength="11"
- >
- </u--input>
- </u-form-item>
- </view>
- </u-cell>
-
- </u-cell-group>
-
- </u--form>
-
- <view class="footer">
- <u-row style="margin-top: 40rpx;">
- <u-col :span="12" style="padding: 0 30rpx;">
- <u-button type="primary" shape="circle"
- color="linear-gradient(to right, #41B5FF, #4573FC)"
- :custom-style="{
- width: '100%',
- height: '38px'
- }" @click="handleSubmit">提交
- </u-button>
- </u-col>
- </u-row>
- </view>
- </view>
- </template>
- <script>
- import {updateUserProfile ,userProfile} from '@/api/common/user.js'
- export default {
- components: {
- },
- data() {
- return {
- model: {
- form: {
- nickName: "",
- phonenumber: "",
- }
- },
- rules: {
- 'form.nickName': [
- {
- type: 'string',
- required: true,
- message: '请输入',
- trigger: ['blur', 'change']
- },
- ],
- 'form.phonenumber': [
- {
- type: 'string',
- required: true,
- message: '请输入手机号码',
- trigger: ['blur', 'change']
- },
- {
- validator: (rule, value, callback) => {
- return uni.$u.test.mobile(value);
- },
- message: '手机号码不正确',
- // 触发器可以同时用blur和change
- trigger: ['change','blur'],
- }
- ],
-
- },
- userInfo: null,
- }
- },
- onLoad() {
- this.getUserInfo()
- },
- onShow() {
-
- },
- onHide() {
-
- },
- onReady() {
- this.$refs.uForm.setRules(this.rules)
- },
- methods: {
- getUserInfo() {
- userProfile().then((res) => {
- this.userInfo = res.data
- this.model.form.nickName = res.data.nickName
- this.model.form.phonenumber = res.data.phonenumber
- })
- },
- // 提交
- async handleSubmit() {
- this.$refs.uForm.validate().then(async res => {
- let ajaxData = {
- ...this.model.form,
- }
- let { data, code } = await updateUserProfile(ajaxData)
-
- if (code == 0) {
- this.$modal.msgSuccess('修改成功')
- // uni.navigateBack()
- }
-
- }).catch(errors => {
- console.log('校验失败',errors)
- })
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .page-container {
- background: #fff;
- font-size: 28rpx;
- min-height: 100%;
- position: relative;
- .footer {
- padding: 10rpx 0;
- position: fixed;
- width: 100%;
- left: 0;
- bottom: 0;
- }
- }
- ::v-deep {
- .u-cell__body {
- .u-cell__body__content {
- width: auto;
- flex: none;
-
- }
-
- .value {
- flex: 1;
-
- .u-form-item__body {
- padding: 0;
- }
- }
- .u-form-item__body__right__content__slot {
- flex: 1;
- justify-content: flex-end;
- text-align: right;
- }
- }
-
- }
- </style>
|