userinfo.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572
  1. <template>
  2. <view>
  3. <view style="color: #fff;">
  4. <tn-nav-bar backgroundColor="#26B3A0" :bottomShadow="false">修改用户信息</tn-nav-bar>
  5. <view :style="{ height: tobheight + 'px' }"></view>
  6. </view>
  7. <form @submit="formSubmit">
  8. <view class='personal-data'>
  9. <view class='list'>
  10. <view class='item acea-row row-between-wrapper'>
  11. <view>头像</view>
  12. <view class="avatar-box" @click.stop='uploadpic'>
  13. <image mode="aspectFill" :src="userinfo.head?userinfo.head:'/static/images/head.jpg'">
  14. </image>
  15. </view>
  16. </view>
  17. <view class='item acea-row row-between-wrapper'>
  18. <view>昵称</view>
  19. <view class='input'><input type='nickname' name='nick' placeholder="请输入昵称"
  20. :value='userinfo.nick' v-model="userinfo.nick"></input>
  21. </view>
  22. </view>
  23. </view>
  24. <button class='modifyBnt' style="background: linear-gradient(to right, #00ca88, #00BCD4);"
  25. hover-class="hoversubmit" formType="submit">保存修改</button>
  26. <!-- #ifdef H5 || APP-PLUS -->
  27. <view class="modifyBnt bg-color"
  28. style="margin-top: 40rpx;background: #ededed;color: #00ca88;border: 1px solid #00ca88;"
  29. @click="outLogin">退出登录</view>
  30. <!-- #endif -->
  31. </view>
  32. </form>
  33. </view>
  34. </template>
  35. <script>
  36. import {
  37. mapMutations,
  38. mapActions,
  39. mapState,
  40. mapGetters
  41. } from 'vuex';
  42. import {
  43. apiurl
  44. } from '@/common/request/request';
  45. // import Header from '@/components/header.vue';
  46. import {
  47. userInfo,
  48. updateUserInfo
  49. } from '@/api/my/index.js'
  50. import
  51. uploadImgUrl
  52. from '@/common/config.js';
  53. export default {
  54. // components: {
  55. // Header
  56. // },
  57. data() {
  58. return {
  59. loginType: 'h5', //app.globalData.loginType
  60. userIndex: 0,
  61. switchUserInfo: [],
  62. isAuto: false, //没有授权的不会自动授权
  63. isShowAuth: false, //是否隐藏授权
  64. canvasWidth: "",
  65. canvasHeight: "",
  66. canvasStatus: false,
  67. fileSizeString: '',
  68. version: '',
  69. ifimg: false,
  70. userinfo: {},
  71. tobheight: 45,
  72. platform: this.$platform.get(),
  73. };
  74. },
  75. computed: {
  76. ...mapGetters(['appInfo', 'isLogin', 'userInfo'])
  77. },
  78. async onLoad() {
  79. let that = this;
  80. // that.userinfo = that.userInfo
  81. if (this.platform == 'wxMiniProgram') {
  82. var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight;
  83. var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop;
  84. this.tobheight = menumtop + paddingtop + uni.getMenuButtonBoundingClientRect().height;
  85. }
  86. let res = await userInfo()
  87. if (res.code == 0) {
  88. this.userinfo = res.msg
  89. }
  90. console.log('修改用户信息-用户信息返回值:', res);
  91. // console.log('上传图片路径:', uploadImgUrl.baseImgUrl);
  92. },
  93. methods: {
  94. ...mapActions(['logout']),
  95. isNew() {
  96. this.$util.Tips({
  97. title: '当前为最新版本'
  98. });
  99. },
  100. onChooseAvatar(e) {
  101. var that = this;
  102. // console.log(e.detail.avatarUrl);
  103. // this.userinfo.avatar = e.detail.avatarUrl
  104. // this.ifimg = true
  105. uni.uploadFile({
  106. url: apiurl('common/upload'),
  107. filePath: e.detail.avatarUrl,
  108. name: 'file',
  109. formData: {
  110. accept: 'image'
  111. },
  112. success: res2 => {
  113. let a = JSON.parse(res2.data);
  114. if (a.code == 0) {
  115. that.userinfo.avatar = a.data.path
  116. that.ifimg = true
  117. } else {
  118. uni.showToast({
  119. title: '上传图片失败',
  120. icon: 'none'
  121. })
  122. that.ifimg = false
  123. }
  124. }
  125. });
  126. },
  127. updateApp() {
  128. this.$refs.appUpdate.update(); //调用子组件 检查更新
  129. },
  130. formatSize() {
  131. let that = this;
  132. plus.cache.calculate(function(size) {
  133. let sizeCache = parseInt(size);
  134. if (sizeCache == 0) {
  135. that.fileSizeString = "0B";
  136. } else if (sizeCache < 1024) {
  137. that.fileSizeString = sizeCache + "B";
  138. } else if (sizeCache < 1048576) {
  139. that.fileSizeString = (sizeCache / 1024).toFixed(2) + "KB";
  140. } else if (sizeCache < 1073741824) {
  141. that.fileSizeString = (sizeCache / 1048576).toFixed(2) + "MB";
  142. } else {
  143. that.fileSizeString = (sizeCache / 1073741824).toFixed(2) + "GB";
  144. }
  145. });
  146. },
  147. initData() {
  148. uni.showModal({
  149. title: '清楚缓存',
  150. content: '确定清楚本地缓存数据吗?',
  151. success: (res) => {
  152. if (res.confirm) {
  153. this.clearCache()
  154. this.formatSize()
  155. } else if (res.cancel) {
  156. return that.$util.Tips({
  157. title: '已取消'
  158. });
  159. }
  160. }
  161. });
  162. },
  163. clearCache() {
  164. let that = this;
  165. let os = plus.os.name;
  166. if (os == 'Android') {
  167. let main = plus.android.runtimeMainActivity();
  168. let sdRoot = main.getCacheDir();
  169. let files = plus.android.invoke(sdRoot, "listFiles");
  170. let len = files.length;
  171. for (let i = 0; i < len; i++) {
  172. let filePath = '' + files[i]; // 没有找到合适的方法获取路径,这样写可以转成文件路径
  173. plus.io.resolveLocalFileSystemURL(filePath, function(entry) {
  174. if (entry.isDirectory) {
  175. entry.removeRecursively(function(entry) { //递归删除其下的所有文件及子目录
  176. uni.showToast({
  177. title: '缓存清理完成',
  178. duration: 2000
  179. });
  180. that.formatSize(); // 重新计算缓存
  181. }, function(e) {
  182. console.log(e.message)
  183. });
  184. } else {
  185. entry.remove();
  186. }
  187. }, function(e) {
  188. console.log('文件路径读取失败')
  189. });
  190. }
  191. } else { // ios暂时未找到清理缓存的方法,以下是官方提供的方法,但是无效,会报错
  192. plus.cache.clear(function() {
  193. uni.showToast({
  194. title: '缓存清理完成',
  195. duration: 2000
  196. });
  197. that.formatSize();
  198. });
  199. }
  200. },
  201. /**
  202. * 小程序设置
  203. */
  204. Setting: function() {
  205. uni.openSetting({
  206. success: function(res) {}
  207. });
  208. },
  209. /**
  210. * 退出登录
  211. *
  212. */
  213. outLogin: function() {
  214. let that = this;
  215. uni.showModal({
  216. confirmColor: '#26B3A0',
  217. title: '提示',
  218. content: '确认退出登录?',
  219. success: function(res) {
  220. if (res.confirm) {
  221. uni.removeStorageSync('token')
  222. // uni.clearStorageSync()
  223. if (uni.getStorageSync('timer')) {
  224. console.log('logout-timer', Number(uni.getStorageSync('timer')));
  225. clearInterval(Number(uni.getStorageSync('timer')))
  226. uni.removeStorageSync('timer')
  227. }
  228. setTimeout(() => {
  229. uni.reLaunch({
  230. url: '/pages/robot/index'
  231. })
  232. }, 1500)
  233. } else if (res.cancel) {
  234. console.log('用户点击取消');
  235. }
  236. }
  237. });
  238. },
  239. /**
  240. * 上传文件
  241. *
  242. */
  243. uploadpic: function() {
  244. let that = this;
  245. uni.chooseImage({
  246. count: 1, //默认9
  247. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  248. sourceType: ['album', 'camera'], //从相册选择
  249. success: function(res) {
  250. const tempFilePaths = res.tempFilePaths;
  251. //上传服务器将服务器;
  252. uni.uploadFile({
  253. url: uploadImgUrl.baseImgUrl,
  254. filePath: tempFilePaths[0],
  255. name: 'file',
  256. formData: {
  257. accept: 'image',
  258. upload_type: 'ali-oss'
  259. },
  260. success: res2 => {
  261. let a = JSON.parse(res2.data);
  262. console.log('上传图片返回值:', a.data.path);
  263. if (a.code == 0) {
  264. that.userinfo.head = a.data.path.trim()
  265. that.ifimg = true
  266. } else {
  267. uni.showToast({
  268. title: '上传图片失败',
  269. icon: 'none'
  270. })
  271. that.ifimg = false
  272. }
  273. }
  274. });
  275. }
  276. });
  277. },
  278. /**
  279. * 提交修改
  280. */
  281. async formSubmit(e) {
  282. let that = this,
  283. value = e.detail.value;
  284. if (!that.userinfo.head) return that.$u.toast('请上传头像');
  285. if (!that.userinfo.nick) return that.$u.toast(
  286. '请填写昵称');
  287. // if (value.nick == that.userinfo.nick && !that.ifimg) return that.$u.toast('保存失败,您并没有修改');
  288. console.log('修改用户信息传递的参数:', {
  289. nick: value.nick,
  290. head: that.userinfo.head
  291. });
  292. // return
  293. let res = await updateUserInfo({
  294. nick: value.nick,
  295. head: that.userinfo.head
  296. })
  297. console.log('修改用户信息返回值:', res);
  298. if (res.code == 0) {
  299. setTimeout(function() {
  300. uni.showToast({
  301. title: '修改成功',
  302. duration: 1000,
  303. })
  304. setTimeout(function() {
  305. uni.navigateBack()
  306. }, 1000);
  307. }, 1000);
  308. } else {
  309. uni.showToast({
  310. title: res.msg,
  311. duration: 1000,
  312. icon: 'none'
  313. })
  314. }
  315. // that.$http('user.profile', {
  316. // nickname: value.nickname,
  317. // avatar: that.userinfo.avatar
  318. // }).then(res => {
  319. // if (res.code == 0) {
  320. // uni.showToast({
  321. // title: '保存中...',
  322. // duration: 1000,
  323. // icon: 'loading',
  324. // })
  325. // that.$store.dispatch('getUserInfo')
  326. // setTimeout(function() {
  327. // uni.showToast({
  328. // title: '保存成功',
  329. // duration: 1000,
  330. // })
  331. // setTimeout(function() {
  332. // uni.navigateBack()
  333. // }, 1000);
  334. // }, 1000);
  335. // } else {
  336. // that.$u.toast('保存失败,请重试');
  337. // }
  338. // })
  339. }
  340. }
  341. }
  342. </script>
  343. <style lang="scss">
  344. page {
  345. background: #ededed;
  346. }
  347. .cartcolor {
  348. color: var(--view-theme);
  349. border: 1px solid var(--view-theme);
  350. }
  351. .personal-data .wrapper {
  352. margin: 10rpx 0;
  353. background-color: #fff;
  354. padding: 36rpx 30rpx 13rpx 30rpx;
  355. }
  356. .personal-data .wrapper .title {
  357. margin-bottom: 30rpx;
  358. font-size: 32rpx;
  359. color: #282828;
  360. }
  361. .personal-data .wrapper .wrapList .item {
  362. width: 690rpx;
  363. height: 160rpx;
  364. background-color: #f8f8f8;
  365. border-radius: 20rpx;
  366. margin-bottom: 22rpx;
  367. padding: 0 30rpx;
  368. position: relative;
  369. border: 2rpx solid #f8f8f8;
  370. box-sizing: border-box;
  371. }
  372. .personal-data .wrapper .wrapList .item.on {
  373. border-color: #e93323;
  374. border-radius: 20rpx;
  375. background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArIAAACgCAYAAADw+I85AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0QzNkY3NzlCNzJCMTFFOTgyNEU4QzhGQTRFRUY2REQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0QzNkY3N0FCNzJCMTFFOTgyNEU4QzhGQTRFRUY2REQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozRDM2Rjc3N0I3MkIxMUU5ODI0RThDOEZBNEVFRjZERCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozRDM2Rjc3OEI3MkIxMUU5ODI0RThDOEZBNEVFRjZERCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pn3rJMAAAArUSURBVHja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");
  376. background-size: 100% 100%;
  377. background-color: #fff9f9;
  378. background-repeat: no-repeat;
  379. }
  380. .personal-data .wrapper .wrapList .item .picTxt {
  381. width: 445rpx;
  382. }
  383. .personal-data .wrapper .wrapList .item .picTxt .pictrue {
  384. width: 96rpx;
  385. height: 96rpx;
  386. position: relative;
  387. }
  388. .personal-data .wrapper .wrapList .item .picTxt .pictrue image {
  389. width: 100%;
  390. height: 100%;
  391. border-radius: 50%;
  392. }
  393. .personal-data .wrapper .wrapList .item .picTxt .pictrue .alter {
  394. width: 30rpx;
  395. height: 30rpx;
  396. border-radius: 50%;
  397. position: absolute;
  398. bottom: 0;
  399. right: 0;
  400. }
  401. .personal-data .wrapper .wrapList .item .picTxt .text {
  402. width: 325rpx;
  403. }
  404. .personal-data .wrapper .wrapList .item .picTxt .text .name {
  405. width: 100%;
  406. font-size: 30rpx;
  407. color: #282828;
  408. }
  409. .personal-data .wrapper .wrapList .item .picTxt .text .phone {
  410. font-size: 24rpx;
  411. color: #999;
  412. margin-top: 10rpx;
  413. }
  414. .personal-data .wrapper .wrapList .item .bnt {
  415. font-size: 24rpx;
  416. background-color: #fff;
  417. border-radius: 27rpx;
  418. width: 140rpx;
  419. height: 54rpx;
  420. border: 2rpx solid #e93323;
  421. }
  422. .personal-data .wrapper .wrapList .item .currentBnt {
  423. position: absolute;
  424. right: 0;
  425. top: 0;
  426. font-size: 26rpx;
  427. background-color: rgba(233, 51, 35, 0.1);
  428. width: 140rpx;
  429. height: 48rpx;
  430. border-radius: 0 20rpx 0 20rpx;
  431. }
  432. .personal-data .list {
  433. margin-top: 15rpx;
  434. background-color: #fff;
  435. }
  436. .personal-data .list .item {
  437. padding: 30rpx 30rpx 30rpx 0;
  438. border-bottom: 1rpx solid #f2f2f2;
  439. margin-left: 30rpx;
  440. font-size: 32rpx;
  441. color: #282828;
  442. }
  443. .personal-data .list .item .phone {
  444. width: 160rpx;
  445. height: 56rpx;
  446. font-size: 24rpx;
  447. color: #fff;
  448. line-height: 56rpx;
  449. border-radius: 32rpx
  450. }
  451. .personal-data .list .item .pictrue {
  452. width: 88rpx;
  453. height: 88rpx;
  454. }
  455. .personal-data .list .item .pictrue image {
  456. width: 100%;
  457. height: 100%;
  458. border-radius: 50%;
  459. }
  460. .personal-data .list .item .input {
  461. width: 415rpx;
  462. text-align: right;
  463. color: #868686;
  464. display: flex;
  465. align-items: center;
  466. justify-content: flex-end;
  467. }
  468. .personal-data .list .item .input .id {
  469. width: 305rpx;
  470. }
  471. .personal-data .list .item .input .iconfont {
  472. font-size: 35rpx;
  473. }
  474. .personal-data .modifyBnt {
  475. font-size: 32rpx;
  476. color: #fff;
  477. width: 690rpx;
  478. height: 90rpx;
  479. border-radius: 50rpx;
  480. text-align: center;
  481. line-height: 90rpx;
  482. margin: 76rpx auto 0 auto;
  483. }
  484. .personal-data .hoversubmit {
  485. background: #f7f7f7;
  486. color: #acacb3;
  487. }
  488. .personal-data .logOut {
  489. font-size: 32rpx;
  490. text-align: center;
  491. width: 690rpx;
  492. height: 90rpx;
  493. border-radius: 45rpx;
  494. margin: 30rpx auto 0 auto;
  495. }
  496. .avatar-box {
  497. width: 96rpx;
  498. height: 96rpx;
  499. image {
  500. width: 100%;
  501. height: 100%;
  502. border-radius: 50%;
  503. }
  504. }
  505. .acea-row {
  506. display: flex;
  507. flex-wrap: wrap;
  508. }
  509. .acea-row.row-between-wrapper {
  510. align-items: center;
  511. justify-content: space-between;
  512. }
  513. .bg-color {
  514. background-color: #333;
  515. }
  516. .getbutton {
  517. position: absolute;
  518. width: 96rpx;
  519. height: 96rpx;
  520. opacity: 0;
  521. right: 30rpx;
  522. // margin-top: 180rpx;
  523. }
  524. </style>