accountBalance.vue 6.6 KB

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