123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285 |
- <template>
- <view class="balance-container">
- <view class="balance-info flex align_center justify_between">
- <view class="balance-item flex flex_column align_center justify_center"
- v-for="(item,index) in balanceList"
- :key="index"
- @tap="viewRecord(item)"
- >
- <text class="balance-amount">{{ item.value }}</text>
- <text>{{ item.label }}</text>
- </view>
- </view>
-
- <view class="recharge-options">
- <view
- class="recharge-option flex justify_between flex_column"
- v-for="(opt,idx) in rechargeOptions"
- :key="idx"
- >
- <view class="flex justify_between align_center">
- <view class="recharge-val flex align_center justify_center">
- <text>¥{{ Number(opt.rechargeAmount).toFixed(2) }}</text>
- </view>
- <view class="recharge-option-content flex_1">
- <view><text class="gift-text">充值{{ Number(opt.rechargeAmount).toFixed(2) }}元送{{ Number(opt.giveAmount).toFixed(2) }}元抵扣</text></view>
- </view>
- <view class="recharge-btn flex align_center justify_center" @tap="handleRecharge(opt)">
- <text>去充值</text>
- </view>
- </view>
- <view class="gift-remark" v-if="opt.remarks">{{opt.remarks||''}}</view>
- </view>
- </view>
-
- <!-- 付款弹框 -->
- <payModal :showPopu="showPopu" :shelfInfo="shelfInfo" :payInfo="info" :dealerPhone="dealerPhone" :payData="payData" @close="showPopu=false" @payComplete="payComplete"></payModal>
- </view>
- </template>
- <script>
- import {rechargeDetail,rechargeList,createRechargeOrder} from '../../api/recharge.js'
- import {storeAccount} from '@/api/user.js'
- import { purchasePay } from '@/api/purchase.js'
- import {
- mapState,
- mapMutations,
- } from 'vuex'
- import payModal from '../components/czPayModal.vue'
- export default {
- components:{ payModal },
- data() {
- return {
- showPopu:false,
- info: null,
- payData: null,
- balanceList: [
- { id:0,label: '充值余额', value: '0' },
- { id:1,label: '抵扣余额', value: '0' }
- ],
- rechargeOptions: [],
- }
- },
- computed: {
- ...mapState(['hasLogin']),
- // 登录用户信息
- userInfo(){
- return this.$store.state.vuex_userInfo
- },
- // 货架经销商信息
- shelfInfo(){
- return this.$store.state.vuex_storeShelf
- },
- // 经销商电话
- dealerPhone(){
- const shelfInfo = this.shelfInfo
- return shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
- },
- // 付款信息
- payInfo(){
- return this.$store.state.vuex_tempOrderData
- },
- storeAccount(){
- return this.$store.state.vuex_storeAccount
- },
- //是否开启线上支付,支付方式不是线下支付
- hasPay(){
- const shelfInfo = this.shelfInfo
- return shelfInfo&&shelfInfo.payOnlineFlag&&shelfInfo.payOnlineFlag=='1'
- },
- },
- onShow() {
- this.getStoreAccount()
- this.getList()
- },
- methods: {
- // 抵扣余额
- getStoreAccount(){
- storeAccount({storeSn:this.shelfInfo.storeSn }).then(res => {
- this.$store.state.vuex_storeAccount = res.data
- this.balanceList[0].value = Number(res.data.rechargeBalance||0).toFixed(2)
- this.balanceList[1].value = Number(res.data.giveBalance||0).toFixed(2)
- this.balanceList.splice()
- })
- },
- getList(){
- rechargeList({dealerSn:this.shelfInfo.dealerSn}).then(res => {
- this.rechargeOptions = res.data||[]
- })
- },
- // 消费记录
- viewRecord(item){
- uni.navigateTo({
- url:'/pagesB/transactionRecord/transactionRecord?type='+item.id
- })
- },
- // 充值
- handleRecharge(info) {
- if(!this.hasPay){
- uni.showModal({
- confirmText:'去联系',
- cancelText:'取消',
- title:'提示',
- content:'未开启线上支付,请联系经销商',
- success:(res)=>{
- if(res.confirm){
- uni.makePhoneCall({
- phoneNumber:this.dealerPhone
- })
- }
- }
- })
- return
- }
- uni.showLoading({
- title:'加载中...'
- })
- this.info = info
- createRechargeOrder({
- rechargeRuleSn: info.rechargeRuleSn,
- rechargeAmount:info.rechargeAmount,
- giftAmount:info.giveAmount,
- dealerSn:this.shelfInfo.dealerSn,
- shelfSn:this.shelfInfo.shelfSn,
- customerSn:this.userInfo.userSn,
- storeSn:this.shelfInfo.storeSn,
- }).then(res =>{
- if(res.status == 200){
- this.toPay(res.data)
- }else{
- setTimeout(()=>{
- uni.hideLoading()
- },300)
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- }
- })
- },
- toPay(data){
- purchasePay({
- bizSn:data.rechargeSn,
- bizNo:data.rechargeNo,
- bizType:'RECHARGE_BILL',
- payUserOpenId: this.$store.state.vuex_openid || uni.getStorageSync('openid')
- }).then(ret=>{
- if(ret.status == 200){
- this.showPopu = true
- this.payData = ret.data?ret.data.payRequestRest:null
- }
- setTimeout(()=>{
- uni.hideLoading()
- },300)
- uni.showToast({
- title: ret.message,
- icon: 'none'
- })
- })
- },
- payComplete(item,isOk){
- this.showPopu = false
- if(isOk){
- this.getStoreAccount()
- uni.showToast({
- title: '支付成功',
- icon: 'none'
- })
- }
- }
- }
- }
- </script>
- <style lang="less">
- .balance-container {
- padding: 0;
- background: #f5f5f5;
- height: 100vh;
- display: flex;
- flex-direction: column;
-
- .balance-info {
- background: #fff;
- box-shadow: 0 4rpx 12rpx rgba(30,144,255,0.1);
- padding: 20rpx;
- margin: 10px;
- border-radius: 10px;
- .balance-item {
- width: 50%;
- color: #000;
- &:last-child {
- border: none;
- }
-
- .balance-amount {
- color: #333;
- font-weight: bold;
- font-size: 20px;
- margin-bottom: 2px;
- }
- }
- }
-
- .recharge-options {
- padding: 20rpx 24rpx 40rpx;
- flex-grow: 1;
- overflow-y: auto;
- .recharge-option {
- background: #fff;
- border-radius: 12rpx;
- overflow: hidden;
- margin-bottom: 24rpx;
- box-shadow: 0 4rpx 12rpx rgba(30,144,255,0.1);
- > view{
- &:first-child{
- min-height: 60px;
- }
- }
- .recharge-option-content{
- padding: 20rpx;
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
- .gift-text {
- color: #333;
- font-size: 26rpx;
- }
- .recharge-val{
- font-size: 16px;
- color: red;
- padding: 20rpx;
- width: 200rpx;
- border-right: 1px dashed #fbdbd1;
- }
- .recharge-btn{
- font-size: 24rpx;
- padding: 0 20rpx 0 0;
- text{
- display: block;
- padding:5px 10px;
- border-radius: 100px;
- background-color: #ff5500;
- color: #fff;
- }
- }
- .gift-remark{
- color: #999;
- font-size: 24rpx;
- padding: 10rpx 20rpx;
- border-top: 1px dashed #fbdbd1;
- line-height: 1.8;
- word-break: break-all;
- }
- }
-
- .custom-recharge {
- padding: 28rpx;
- background: #fff;
- border-radius: 12rpx;
- color: #1e90ff;
- }
- }
- }
- </style>
|