car-wash-front/src/pages-user/wallet/index.vue

<template>
  <view class="page">
    <view class="wallet-header">
      <view class="wallet-header_title">
        <view class="wallet-header_title-left">
          <uv-icon name="level" color="white" size="28"></uv-icon>
          <text class="font16">我的钱包</text>
        </view>
        <text class="wallet-header_title-refund" @click="handleRefund">退款</text>
      </view>
      <view class="wallet-header_balance">
        <text class="font18 mr10" style="vertical-align: top">¥</text>
        <text style="font-size: 32px; line-height: 32px;font-weight: 600;">{{ ((account.balance || 0) / 100).toFixed(2) }}
        </text>
      </view>
      <view class="wallet-header_pounds">
        <view>
          <text>充值余额：</text>
          <text>{{ (account.rechargeBalance / 100).toFixed(2) }}</text>
        </view>

        <view>
          <text>赠款余额：</text>
          <text>{{ (account.grantsBalance / 100).toFixed(2) }}</text>
        </view>
      </view>
    </view>

    <view class="wallet-body">
      <uv-tabs :list="tabs" :current="tab" @click="handleTabClick"></uv-tabs>
      <uv-list>
        <uv-list-item
            clickable :show-arrow="item.type===3" v-for="(item,index) in dataList" :key="index" @click="handleClickDetail(item)">
          <template #default>
            <view class="wallet-item">
              <view class="wallet-item_header">
                <view class="flex-inline">
                  <text class="wallet-item_header-type">{{ fmtDictName('WalletDetail.type', item.type) }}</text>
                  <uv-tags class="ml10" style="margin-left: 10px;" size="mini" plain
                           :type="item.status==0?'primary':(item.status==1?'success':'error')"
                           :text="fmtDictName('WalletDetail.status', item.status)"></uv-tags>
                </view>
                <text class="wallet-item_header-amt">{{ (item.amount / 100).toFixed(2) }}元</text>
              </view>
              <view class="wallet-item_body">
                <text class="wallet-item_body-order">{{ item.orderNo }}</text>
                <text class="wallet-item_body-time">{{ fmtDateTime(item.transactionTime) }}</text>
              </view>
            </view>
          </template>
        </uv-list-item>
      </uv-list>
      <uv-empty mode="order" v-if="!dataList||dataList.length===0" text="暂无数据"></uv-empty>
    </view>

    <view class="wallet-bottom">
      <uv-button
          type="primary"
          color="#19A497"
          @click="to(`/pages-user/wallet/recharge`)">充值
      </uv-button>
    </view>

  </view>
</template>

<script setup lang="ts">
import {onPullDownRefresh, onReachBottom, onShow, onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
import {body, get} from "@/utils/https";
import {checkLogin} from "@/utils/auth";
import {fmtDictName, fmtDateTime} from "@/utils/common";

const account = ref();

const dataList = ref([])
const tab = ref(0);
const tabs = ref([
  {
    name: "全部",
    value: 0,
  },
  {
    name: "充值",
    value: 1,
  },
  {
    name: "退款",
    value: 2,
  },
  {
    name: "消费",
    value: 3,
  },
]);


const handleRefund = () => {
  to(`/pages-user/wallet/refund`)
}


onLoad((options: any) => {
  if (options.tab) {
    tab.value = options.tab;
  }
})

onShow((options: any) => {
  checkLogin().then(() => {
    loadData();
  })
})

onReachBottom(() => {
  loadData();
});

onPullDownRefresh(() => {
  loadData();
});

const to = (url: string) => {
  uni.navigateTo({
    url
  })
}

const handleTabClick = (e: any) => {
  let {name, value, index} = e
  tab.value = index;
  console.log(index)
  loadData();
}

const loadData = () => {
  get(`/account/balance`).then(res => {
    account.value = res;
  })
  get(`/account/walletDetailList`, {type: tab.value}).then((list: any) => {
    dataList.value = list;
  })
}

const handleClickDetail = (walletDetail: any) => {
  if(walletDetail.type!=3){
    return;
  }
  uni.navigateTo({
    url: `/pages-order/detail/index?id=${walletDetail.id}&type=${walletDetail.type}&orderNo=${walletDetail.orderNo}`,
  });
};
</script>

<style lang="scss">
.page {
  height: 100vh;
  width: 100vw;
  background: linear-gradient(
          180deg,
          #e0ebff 0%,
          rgba(255, 255, 255, 0) 60.13%
  );
  display: flex;
  flex-direction: column;


  .wallet-header {
    border-radius: 20rpx;
    background-color: $uni-color-primary;
    margin: 20rpx;
    display: flex;
    flex-direction: column;
    padding: 20rpx;

    &_title {
      display: inline-flex;
      justify-content: space-between;
      color: whitesmoke;

      &-left {
        display: inline-flex;
        align-items: center;
        align-content: center;
        color: whitesmoke;
      }

      &-refund {
        color: #127779;
        padding: 6rpx 28rpx;
        font-size: 26rpx;
        border-radius: 14px;
        background-color: #65C0B7;
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
      }
    }

    &_balance {
      display: inline-flex;
      color: white;
      align-content: center;
      margin-top: 40rpx;
    }

    &_pounds {
      margin-top: 20rpx;
      display: inline-flex;
      align-content: center;
      align-items: center;
      color: white;
      justify-content: space-between;
    }
  }

  .wallet-body {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 20rpx 20rpx 60rpx 20rpx;


    .wallet-item {
      display: flex;
      flex-direction: column;
      padding: 14rpx;
      border-radius: 8rpx;
      margin: 10rpx 16 prx 10rpx 10rpx;


      &_header {
        display: inline-flex;
        flex-wrap: nowrap;
        justify-content: space-between;

        &-type {
          font-weight: 500;
          font-size: 14px;
          margin-right: 15rpx;
        }


        &-status {
          font-size: 12px;
          margin-left: 6px;
          border: 1px solid $uni-color-primary;
          border-radius: 2rpx;
        }

        &-amt {
          font-weight: 500;
          font-size: 17px;
        }
      }

      &_body {
        padding: 10rpx 0;
        display: inline-flex;
        justify-content: space-between;

        &-order, &-time {
          font-size: 12px;
          color: $uni-color-subtitle
        }
      }
    }
  }

  .wallet-bottom {
    width: 100%;
    height: 36px;
  }


}

</style>