usercenter.vue 4.5 KB

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