accountBalance.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <view class="balance-container">
  3. <view class="balance-info flex align_center justify_between">
  4. <view class="balance-item flex flex_column align_center justify_center"
  5. v-for="(item,index) in balanceList"
  6. :key="index"
  7. @tap="viewRecord(item)"
  8. >
  9. <text class="balance-amount">{{ item.value }}</text>
  10. <text>{{ item.label }}</text>
  11. </view>
  12. </view>
  13. <view class="recharge-options">
  14. <view
  15. class="recharge-option flex justify_between"
  16. v-for="(opt,idx) in rechargeOptions"
  17. :key="idx"
  18. >
  19. <view class="recharge-val flex align_center justify_center">
  20. <text>¥{{ opt.amount }}</text>
  21. </view>
  22. <view class="recharge-option-content flex_1">
  23. <view><text class="gift-text">充值{{ opt.amount }}元送{{ opt.gift }}元抵扣</text></view>
  24. <view class="gift-remark">{{opt.remark}}</view>
  25. </view>
  26. <view class="recharge-btn flex align_center justify_center" @tap="handleRecharge(opt)">
  27. <text>去充值</text>
  28. <uni-icons type="arrowright" size="16"></uni-icons>
  29. </view>
  30. </view>
  31. </view>
  32. <!-- 付款弹框 -->
  33. <payModal :showPopu="showPopu" :shelfInfo="shelfInfo" :payInfo="info" :payData="payData" @close="showPopu=false" @payComplete="payComplete"></payModal>
  34. </view>
  35. </template>
  36. <script>
  37. import {
  38. mapState,
  39. mapMutations,
  40. } from 'vuex'
  41. import payModal from '../components/czPayModal.vue'
  42. export default {
  43. components:{ payModal },
  44. data() {
  45. return {
  46. showPopu:false,
  47. info: null,
  48. payData: null,
  49. balanceList: [
  50. { label: '充值余额', value: '10000.00' },
  51. { label: '抵扣余额', value: '1000.00' }
  52. ],
  53. rechargeOptions: [
  54. { amount: 1000, gift: 50, remark:'抵扣仅限机油产品' },
  55. { amount: 1500, gift: 75, remark:'抵扣仅限刹车片产品' },
  56. { amount: 2000, gift: 100, remark:'抵扣仅限轮胎产品' },
  57. { amount: 3000, gift: 150, remark:'抵扣仅限滤清器产品' },
  58. { amount: 5000, gift: 250, remark:'抵扣仅限滤清器产品' },
  59. { amount: 10000, gift: 500, remark:'抵扣仅限滤清器产品' },
  60. { amount: 15000, gift: 750, remark:'抵扣仅限滤清器产品' },
  61. { amount: 30000, gift: 1100, remark:'抵扣仅限滤清器产品' },
  62. { amount: 50000, gift: 2500, remark:'抵扣仅限滤清器产品' },
  63. { amount: 100000, gift: 5000, remark:'抵扣仅限滤清器产品' },
  64. { amount: 150000, gift: 7500, remark:'抵扣仅限滤清器产品' }
  65. ],
  66. }
  67. },
  68. computed: {
  69. ...mapState(['hasLogin']),
  70. // 登录用户信息
  71. userInfo(){
  72. return this.$store.state.vuex_userInfo
  73. },
  74. // 货架经销商信息
  75. shelfInfo(){
  76. return this.$store.state.vuex_storeShelf
  77. },
  78. //是否开启线上支付
  79. hasPay(){
  80. const shelfInfo = this.shelfInfo
  81. return shelfInfo&&shelfInfo.payOnlineFlag&&shelfInfo.payOnlineFlag=='1'
  82. },
  83. // 经销商电话
  84. dealerPhone(){
  85. const shelfInfo = this.shelfInfo
  86. return shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
  87. },
  88. // 付款信息
  89. payInfo(){
  90. return this.$store.state.vuex_tempOrderData
  91. }
  92. },
  93. methods: {
  94. // 消费记录
  95. viewRecord(item){
  96. uni.navigateTo({
  97. url:'/pagesB/transactionRecord/transactionRecord'
  98. })
  99. },
  100. // 充值
  101. handleRecharge(info) {
  102. this.info = info
  103. this.showPopu = true
  104. },
  105. payComplete(item,isOk){
  106. this.showPopu = false
  107. if(isOk){
  108. this.message('支付成功')
  109. }
  110. }
  111. }
  112. }
  113. </script>
  114. <style lang="less">
  115. .balance-container {
  116. padding: 0;
  117. background: #f5f5f5;
  118. height: 100vh;
  119. display: flex;
  120. flex-direction: column;
  121. .balance-info {
  122. background: linear-gradient(to bottom, #00aaff, #0188c5);
  123. padding: 10rpx 20rpx 30rpx;
  124. box-shadow: 0 4rpx 12rpx rgba(30, 144, 255, 0.5);
  125. .balance-item {
  126. width: 50%;
  127. color: #fff;
  128. &:last-child {
  129. border: none;
  130. }
  131. .balance-amount {
  132. color: #fff;
  133. font-weight: bold;
  134. font-size: 20px;
  135. margin-bottom: 2px;
  136. }
  137. }
  138. }
  139. .recharge-options {
  140. padding: 24rpx;
  141. flex-grow: 1;
  142. overflow-y: auto;
  143. .recharge-option {
  144. background: #fff;
  145. border-radius: 12rpx;
  146. overflow: hidden;
  147. margin-bottom: 24rpx;
  148. box-shadow: 0 4rpx 12rpx rgba(30,144,255,0.1);
  149. .recharge-option-content{
  150. padding: 20rpx;
  151. line-height: 1.8;
  152. }
  153. .gift-text {
  154. color: #333;
  155. font-size: 28rpx;
  156. }
  157. .recharge-val{
  158. font-size: 16px;
  159. color: whitesmoke;
  160. background: #ff9800;
  161. padding: 20rpx;
  162. width: 150rpx;
  163. }
  164. .recharge-btn{
  165. color: #1e90ff;
  166. font-size: 24rpx;
  167. padding: 0 20rpx 0 0;
  168. }
  169. .gift-remark{
  170. color: #999;
  171. font-size: 24rpx;
  172. }
  173. }
  174. .custom-recharge {
  175. padding: 28rpx;
  176. background: #fff;
  177. border-radius: 12rpx;
  178. color: #1e90ff;
  179. }
  180. }
  181. }
  182. </style>