upBasic.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  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. <view class="icon">
  8. <view class="icon_1" v-if="form.icon&&form.icon.length>0">
  9. <image class="image" v-for="i in form.icon" :key="i" :src="i.url" mode=""></image>
  10. <uni-icons class="del" type="close" size="30" color="#ff0000" @click="iconDel()"></uni-icons>
  11. </view>
  12. <view class="icon_2" v-else>
  13. <button open-type="chooseAvatar" @chooseavatar="chooseavatar">上传头像</button>
  14. </view>
  15. </view>
  16. </uni-forms-item>
  17. <uni-forms-item label="用户名" name="name">
  18. <input class="input" type="nickname" :value="form.name" placeholder="请输入用户名" @input="nameInput">
  19. <!-- <uni-easyinput type="nick" v-model="form.name" placeholder="请输入用户名" /> -->
  20. </uni-forms-item>
  21. <uni-forms-item label="性别" name="gender">
  22. <picker @change="genderChange" name="gender" :value="form.gender" :range="genderList" range-key="label">
  23. <view class="uni-input">{{form.zhGender||'请选择性别'}}</view>
  24. </picker>
  25. </uni-forms-item>
  26. <uni-forms-item label="生日" name="birth">
  27. <picker mode="date" :value="form.birth" name="birth" @change="bindDateChange">
  28. <view class="uni-input">{{form.birth||'请选择日期'}}</view>
  29. </picker>
  30. </uni-forms-item>
  31. </uni-forms>
  32. <view class="btn">
  33. <button type="primary" @click="onSubmit('form')" size="small">提交</button>
  34. </view>
  35. </view>
  36. </view>
  37. </mobile-frame>
  38. </template>
  39. <script>
  40. export default {
  41. components: {},
  42. data() {
  43. return {
  44. frameStyle: {
  45. useBar: false
  46. },
  47. form: {
  48. icon: []
  49. },
  50. rules: {
  51. name: {
  52. rules: [{
  53. required: true,
  54. errorMessage: '请输入用户名',
  55. }]
  56. },
  57. phone: {
  58. rules: [{
  59. required: true,
  60. errorMessage: '请输入手机号',
  61. }]
  62. },
  63. },
  64. genderList: [],
  65. };
  66. },
  67. onLoad: async function(e) {
  68. const that = this;
  69. await that.searchOther();
  70. that.watchLogin();
  71. },
  72. methods: {
  73. async searchOther() {
  74. const that = this;
  75. let res;
  76. res = await that.$api(`/dictData`, 'GET', {
  77. code: "gender"
  78. });
  79. if (res.errcode == '0') {
  80. that.$set(that, `genderList`, res.data)
  81. }
  82. },
  83. watchLogin() {
  84. const that = this;
  85. uni.getStorage({
  86. key: 'token',
  87. success: async (res) => {
  88. let user = that.$jwt(res.data);
  89. if (user) {
  90. const arr = await that.$api(`/user/${user.id}`, 'GET');
  91. if (arr.errcode == '0') {
  92. let gender = that.genderList.find(i => i.value == arr.data
  93. .gender)
  94. if (gender) arr.data.zhGender = gender.label;
  95. that.$set(that, `form`, arr.data)
  96. } else {
  97. uni.showToast({
  98. title: arr.errmsg,
  99. icon: 'error',
  100. duration: 2000
  101. });
  102. }
  103. }
  104. },
  105. fail: (err) => {}
  106. })
  107. },
  108. toPath(e) {
  109. if (e && e.route) uni.redirectTo({
  110. url: `/${e.route}`
  111. })
  112. },
  113. // 删除头像
  114. iconDel() {
  115. const that = this;
  116. that.$set(that.form, `icon`, [])
  117. },
  118. // 头像上传
  119. async chooseavatar(e) {
  120. const that = this;
  121. let avatarUrl = e.detail.avatarUrl;
  122. let serverUrl = that.$config.serverUrl;
  123. const res = await that.$apifile(`/point/upload`, 'file', avatarUrl, 'file');
  124. if (res.errcode == '0') {
  125. let obj = {
  126. name: res.name,
  127. uri: res.uri,
  128. url: serverUrl + res.uri
  129. }
  130. that.$set(that.form, `icon`, [obj])
  131. } else {
  132. uni.showToast({
  133. title: res.errmsg,
  134. icon: 'none'
  135. })
  136. }
  137. },
  138. // 选择,输入昵称
  139. nameInput(e) {
  140. const that = this;
  141. that.$set(that.form, `name`, e.detail.value);
  142. },
  143. // 选择性别
  144. genderChange(e) {
  145. const that = this;
  146. let data = that.genderList[e.detail.value];
  147. if (data) {
  148. that.$set(that.form, `gender`, data.value);
  149. that.$set(that.form, `zhGender`, data.label);
  150. }
  151. },
  152. // 选择日期
  153. bindDateChange(e) {
  154. const that = this;
  155. that.$set(that.form, `birth`, e.detail.value);
  156. },
  157. // 返回
  158. back() {
  159. uni.navigateBack({
  160. delta: 1
  161. })
  162. },
  163. // 提交保存
  164. onSubmit(ref) {
  165. const that = this;
  166. that.$refs[ref].validate().then(async params => {
  167. const arr = await that.$api(`/user/${that.form.id}`, 'POST', params);
  168. if (arr.errcode == '0') {
  169. uni.showToast({
  170. title: `维护信息成功`,
  171. icon: 'success',
  172. });
  173. that.back();
  174. } else {
  175. uni.showToast({
  176. title: arr.errmsg,
  177. })
  178. }
  179. })
  180. },
  181. }
  182. }
  183. </script>
  184. <style lang="scss">
  185. .info {
  186. display: flex;
  187. flex-direction: column;
  188. width: 100vw;
  189. height: 100vh;
  190. .one {
  191. padding: 2vw;
  192. .uni-input {
  193. border: #f1f1ff 1px solid;
  194. padding: 2vw 2vw;
  195. border-radius: 1vw;
  196. }
  197. .input {
  198. border: #f1f1ff 1px solid;
  199. padding: 1.5vw 1vw;
  200. border-radius: 5px;
  201. }
  202. .btn {
  203. text-align: center;
  204. button {
  205. margin: 0 2vw 2vw 2vw;
  206. background-color: var(--ff0Color);
  207. color: var(--fffColor);
  208. }
  209. .name {
  210. color: var(--f85Color);
  211. font-size: var(--font14Size);
  212. }
  213. }
  214. .icon {
  215. display: flex;
  216. .icon_1 {
  217. position: relative;
  218. .image {
  219. width: 30vw;
  220. height: 30vw;
  221. }
  222. .del {
  223. position: absolute;
  224. top: 0;
  225. left: 22vw;
  226. }
  227. }
  228. .icon_2 {
  229. text-align: left;
  230. button {
  231. width: 30vw;
  232. padding: 0vw 1vw;
  233. font-size: 14px;
  234. }
  235. }
  236. }
  237. }
  238. }
  239. .uni-forms-item {
  240. margin-bottom: 6vw !important;
  241. display: flex;
  242. flex-direction: row;
  243. }
  244. </style>