upBasic.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <template>
  2. <mobile-frame>
  3. <view class="info">
  4. <view class="one">
  5. <uni-forms ref="form" :modelValue="form" :rules="rules" label-width="auto">
  6. <uni-forms-item label="头像" name="icon">
  7. <upload :list="icon" name="icon" :count="1" @uplSuc="uplSuc" @uplDel="uplDel"></upload>
  8. </uni-forms-item>
  9. <uni-forms-item label="用户名" name="name">
  10. <uni-easyinput type="text" v-model="form.name" placeholder="请输入用户名" />
  11. </uni-forms-item>
  12. <!-- <uni-forms-item label="手机号" name="phone">
  13. <uni-easyinput type="text" v-model="form.phone" placeholder="请输入手机号" disabled />
  14. </uni-forms-item>
  15. <uni-forms-item label="电子邮箱" name="email">
  16. <uni-easyinput type="text" v-model="form.email" placeholder="请输入电子邮箱" disabled />
  17. </uni-forms-item> -->
  18. <uni-forms-item label="性别" name="gender">
  19. <picker @change="genderChange" name="gender" :value="form.gender" :range="genderList" range-key="label">
  20. <view class="uni-input">{{form.zhGender||'请选择性别'}}</view>
  21. </picker>
  22. </uni-forms-item>
  23. <uni-forms-item label="生日" name="birth">
  24. <picker mode="date" :value="form.birth" name="birth" @change="bindDateChange">
  25. <view class="uni-input">{{form.birth||'请选择日期'}}</view>
  26. </picker>
  27. </uni-forms-item>
  28. </uni-forms>
  29. <view class="btn">
  30. <button type="primary" @click="onSubmit('form')" size="small">提交</button>
  31. </view>
  32. </view>
  33. </view>
  34. </mobile-frame>
  35. </template>
  36. <script>
  37. import upload from '@/components/upload/index.vue';
  38. export default {
  39. components: {
  40. upload
  41. },
  42. data() {
  43. return {
  44. frameStyle: {
  45. useBar: false
  46. },
  47. form: {},
  48. rules: {
  49. name: {
  50. rules: [{
  51. required: true,
  52. errorMessage: '请输入用户名',
  53. }]
  54. },
  55. phone: {
  56. rules: [{
  57. required: true,
  58. errorMessage: '请输入手机号',
  59. }]
  60. },
  61. },
  62. genderList: [{
  63. label: '保密',
  64. value: '0'
  65. },
  66. {
  67. label: '男',
  68. value: '1'
  69. },
  70. {
  71. label: '女',
  72. value: '2'
  73. },
  74. ],
  75. icon: []
  76. };
  77. },
  78. onLoad: function(e) {
  79. const that = this;
  80. that.watchLogin();
  81. },
  82. onShow: function() {},
  83. methods: {
  84. watchLogin() {
  85. const that = this;
  86. uni.getStorage({
  87. key: 'token',
  88. success: async (res) => {
  89. let user = that.$jwt(res.data);
  90. if (user) {
  91. const arr = await that.$api(`/user/${user.id}`, 'GET');
  92. if (arr.errcode == '0') {
  93. let gender = that.genderList.find(i => i.value == arr.data
  94. .gender)
  95. if (gender) arr.data.zhGender = gender.label;
  96. that.$set(that, `form`, arr.data)
  97. that.$set(that, `icon`, arr.data.icon)
  98. } else {
  99. uni.showToast({
  100. title: arr.errmsg,
  101. icon: 'error',
  102. duration: 2000
  103. });
  104. }
  105. }
  106. },
  107. fail: (err) => {}
  108. })
  109. },
  110. toPath(e) {
  111. if (e && e.route) uni.redirectTo({
  112. url: `/${e.route}`
  113. })
  114. },
  115. // 图片上传
  116. uplSuc(e) {
  117. const that = this;
  118. that.$set(that, `${e.name}`, [...that[e.name], e.data]);
  119. },
  120. // 图片删除
  121. uplDel(e) {
  122. const that = this;
  123. let data = that[e.name];
  124. let arr = data.filter((i, index) => index != e.data.index);
  125. that.$set(that, `${e.name}`, arr)
  126. },
  127. // 选择性别
  128. genderChange(e) {
  129. const that = this;
  130. let data = that.genderList[e.detail.value];
  131. if (data) {
  132. that.$set(that.form, `gender`, data.value);
  133. that.$set(that.form, `zhGender`, data.label);
  134. }
  135. },
  136. // 选择日期
  137. bindDateChange(e) {
  138. const that = this;
  139. that.$set(that.form, `birth`, e.detail.value);
  140. },
  141. // 返回
  142. back() {
  143. uni.navigateBack({
  144. delta: 1
  145. })
  146. },
  147. // 提交保存
  148. onSubmit(ref) {
  149. const that = this;
  150. that.$refs[ref].validate().then(async params => {
  151. params.icon = that.icon
  152. const arr = await that.$api(`/user/${that.form.id}`, 'POST', params);
  153. if (arr.errcode == '0') {
  154. uni.showToast({
  155. title: `维护信息成功`,
  156. icon: 'success',
  157. });
  158. that.back();
  159. } else {
  160. uni.showToast({
  161. title: arr.errmsg,
  162. })
  163. }
  164. })
  165. },
  166. }
  167. }
  168. </script>
  169. <style lang="scss">
  170. .info {
  171. display: flex;
  172. flex-direction: column;
  173. width: 100vw;
  174. height: 100vh;
  175. .one {
  176. padding: 2vw;
  177. .uni-input {
  178. border: #f1f1ff 1px solid;
  179. padding: 2vw 2vw;
  180. border-radius: 1vw;
  181. }
  182. .btn {
  183. text-align: center;
  184. button {
  185. margin: 0 2vw 2vw 2vw;
  186. background-color: var(--ff0Color);
  187. color: var(--fffColor);
  188. }
  189. .name {
  190. color: var(--f85Color);
  191. font-size: var(--font14Size);
  192. }
  193. }
  194. }
  195. }
  196. .uni-forms-item {
  197. margin-bottom: 6vw !important;
  198. display: flex;
  199. flex-direction: row;
  200. }
  201. </style>