info.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <template>
  2. <view style="padding: 20px;">
  3. <uni-forms :modelValue="postForm" ref="form" :rules="rules" :label-width="120">
  4. <uni-forms-item label="ID">
  5. <uni-easyinput type="text" v-model="postForm.id" disabled />
  6. </uni-forms-item>
  7. <uni-forms-item label="用户名">
  8. <uni-easyinput type="text" v-model="postForm.userName" disabled />
  9. </uni-forms-item>
  10. <uni-forms-item label="人脸照片" name="avatar">
  11. <yf-file-upload v-model="postForm.avatar"></yf-file-upload>
  12. </uni-forms-item>
  13. <uni-forms-item label="身份证正面照" name="face">
  14. <yf-file-upload v-model="postForm.face"></yf-file-upload>
  15. </uni-forms-item>
  16. <uni-forms-item label="姓名" name="realName">
  17. <uni-easyinput type="text" v-model="postForm.realName" placeholder="请输入姓名" />
  18. </uni-forms-item>
  19. <uni-forms-item label="身份证号" name="idCard">
  20. <uni-easyinput type="number" v-model="postForm.idCard" placeholder="请输入身份证号" />
  21. </uni-forms-item>
  22. <uni-forms-item label="手机号" name="mobile">
  23. <uni-easyinput type="text" v-model="postForm.mobile" placeholder="请输入手机号" />
  24. </uni-forms-item>
  25. <!-- <uni-forms-item label="邮箱">
  26. <uni-easyinput type="text" v-model="postForm.email" placeholder="请输入邮箱" />
  27. </uni-forms-item> -->
  28. </uni-forms>
  29. <button type="primary" @click="handleUpdate()">保存并登录</button>
  30. </view>
  31. </template>
  32. <script>
  33. import { info, update } from '@/api/user'
  34. export default {
  35. data() {
  36. return {
  37. postForm: {
  38. avatar: '',
  39. face: ''
  40. },
  41. rules: {
  42. realName: {
  43. rules: [{
  44. required: true,
  45. errorMessage: '姓名不能为空!'
  46. }]
  47. },
  48. idCard: {
  49. rules: [{
  50. required: true,
  51. errorMessage: '身份证号不能为空!'
  52. }, {
  53. pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
  54. errorMessage: '请输入正确身份证号!',
  55. }]
  56. },
  57. mobile: {
  58. rules: [{
  59. required: true,
  60. errorMessage: '请绑定手机号!'
  61. },{
  62. pattern: /^(1)\d{10}$/,
  63. errorMessage: '请输入正确手机号!'
  64. }]
  65. },
  66. avatar: {
  67. rules: [{
  68. required: true,
  69. errorMessage: '请上传人脸照片!'
  70. }]
  71. },
  72. face: {
  73. rules: [{
  74. required: true,
  75. errorMessage: '请上传身份证正面照!'
  76. }]
  77. }
  78. },
  79. }
  80. },
  81. mounted() {
  82. this.handleInfo()
  83. },
  84. methods: {
  85. handleInfo() {
  86. let token = uni.getStorageSync('token');
  87. info(token).then(res => {
  88. this.postForm = res
  89. })
  90. },
  91. handleUpdate() {
  92. this.$refs.form.validate().then(res => {
  93. uni.showLoading()
  94. update(this.postForm).then(() => {
  95. uni.showToast({
  96. title: '资料更新成功!'
  97. })
  98. uni.hideLoading()
  99. setTimeout(()=>{
  100. uni.switchTab({
  101. url: '/pages/index/index'
  102. })
  103. }, 2000)
  104. })
  105. }).catch(err => {
  106. })
  107. },
  108. bindMobile() {
  109. uni.navigateTo({
  110. url: `/pages/user/info/bind-mobile?type=${this.postForm.mobile?0:1}&mobile=${this.postForm.mobile|| ''}`
  111. })
  112. },
  113. }
  114. }
  115. </script>
  116. <style>
  117. .user-banner {
  118. height: 160px;
  119. display: flex;
  120. background: url('https://cdn.yfhl.net/static/user-bg.jpg') no-repeat;
  121. align-items: center;
  122. background-position: center;
  123. background-size: 100%;
  124. justify-content: center;
  125. width: 100%;
  126. flex-direction: column;
  127. }
  128. .user-banner .avatar {
  129. width: 80px;
  130. height: 80px;
  131. border: #3771CF 2px solid;
  132. border-radius: 50%;
  133. }
  134. .user-banner .points {
  135. position: absolute;
  136. top: 15px;
  137. right: 15px;
  138. color: #FDBF40;
  139. font-weight: bold;
  140. font-weight: 700;
  141. font-size: 16px;
  142. }
  143. .user-banner .name {
  144. color: #fff;
  145. font-weight: 700;
  146. font-size: 18px;
  147. }
  148. .user-banner .dept {
  149. color: #eee;
  150. font-weight: 700;
  151. font-size: 14px;
  152. }
  153. .mv-box{
  154. font-size: 16px;
  155. font-weight: 700;
  156. display: flex;
  157. align-items: center;
  158. }
  159. .mv-box .btn{
  160. margin-left: 10px;
  161. display: flex;
  162. align-items: center;
  163. }
  164. </style>