accountBalance.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  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>¥{{ opt.rechargeAmount }}</text>
  22. </view>
  23. <view class="recharge-option-content flex_1">
  24. <view><text class="gift-text">充值{{ opt.rechargeAmount }}元送{{ opt.giveAmount }}元抵扣</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. okText:'去联系经销商',
  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. this.info = info
  132. uni.showLoading({
  133. title:'加载中...'
  134. })
  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. purchasePay({
  146. bizSn:res.data.rechargeSn,
  147. bizNo:res.data.rechargeNo,
  148. bizType:'RECHARGE_BILL',
  149. payUserOpenId: this.$store.state.vuex_openid || uni.getStorageSync('openid')
  150. }).then(ret=>{
  151. if(ret.status == 200){
  152. this.showPopu = true
  153. this.payData = ret.data?ret.data.payRequestRest:null
  154. }
  155. setTimeout(()=>{
  156. uni.hideLoading()
  157. },300)
  158. uni.showToast({
  159. title: ret.message,
  160. icon: 'none'
  161. })
  162. })
  163. }else{
  164. setTimeout(()=>{
  165. uni.hideLoading()
  166. },300)
  167. uni.showToast({
  168. title: res.message,
  169. icon: 'none'
  170. })
  171. }
  172. })
  173. },
  174. payComplete(item,isOk){
  175. this.showPopu = false
  176. if(isOk){
  177. this.getStoreAccount()
  178. uni.showToast({
  179. title: '支付成功',
  180. icon: 'none'
  181. })
  182. }
  183. }
  184. }
  185. }
  186. </script>
  187. <style lang="less">
  188. .balance-container {
  189. padding: 0;
  190. background: #f5f5f5;
  191. height: 100vh;
  192. display: flex;
  193. flex-direction: column;
  194. .balance-info {
  195. background: #fff;
  196. box-shadow: 0 4rpx 12rpx rgba(30,144,255,0.1);
  197. padding: 20rpx;
  198. margin: 10px;
  199. border-radius: 10px;
  200. .balance-item {
  201. width: 50%;
  202. color: #000;
  203. &:last-child {
  204. border: none;
  205. }
  206. .balance-amount {
  207. color: #333;
  208. font-weight: bold;
  209. font-size: 20px;
  210. margin-bottom: 2px;
  211. }
  212. }
  213. }
  214. .recharge-options {
  215. padding: 20rpx 24rpx 40rpx;
  216. flex-grow: 1;
  217. overflow-y: auto;
  218. .recharge-option {
  219. background: #fff;
  220. border-radius: 12rpx;
  221. overflow: hidden;
  222. margin-bottom: 24rpx;
  223. box-shadow: 0 4rpx 12rpx rgba(30,144,255,0.1);
  224. > view{
  225. &:first-child{
  226. min-height: 60px;
  227. }
  228. }
  229. .recharge-option-content{
  230. padding: 20rpx;
  231. display: flex;
  232. flex-direction: column;
  233. justify-content: center;
  234. }
  235. .gift-text {
  236. color: #333;
  237. font-size: 26rpx;
  238. }
  239. .recharge-val{
  240. font-size: 16px;
  241. color: red;
  242. padding: 20rpx;
  243. width: 180rpx;
  244. border-right: 1px dashed #fbdbd1;
  245. }
  246. .recharge-btn{
  247. font-size: 24rpx;
  248. padding: 0 20rpx 0 0;
  249. text{
  250. display: block;
  251. padding:5px 10px;
  252. border-radius: 100px;
  253. background-color: #ff5500;
  254. color: #fff;
  255. }
  256. }
  257. .gift-remark{
  258. color: #999;
  259. font-size: 24rpx;
  260. padding: 10rpx 20rpx;
  261. border-top: 1px dashed #fbdbd1;
  262. line-height: 1.8;
  263. }
  264. }
  265. .custom-recharge {
  266. padding: 28rpx;
  267. background: #fff;
  268. border-radius: 12rpx;
  269. color: #1e90ff;
  270. }
  271. }
  272. }
  273. </style>