web-base-h5/pages/mine/balance/index.vue

<template>
  <view class="content">
    <u-toast ref="uToast"></u-toast>
    <view v-if="!ifshowBtn" class="topbar">
      <view
        class="levelList_i"
        v-for="(item, index) in topList"
        :key="index"
        @click.prevent="handleLink(item)"
      >
        {{ item.name }}
      </view>
    </view>
    <view class="balance">
      <view
        class="ba_list"
        :style="{ backgroundImage: 'url(' + item.backgroundImg + ')' }"
        v-for="(item, index) in balanceList"
        :key="index"
      >
        <view class="balance_title">
          <view class="title_left">
            <view class="">{{ item.pkAccountVal }}</view>
            <image
              v-if="!item.canSee"
              @click="item.canSee = !item.canSee"
              class="eyeimg"
              src="../../../static/images/my_eye.png"
              mode=""
            ></image>
            <image
              v-if="item.canSee"
              @click="item.canSee = !item.canSee"
              class="eyeimg"
              src="../../../static/images/my_eye2.png"
              mode=""
            ></image>
          </view>
          <view class="title_right" @click="goTrans">{{ '交易明细' }}</view>
        </view>
        <view class="balance_total">
          {{ `${'总余额'}(${userInfo.currencyIcon})` }}
        </view>
        <view class="balance_total2">
          <text v-if="item.canSee">{{ item.balance | numberToCurrency }}</text>
          <text v-else>****</text>
        </view>

        <view class="balance_line">
          <view>{{ `${'可用余额'}(${userInfo.currencyIcon})` }}</view>
          <view>
            <text v-if="item.canSee">{{
              item.availableBalance | numberToCurrency
            }}</text>
            <text v-else>****</text>
          </view>
        </view>

        <view class="balance_line">
          <view style="display: flex; align-items: center">
            <view style="margin-right: 20rpx">{{
              `${'不可用余额'}(${userInfo.currencyIcon})`
            }}</view>
            <image
              @click="showToast(item)"
              style="width: 25rpx; height: 25rpx"
              src="../../../static/images/my_tip.png"
              mode=""
            >
            </image>
          </view>
          <view>
            <text v-if="item.canSee">{{
              item.unavailableBalance | numberToCurrency
            }}</text>
            <text v-else>****</text>
          </view>
        </view>
        <view v-if="item.accountType == 4" class="balance_line">
          <view>{{ `${'可提现金额'}(${userInfo.currencyIcon})` }}</view>
          <view>
            <text v-if="item.canSee">{{
              item.withdrawBalance | numberToCurrency
            }}</text>
            <text v-else>****</text>
          </view>
        </view>
      </view>
    </view>
    <u-modal
      @confirm="toUnBind"
      @cancel="isNoBind = false"
      :show="isNoBind"
      title="提示"
      width="100%"
      :showCancelButton="true"
      content="请先进行经销商认证"
    ></u-modal>
  </view>
</template>

<script>
import * as bal from '@/config/balance.js'
const BALANCE_TYPE = {
  RECHARGE: 1,
  WITHDRAW: 2,
  TRANSFER: 3,
}
export default {
  data() {
    return {
      topList: [
        {
          name: '充值',
          path: '/pages/pay/index',
          id: BALANCE_TYPE.RECHARGE,
        },
        {
          name: '提现',
          path: '/pages/mine/balance/withdrawal',
          id: BALANCE_TYPE.WITHDRAW,
        },
        {
          name: '转账',
          path: '/pages/mine/balance/transfer',
          id: BALANCE_TYPE.TRANSFER,
        },
      ],
      tabActive: '',
      balanceList: [],
      userInfo: {},
      ifshowBtn: false,
      isNoBind: false,
    }
  },
  onLoad() {
    let params = {
      isRecharge: true,
    }
    this.topList[0].path =
      '/pages/pay/index?paramsPost=' + JSON.stringify(params)
    this.getList()
    this.userInfo = uni.getStorageSync('User')
  },
  onShow() {
    this.gettopList()
    this.ifCodeName()
  },
  methods: {
    ifCodeName() {
      if (this.userInfo.memberCode == 'BD68880628') {
        this.ifshowBtn = true
      } else {
        this.ifshowBtn = false
      }
    },
    gettopList() {
      if (this.userInfo.pkCountry == 1 && this.userInfo.pkGradeId == 1) {
        this.topList = [
          {
            name: '充值',
            path: '/pages/pay/index',
            id: BALANCE_TYPE.RECHARGE,
          },
          {
            name: '提现',
            path: '/pages/mine/balance/withdrawal',
            id: BALANCE_TYPE.WITHDRAW,
          },
        ]
      } else {
        this.topList = [
          {
            name: '充值',
            path: '/pages/pay/index',
            id: BALANCE_TYPE.RECHARGE,
          },
          {
            name: '提现',
            path: '/pages/mine/balance/withdrawal',
            id: BALANCE_TYPE.WITHDRAW,
          },
          {
            name: '转账',
            path: '/pages/mine/balance/transfer',
            id: BALANCE_TYPE.TRANSFER,
          },
        ]
      }
    },
    //交易明细跳转
    goTrans() {
      uni.navigateTo({
        url: '/pages/mine/balance/transDetail',
      })
    },
    showToast(item) {
      this.$refs.uToast.show({
        message: `${'禁止消费金额'}：${item.lockAccount}\n${'禁止转账金额'}：${item.transferAccount}\n${'禁止提现金额'}：${item.withdrawAccount}`,
      })
    },
    getList() {
      bal.getWalletBalance().then(res => {
        res.data.memberWalletBalanceVOList.forEach(ele => {
          ele.canSee = false
        })
        this.balanceList = res.data.memberWalletBalanceVOList
      })
    },
    checkExit(item) {
      bal
        .getIsExist({
          businessModule: item.id - 1,
        })
        .then(res => {
          if (res.code == 200 && res.flag == 'Y') {
            uni.navigateTo({
              url: item.path,
            })
          } else if (res.code == 200 && res.flag == 'N') {
            this.isNoBind = true
            // uni.navigateTo({
            // 	 url: "/pages/mine/addLicense/addLicense"
            // })
          }
        })
    },
    toUnBind() {
      uni.navigateTo({
        url: '/pages/delear/index',
      })
    },

    handleLink(item) {
      this.tabActive = item.path
      if (
        item.id == BALANCE_TYPE.WITHDRAW ||
        item.id == BALANCE_TYPE.TRANSFER
      ) {
        if (this.userInfo.pkCountry == 1) {
          if (
            this.userInfo.pkGradeId == 1 &&
            item.id == BALANCE_TYPE.WITHDRAW
          ) {
          } else {
            bal
              .getIfAuth({
                businessModule: item.id - 1,
              })
              .then(res => {
                if (res.code == 200 && res.flag == 'Y') {
                  this.checkExit(item)
                } else if (res.code == 200 && res.flag == 'N') {
                  uni.showToast({
                    title: '请先进行实名认证',
                    icon: 'none',
                  })
                  setTimeout(() => {
                    uni.navigateTo({
                      url: '/pages/selfService/realName/realName',
                    })
                  }, 900)
                }
              })
          }
        } else {
          uni.navigateTo({
            url: item.path,
          })
        }
      } else {
        let paramsPost = {
          isRecharge: true,
        }
        uni.navigateTo({
          url: `${item.path}?paramsPost=${encodeURIComponent(JSON.stringify(paramsPost))}`,
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f2f2f2;
  padding-bottom: 40rpx;

  .topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 27rpx 0;
    background-color: #ffffff;

    .levelList_i {
      min-width: 200rpx;
      height: 60rpx;
      border: 2rpx solid #dddddd;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 30rpx;
      font-size: 30rpx;
      margin: 0 22rpx;
    }

    .levelList_i:active {
      background-color: #005bac;
      color: #ffffff;
    }
  }

  .balance {
    padding: 0 23rpx;
    background: #f2f2f2;

    .ba_list {
      margin-top: 30rpx;
      padding: 40rpx 20rpx;
      border-radius: 25rpx;
      background-size: 100% 100%;

      .balance_title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title_left {
          font-size: 32rpx;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #333333;
          display: flex;
          align-items: center;

          .eyeimg {
            margin-left: 18rpx;
            width: 38rpx;
            height: 25rpx;
          }
        }

        .title_right {
          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #2e1aca;
        }
      }

      .balance_total {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin-top: 10rpx;
      }

      .balance_total2 {
        font-size: 48rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin-top: 5rpx;
        margin-bottom: 50rpx;
      }

      .balance_line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin-top: 5rpx;
      }
    }
  }
}
</style>