123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190 |
- <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"
- v-for="(opt,idx) in rechargeOptions"
- :key="idx"
- >
- <view class="recharge-val flex align_center justify_center">
- <text>¥{{ opt.rechargeAmount }}</text>
- </view>
- <view class="recharge-option-content flex_1">
- <view><text class="gift-text">充值{{ opt.rechargeAmount }}元送{{ opt.giveAmount }}元抵扣</text></view>
- <view class="gift-remark">{{opt.remarks}}</view>
- </view>
- <view class="recharge-btn flex align_center justify_center" @tap="handleRecharge(opt)">
- <text>去充值</text>
- <uni-icons type="arrowright" size="16"></uni-icons>
- </view>
- </view>
- </view>
-
- <!-- 付款弹框 -->
- <payModal :showPopu="showPopu" :shelfInfo="shelfInfo" :payInfo="info" :payData="payData" @close="showPopu=false" @payComplete="payComplete"></payModal>
- </view>
- </template>
- <script>
- import {rechargeDetail,rechargeList} from '../../api/recharge.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: [
- { label: '充值余额', value: '10000.00' },
- { label: '抵扣余额', value: '1000.00' }
- ],
- rechargeOptions: [],
- }
- },
- computed: {
- ...mapState(['hasLogin']),
- // 登录用户信息
- userInfo(){
- return this.$store.state.vuex_userInfo
- },
- // 货架经销商信息
- shelfInfo(){
- return this.$store.state.vuex_storeShelf
- },
- //是否开启线上支付
- hasPay(){
- const shelfInfo = this.shelfInfo
- return shelfInfo&&shelfInfo.payOnlineFlag&&shelfInfo.payOnlineFlag=='1'
- },
- // 经销商电话
- dealerPhone(){
- const shelfInfo = this.shelfInfo
- return shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
- },
- // 付款信息
- payInfo(){
- return this.$store.state.vuex_tempOrderData
- }
- },
- onShow() {
- this.getList()
- },
- methods: {
- getList(){
- rechargeList({dealerSn:this.shelfInfo.dealerSn}).then(res => {
- this.rechargeOptions = res.data||[]
- })
- },
- // 消费记录
- viewRecord(item){
- uni.navigateTo({
- url:'/pagesB/transactionRecord/transactionRecord'
- })
- },
- // 充值
- handleRecharge(info) {
- this.info = info
- this.showPopu = true
- },
- payComplete(item,isOk){
- this.showPopu = false
- if(isOk){
- this.message('支付成功')
- }
- }
- }
- }
- </script>
- <style lang="less">
- .balance-container {
- padding: 0;
- background: #f5f5f5;
- height: 100vh;
- display: flex;
- flex-direction: column;
-
- .balance-info {
- background: linear-gradient(to bottom, #03A9F4, #2196F3);
- padding: 20rpx;
- box-shadow: 0 4rpx 12rpx rgba(30, 144, 255, 0.5);
- margin: 10px;
- border-radius: 10px;
-
- .balance-item {
- width: 50%;
- color: #fff;
- &:last-child {
- border: none;
- }
-
- .balance-amount {
- color: #fff;
- font-weight: bold;
- font-size: 20px;
- margin-bottom: 2px;
- }
- }
- }
-
- .recharge-options {
- padding: 24rpx;
- 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);
- .recharge-option-content{
- padding: 20rpx;
- line-height: 1.8;
- }
- .gift-text {
- color: #333;
- font-size: 28rpx;
- }
- .recharge-val{
- font-size: 16px;
- color: whitesmoke;
- background: #ff5722;
- padding: 20rpx;
- width: 150rpx;
- }
- .recharge-btn{
- color: #1e90ff;
- font-size: 24rpx;
- padding: 0 20rpx 0 0;
- }
- .gift-remark{
- color: #999;
- font-size: 24rpx;
- }
- }
-
- .custom-recharge {
- padding: 28rpx;
- background: #fff;
- border-radius: 12rpx;
- color: #1e90ff;
- }
- }
- }
- </style>
|