s-wallet-card.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <template>
  2. <view class="ss-wallet-menu-wrap ss-flex ss-col-center">
  3. <view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
  4. @tap="sheep.$router.go('/pages/user/wallet/money')">
  5. <view class="value-box ss-flex ss-col-bottom">
  6. <view class="value-text ss-line-1">{{ userInfo.money || '0.00' }}</view>
  7. <view class="unit-text ss-m-l-6">元</view>
  8. </view>
  9. <view class="menu-title ss-m-t-28">账户余额</view>
  10. </view>
  11. <!-- <view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
  12. @tap="sheep.$router.go('/pages/user/wallet/commission')">
  13. <view class="value-box ss-flex ss-col-bottom">
  14. <view class="value-text">{{ userInfo?.commission || '0.00' }}</view>
  15. <view class="unit-text ss-m-l-6">元</view>
  16. </view>
  17. <view class="menu-title ss-m-t-28">佣金</view>
  18. </view> -->
  19. <view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
  20. @tap="sheep.$router.go('/pages/user/wallet/score')">
  21. <view class="value-box ss-flex ss-col-bottom">
  22. <view class="value-text">{{ userInfo.point || '0.00' }}</view>
  23. <view class="unit-text ss-m-l-6">个</view>
  24. </view>
  25. <view class="menu-title ss-m-t-28">积分</view>
  26. </view>
  27. <view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" @tap="
  28. sheep.$router.go('/pages/coupon/list', {
  29. type: 'geted',
  30. })
  31. ">
  32. <view class="value-box ss-flex ss-col-bottom">
  33. <view class="value-text">{{ numData.coupons_num || '0.00' }}</view>
  34. <view class="unit-text ss-m-l-6">张</view>
  35. </view>
  36. <view class="menu-title ss-m-t-28">优惠券</view>
  37. </view>
  38. <view class="menu-item ss-flex-col ss-row-center ss-col-center menu-wallet"
  39. @tap="sheep.$router.go('/pages/user/wallet/money')">
  40. <image class="item-icon" :src="sheep.$url.static('/static/img/shop/user/wallet_icon.png')" mode="aspectFit">
  41. </image>
  42. <view class="menu-title ss-m-t-30">我的钱包</view>
  43. </view>
  44. </view>
  45. </template>
  46. <script setup>
  47. /**
  48. * 装修组件 - 订单菜单组
  49. */
  50. import {
  51. computed,
  52. ref
  53. } from 'vue';
  54. import sheep from '@/sheep';
  55. const userInfo = computed(() => sheep.$store('user').userInfo);
  56. const numData = computed(() => sheep.$store('user').numData);
  57. </script>
  58. <style lang="scss" scoped>
  59. .ss-wallet-menu-wrap {
  60. .menu-wallet {
  61. width: 144rpx;
  62. }
  63. .menu-item {
  64. height: 160rpx;
  65. .menu-title {
  66. font-size: 24rpx;
  67. line-height: 24rpx;
  68. color: #333333;
  69. }
  70. .item-icon {
  71. width: 44rpx;
  72. height: 44rpx;
  73. }
  74. .value-box {
  75. height: 50rpx;
  76. text-align: center;
  77. .value-text {
  78. font-size: 28rpx;
  79. color: #000000;
  80. line-height: 28rpx;
  81. vertical-align: text-bottom;
  82. font-family: OPPOSANS;
  83. }
  84. .unit-text {
  85. font-size: 24rpx;
  86. color: #343434;
  87. line-height: 24rpx;
  88. }
  89. }
  90. }
  91. }
  92. </style>