usercenter.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  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 class="tyep" v-if="!userInfo.isCompany">
  17. <text class="iconfont icon-qiyeyonghu"></text>
  18. 个人用户
  19. </view>
  20. </view>
  21. </view>
  22. <view class="tool-bar">
  23. <view class="tool-bar-item">
  24. <view class="tool-bar-til">我的碳汇量(kg)</view>
  25. <view class="tool-bar-num">
  26. <text class="num">{{userInfo.carbonAmount || '0'}}</text>
  27. <text class="iconfont icon-jiantou"></text>
  28. </view>
  29. </view>
  30. <view class="tool-bar-item" @click="this.$api.msg('暂未开放')">
  31. <view class="tool-bar-til">任务中心</view>
  32. <view class="tool-bar-num">
  33. <text class="iconfont icon-jiantou"></text>
  34. </view>
  35. </view>
  36. </view>
  37. </view>
  38. <!-- top end -->
  39. <view class="usernav-list icon-form-item-wrap">
  40. <view class="icon-form-item" @click="$api.href('./certificateList/certificateList')">
  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" @click="$api.href('./orderList/orderList')">
  48. <view class="icon-form-item-imgwrap">
  49. <image :src="$getimg + 'icon-dingdan.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 full-border" v-if="userInfo.customerType!=1" @click="$api.href('./subscribe/subscribe')">
  55. <view class="icon-form-item-imgwrap">
  56. <image :src="$getimg + 'icon-yonghuzhinan.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 class="icon-form-item" @click="$api.href('/pages/use/use')">
  62. <view class="icon-form-item-imgwrap">
  63. <image :src="$getimg + 'icon-about.png'" class="icon-form-item-img" mode="aspectFit"></image>
  64. </view>
  65. <view class="icon-form-item-text">关于我们</view>
  66. <view class="icon-form-item-icon"><text class="iconfont icon-jiantou"></text></view>
  67. </view> -->
  68. </view>
  69. <!-- usernav-list end -->
  70. <view class="wrap40 question-nav">
  71. <view class="question-item" @click="goGuide">
  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-guide-nav.png'" class="question-item-img" mode="aspectFit"></image>
  77. </view>
  78. <view class="question-item" @click="$api.href('/pages/usercenter/question/question')">
  79. <view class="question-item-text">
  80. <view class="question-item-til">常见问题</view>
  81. <view class="question-item-subtil">解答疑惑</view>
  82. </view>
  83. <image :src="$getimg + 'icon-question-nav.png'" class="question-item-img" mode="aspectFit"></image>
  84. </view>
  85. </view>
  86. <!-- question-nav end -->
  87. <view class="logout" v-if="hasLogin" @click="logout()">退出登录</view>
  88. <view class="logout" v-if="!hasLogin" @click="$api.href('/pages/login/loginType')">去登录</view>
  89. </view>
  90. </template>
  91. <script>
  92. import { mapState, mapMutations } from 'vuex';
  93. export default {
  94. data() {
  95. return {
  96. $getimg:this.$getimg,
  97. }
  98. },
  99. computed: {
  100. ...mapState(['hasLogin', 'userInfo'])
  101. },
  102. onShow() {
  103. // console.log('hasLogin',this.hasLogin);
  104. // console.log('userInfo',this.userInfo);
  105. if (this.hasLogin) {
  106. this.upInfo();
  107. }
  108. },
  109. onLoad() {
  110. },
  111. methods: {
  112. ...mapMutations(['login', 'logout', 'upInfo']),
  113. goGuide(){
  114. let that = this;
  115. uni.removeStorage({
  116. key: 'launchFlag',
  117. success: function (res) {
  118. that.$api.href('/pages/index/guide')
  119. }
  120. });
  121. }
  122. }
  123. }
  124. </script>
  125. <style>
  126. @import url("./usercenter.css");
  127. </style>