userinfo.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <view class="container">
  3. <view class="user-box">
  4. <view class="avatar-box">
  5. <button open-type="chooseAvatar" @chooseavatar="chooseaAatar" class="clearBtn">
  6. <view class="avatar">
  7. <u-avatar :src="src" size="80" shape="square"></u-avatar>
  8. </view>
  9. </button>
  10. </view>
  11. <view class="user">
  12. <u-form labelPosition="left">
  13. <u-form-item
  14. label="昵称"
  15. prop="username"
  16. borderBottom
  17. ref="item1">
  18. <u-input v-model="username" placeholder="请输入昵称" border="none"></u-input>
  19. </u-form-item>
  20. </u-form>
  21. </view>
  22. </view>
  23. <view class="btn">
  24. <u-button type="primary" text="保存" @click="saveInfo" :customStyle="{width:'45%'}"></u-button>
  25. <u-button type="error" text="取消" @click="cancel" :customStyle="{width:'45%'}"></u-button>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. import { getConfig,setUserInfo,getUserInfo,getToken} from '@/utils/auth';
  31. export default {
  32. data() {
  33. return {
  34. src: '/static/img/avatar.png',
  35. username:'',
  36. userinfo:{},
  37. savepth:'',//真正保存的文件路径
  38. };
  39. },
  40. onShow() {
  41. this.userinfo = getUserInfo() || {};
  42. console.log(getUserInfo())
  43. console.log(getUserInfo().avatar)
  44. this.src = getUserInfo().avatar || ''
  45. this.username = getUserInfo().nickname || ''
  46. },
  47. methods:{
  48. chooseaAatar(e){
  49. console.log(e)
  50. this.src = e.detail.avatarUrl
  51. this.uploadFile(e.detail.avatarUrl );//选好了就开始上传
  52. },
  53. uploadFile(src){
  54. uni.showLoading({
  55. title:'加载中...'
  56. })
  57. uni.uploadFile({
  58. url:getConfig().uploadUrl,//图片上传路径
  59. fileType:'image',//图片类型,
  60. name:'file',//对应接口的文件名称
  61. filePath:src,
  62. header:{//请求头
  63. "Content-Type": "multipart/form-data"
  64. },
  65. success:(res)=>{
  66. uni.hideLoading()
  67. //成功的回调
  68. //一般用于重新获取数据渲染页面
  69. const r = JSON.parse(res.data);
  70. console.log(r)
  71. if(r.code==0){
  72. this.savepth = r.url
  73. }
  74. },
  75. fail:(err)=>{
  76. //失败的回调
  77. console.log("err",err)
  78. }
  79. })
  80. },
  81. //保存数据
  82. saveInfo(){
  83. let that = this
  84. let form = {};
  85. form.nickName = this.username
  86. form.avatarUrl = this.savepth,
  87. form.openid = getToken()
  88. uni.showLoading({
  89. title:'保存中...'
  90. })
  91. that.request('saveUserInfo', form, 'POST').then(res=>{
  92. console.log("wxloginres: ", res)
  93. if(res.code==200){
  94. uni.hideLoading()
  95. setTimeout(function () {
  96. uni.hideLoading();
  97. }, 2000);
  98. setUserInfo(res.data); //存储最新用户信息
  99. uni.navigateBack({
  100. delta:1//返回上一页
  101. })
  102. }else{
  103. uni.showToast({
  104. icon:"none",
  105. title: "登录失败,请稍后试试!",
  106. duration:2000
  107. })
  108. }
  109. })
  110. },
  111. //取消保存
  112. cancel(){
  113. uni.navigateBack({
  114. delta:1,//返回上一层
  115. })
  116. }
  117. }
  118. }
  119. </script>
  120. <style lang="scss">
  121. .user-box{
  122. width: 100%;
  123. height: 460rpx;
  124. background: #fff;
  125. .avatar-box{
  126. height: 260rpx;
  127. .avatar{
  128. width: 200rpx;
  129. margin: 80rpx auto;
  130. }
  131. }
  132. .user{
  133. width: 90%;
  134. margin: 30rpx auto;
  135. }
  136. }
  137. .btn{
  138. display: flex;
  139. justify-content: flex-end;
  140. align-items: center;
  141. width: 90%;
  142. margin: 100rpx auto;
  143. }
  144. </style>