猫妈狗爸伴宠师小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

262 lines
5.6 KiB

2 weeks ago
  1. <template>
  2. <view class="user-info-container container">
  3. <view class="user-avatar-section">
  4. <view class="user-info-title">
  5. 用户头像
  6. </view>
  7. <view style="display: flex;justify-content: center;">
  8. <u-upload
  9. accept="image"
  10. :capture="['album','camera']"
  11. :fileList="fileList"
  12. @afterRead="afterRead"
  13. @delete="deletePic"
  14. :max-count="1"
  15. name="avatar"
  16. width="80"
  17. height="80"
  18. :custom-style="{flex:0}"
  19. >
  20. <image :src="avatarUrl" style="width: 80px;height: 80px;border-radius: 50%;"></image>
  21. </u-upload>
  22. </view>
  23. </view>
  24. <view class="user-info-section">
  25. <view class="user-info-title">
  26. 基本信息
  27. </view>
  28. <view class="user-info-form">
  29. <view class="user-info-item">
  30. <view class="user-info-label">昵称</view>
  31. <view class="user-info-input">
  32. <u-input v-model="nickname" placeholder="请输入昵称" :border="false" />
  33. </view>
  34. </view>
  35. <!-- <view class="user-info-item">
  36. <view class="user-info-label">会员等级</view>
  37. <view class="user-info-value">
  38. <text>{{userLevel}}</text>
  39. </view>
  40. </view> -->
  41. </view>
  42. </view>
  43. <view class="user-info-btns">
  44. <view class="user-info-btn" @click="save">
  45. <u-button color="#FFBF60" :loading="loading">
  46. <view style="color: #fff;">
  47. 保存
  48. </view>
  49. </u-button>
  50. </view>
  51. </view>
  52. </view>
  53. <!-- 客服组件 -->
  54. <CustomerService />
  55. </template>
  56. <script>
  57. import {updateUserProfile, uploadAvatar} from '@/api/system/user'
  58. import {getPersonalInfo} from "@/api/system/personal.js"
  59. export default {
  60. data() {
  61. return {
  62. loading: false,
  63. fileList: [],
  64. avatarUrl: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/avatar_1.png',
  65. nickname: '',
  66. userLevel: ''
  67. }
  68. },
  69. onLoad() {
  70. this.getUserInfo()
  71. },
  72. methods: {
  73. // 获取用户信息
  74. getUserInfo() {
  75. getPersonalInfo().then(res => {
  76. if (res && (res.id || res.id === 0)) {
  77. this.nickname = res.nickname || ''
  78. this.userLevel = res.level || ''
  79. if (res.avatar) {
  80. this.avatarUrl = res.avatar
  81. this.fileList = [{url: res.avatar}]
  82. }
  83. }
  84. })
  85. },
  86. // 删除图片
  87. deletePic(event) {
  88. this.fileList.splice(event.index, 1)
  89. this.avatarUrl = 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/avatar_1.png'
  90. },
  91. // 新增图片
  92. async afterRead(event) {
  93. // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
  94. let lists = [].concat(event.file)
  95. let fileListLen = this.fileList.length
  96. lists.map((item) => {
  97. this.fileList.push({
  98. ...item,
  99. status: 'uploading',
  100. message: '上传中'
  101. })
  102. })
  103. for (let i = 0; i < lists.length; i++) {
  104. const result = await this.uploadFilePromise(lists[i].url)
  105. let item = this.fileList[fileListLen]
  106. this.fileList.splice(fileListLen, 1, Object.assign(item, {
  107. status: 'success',
  108. message: '',
  109. url: result
  110. }))
  111. this.avatarUrl = result
  112. fileListLen++
  113. }
  114. },
  115. uploadFilePromise(url) {
  116. return new Promise((resolve, reject) => {
  117. let a = uni.uploadFile({
  118. url: 'https://store-test.catmdogd.com/test-api/h5/oss/upload',
  119. filePath: url,
  120. name: 'file',
  121. formData: {
  122. user: 'test'
  123. },
  124. success: (res) => {
  125. setTimeout(() => {
  126. if(res && res.data){
  127. let resData = JSON.parse(res.data);
  128. resolve(resData.url);
  129. }
  130. reject("上传失败");
  131. }, 1000)
  132. }
  133. });
  134. })
  135. },
  136. // 保存用户信息
  137. save() {
  138. if (!this.nickname) {
  139. this.$modal.showToast('请输入昵称!')
  140. return
  141. }
  142. this.loading = true
  143. let params = {
  144. nickname: this.nickname,
  145. avatar: this.avatarUrl
  146. }
  147. updateUserProfile(params).then(res => {
  148. if (res && res.code == 200) {
  149. uni.showToast({
  150. title: '保存成功',
  151. duration: 3000,
  152. icon: "none"
  153. })
  154. setTimeout(() => {
  155. this.loading = false
  156. let len = getCurrentPages().length
  157. if (len >= 2) {
  158. uni.navigateBack()
  159. } else {
  160. uni.redirectTo({url: '/pages/personalCenter/index'})
  161. }
  162. }, 1000)
  163. } else {
  164. this.loading = false
  165. uni.showToast({
  166. title: '更新用户信息失败',
  167. duration: 3000,
  168. icon: "none"
  169. })
  170. }
  171. }).catch(() => {
  172. this.loading = false
  173. uni.showToast({
  174. title: '更新用户信息失败',
  175. duration: 3000,
  176. icon: "none"
  177. })
  178. })
  179. }
  180. }
  181. }
  182. </script>
  183. <style lang="scss">
  184. .user-info-container {
  185. position: relative;
  186. height: 100%;
  187. padding-bottom: 90px;
  188. .user-avatar-section {
  189. width: 100%;
  190. background-color: #fff;
  191. padding: 15px 20px;
  192. margin-bottom: 10px;
  193. }
  194. .user-info-section {
  195. width: 100%;
  196. background-color: #fff;
  197. padding: 15px 20px;
  198. }
  199. .user-info-title {
  200. font-size: 14px;
  201. color: #333;
  202. font-weight: bold;
  203. padding-bottom: 15px;
  204. }
  205. .user-info-form {
  206. width: 100%;
  207. }
  208. .user-info-item {
  209. display: flex;
  210. align-items: center;
  211. padding: 12px 0;
  212. border-bottom: 1px solid #efefef;
  213. &:last-child {
  214. border-bottom: none;
  215. }
  216. }
  217. .user-info-label {
  218. width: 80px;
  219. color: #333;
  220. font-size: 14px;
  221. }
  222. .user-info-input {
  223. flex: 1;
  224. }
  225. .user-info-value {
  226. flex: 1;
  227. color: #666;
  228. font-size: 14px;
  229. }
  230. .user-info-btns {
  231. background-color: #FFFFFF;
  232. padding: 10px 20px 40px;
  233. width: 100%;
  234. height: 90px;
  235. position: fixed;
  236. bottom: 0;
  237. z-index: 100;
  238. text-align: center;
  239. .user-info-btn {
  240. width: 80%;
  241. margin: 0 auto;
  242. }
  243. }
  244. }
  245. </style>