index.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <view class="content">
  3. <!-- 钱包 -->
  4. <view class="recharge-me">
  5. <view class="wallet-content">
  6. <view class="h-balance-wrap">
  7. <view class="h-balance">
  8. <view class="recharge-balance">
  9. <view class="h-nav-img">
  10. <image src="../../static/transaction/u1.png" mode=""></image>
  11. </view>
  12. <view class="name">储值余额</view>
  13. <view class="balance-value">¥
  14. <text v-if="userInfo.rechargeBalance">{{ userInfo.rechargeBalance }}</text>
  15. <text v-else>0</text>
  16. </view>
  17. </view>
  18. <view class="recharge-balance">
  19. <view class="h-nav-img">
  20. <image src="../../static/transaction/u3.png" mode=""></image>
  21. </view>
  22. <view class="name">赠送余额</view>
  23. <view class="balance-value">¥
  24. <text v-if="userInfo.rewardBalance" class="">{{ userInfo.rewardBalance }}</text>
  25. <text v-else>0</text>
  26. </view>
  27. </view>
  28. <view class="recharge-balance">
  29. <view class="h-nav-img">
  30. <image src="../../static/transaction/u4.png" mode=""></image>
  31. </view>
  32. <view class="name">赠送优惠券</view>
  33. <view class="balance-value">
  34. <text v-if="userInfo.coupon">{{ userInfo.coupon }}</text>
  35. <text v-else>0</text>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="horizontal-dashed-line"></view>
  40. <view class="btn">
  41. <view @click="gotoTransactionRecords()" class="item-btn">
  42. <text>交易记录</text>>
  43. </view>
  44. <view class="dashed-line"></view>
  45. <view @click="gotoTransactionOrderRecords()" class="item-btn">
  46. <text>储值订单</text>>
  47. </view>
  48. </view>
  49. </view>
  50. <view class="skill-sequence-panel-content-wrapper">
  51. <!--左边虚化-->
  52. <!-- <view class="hide-content-box hide-content-box-left"></view> -->
  53. <!--右边虚化-->
  54. <!-- <view class="hide-content-box hide-content-box-right"></view> -->
  55. <scroll-view scroll-x="true" class="kite-classify-scroll">
  56. <view @click="selectActiveRecharge(item, index)" class="kite-classify-cell shadow"
  57. v-for="(item, index) in rechargeList" :key="index">
  58. <view v-if="currentTab === index" class="h-bg-img">
  59. <image src="../../static/transaction/u2.png" mode=""></image>
  60. </view>
  61. <view v-else class="h-bg-img">
  62. <image src="../../static/recharge/dianka.png" mode=""></image>
  63. </view>
  64. <view class="content">
  65. <view class="money">
  66. ¥<text class="v">{{ item.reachPrice }}</text>
  67. </view>
  68. <view class="desc">
  69. <text>{{ item.name }} </text>
  70. <!-- <text>充¥{{item.reachPrice}}赚送¥{{item.discountsPrice}}</text> -->
  71. </view>
  72. </view>
  73. </view>
  74. </scroll-view>
  75. </view>
  76. <!-- 充值按钮 -->
  77. <view v-if="rechargeList.length > 0" @click="submitOrder()" class="h-submit-btn">
  78. <text>立即充值</text>
  79. </view>
  80. <!-- 用户充值协议 -->
  81. <view class="recharge-agreement">
  82. <view class="radio-group">
  83. <radio @click="toggleSelection" class="v-text" :checked="isSelected">我已阅读并同意</radio>
  84. <text @click="gotoTermOfService(8)" class="h-btn">《储值协议》</text>
  85. </view>
  86. </view>
  87. <!-- 使用说明 -->
  88. <view class="h-desc">
  89. <view class="title">
  90. <text>使用说明</text>
  91. </view>
  92. <view class="h-content">
  93. </view>
  94. </view>
  95. </view>
  96. </view>
  97. </view>
  98. </template>
  99. <script>
  100. export default {
  101. data() {
  102. return {
  103. }
  104. },
  105. onLoad() {
  106. },
  107. methods: {
  108. }
  109. }
  110. </script>
  111. <style scoped lang="scss">
  112. @import '/common/css/common.css';
  113. @import './index.rpx.scss';
  114. </style>