userinfo.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. <template>
  2. <view class="content">
  3. <view class="row1">
  4. <text class="tit">头像</text>
  5. <view class="background-img" @click.stop="imgsub()">
  6. <image class="background-img" v-model="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill">
  7. </image>
  8. </view>
  9. </view>
  10. <view class="row">
  11. <text class="tit">昵称</text>
  12. <input class="input" type="text" v-model="userInfo.nickname" placeholder-class="placeholder" />
  13. </view>
  14. <view class="row">
  15. <text class="tit">ID</text>
  16. <input class="input" type="text" disabled="true" v-model="userInfo.uid" placeholder-class="placeholder" />
  17. </view>
  18. <view class="row">
  19. <text class="tit">账户</text>
  20. <input class="input" type="text" disabled="true" v-model="userInfo.phone" placeholder-class="placeholder" />
  21. </view>
  22. <view class="add-btn" @click="confirm">提交</view>
  23. </view>
  24. </template>
  25. <script>
  26. import {
  27. mapState,
  28. mapMutations
  29. } from 'vuex';
  30. import {
  31. upload
  32. } from '@/api/order.js';
  33. import {
  34. userEdit,
  35. logout,
  36. test
  37. } from '@/api/set.js';
  38. export default {
  39. data() {
  40. return {
  41. show: false,
  42. password: '',
  43. upFileLoding: false,
  44. }
  45. },
  46. onLoad() {
  47. console.log(this.userInfo)
  48. test();
  49. },
  50. computed: {
  51. ...mapState('user', ['userInfo'])
  52. },
  53. methods: {
  54. ...mapMutations('user', ['logout']),
  55. imgsub() {
  56. const that = this;
  57. uni.showModal({
  58. title: '访问相册权限申请',
  59. content: '是否允许访问相册上传头像?',
  60. cancelText: '拒绝',
  61. confirmText: '允许',
  62. success: res => {
  63. if (res.confirm) {
  64. if (that.upFileLoding) {
  65. return
  66. }
  67. that.upFileLoding = true;
  68. setTimeout(() => {
  69. that.upFileLoding = false;
  70. }, 1000);
  71. upload({
  72. filename: ''
  73. }).then(data => {
  74. this.userInfo.avatar = data[0].url;
  75. }).catch((err) => {
  76. console.log(err);
  77. })
  78. }
  79. },
  80. fail: () => {},
  81. complete: () => {}
  82. });
  83. },
  84. confirm() {
  85. userEdit({
  86. avatar: this.userInfo.avatar,
  87. nickname: this.userInfo.nickname
  88. })
  89. .then(e => {
  90. this.$api.msg('修改成功');
  91. setTimeout(() => {
  92. uni.switchTab({
  93. url: '/pages/user/user'
  94. });
  95. }, 1000);
  96. console.log(e);
  97. })
  98. .catch(e => {
  99. console.log(e);
  100. });
  101. },
  102. toLogout() {
  103. let obj = this;
  104. uni.showModal({
  105. content: '确定要退出登录么',
  106. success: (e) => {
  107. if (e.confirm) {
  108. logout({}).then((e) => {
  109. uni.navigateBack();
  110. }).catch((e) => {
  111. console.log(e);
  112. })
  113. obj.logout();
  114. }
  115. }
  116. });
  117. },
  118. }
  119. }
  120. </script>
  121. <style lang="scss">
  122. .row1 {
  123. display: flex;
  124. align-items: center;
  125. justify-content: space-between;
  126. position: relative;
  127. padding: 0 30upx;
  128. height: 110upx;
  129. background: #fff;
  130. margin-bottom: 20upx;
  131. .tit {
  132. flex-shrink: 0;
  133. width: 120upx;
  134. font-size: $font-lg;
  135. color: $font-color-dark;
  136. }
  137. .background-img {
  138. width: 80rpx;
  139. height: 80rpx;
  140. border-radius: 50%;
  141. background: #f2f2f2;
  142. }
  143. }
  144. .row {
  145. display: flex;
  146. align-items: center;
  147. padding: 0 30upx;
  148. height: 110upx;
  149. background: #fff;
  150. .tit {
  151. flex-shrink: 0;
  152. width: 120upx;
  153. font-size: $font-lg;
  154. color: $font-color-dark;
  155. }
  156. .input {
  157. flex: 1;
  158. text-align: right;
  159. font-size: $font-base;
  160. color: $color-gray;
  161. }
  162. }
  163. .add-btn {
  164. display: flex;
  165. align-items: center;
  166. justify-content: center;
  167. margin: 158rpx auto 30rpx;
  168. width: 560rpx;
  169. height: 80rpx;
  170. background: #DC262B;
  171. border-radius: 40px;
  172. color: #FFFFFF;
  173. }
  174. .out {
  175. display: flex;
  176. align-items: center;
  177. justify-content: center;
  178. margin: 0 auto 30rpx;
  179. width: 560rpx;
  180. height: 80rpx;
  181. border: 1px solid #32C6FF;
  182. background: #FFFFFF;
  183. border-radius: 40px;
  184. color: #32C6FF;
  185. }
  186. .psw-wrapper {
  187. width: 548rpx;
  188. height: 344rpx;
  189. background-color: #ffffff;
  190. .psw-title {
  191. width: 100%;
  192. font-size: 35rpx;
  193. padding: 43rpx 0 49rpx;
  194. text-align: center;
  195. font-weight: 800;
  196. }
  197. .psw-ipt {
  198. display: block;
  199. background-color: #dce3ed;
  200. height: 90rpx;
  201. width: 464rpx;
  202. padding-left: 30rpx;
  203. margin: 0 auto;
  204. font-size: 80rpx;
  205. }
  206. .psw-btn text {
  207. display: inline-block;
  208. text-align: center;
  209. width: 50%;
  210. padding-top: 29rpx;
  211. font-size: 35rpx;
  212. }
  213. .psw-qd {
  214. color: #32C6FF;
  215. }
  216. }
  217. </style>