upBasic.vue 5.7 KB

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