VAVABUY/pages/bank/wallet.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar fixed border title="钱包" page="wallet">
        <template #right>
          <view class="nav_right" @click.stop="rightClick">
            <trans _t="账单" />
          </view>
        </template>
      </Navbar>
      <view class="wallet_top" id="tops">
        <view class="wallet_header">
          <view class="wallet_header_content">
            <trans class="cont_title" _t="余额" />
            <view class="wallet_money">
              <text class="currency">{{ symbol.symbol }}</text>
              <text>{{ Moneyhtml(userInfo.money) }}</text>
            </view>
            <view class="wallet_btn">
              <view
                class="btn recharge"
                @click="handleTo('/pages/bank/recharge')"
              >
                <trans _t="充值" />
              </view>
              <view
                class="btn withdrawal"
                @click="handleTo('/pages/bank/withdraw')"
              >
                <trans _t="提现" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="content">
        <view class="cont">
          <List url="/users/account/lists" ref="listRef">
            <template #item="{ item }">
              <view class="list">
                <view class="list_top">
                  <view class="title">{{ item.title }}</view>
                  <view class="money"
                    >{{ symbol.symbol }}&nbsp;{{ Moneyhtml(item.setup) }}</view
                  >
                </view>
                <view class="date">{{ useGlobal().$format(item.indate) }}</view>
              </view>
            </template>
          </List>
        </view>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import { computed, ref, onMounted, nextTick } from "vue";
import { useSystemStore, useUserStore } from "@/store";
import List from "@/components/list";
import { useGlobal, Toast, Moneyhtml } from "@/utils";
import { onReachBottom } from "@dcloudio/uni-app";

const useSystem = useSystemStore();
const useUser = useUserStore();
const listRef = ref(null);

const currency = computed(() => useSystem.getCurrency);
const userInfo = computed(() => useUser.getuserInfo);
const symbol = computed(() => useSystem.getSymbol);

const rightClick = () => {
  uni.navigateTo({ url: "/pages/bank/account" });
};

const handleTo = (url) => {
  uni.navigateTo({ url });
};

onMounted(() => {
  nextTick(() => {
    listRef.value && listRef.value.getData();
  });
});
onReachBottom(() => {
  nextTick(() => {
    listRef.value && listRef.value.scrolltolower();
  });
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  min-height: 100vh;
  background-color: var(--bg);

  .nav_right {
    color: var(--text);
    .size(24rpx);
  }

  .wallet_top {
    .wallet_header {
      background-color: var(--black);
      padding: 24rpx;

      &_content {
        background-color: var(--light);
        border-radius: 16rpx;
        padding: 24rpx;
        .ver();
        flex-direction: column;

        .cont_title {
          color: var(--text-01);
          .size(28rpx);
          text-align: center;
          font-weight: 700;
          line-height: 60rpx;
        }

        .wallet_money {
          line-height: 100rpx;
          .size(48rpx);
          color: var(--text);
          font-weight: 700;

          .currency {
            // .size(28rpx);
            margin-right: 8rpx;
          }
        }

        .wallet_btn {
          .flex();
          column-gap: 24rpx;

          .btn {
            width: 240rpx;
            height: 38px;
            padding: 16rpx 30rpx;
            border: 1px solid var(--black);
            background-color: var(--black);
            border-radius: 16rpx;
            .size(24rpx);
            color: var(--light);
            text-align: center;
          }

          .withdrawal {
            color: var(--black);
            background-color: var(--light);
          }
        }
      }
    }
  }

  .content {
    padding: 0 24rpx;

    .list {
      padding: 24rpx;
      background-color: var(--light);
      margin-top: 24rpx;
      border-radius: 12rpx;
      border-bottom: var(--bor);
      &_top {
        .flex_position(space-between);
        .size(28rpx);

        .title {
          color: var(--text);
        }

        .money {
          font-weight: 700;
          color: var(--danger);
        }
      }

      .date {
        color: var(--text-02);
        .size(24rpx);
        text-align: right;
        margin-top: 8rpx;
      }
    }
  }
}
</style>