accountBalance.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  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. </view>
  29. </view>
  30. </view>
  31. <!-- 付款弹框 -->
  32. <payModal :showPopu="showPopu" :shelfInfo="shelfInfo" :payInfo="info" :dealerPhone="dealerPhone" :payData="payData" @close="showPopu=false" @payComplete="payComplete"></payModal>
  33. </view>
  34. </template>
  35. <script>
  36. import {rechargeDetail,rechargeList,createRechargeOrder} from '../../api/recharge.js'
  37. import {storeAccount} from '@/api/user.js'
  38. import { purchasePay } from '@/api/purchase.js'
  39. import {
  40. mapState,
  41. mapMutations,
  42. } from 'vuex'
  43. import payModal from '../components/czPayModal.vue'
  44. export default {
  45. components:{ payModal },
  46. data() {
  47. return {
  48. showPopu:false,
  49. info: null,
  50. payData: null,
  51. balanceList: [
  52. { id:0,label: '充值余额', value: '0' },
  53. { id:1,label: '抵扣余额', value: '0' }
  54. ],
  55. rechargeOptions: [],
  56. }
  57. },
  58. computed: {
  59. ...mapState(['hasLogin']),
  60. // 登录用户信息
  61. userInfo(){
  62. return this.$store.state.vuex_userInfo
  63. },
  64. // 货架经销商信息
  65. shelfInfo(){
  66. return this.$store.state.vuex_storeShelf
  67. },
  68. // 经销商电话
  69. dealerPhone(){
  70. const shelfInfo = this.shelfInfo
  71. return shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
  72. },
  73. // 付款信息
  74. payInfo(){
  75. return this.$store.state.vuex_tempOrderData
  76. },
  77. storeAccount(){
  78. return this.$store.state.vuex_storeAccount
  79. },
  80. //是否开启线上支付,支付方式不是线下支付
  81. hasPay(){
  82. const shelfInfo = this.shelfInfo
  83. return shelfInfo&&shelfInfo.payOnlineFlag&&shelfInfo.payOnlineFlag=='1'
  84. },
  85. },
  86. onShow() {
  87. this.getStoreAccount()
  88. this.getList()
  89. },
  90. methods: {
  91. // 抵扣余额
  92. getStoreAccount(){
  93. storeAccount({storeSn:this.shelfInfo.storeSn}).then(res => {
  94. this.$store.state.vuex_storeAccount = res.data
  95. this.balanceList[0].value = res.data.rechargeBalance
  96. this.balanceList[1].value = res.data.giveBalance
  97. this.balanceList.splice()
  98. })
  99. },
  100. getList(){
  101. rechargeList({dealerSn:this.shelfInfo.dealerSn}).then(res => {
  102. this.rechargeOptions = res.data||[]
  103. })
  104. },
  105. // 消费记录
  106. viewRecord(item){
  107. uni.navigateTo({
  108. url:'/pagesB/transactionRecord/transactionRecord?type='+item.id
  109. })
  110. },
  111. // 充值
  112. handleRecharge(info) {
  113. if(!this.hasPay){
  114. uni.showModal({
  115. okText:'去联系经销商',
  116. cancelText:'取消',
  117. title:'提示',
  118. content:'未开启线上支付,请联系经销商',
  119. success:(res)=>{
  120. if(res.confirm){
  121. uni.makePhoneCall({
  122. phoneNumber:this.dealerPhone
  123. })
  124. }
  125. }
  126. })
  127. return
  128. }
  129. this.info = info
  130. uni.showLoading({
  131. title:'加载中...'
  132. })
  133. createRechargeOrder({
  134. rechargeRuleSn: info.rechargeRuleSn,
  135. rechargeAmount:info.rechargeAmount,
  136. giftAmount:info.giveAmount,
  137. dealerSn:this.shelfInfo.dealerSn,
  138. shelfSn:this.shelfInfo.shelfSn,
  139. customerSn:this.userInfo.userSn,
  140. storeSn:this.shelfInfo.storeSn,
  141. }).then(res =>{
  142. if(res.status == 200){
  143. purchasePay({
  144. bizSn:res.data.rechargeSn,
  145. bizNo:res.data.rechargeNo,
  146. bizType:'RECHARGE_BILL',
  147. payUserOpenId: this.$store.state.vuex_openid || uni.getStorageSync('openid')
  148. }).then(ret=>{
  149. if(ret.status == 200){
  150. this.showPopu = true
  151. this.payData = ret.data?ret.data.payRequestRest:null
  152. }
  153. setTimeout(()=>{
  154. uni.hideLoading()
  155. },300)
  156. uni.showToast({
  157. title: ret.message,
  158. icon: 'none'
  159. })
  160. })
  161. }else{
  162. setTimeout(()=>{
  163. uni.hideLoading()
  164. },300)
  165. uni.showToast({
  166. title: res.message,
  167. icon: 'none'
  168. })
  169. }
  170. })
  171. },
  172. payComplete(item,isOk){
  173. this.showPopu = false
  174. if(isOk){
  175. this.getStoreAccount()
  176. uni.showToast({
  177. title: '支付成功',
  178. icon: 'none'
  179. })
  180. }
  181. }
  182. }
  183. }
  184. </script>
  185. <style lang="less">
  186. .balance-container {
  187. padding: 0;
  188. background: #f5f5f5;
  189. height: 100vh;
  190. display: flex;
  191. flex-direction: column;
  192. .balance-info {
  193. background: #fff;
  194. box-shadow: 0 4rpx 12rpx rgba(30,144,255,0.1);
  195. padding: 20rpx;
  196. margin: 10px;
  197. border-radius: 10px;
  198. .balance-item {
  199. width: 50%;
  200. color: #000;
  201. &:last-child {
  202. border: none;
  203. }
  204. .balance-amount {
  205. color: #333;
  206. font-weight: bold;
  207. font-size: 20px;
  208. margin-bottom: 2px;
  209. }
  210. }
  211. }
  212. .recharge-options {
  213. padding: 20rpx 24rpx 40rpx;
  214. flex-grow: 1;
  215. overflow-y: auto;
  216. .recharge-option {
  217. min-height: 60px;
  218. background: #fff;
  219. border-radius: 12rpx;
  220. overflow: hidden;
  221. margin-bottom: 24rpx;
  222. box-shadow: 0 4rpx 12rpx rgba(30,144,255,0.1);
  223. .recharge-option-content{
  224. padding: 20rpx;
  225. line-height: 1.8;
  226. display: flex;
  227. flex-direction: column;
  228. justify-content: center;
  229. }
  230. .gift-text {
  231. color: #333;
  232. font-size: 28rpx;
  233. }
  234. .recharge-val{
  235. font-size: 16px;
  236. color: red;
  237. background: #fff2de;
  238. padding: 20rpx;
  239. width: 150rpx;
  240. border-right: 1px dashed #fbdbd1;
  241. }
  242. .recharge-btn{
  243. font-size: 24rpx;
  244. padding: 0 20rpx 0 0;
  245. text{
  246. display: block;
  247. padding:5px 10px;
  248. border-radius: 100px;
  249. background-color: #ff5500;
  250. color: #fff;
  251. }
  252. }
  253. .gift-remark{
  254. color: #999;
  255. font-size: 24rpx;
  256. }
  257. }
  258. .custom-recharge {
  259. padding: 28rpx;
  260. background: #fff;
  261. border-radius: 12rpx;
  262. color: #1e90ff;
  263. }
  264. }
  265. }
  266. </style>