person.vue 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <view>
  3. <!-- #ifdef MP-WEIXIN -->
  4. <u-navbar :is-back="false" title=" " :background="{ background: '#ffffff' }" :border-bottom="false"></u-navbar>
  5. <!-- #endif -->
  6. <!-- #ifndef MP-WEIXIN -->
  7. <view class="status_bar"></view>
  8. <!-- #endif -->
  9. <u-cell-group>
  10. <u-cell-item :arrow="false" title="头像" :title-style="{ marginLeft: '10rpx' }">
  11. <u-upload :showUploadList="false" style="display: inline;" :custom-btn="true" :width='300' :height='300' @on-uploaded="onUploaded" :action="action">
  12. <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
  13. <u-avatar mode="square" :src="userData.user.avatar" size="140"></u-avatar>
  14. </view>
  15. </u-upload>
  16. </u-cell-item>
  17. <u-cell-item :arrow="false" title="名字" @tap="linkTo(userData.user.realname,0)" :value="userData.user.realname" :title-style="{ marginLeft: '10rpx' }">
  18. </u-cell-item>
  19. <u-cell-item title="用户名" :arrow="false" :value="userData.user.username" :title-style="{ marginLeft: '10rpx' }">
  20. </u-cell-item>
  21. <u-cell-item @tap="linkToQrcode" title="二维码" :title-style="{ marginLeft: '10rpx' }">
  22. <u-icon :name="src1" size="40" :color="$u.color['lightColor']"></u-icon>
  23. </u-cell-item>
  24. </u-cell-group>
  25. </view>
  26. </template>
  27. <script>
  28. export default {
  29. data() {
  30. return {
  31. src1:'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/qr_code.png',
  32. action:this.$uploadUrl,
  33. filesArr: [],
  34. groupList: [
  35. /*{ title: '新消息通知', color: '#409eff', icon: 'star' },*/
  36. /*{ title: '隐私', color: '#409eff', icon: 'photo' },*/
  37. /*{ title: '帮助与反馈', color: '#ff9900', icon: 'heart' }*/
  38. { title: '通用', color: '#409eff', icon: 'coupon' }
  39. ],
  40. $url:''
  41. }
  42. },
  43. onShow() {
  44. console.log(this.userData)
  45. },
  46. methods: {
  47. onUploaded(lists) {
  48. this.filesArr = lists;
  49. let res = lists[0];
  50. if(res.response===undefined){
  51. uni.showToast({
  52. title:'文件错误',
  53. icon:'none'
  54. })
  55. }
  56. var that = this
  57. this.$socket.updateAvatar(this.userData.user.operId, that.$url + res.response.data, res => {
  58. console.log("res",res)
  59. that.userData.user.avatar = res.user.avatar
  60. that.$u.vuex("userData",that.userData)
  61. uni.showToast({
  62. title: '更换成功',
  63. duration: 1000,
  64. });
  65. setTimeout(()=>{uni.navigateBack({})},1000);
  66. })
  67. },
  68. linkToQrcode(){
  69. this.$u.route({
  70. url: 'pageB/qrcode/qrcode'
  71. });
  72. },
  73. linkTo( context, type){
  74. this.$u.route({
  75. url: 'pageC/chat/updateGroupInfo',
  76. params: { context, type }
  77. });
  78. }
  79. }
  80. }
  81. </script>
  82. <style lang="scss" scoped>
  83. .slot-btn {
  84. width: 626rpx;
  85. height: 140rpx;
  86. border-radius: 10rpx;
  87. text-align: right;
  88. }
  89. .slot-btn__hover {
  90. background-color: rgb(235, 236, 238);
  91. }
  92. </style>