zsw-jx-store/src/subPages/merchantChild/accountBalance/accountBalance.vue

<template>
  <!-- 配送类型 -->
  <view class="delivery-root">
    <view class="top">
      <view>品牌发单将扣除品牌账号余额</view>
      <view>门店发单将扣除门店账号余额</view>
    </view>
    <view class="delivery">
      <view class="item" v-for="item in deliveryList" :key="item.id">
        <text class="venderName" :class="`icon-${item.vendorID}`"></text>
        <text class="type"
          >-{{ item.createDeliveryType == 0 ? '品牌发单' : '门店发单' }}</text
        >
      </view>
    </view>
  </view>

  <!-- 品牌账号 -->
  <view class="balance">
    <text>品牌账号余额:</text>
    <jx-price :price="accountBalance" color="#ff0000" />
  </view>

  <!-- 慢点账号余额 -->
  <view class="balance">
    <text>门店账号余额:</text>
    <jx-price :price="StoreMoneyBalance" color="#ff0000" />
  </view>

  <!-- 立即充值 -->
  <view class="btn-root" v-if="isInstallWx">
    <view @tap="handleChargeNow(5)" class="btn store">品牌充值</view>
    <view @tap="handleChargeNow(4)" class="btn">门店充值</view>
  </view>
</template>

<script lang="ts" setup >
import order from '@/api/https/order'
import useGlobalFunc from '@/composables/useGlobalFunc'
import { store } from '@/store'
import { getStorage } from '@/utils/storage'
import toast from '@/utils/toast'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
const { openWeixin } = useGlobalFunc()

const deliveryList = ref<Array<AnyObject>>([])
/*************************************************
 * 获取用户余额
 */
const isInstallWx = ref<boolean>(false)
onShow(() => {
    uni.getProvider({
        service: 'share',
        success: function (res) {
          // res.provider[0] === 'weixin' ? 微信已经安装 : 微信尚未安装
          isInstallWx.value = res.provider[0] == 'weixin' ? true : false
        }
    })

  // if (
  //   plus.runtime.isApplicationExist({
  //     pname: 'com.tencent.mm',
  //     action: 'weixin://',
  //   })
  // ) {
  //   isInstallWx.value = true
  // } else {
  //   isInstallWx.value = false
  // }
  getDeliverMoney() // 品牌门店余额
  getStoreMoney() // 门店账号余额
  deliveryList.value = store.state.storeInfo.allStoreInfo.StoreMaps
})
const accountBalance = ref<number>(0)
/*************************************************
 * 品牌门店余额
 */
async function getDeliverMoney() {
  let res = await order.get_brands()
  if (res.code == 0) {
    let brandID = store.state.storeInfo.allStoreInfo.brandID
    const { balance } = res.data.find((item: any) => item.id === brandID)
    accountBalance.value = balance
  } else {
    toast('品牌账号余额异常')
    accountBalance.value = 0
  }
}

const StoreMoneyBalance = ref<number>(0)
/*************************************************
 * 门店账号余额
 */
async function getStoreMoney() {
  let data = {
    storeID: getStorage('storeID'),
  }
  let res = await order.get_store_acct_balance(data)
  if (res.code == 0) {
    StoreMoneyBalance.value = res.data.accountBalance
  } else {
    toast('门店账号余额异常')
    StoreMoneyBalance.value = 0
  }
}

/*************************************************
 * 充值
 */
function handleChargeNow(type: number) {
  // uni.vibrateShort({})
  if (getStorage('terrace') == 'jxgy') {
    uni.jxAlert({
      title: '提示',
      content: '果园App暂不支持在线充值，请联系运营进行充值。',
    })
    return
  }
  let data = JSON.stringify({
    type: type,
    storeName: getStorage('storeName'),
    storeID: getStorage('storeID'),
    token: getStorage('token'),
    platform: 1,
  })
  uni.jxConfirm({
    title: '提示',
    content: '即将打开微信进行充值，如果打开失败，请重新操作',
    confirmText: '确认充值',
    success: () => {
      openWeixin(`subPages/messageChild/appPlay/appPlay?playData=${data}`)
    },
  })
}
</script>

<style lang="scss" scoped>
.balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid rgb(235, 235, 235);
  background-color: #fff;
  box-sizing: border-box;
}

.top {
  padding: 20rpx;
  color: $jx-warring;
  border-bottom: 1rpx solid rgb(235, 235, 235);
  box-sizing: border-box;
}

.delivery-root {
  background-color: #fff;
  border-bottom: 1rpx solid rgb(235, 235, 235);

  .delivery {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding: 0 20rpx 20rpx 20rpx;
    box-sizing: border-box;

    .item {
      width: 50%;
      margin-top: 20rpx;
      display: flex;
      align-items: center;

      .venderName {
        display: inline-block;
        width: 60rpx;
        height: 60rpx;
        background-size: 100%;
        background-repeat: no-repeat;
        border-radius: 15rpx;
        border: 1rpx solid #e2e2e2;
        background-color: #ffffff;
      }
    }
  }
}

.btn {
  box-sizing: border-box;
  width: 45%;
  margin: 20rpx;
  margin-top: 50rpx;
  text-align: center;
  background-color: $jx-primary;
  padding: 25rpx 0;
  color: #fff;
  border-radius: 8rpx;
}

.store {
  background-image: linear-gradient(135deg, #ec903f, #ff6a20);
}

.btn-root {
  display: flex;
  justify-content: space-between;
}
</style>