usercenter.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <view class="pages">
  3. <view class="top-img usercenter">
  4. <image :src="$getimg + 'usercenter-bg.png'" class="img" mode="widthFix"></image>
  5. <view class="usercenter-baseinfo">
  6. <image :src="userInfo.headImage|| ''" class="photo" mode="scaleToFill"></image>
  7. <view class="text">
  8. <view class="name">{{userInfo.customerName|| '游客'}}</view>
  9. <view class="tyep" v-if="userInfo.isCompany">
  10. <text class="iconfont icon-qiyeyonghu"></text>
  11. 企业用户
  12. </view>
  13. </view>
  14. </view>
  15. <view class="tool-bar">
  16. <view class="tool-bar-item">
  17. <view class="tool-bar-til">我的碳汇量(kg)</view>
  18. <view class="tool-bar-num">
  19. <text class="num">{{userInfo.carbonAmount || '0'}}</text>
  20. <text class="iconfont icon-jiantou"></text>
  21. </view>
  22. </view>
  23. <view class="tool-bar-item" @click="this.$api.msg('暂未开放')">
  24. <view class="tool-bar-til">任务中心</view>
  25. <view class="tool-bar-num">
  26. <text class="iconfont icon-jiantou"></text>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. <!-- top end -->
  32. <view class="usernav-list icon-form-item-wrap">
  33. <view class="icon-form-item" @click="$api.href('./certificateList/certificateList')">
  34. <view class="icon-form-item-imgwrap">
  35. <image :src="$getimg + 'icon-certificate.png'" class="icon-form-item-img" mode="aspectFit"></image>
  36. </view>
  37. <view class="icon-form-item-text">我的证书</view>
  38. <view class="icon-form-item-icon"><text class="iconfont icon-jiantou"></text></view>
  39. </view>
  40. <view class="icon-form-item" @click="$api.href('./orderList/orderList')">
  41. <view class="icon-form-item-imgwrap">
  42. <image :src="$getimg + 'icon-certificate.png'" class="icon-form-item-img" mode="aspectFit"></image>
  43. </view>
  44. <view class="icon-form-item-text">我的订单</view>
  45. <view class="icon-form-item-icon"><text class="iconfont icon-jiantou"></text></view>
  46. </view>
  47. <view class="icon-form-item full-border" @click="$api.href('./subscribe/subscribe')">
  48. <view class="icon-form-item-imgwrap">
  49. <image :src="$getimg + 'icon-yonghuzhinan.png'" class="icon-form-item-img" mode="aspectFit"></image>
  50. </view>
  51. <view class="icon-form-item-text">我的认购</view>
  52. <view class="icon-form-item-icon"><text class="iconfont icon-jiantou"></text></view>
  53. </view>
  54. <view class="icon-form-item" @click="$api.href('/pages/use/use')">
  55. <view class="icon-form-item-imgwrap">
  56. <image :src="$getimg + 'icon-about.png'" class="icon-form-item-img" mode="aspectFit"></image>
  57. </view>
  58. <view class="icon-form-item-text">关于我们</view>
  59. <view class="icon-form-item-icon"><text class="iconfont icon-jiantou"></text></view>
  60. </view>
  61. </view>
  62. <!-- usernav-list end -->
  63. <view class="wrap40 question-nav">
  64. <view class="question-item" @click="goGuide">
  65. <view class="question-item-text">
  66. <view class="question-item-til">新手指南</view>
  67. <view class="question-item-subtil">一看就懂</view>
  68. </view>
  69. <image :src="$getimg + 'icon-guide-nav.png'" class="question-item-img" mode="aspectFit"></image>
  70. </view>
  71. <view class="question-item" @click="$api.href('/pages/usercenter/question/question')">
  72. <view class="question-item-text">
  73. <view class="question-item-til">常见问题</view>
  74. <view class="question-item-subtil">解答疑惑</view>
  75. </view>
  76. <image :src="$getimg + 'icon-question-nav.png'" class="question-item-img" mode="aspectFit"></image>
  77. </view>
  78. </view>
  79. <!-- question-nav end -->
  80. <view class="logout" v-if="hasLogin" @click="logout()">退出登录</view>
  81. <view class="logout" v-if="!hasLogin" @click="$api.href('/pages/login/loginType')">去登录</view>
  82. </view>
  83. </template>
  84. <script>
  85. import { mapState, mapMutations } from 'vuex';
  86. export default {
  87. data() {
  88. return {
  89. $getimg:this.$getimg,
  90. }
  91. },
  92. computed: {
  93. ...mapState(['hasLogin', 'userInfo'])
  94. },
  95. onShow() {
  96. console.log('hasLogin',this.hasLogin);
  97. console.log('userInfo',this.userInfo);
  98. if (this.hasLogin) {
  99. this.upInfo();
  100. }
  101. },
  102. onLoad() {
  103. },
  104. methods: {
  105. ...mapMutations(['login', 'logout', 'upInfo']),
  106. goGuide(){
  107. let that = this;
  108. uni.removeStorage({
  109. key: 'launchFlag',
  110. success: function (res) {
  111. that.$api.href('/pages/index/guide')
  112. }
  113. });
  114. }
  115. }
  116. }
  117. </script>
  118. <style>
  119. @import url("./usercenter.css");
  120. </style>