|
@@ -0,0 +1,191 @@
|
|
|
+<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.amount }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="recharge-option-content flex_1">
|
|
|
+ <view><text class="gift-text">充值{{ opt.amount }}元送{{ opt.gift }}元抵扣</text></view>
|
|
|
+ <view class="gift-remark">{{opt.remark}}</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 {
|
|
|
+ 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: [
|
|
|
+ { amount: 1000, gift: 50, remark:'抵扣仅限机油产品' },
|
|
|
+ { amount: 1500, gift: 75, remark:'抵扣仅限刹车片产品' },
|
|
|
+ { amount: 2000, gift: 100, remark:'抵扣仅限轮胎产品' },
|
|
|
+ { amount: 3000, gift: 150, remark:'抵扣仅限滤清器产品' },
|
|
|
+ { amount: 5000, gift: 250, remark:'抵扣仅限滤清器产品' },
|
|
|
+ { amount: 10000, gift: 500, remark:'抵扣仅限滤清器产品' },
|
|
|
+ { amount: 15000, gift: 750, remark:'抵扣仅限滤清器产品' },
|
|
|
+ { amount: 30000, gift: 1100, remark:'抵扣仅限滤清器产品' },
|
|
|
+ { amount: 50000, gift: 2500, remark:'抵扣仅限滤清器产品' },
|
|
|
+ { amount: 100000, gift: 5000, remark:'抵扣仅限滤清器产品' },
|
|
|
+ { amount: 150000, gift: 7500, remark:'抵扣仅限滤清器产品' }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 消费记录
|
|
|
+ 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, #00aaff, #0188c5);
|
|
|
+ padding: 10rpx 20rpx 30rpx;
|
|
|
+ box-shadow: 0 4rpx 12rpx rgba(30, 144, 255, 0.5);
|
|
|
+
|
|
|
+ .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: #ff9800;
|
|
|
+ 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>
|