当前位置:   article > 正文

uniapp中小程序最新获取用户头像与昵称操作_uniapp小程序获取用户头像和昵称

uniapp小程序获取用户头像和昵称
  1. <template>
  2. <view class="containar">
  3. <view class="avatarUrl">
  4. <button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
  5. <image :src="avatarUrl" class="refreshIcon"></image>
  6. </button>
  7. </view>
  8. <view class="userName">
  9. <text>昵称:</text>
  10. <input type="nickName" class="weui-input" :value="userName" @blur="bindblur" placeholder="请输入昵称"
  11. @input="bindinput" />
  12. </view>
  13. <view class="userPhone">
  14. <view>手机</view>
  15. <view class="weui-input">{{phone}}</view>
  16. <view class="changebtn" @click="ChangePhone()">更换</view>
  17. </view>
  18. <view class="d-center">
  19. <view class="bcbtn" @click="onSubmit">保存</view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. import {
  25. aUser,//修改
  26. getUser //回显
  27. } from '../../api/index.js'
  28. const uploadPath = getApp().globalData.api_url + '/system/file/picture'
  29. export default {
  30. data() {
  31. return {
  32. avatarUrl: '',
  33. userName: '',
  34. phone: ''
  35. };
  36. },
  37. onShow() {
  38. // 下载图片,注意下载图片地址必须得是图片存放地址,downloadFile合法域名
  39. this.loadUserInfoData()
  40. },
  41. methods: {
  42. // 跳转到修改手机号码页面
  43. ChangePhone() {
  44. uni.navigateTo({
  45. url: '/subpackage/user/edit-phone'
  46. })
  47. },
  48. // 将网络照片进行下载,然后进行上传(小程序不支持直接进行修改网络资源文件)
  49. loadUserInfoData() {
  50. getUser().then(res => {
  51. this.userName = res.data.nickname
  52. this.avatarUrl = res.data.avatar
  53. this.phone = res.data.phone
  54. uni.downloadFile({
  55. url: this.avatarUrl, //仅为示例,并非真实的资源
  56. success: (res) => {
  57. if (res.statusCode === 200) {
  58. this.avatarUrl = res.tempFilePath
  59. }
  60. }
  61. });
  62. })
  63. },
  64. bindblur(e) {
  65. this.userName = e.detail.value; // 获取微信昵称
  66. },
  67. bindinput(e) {
  68. this.userName = e.detail.value; // 获取微信昵称
  69. },
  70. // 上传头像
  71. onChooseavatar(e) {
  72. let self = this;
  73. let {
  74. avatarUrl
  75. } = e.detail;
  76. this.avatarUrl = avatarUrl
  77. },
  78. // 提交信息
  79. onSubmit() {
  80. var that = this
  81. uni.login({
  82. "provider": "weixin",
  83. // "onlyAuthorize": true, // 微信登录仅请求授权认证
  84. success: function(event) {
  85. const {
  86. code
  87. } = event
  88. const name = that.userName
  89. // 判断头像以及昵称不为空 再上传
  90. if (that.userName && that.avatarUrl) {
  91. let a = uni.uploadFile({
  92. url: uploadPath, // 仅为示例,非真实的接口地址
  93. filePath: that.avatarUrl,
  94. name: 'file',
  95. header: {
  96. Authorization: 'Bearer ' + that.$store.getters.accessToken,
  97. 'tenant-id': 1
  98. },
  99. success: (res) => {
  100. let userInfo = {
  101. avatarFileId: JSON.parse(res.data).data.id,
  102. nickname: that.userName
  103. }
  104. aUser(userInfo).then(res => {
  105. uni.$u.toast('已保存')
  106. setTimeout(() => {
  107. uni.switchTab({
  108. url: '/pages/user/user'
  109. })
  110. }, 300)
  111. })
  112. }
  113. });
  114. } else {
  115. uni.showToast({
  116. icon: 'none',
  117. title: '请上传头像并填写昵称'
  118. })
  119. return false;
  120. }
  121. },
  122. fail: function(err) {
  123. console.log('失败')
  124. }
  125. })
  126. }
  127. }
  128. }
  129. </script>
  130. <style lang="scss" scoped>
  131. page {
  132. background: #fff;
  133. }
  134. .containar {
  135. height: 100vh;
  136. background: #fff;
  137. .avatarUrl {
  138. padding: 80rpx 0 40rpx;
  139. button {
  140. background: #fff;
  141. line-height: 80rpx;
  142. height: auto;
  143. border: none !important;
  144. width: auto;
  145. // padding: 20rpx 30rpx;
  146. margin: 0;
  147. display: flex;
  148. border: none;
  149. justify-content: center;
  150. align-items: center;
  151. &::after {
  152. border: none;
  153. }
  154. .refreshIcon {
  155. width: 160rpx;
  156. height: 160rpx;
  157. border-radius: 50%;
  158. background-color: #ccc;
  159. }
  160. .jt {
  161. width: 14rpx;
  162. height: 28rpx;
  163. }
  164. }
  165. }
  166. .userName {
  167. background: #fff;
  168. padding: 20rpx 30rpx 40rpx;
  169. display: flex;
  170. align-items: center;
  171. justify-content: center;
  172. .weui-input {
  173. margin-left: 60rpx;
  174. padding-bottom: 10rpx;
  175. border-bottom: 1px solid #eee;
  176. }
  177. }
  178. .bcbtn {
  179. width: 500rpx;
  180. height: 80rpx;
  181. color: #fff;
  182. margin-top: 200rpx;
  183. text-align: center;
  184. line-height: 80rpx;
  185. border-radius: 40rpx;
  186. background: var(--themeColor);
  187. }
  188. .userPhone {
  189. background: #fff;
  190. padding: 0 120rpx 40rpx;
  191. display: flex;
  192. align-items: center;
  193. .changebtn {
  194. font-size: 14px;
  195. color: var(--themeColor);
  196. margin-left: 70rpx;
  197. }
  198. .weui-input {
  199. padding-left: 90rpx;
  200. }
  201. }
  202. .btn {
  203. width: 300rpx;
  204. display: flex;
  205. text-align: center;
  206. justify-content: center;
  207. }
  208. }
  209. </style>

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读