accountBalance.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  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.rechargeAmount }}</text>
  21. </view>
  22. <view class="recharge-option-content flex_1">
  23. <view><text class="gift-text">充值{{ opt.rechargeAmount }}元送{{ opt.giveAmount }}元抵扣</text></view>
  24. <view class="gift-remark">{{opt.remarks}}</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 {rechargeDetail,rechargeList} from '../../api/recharge.js'
  38. import {
  39. mapState,
  40. mapMutations,
  41. } from 'vuex'
  42. import payModal from '../components/czPayModal.vue'
  43. export default {
  44. components:{ payModal },
  45. data() {
  46. return {
  47. showPopu:false,
  48. info: null,
  49. payData: null,
  50. balanceList: [
  51. { label: '充值余额', value: '10000.00' },
  52. { label: '抵扣余额', value: '1000.00' }
  53. ],
  54. rechargeOptions: [],
  55. }
  56. },
  57. computed: {
  58. ...mapState(['hasLogin']),
  59. // 登录用户信息
  60. userInfo(){
  61. return this.$store.state.vuex_userInfo
  62. },
  63. // 货架经销商信息
  64. shelfInfo(){
  65. return this.$store.state.vuex_storeShelf
  66. },
  67. //是否开启线上支付
  68. hasPay(){
  69. const shelfInfo = this.shelfInfo
  70. return shelfInfo&&shelfInfo.payOnlineFlag&&shelfInfo.payOnlineFlag=='1'
  71. },
  72. // 经销商电话
  73. dealerPhone(){
  74. const shelfInfo = this.shelfInfo
  75. return shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
  76. },
  77. // 付款信息
  78. payInfo(){
  79. return this.$store.state.vuex_tempOrderData
  80. }
  81. },
  82. onShow() {
  83. this.getList()
  84. },
  85. methods: {
  86. getList(){
  87. rechargeList({dealerSn:this.shelfInfo.dealerSn}).then(res => {
  88. this.rechargeOptions = res.data||[]
  89. })
  90. },
  91. // 消费记录
  92. viewRecord(item){
  93. uni.navigateTo({
  94. url:'/pagesB/transactionRecord/transactionRecord'
  95. })
  96. },
  97. // 充值
  98. handleRecharge(info) {
  99. this.info = info
  100. this.showPopu = true
  101. },
  102. payComplete(item,isOk){
  103. this.showPopu = false
  104. if(isOk){
  105. this.message('支付成功')
  106. }
  107. }
  108. }
  109. }
  110. </script>
  111. <style lang="less">
  112. .balance-container {
  113. padding: 0;
  114. background: #f5f5f5;
  115. height: 100vh;
  116. display: flex;
  117. flex-direction: column;
  118. .balance-info {
  119. background: linear-gradient(to bottom, #03A9F4, #2196F3);
  120. padding: 20rpx;
  121. box-shadow: 0 4rpx 12rpx rgba(30, 144, 255, 0.5);
  122. margin: 10px;
  123. border-radius: 10px;
  124. .balance-item {
  125. width: 50%;
  126. color: #fff;
  127. &:last-child {
  128. border: none;
  129. }
  130. .balance-amount {
  131. color: #fff;
  132. font-weight: bold;
  133. font-size: 20px;
  134. margin-bottom: 2px;
  135. }
  136. }
  137. }
  138. .recharge-options {
  139. padding: 24rpx;
  140. flex-grow: 1;
  141. overflow-y: auto;
  142. .recharge-option {
  143. background: #fff;
  144. border-radius: 12rpx;
  145. overflow: hidden;
  146. margin-bottom: 24rpx;
  147. box-shadow: 0 4rpx 12rpx rgba(30,144,255,0.1);
  148. .recharge-option-content{
  149. padding: 20rpx;
  150. line-height: 1.8;
  151. }
  152. .gift-text {
  153. color: #333;
  154. font-size: 28rpx;
  155. }
  156. .recharge-val{
  157. font-size: 16px;
  158. color: whitesmoke;
  159. background: #ff5722;
  160. padding: 20rpx;
  161. width: 150rpx;
  162. }
  163. .recharge-btn{
  164. color: #1e90ff;
  165. font-size: 24rpx;
  166. padding: 0 20rpx 0 0;
  167. }
  168. .gift-remark{
  169. color: #999;
  170. font-size: 24rpx;
  171. }
  172. }
  173. .custom-recharge {
  174. padding: 28rpx;
  175. background: #fff;
  176. border-radius: 12rpx;
  177. color: #1e90ff;
  178. }
  179. }
  180. }
  181. </style>