changeName.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <view class="pages">
  3. <uni-forms class="form" :value="dataObj" ref="formData" :rules="rules" :border="true"
  4. label-width="100">
  5. <uni-forms-item label="新昵称" name="name" :required="true" label-width="100">
  6. <input :value="dataObj.name" @input="binddata('name',$event.detail.value)"
  7. class="uni-input" placeholder="请输入新昵称" />
  8. </uni-forms-item>
  9. </uni-forms>
  10. <button class="but" type="default" :loading="loading" :disabled="loading" @tap="changePass">确认</button>
  11. </view>
  12. </template>
  13. <script>
  14. import {
  15. updateName,
  16. } from '@/common/api.js'
  17. export default {
  18. data() {
  19. return {
  20. dataObj: {
  21. name: ""
  22. },
  23. loading: false,
  24. rules: {
  25. name: {
  26. rules: [{
  27. required: true,
  28. errorMessage: '请输入新昵称',
  29. },
  30. {
  31. validateFunction: function(rule, value, data, callback) {
  32. if (data.name.length > 12) {
  33. callback('请输入2~12字符长度')
  34. }
  35. return true
  36. }
  37. }
  38. ]
  39. },
  40. }
  41. }
  42. },
  43. onReady() {
  44. this.$refs.formData.setRules(this.rules)
  45. },
  46. methods: {
  47. binddata(v, e) {
  48. this.dataObj[v] = e
  49. },
  50. changePass() {
  51. this.$refs.formData.submit().then(res => {
  52. this.loading = true
  53. updateName({
  54. name:this.dataObj.name,
  55. userId:this.$store.state.Token
  56. }).then(res =>{
  57. console.log(res)
  58. this.loading = false
  59. uni.$emit("changeUser",true)
  60. plus.nativeUI.toast('修改成功')
  61. setTimeout(() =>{
  62. uni.navigateBack({
  63. })
  64. },1000)
  65. }).catch(e =>{
  66. this.loading = false
  67. })
  68. }).catch(err => {
  69. console.log('表单错误信息:', err);
  70. })
  71. }
  72. }
  73. }
  74. </script>
  75. <style scoped lang="scss">
  76. .form {
  77. border-bottom: 1px solid #EEEEEE;
  78. }
  79. .but {
  80. width: 600rpx;
  81. margin-top: 420rpx;
  82. background-color: #0099FF;
  83. color: #fff;
  84. }
  85. </style>