index.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one" @click="toCommon('/pagesMy/account/upPassword')">
  5. <view class="other">
  6. <view class="title">{{passLogin.name}}</view>
  7. <view class="titles">{{passLogin.content}}</view>
  8. </view>
  9. <view class="btn">
  10. <text class="iconfont icon-jiantouyou"></text>
  11. </view>
  12. </view>
  13. <view class="one" @click="toCommon('/pagesMy/account/bindPhone')">
  14. <view class="other">
  15. <view class="title">{{phone.name}} <text>已绑定{{phone.phone}}</text> </view>
  16. <view class="titles">{{phone.content}}</view>
  17. </view>
  18. <view class="btn">
  19. <text class="iconfont icon-jiantouyou"></text>
  20. </view>
  21. </view>
  22. <view class="one" @click="toCommon('/pagesMy/account/bindEmail')">
  23. <view class="other">
  24. <view class="title">{{email.name}}</view>
  25. <view class="titles">{{email.content}}</view>
  26. </view>
  27. <view class="btn">
  28. <text class="iconfont icon-jiantouyou"></text>
  29. </view>
  30. </view>
  31. <view class="one" @click="toCommon('/pagesMy/account/upBasic')">
  32. <view class="other">
  33. <view class="title">{{info.name}}</view>
  34. <view class="titles">{{info.content}}</view>
  35. </view>
  36. <view class="btn">
  37. <text class="iconfont icon-jiantouyou"></text>
  38. </view>
  39. </view>
  40. <view class="two">
  41. <button type="default" size="mini" @click="toOut()">退出当前登录</button>
  42. </view>
  43. </view>
  44. </mobile-frame>
  45. </template>
  46. <script>
  47. export default {
  48. data() {
  49. return {
  50. passLogin: {
  51. name: '登录密码',
  52. content: '建议定期修改密码以保护账号安全'
  53. },
  54. phone: {
  55. name: '绑定手机',
  56. content: '如若您已更换手机号,请及时绑定',
  57. phone: ''
  58. },
  59. email: {
  60. name: '绑定邮箱',
  61. content: '未绑定邮箱,请及时绑定'
  62. },
  63. info: {
  64. name: '修改个人信息',
  65. content: '修改个人信息'
  66. },
  67. };
  68. },
  69. onShow: function() {
  70. const that = this;
  71. that.watchLogin();
  72. },
  73. methods: {
  74. watchLogin() {
  75. const that = this;
  76. uni.getStorage({
  77. key: 'token',
  78. success: async (res) => {
  79. let user = that.$jwt(res.data);
  80. if (user) {
  81. const arr = await that.$api(`/user/${user.id}`, 'GET');
  82. if (arr.errcode == '0') {
  83. if (arr.data && arr.data.phone) {
  84. var phone = arr.data.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
  85. that.$set(that.phone, `phone`, phone)
  86. }
  87. } else {
  88. uni.showToast({
  89. title: arr.errmsg,
  90. icon: 'error',
  91. duration: 2000
  92. });
  93. }
  94. }
  95. },
  96. fail: (err) => {}
  97. })
  98. },
  99. // 跳转
  100. toCommon(route, e) {
  101. uni.navigateTo({
  102. url: `${route}`
  103. })
  104. },
  105. // 退出登录
  106. toOut(e) {
  107. try {
  108. uni.clearStorage();
  109. uni.redirectTo({
  110. url: '/pages/index/index'
  111. })
  112. } catch (e) {}
  113. }
  114. }
  115. }
  116. </script>
  117. <style lang="scss">
  118. .main {
  119. display: flex;
  120. flex-direction: column;
  121. width: 100vw;
  122. height: 100vh;
  123. .one {
  124. border-bottom: 1px var(--fcColor) solid;
  125. margin: 1vw 3vw;
  126. display: flex;
  127. flex-direction: row;
  128. padding: 1vw 0;
  129. .other {
  130. flex-grow: 1;
  131. .title {
  132. margin: 2vw 0;
  133. font-size: var(--font16Size);
  134. text {
  135. margin: 0 0 0 2vw;
  136. color: var(--fFB1Color);
  137. font-size: var(--font12Size);
  138. }
  139. }
  140. .titles {
  141. font-size: var(--font14Size);
  142. color: var(--f85Color);
  143. margin: 2vw 0;
  144. }
  145. }
  146. .btn {
  147. text-align: right;
  148. font-size: 20px;
  149. }
  150. }
  151. .two {
  152. margin: 5vw 3vw;
  153. text-align: center;
  154. button {
  155. border-radius: 20px;
  156. border: 2px solid var(--ff0Color);
  157. color: var(--ff0Color);
  158. }
  159. }
  160. }
  161. </style>