accountBalance.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  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,createRechargeOrder} from '../../api/recharge.js'
  38. import {storeAccount} from '@/api/user.js'
  39. import { purchasePay } from '@/api/purchase.js'
  40. import {
  41. mapState,
  42. mapMutations,
  43. } from 'vuex'
  44. import payModal from '../components/czPayModal.vue'
  45. export default {
  46. components:{ payModal },
  47. data() {
  48. return {
  49. showPopu:false,
  50. info: null,
  51. payData: null,
  52. balanceList: [
  53. { id:0,label: '充值余额', value: '0' },
  54. { id:1,label: '抵扣余额', value: '0' }
  55. ],
  56. rechargeOptions: [],
  57. }
  58. },
  59. computed: {
  60. ...mapState(['hasLogin']),
  61. // 登录用户信息
  62. userInfo(){
  63. return this.$store.state.vuex_userInfo
  64. },
  65. // 货架经销商信息
  66. shelfInfo(){
  67. return this.$store.state.vuex_storeShelf
  68. },
  69. // 经销商电话
  70. dealerPhone(){
  71. const shelfInfo = this.shelfInfo
  72. return shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
  73. },
  74. // 付款信息
  75. payInfo(){
  76. return this.$store.state.vuex_tempOrderData
  77. },
  78. storeAccount(){
  79. return this.$store.state.vuex_storeAccount
  80. },
  81. },
  82. onShow() {
  83. this.getStoreAccount()
  84. this.getList()
  85. },
  86. methods: {
  87. // 抵扣余额
  88. getStoreAccount(){
  89. storeAccount({storeSn:this.shelfInfo.storeSn}).then(res => {
  90. this.$store.state.vuex_storeAccount = res.data
  91. this.balanceList[0].value = res.data.rechargeBalance
  92. this.balanceList[1].value = res.data.giveBalance
  93. this.balanceList.splice()
  94. })
  95. },
  96. getList(){
  97. rechargeList({dealerSn:this.shelfInfo.dealerSn}).then(res => {
  98. this.rechargeOptions = res.data||[]
  99. })
  100. },
  101. // 消费记录
  102. viewRecord(item){
  103. uni.navigateTo({
  104. url:'/pagesB/transactionRecord/transactionRecord?type='+item.id
  105. })
  106. },
  107. // 充值
  108. handleRecharge(info) {
  109. this.info = info
  110. uni.showLoading({
  111. title:'加载中...'
  112. })
  113. createRechargeOrder({
  114. rechargeRuleSn: info.rechargeRuleSn,
  115. rechargeAmount:info.rechargeAmount,
  116. giftAmount:info.giveAmount,
  117. dealerSn:this.shelfInfo.dealerSn,
  118. shelfSn:this.shelfInfo.shelfSn,
  119. customerSn:this.userInfo.userSn,
  120. storeSn:this.shelfInfo.storeSn,
  121. }).then(res =>{
  122. if(res.status == 200){
  123. purchasePay({
  124. bizSn:res.data.rechargeSn,
  125. bizNo:res.data.rechargeNo,
  126. bizType:'RECHARGE_BILL',
  127. payUserOpenId: this.$store.state.vuex_openid || uni.getStorageSync('openid')
  128. }).then(ret=>{
  129. if(ret.status == 200){
  130. this.showPopu = true
  131. this.payData = res.data?res.data.payRequestRest:null
  132. }
  133. setTimeout(()=>{
  134. uni.hideLoading()
  135. },300)
  136. uni.showToast(res.message)
  137. })
  138. }else{
  139. setTimeout(()=>{
  140. uni.hideLoading()
  141. },300)
  142. uni.showToast(res.message)
  143. }
  144. })
  145. },
  146. payComplete(item,isOk){
  147. this.showPopu = false
  148. if(isOk){
  149. this.getStoreAccount()
  150. this.message('支付成功')
  151. }
  152. }
  153. }
  154. }
  155. </script>
  156. <style lang="less">
  157. .balance-container {
  158. padding: 0;
  159. background: #f5f5f5;
  160. height: 100vh;
  161. display: flex;
  162. flex-direction: column;
  163. .balance-info {
  164. background: linear-gradient(to bottom, #03A9F4, #2196F3);
  165. padding: 20rpx;
  166. box-shadow: 0 4rpx 12rpx rgba(30, 144, 255, 0.5);
  167. margin: 10px;
  168. border-radius: 10px;
  169. .balance-item {
  170. width: 50%;
  171. color: #fff;
  172. &:last-child {
  173. border: none;
  174. }
  175. .balance-amount {
  176. color: #fff;
  177. font-weight: bold;
  178. font-size: 20px;
  179. margin-bottom: 2px;
  180. }
  181. }
  182. }
  183. .recharge-options {
  184. padding: 24rpx;
  185. flex-grow: 1;
  186. overflow-y: auto;
  187. .recharge-option {
  188. background: #fff;
  189. border-radius: 12rpx;
  190. overflow: hidden;
  191. margin-bottom: 24rpx;
  192. box-shadow: 0 4rpx 12rpx rgba(30,144,255,0.1);
  193. .recharge-option-content{
  194. padding: 20rpx;
  195. line-height: 1.8;
  196. }
  197. .gift-text {
  198. color: #333;
  199. font-size: 28rpx;
  200. }
  201. .recharge-val{
  202. font-size: 16px;
  203. color: whitesmoke;
  204. background: #ff5722;
  205. padding: 20rpx;
  206. width: 150rpx;
  207. }
  208. .recharge-btn{
  209. color: #1e90ff;
  210. font-size: 24rpx;
  211. padding: 0 20rpx 0 0;
  212. }
  213. .gift-remark{
  214. color: #999;
  215. font-size: 24rpx;
  216. }
  217. }
  218. .custom-recharge {
  219. padding: 28rpx;
  220. background: #fff;
  221. border-radius: 12rpx;
  222. color: #1e90ff;
  223. }
  224. }
  225. }
  226. </style>