edit.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <view class="edit">
  3. <view class="head-box">
  4. <image @click="chooseHead" class="head" :src="headImg||defaultImg" mode=""></image>
  5. <image class="icon" src="../../static/take_photo.png" mode=""></image>
  6. </view>
  7. <view class="">
  8. <u-cell size="large" title="修改昵称" :isLink="true" url="/my/edit/editName"></u-cell>
  9. <!-- <u-cell size="large" title="关于" :isLink="true"></u-cell> -->
  10. </view>
  11. <button class="login-out" @click="loginOut">退出当前账号</button>
  12. </view>
  13. </template>
  14. <script>
  15. import {
  16. uploadImg,finishUploadImg
  17. } from '@/api/common.js';
  18. import crypto from 'crypto-js';
  19. import { Base64 } from 'js-base64';
  20. export default {
  21. data() {
  22. return {
  23. headImg: '',
  24. defaultImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fc34b7b74-ba38-0456-982a-43c0f97522fe%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693532127&t=a2e186c12aecaab7723611cb52a6778f',
  25. userId: '',
  26. userInfo: null
  27. }
  28. },
  29. methods: {
  30. chooseHead() {
  31. let that = this
  32. uni.chooseImage({
  33. count: 1,
  34. success(r) {
  35. console.log(r);
  36. uploadImg({
  37. "fineName": r.tempFilePaths[0].substr(r.tempFilePaths[0].lastIndexOf('/')+1)
  38. }).then(res => {
  39. if (res.state == 'Success') {
  40. // that.headImg = r.tempFilePaths[0]
  41. // uni.showToast({
  42. // title: '上传成功',
  43. // });
  44. // that.userInfo.imgPath = r.tempFilePaths[0]
  45. // uni.setStorageSync('userInfo',JSON.stringify(this.userInfo))
  46. const date = new Date();
  47. date.setHours(date.getHours() + 1);
  48. const policyText = {
  49. expiration: date.toISOString(), // 设置policy过期时间。
  50. conditions: [
  51. // 限制上传大小。
  52. ["content-length-range", 0, 1024 * 1024 * 1024],
  53. ],
  54. };
  55. let fileName = r.tempFilePaths[0].substr(r.tempFilePaths[0].lastIndexOf('/')+1);
  56. const host = 'https://' + res.content.bucket + '.'+ res.content.endPoint;
  57. const policy = Base64.encode(JSON.stringify(policyText));
  58. const signature = crypto.enc.Base64.stringify(crypto.HmacSHA1(policy, res.content.token.accessKeySecret));;
  59. const filePath = r.tempFilePaths[0]; // 待上传文件的文件路径。
  60. let paths = res.content.paths[0]
  61. // paths.pop()
  62. uni.uploadFile({
  63. url: host, // 开发者服务器的URL。
  64. filePath: filePath,
  65. name: 'file', // 必须填file。
  66. formData: {
  67. key:paths.join('/'),
  68. policy,
  69. success_action_status: '200', //让服务端返回200,不然,默认会返回204
  70. OSSAccessKeyId: res.content.token.accessKeyId,
  71. signature,
  72. 'x-oss-security-token': res.content.token.securityToken // 使用STS签名时必传。
  73. },
  74. success: (res1) => {
  75. if (res1.statusCode === 200) {
  76. console.log('上传成功');
  77. // 告知服务器上传成功地址
  78. finishUploadImg(
  79. [{
  80. path:res.content.paths[0]
  81. }]).then(msg=>{
  82. that.headImg = host + '/' + paths.join('/')
  83. let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
  84. userInfo.imgPath = that.headImg
  85. uni.getStorageSync('userInfo',JSON.stringify(userInfo))
  86. })
  87. }
  88. },
  89. fail: err => {
  90. console.log(err);
  91. }
  92. });
  93. }
  94. })
  95. }
  96. })
  97. },
  98. loginOut() {
  99. // 保存部分信息
  100. let location = uni.getStorageSync('location')
  101. let goodsTypeObj = uni.getStorageSync('goodsTypeObj')
  102. let inviteCode = uni.getStorageSync('inviteCode')
  103. uni.clearStorageSync()
  104. uni.setStorageSync('location',location)
  105. uni.setStorageSync('goodsTypeObj',goodsTypeObj)
  106. uni.setStorageSync('inviteCode',inviteCode)
  107. uni.switchTab({
  108. url: '/pages/index/index'
  109. })
  110. }
  111. },
  112. created() {
  113. this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
  114. this.headImg = this.userInfo.imgPath || ''
  115. this.userId = this.userInfo.userId || ''
  116. }
  117. }
  118. </script>
  119. <style lang="scss" scoped>
  120. .edit {
  121. .head-box {
  122. margin: 80rpx auto 50rpx;
  123. width: 150rpx;
  124. height: 150rpx;
  125. position: relative;
  126. .head {
  127. width: 150rpx;
  128. height: 150rpx;
  129. border-radius: 50%;
  130. }
  131. .icon {
  132. position: absolute;
  133. width: 44rpx;
  134. height: 44rpx;
  135. bottom: 0%;
  136. right: 0;
  137. }
  138. }
  139. .login-out {
  140. position: fixed;
  141. bottom: 150rpx;
  142. left: 50%;
  143. width: 400rpx;
  144. line-height: 110rpx;
  145. text-align: center;
  146. color: #fff;
  147. background: rgb(164, 173, 179);
  148. border-radius: 55rpx;
  149. transform: translateX(-50%);
  150. font-size: 30rpx;
  151. }
  152. }
  153. </style>