usercenter.vue 4.7 KB

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