index.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <view class="">
  3. <view class="" style="background-color: #3c9cff;height: 160rpx;width: 100%;"></view>
  4. <view class="o-plr-24" style="margin-top: -80rpx;">
  5. <view class="l-flex-between l-boxShadow o-mb-40 c-bg-f o-plr-20 o-ptb-10 c-radius-10">
  6. <view @click="setAvatarNick" class="l-flex-RC">
  7. <view style="padding: 50rpx 0" class="headImg o-mr-28">
  8. <u--image width="100rpx" height="100rpx" shape="circle" :src="$S_mine_avatarNick.avatarUrl">
  9. <view slot="error" style="font-size: 24rpx;">个人头像加载失败</view>
  10. </u--image>
  11. </view>
  12. <view class="">
  13. <view class="c-text-18 c-text-b">{{ $S_mine_avatarNick.nickName ? $S_mine_avatarNick.nickName : '暂无昵称' }}</view>
  14. </view>
  15. </view>
  16. <view class="l-flex-RC">
  17. <u-icon name="integral-fill" size="16"></u-icon>
  18. <text class="c-color-8">{{ GETT_loginInfos.integral || 0 }}积分</text>
  19. </view>
  20. </view>
  21. <view class="c-bg-f l-boxShadow c-radius-10">
  22. <u-cell-group :border="false">
  23. <u-cell v-for="item in mineCellList" :key="item.id" :icon="item.icon" :title="item.title" :isLink="item.isLink" :url="item.url"></u-cell>
  24. </u-cell-group>
  25. </view>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. // 引入辅助函数
  31. import { mapGetters } from 'vuex';
  32. export default {
  33. data() {
  34. return {
  35. // 导航列表
  36. mineCellList: [
  37. {
  38. icon: 'order',
  39. title: '订单记录',
  40. isLink: true,
  41. url: '/otherPages/mine/orderRecord/index',
  42. id: 1
  43. },
  44. {
  45. icon: 'bag',
  46. title: '我要赚钱',
  47. isLink: true,
  48. url: '/otherPages/mine/opneShop/index',
  49. id: 2
  50. },
  51. {
  52. icon: 'account',
  53. title: '关于我们',
  54. isLink: true,
  55. url: '/otherPages/mine/aboutUs/index',
  56. id: 3
  57. },
  58. {
  59. icon: 'coupon',
  60. title: '我的优惠券',
  61. isLink: true,
  62. url: '/otherPages/mine/coupon/index',
  63. id: 4
  64. },
  65. ]
  66. };
  67. },
  68. computed: {
  69. // 使用辅助函数
  70. ...mapGetters(['GETT_loginInfos']),
  71. // 获取vuex中储存的个人信息
  72. $S_mine_avatarNick() {
  73. return this.$M_GS('common', '$S_mine_avatarNick');
  74. }
  75. },
  76. methods: {
  77. // 去搜集个人头像和昵称的页面
  78. setAvatarNick() {
  79. this.$M_Go('/otherPages/mine/collectPersonInfo/index');
  80. }
  81. }
  82. };
  83. </script>