set_nickname.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <template>
  2. <view class="container">
  3. <view class="explain">
  4. 用户名长度限制在2-24个字符内
  5. </view>
  6. <view class="editText">
  7. <input placeholder="请输入昵称" placeholder-color="#C6C6C6" name="input" v-model="nickname" class="texts"></input>
  8. </view>
  9. <view class="btn" :class="nickname.length==0?'':'btn-active'" @click="commit">
  10. 保存
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. import {
  16. mapState
  17. } from 'vuex';
  18. export default {
  19. data() {
  20. return {
  21. nickname: "",
  22. deptListurl: {},
  23. }
  24. },
  25. onLoad(param) {
  26. this.nickname = param.nickname
  27. },
  28. computed: {
  29. ...mapState(['hasLogin', 'userInfo'])
  30. },
  31. methods: {
  32. commit() {
  33. if (this.nickname == null || this.nickname == "") {
  34. this.$api.msg('请输入昵称!')
  35. return
  36. }
  37. if (this.nickname.length < 2 || this.nickname.length > 24) {
  38. this.$api.msg('请正确输入昵称!')
  39. return
  40. }
  41. var that = this
  42. that.deptListurl.userName = that.nickname
  43. that.deptListurl.id = that.userInfo.id
  44. that.$api.doRequest('post', '/commonUser/editUserInfo', that.deptListurl).then(
  45. res => {
  46. if (res.data.code == 200) {
  47. uni.showToast({
  48. title: '修改成功!',
  49. icon: 'success',
  50. duration: 2000,
  51. success() {
  52. setTimeout(()=>{
  53. var _student = uni.getStorageSync('userInfo');
  54. _student.userName = that.nickname;
  55. uni.setStorageSync('userInfo', _student);
  56. var name = 'userInfo';
  57. var value = _student;
  58. that.$store.commit('$uStore', {
  59. name,
  60. value
  61. });
  62. uni.navigateBack()
  63. },2000)
  64. }
  65. })
  66. }
  67. })
  68. .catch(res => {
  69. if(res.errmsg){
  70. uni.showToast({
  71. title: res.errmsg,
  72. icon: 'none',
  73. duration: 2000
  74. })
  75. }
  76. else{
  77. uni.showToast({
  78. title: "系统异常,请联系管理员",
  79. icon: 'none',
  80. duration: 2000
  81. })
  82. }
  83. });
  84. },
  85. }
  86. }
  87. </script>
  88. <style>
  89. .container {
  90. padding: 10px 0px;
  91. background-color: #F5F6FA;
  92. }
  93. .explain {
  94. margin-left: 16px;
  95. font-size: 16px;
  96. color: #6D6D72;
  97. margin-top: 20px;
  98. }
  99. .editText {
  100. width: 100%;
  101. height: 50px;
  102. background-color: #FFFFFF;
  103. line-height: 50px;
  104. padding-left: 20px;
  105. margin-top: 10px;
  106. padding-top: 12px;
  107. border-top: 1px solid #C9C9CB;
  108. border-bottom:1px solid #C9C9CB;
  109. }
  110. .texts {
  111. line-height: 50px;
  112. /* color: #C6C6C8; */
  113. font-size: 16px;
  114. /* placeholder-style="font-size:18px" */
  115. }
  116. .btn{
  117. width: 90%;
  118. height: 46px;
  119. font-size: 17px;
  120. margin:0 auto;
  121. margin-top: 16px;
  122. border-radius: 20px;
  123. line-height: 46px;
  124. font-weight: 500;
  125. text-align: center;
  126. background-color: #D8DAE0;
  127. color: #fff;
  128. }
  129. .btn-active {
  130. background-color: #FFFFFF;
  131. color: #22C572;
  132. }
  133. </style>