userData.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <template>
  2. <view class="page-container">
  3. <u--form label-width="auto" labelAlign="right"
  4. ref="uForm"
  5. :model="model"
  6. :rules="rules"
  7. :labelStyle="{
  8. fontSize: '28rpx',
  9. fontWeight: '500',
  10. }"
  11. >
  12. <u-cell-group :border="false">
  13. <u-cell :border="true" :isLink="false" :clickable="true">
  14. <view slot="value" class="value">
  15. <u-form-item label="用户昵称" prop="form.nickName" :required="true">
  16. <u--input
  17. v-model="model.form.nickName"
  18. placeholder="请输入用户昵称"
  19. border="none"
  20. type="text"
  21. :clearable="true"
  22. inputAlign="right"
  23. >
  24. </u--input>
  25. </u-form-item>
  26. </view>
  27. </u-cell>
  28. <u-cell :border="true" :isLink="false" :clickable="true">
  29. <view slot="value" class="value">
  30. <u-form-item label="角色">
  31. {{renderItem(userInfo,'roles',[]).length>0 ?userInfo.roles[0].roleName : ''}}
  32. </u-form-item>
  33. </view>
  34. </u-cell>
  35. <u-cell :border="true" :isLink="false" :clickable="true">
  36. <view slot="value" class="value">
  37. <u-form-item label="所属单位">
  38. {{renderItem(userInfo,'deptName','--')}}
  39. </u-form-item>
  40. </view>
  41. </u-cell>
  42. <u-cell :border="true" :isLink="false" :clickable="true">
  43. <view slot="value" class="value">
  44. <u-form-item label="手机号码" prop="form.phonenumber" :required="true">
  45. <u--input
  46. v-model="model.form.phonenumber"
  47. placeholder="请输入手机号码"
  48. border="none"
  49. type="text"
  50. :clearable="true"
  51. inputAlign="right"
  52. maxlength="11"
  53. >
  54. </u--input>
  55. </u-form-item>
  56. </view>
  57. </u-cell>
  58. </u-cell-group>
  59. </u--form>
  60. <view class="footer">
  61. <u-row style="margin-top: 40rpx;">
  62. <u-col :span="12" style="padding: 0 30rpx;">
  63. <u-button type="primary" shape="circle"
  64. color="linear-gradient(to right, #41B5FF, #4573FC)"
  65. :custom-style="{
  66. width: '100%',
  67. height: '38px'
  68. }" @click="handleSubmit">提交
  69. </u-button>
  70. </u-col>
  71. </u-row>
  72. </view>
  73. </view>
  74. </template>
  75. <script>
  76. import {updateUserProfile ,userProfile} from '@/api/common/user.js'
  77. export default {
  78. components: {
  79. },
  80. data() {
  81. return {
  82. model: {
  83. form: {
  84. nickName: "",
  85. phonenumber: "",
  86. }
  87. },
  88. rules: {
  89. 'form.nickName': [
  90. {
  91. type: 'string',
  92. required: true,
  93. message: '请输入',
  94. trigger: ['blur', 'change']
  95. },
  96. ],
  97. 'form.phonenumber': [
  98. {
  99. type: 'string',
  100. required: true,
  101. message: '请输入手机号码',
  102. trigger: ['blur', 'change']
  103. },
  104. {
  105. validator: (rule, value, callback) => {
  106. return uni.$u.test.mobile(value);
  107. },
  108. message: '手机号码不正确',
  109. // 触发器可以同时用blur和change
  110. trigger: ['change','blur'],
  111. }
  112. ],
  113. },
  114. userInfo: null,
  115. }
  116. },
  117. onLoad() {
  118. this.getUserInfo()
  119. },
  120. onShow() {
  121. },
  122. onHide() {
  123. },
  124. onReady() {
  125. this.$refs.uForm.setRules(this.rules)
  126. },
  127. methods: {
  128. getUserInfo() {
  129. userProfile().then((res) => {
  130. this.userInfo = res.data
  131. this.model.form.nickName = res.data.nickName
  132. this.model.form.phonenumber = res.data.phonenumber
  133. })
  134. },
  135. // 提交
  136. async handleSubmit() {
  137. this.$refs.uForm.validate().then(async res => {
  138. let ajaxData = {
  139. ...this.model.form,
  140. }
  141. let { data, code } = await updateUserProfile(ajaxData)
  142. if (code == 0) {
  143. this.$modal.msgSuccess('修改成功')
  144. // uni.navigateBack()
  145. }
  146. }).catch(errors => {
  147. console.log('校验失败',errors)
  148. })
  149. },
  150. }
  151. }
  152. </script>
  153. <style lang="scss" scoped>
  154. .page-container {
  155. background: #fff;
  156. font-size: 28rpx;
  157. min-height: 100%;
  158. position: relative;
  159. .footer {
  160. padding: 10rpx 0;
  161. position: fixed;
  162. width: 100%;
  163. left: 0;
  164. bottom: 0;
  165. }
  166. }
  167. ::v-deep {
  168. .u-cell__body {
  169. .u-cell__body__content {
  170. width: auto;
  171. flex: none;
  172. }
  173. .value {
  174. flex: 1;
  175. .u-form-item__body {
  176. padding: 0;
  177. }
  178. }
  179. .u-form-item__body__right__content__slot {
  180. flex: 1;
  181. justify-content: flex-end;
  182. text-align: right;
  183. }
  184. }
  185. }
  186. </style>