|
|
@@ -0,0 +1,249 @@
|
|
|
+<template>
|
|
|
+ <view class="notice-container">
|
|
|
+ <cwg-dropdown ref="dropdownRef" :menu-list="customMenuList" @menuClick="handleMenuClick">
|
|
|
+ <view class="pc-header-btn">
|
|
|
+ <cwg-icon name="crm-payment" color="#141d22" @click="openNotice" />
|
|
|
+ {{ formattedBalance }} USD
|
|
|
+ </view>
|
|
|
+ <template #btn>
|
|
|
+ <view class="right-drawer">
|
|
|
+
|
|
|
+ <view class="drawer-item">
|
|
|
+ <view class="drawer-item-title">钱包余额</view>
|
|
|
+ <view class="drawer-item-content">{{ formattedBalance }} USD</view>
|
|
|
+ </view>
|
|
|
+ <view class="drawer-item">
|
|
|
+ <view class="drawer-item-title">处理中出金金额</view>
|
|
|
+ <view class="drawer-item-content">{{ formattedPendingWithdrawAmount }} USD</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </cwg-dropdown>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed, ref, onMounted } from 'vue'
|
|
|
+import { newsApi } from '@/service/news'
|
|
|
+import useRouter from "@/hooks/useRouter";
|
|
|
+import { drawApi } from "@/service/draw";
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
+const { t, locale } = useI18n()
|
|
|
+import { userToken } from "@/composables/config";
|
|
|
+const isRed = ref(false)
|
|
|
+const dropdownRef = ref(null)
|
|
|
+const close = () => {
|
|
|
+ dropdownRef.value.close()
|
|
|
+}
|
|
|
+const router = useRouter();
|
|
|
+const customMenuList = computed(() =>
|
|
|
+ [{
|
|
|
+ label: t('wallet.item6'),
|
|
|
+ type: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: t('wallet.item7'),
|
|
|
+ type: 2
|
|
|
+ },
|
|
|
+ ])
|
|
|
+
|
|
|
+const handleMenuClick = ({ value }) => {
|
|
|
+ goPages(value)
|
|
|
+}
|
|
|
+const NumberDecimal = (value) => {
|
|
|
+ let realVal = ''
|
|
|
+ if (!isNaN(value) && value !== '') {
|
|
|
+ // 截取当前数据到小数点后两位
|
|
|
+ realVal = parseFloat(value).toFixed(2)
|
|
|
+ } else {
|
|
|
+ realVal = '0'
|
|
|
+ }
|
|
|
+ return realVal
|
|
|
+};
|
|
|
+const NumberDesensitization = (value) => {
|
|
|
+ let realVal = ''
|
|
|
+ if (!isNaN(value) && value !== '') {
|
|
|
+ value = value.toString();
|
|
|
+ realVal = value.substr(0, 2) + '****' + value.substr(-2);
|
|
|
+ } else {
|
|
|
+ realVal = '--'
|
|
|
+ }
|
|
|
+ return realVal
|
|
|
+};
|
|
|
+const isShow = ref(true)
|
|
|
+const walletbalance = ref(0)
|
|
|
+const pendingWithdrawAmount = ref(0)
|
|
|
+const formattedBalance = computed(() => {
|
|
|
+ const value = walletbalance.value || "0"
|
|
|
+ const decimalValue = NumberDecimal(value)
|
|
|
+ return isShow.value ? decimalValue : NumberDesensitization(decimalValue)
|
|
|
+})
|
|
|
+const formattedPendingWithdrawAmount = computed(() => {
|
|
|
+ const value = pendingWithdrawAmount.value || "0"
|
|
|
+ const decimalValue = NumberDecimal(value)
|
|
|
+ return isShow.value ? decimalValue : NumberDesensitization(decimalValue)
|
|
|
+})
|
|
|
+const getWalletList = async () => {
|
|
|
+ let res = await drawApi.walletbalance({});
|
|
|
+ if (res.code == 200) {
|
|
|
+ if (res.data != null) {
|
|
|
+ walletbalance.value = res.data;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//获取处理中出金金额
|
|
|
+const getPendingWithdrawAmount = async () => {
|
|
|
+ let res = await drawApi.pendingWithdrawAmount({});
|
|
|
+ if (res.code == 200) {
|
|
|
+ if (res.data != null) {
|
|
|
+ pendingWithdrawAmount.value = res.data;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+const goPages = (type) => {
|
|
|
+ let path
|
|
|
+ if (type == 1) {
|
|
|
+ path = '/pages/customer/wallet-transfer'
|
|
|
+ } else if (type == 2) {
|
|
|
+ path = '/pages/customer/wallet-history'
|
|
|
+ }
|
|
|
+ router.push(path)
|
|
|
+ close()
|
|
|
+}
|
|
|
+const goMore = () => {
|
|
|
+ router.push({
|
|
|
+ path: '/pages/common/notice'
|
|
|
+ })
|
|
|
+ close()
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ if (!userToken.value) return
|
|
|
+ getWalletList()
|
|
|
+ getPendingWithdrawAmount()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+@import "@/uni.scss";
|
|
|
+
|
|
|
+.notice-container {
|
|
|
+ :deep(.cwg-dropdown-menu-container) {
|
|
|
+ left: px2rpx(-280) !important;
|
|
|
+ right: px2rpx(0) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 991px) {
|
|
|
+ :deep(.cwg-dropdown-menu-container) {
|
|
|
+ left: px2rpx(-270) !important;
|
|
|
+ max-width: px2rpx(400);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pc-header-btn {
|
|
|
+ position: relative;
|
|
|
+ width: fit-content;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 px2rpx(12);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ &.has-dot::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: px2rpx(4);
|
|
|
+ right: px2rpx(4);
|
|
|
+ width: px2rpx(8);
|
|
|
+ height: px2rpx(8);
|
|
|
+ background-color: #f56c6c;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-drawer {
|
|
|
+ width: px2rpx(300);
|
|
|
+ background-color: var(--color-white);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 20px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notification-list {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notification-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: px2rpx(12) px2rpx(16);
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-content {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ font-size: px2rpx(14);
|
|
|
+ color: #333;
|
|
|
+ line-height: 1.4;
|
|
|
+ margin-bottom: px2rpx(4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-time {
|
|
|
+ font-size: px2rpx(12);
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-badge {
|
|
|
+ margin-left: px2rpx(12);
|
|
|
+
|
|
|
+ .dot {
|
|
|
+ width: px2rpx(8);
|
|
|
+ height: px2rpx(8);
|
|
|
+ background-color: #f56c6c;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .logout-wrap {
|
|
|
+ margin-top: auto;
|
|
|
+ padding: 20px 16px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logout-btn {
|
|
|
+ height: 44px;
|
|
|
+ background: #f4eadf;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8px;
|
|
|
+ color: #ff9800;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
