userInfo.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <template>
  2. <view class="userInfo-container">
  3. <u-cell-group>
  4. <u-cell-item title="头像" :arrow="false" center>
  5. <view class="user-photo"><open-data type="userAvatarUrl"></open-data></view>
  6. </u-cell-item>
  7. <u-cell-item title="手机号码" :value="userDate.mobile" :arrow="false"></u-cell-item>
  8. <u-cell-item title="收货地址" :value="address?'修改收货地址':'设置收货地址'" index="0" @click="editAddress"></u-cell-item>
  9. <u-cell-item title="支付密码" :value="existPayPwd?'修改密码':'设置密码'" @click="setPayPwd"></u-cell-item>
  10. </u-cell-group>
  11. <!-- 退出 -->
  12. <view class="user-btn">
  13. <u-button type="success" :custom-style="quitButton" @click="quitSys" shape="circle">退出登录</u-button>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. import {existPayPwd} from '@/api/order.js'
  19. import {findAddressBycustomerNo} from '@/api/receiveAddress.js'
  20. import {logout} from '@/api/login.js'
  21. export default {
  22. data() {
  23. return {
  24. quitButton: {
  25. borderRadius:'100rpx',
  26. fontSize:'30rpx',
  27. background: '#01c9b2'
  28. },
  29. userDate: {},
  30. existPayPwd: null,
  31. address: null,
  32. userInfo: {}
  33. }
  34. },
  35. onShow() {
  36. this.userDate = this.$store.state.vuex_userData
  37. this.getPayPwd()
  38. this.getAddress()
  39. },
  40. methods:{
  41. // 获取用户位置
  42. getAddress() {
  43. findAddressBycustomerNo({}).then(res => {
  44. console.log(res)
  45. if (res.status == 200&&res.data.length) {
  46. this.address = res.data[0].receiveAreasName
  47. this.userInfo = res.data[0]
  48. } else {
  49. this.address = ''
  50. this.userInfo = {}
  51. }
  52. })
  53. },
  54. // 判断是否设置过支付密码
  55. getPayPwd(){
  56. existPayPwd().then(res=>{
  57. if(res.status == 200) {
  58. if(res.data) {
  59. this.existPayPwd = true
  60. } else {
  61. this.existPayPwd = false
  62. }
  63. }
  64. })
  65. },
  66. // 修改收货地址
  67. editAddress(index){
  68. this.$u.vuex("vuex_OrderAddress",this.userInfo)
  69. uni.navigateTo({
  70. url:"/pagesA/toOrder/editAddress"
  71. })
  72. },
  73. // 设置密码
  74. setPayPwd(){
  75. // 设置过支付密码,则修改密码
  76. if(this.existPayPwd){
  77. uni.navigateTo({ url: '/pages/userCenter/userInfo/changePayPwd' })
  78. }else{
  79. // 没设置过支付密码,提示设置密码
  80. uni.navigateTo({ url: '/pages/userCenter/userInfo/smsVerification' })
  81. }
  82. },
  83. // 退出登录
  84. quitSys(){
  85. let _this = this
  86. uni.showModal({
  87. title: '提示',
  88. content: '您确定要退出登录吗?',
  89. success(res) {
  90. if (res.confirm) {
  91. logout({}).then(res => {
  92. getApp().globalData.token = ''
  93. _this.$u.vuex('vuex_token','')
  94. _this.$u.vuex('vuex_userData','')
  95. _this.$u.vuex('vuex_cartList','')
  96. _this.$u.vuex('vuex_OrderAddress','')
  97. _this.$u.vuex('vuex_toOrderList','')
  98. // 关闭socket
  99. _this.$store.commit("$closeWebsocket")
  100. uni.reLaunch({
  101. url: '/pages/index/index'
  102. })
  103. })
  104. }
  105. }
  106. })
  107. }
  108. }
  109. }
  110. </script>
  111. <style lang="less">
  112. .userInfo-container{
  113. width: 100%;
  114. .logout-btn{
  115. width: 60%;
  116. margin-top: 200rpx;
  117. }
  118. .user-btn{
  119. padding: 85rpx 200rpx;
  120. }
  121. .user-photo{
  122. width: 100rpx;
  123. height: 100rpx;
  124. border-radius: 50%;
  125. overflow: hidden;
  126. margin-right: 5rpx;
  127. float: right;
  128. }
  129. }
  130. </style>