applet/pages/user/wallet/index.vue

<template>
  <view class="balance-container">
    <uv-navbar
      title="我的钱包"
      placeholder
      autoBack
      bgColor="#f7f7f7"
    ></uv-navbar>
    <view class="balance-top">
      <image
        class="balance-img"
        :src="$handleImageUrl('/personalCenter/wallet/icon_img.png')"
        alt=""
      />
      <view class="balance-info">
        <view class="balance-info-left">
          <view class="balance-nums">
            <text class="balance-nums-text">￥</text>
            <text class="balance-nums-num">
              {{ $addDecimals(balance || 0, 2) }}
            </text>
          </view>
          <view class="balance-nums-unit">余额（元）</view>
        </view>
        <view class="balance-info-right">
          <view class="balance-info-btn" @click.stop="goToWithdraw"
            >去提现</view
          >
          <!-- <view class="balance-nums-unit right-text" @click.stop="turnClick"
            >转积分</view
          > -->
        </view>
      </view>
    </view>
    <view class="balance-list">
      <view class="balance-list-title u-flex-center">
        <image
          class="balance-list-title-img"
          :src="$handleImageUrl('/personalCenter/wallet/icon1.png')"
          alt=""
        />
        <text class="balance-list-title-text">余额明细</text>
      </view>

      <view
        class="balance-list-item u-flex-center-sb"
        v-for="(item, index) in pointsList"
        :key="index"
      >
        <view class="balance-list-item-content-left">
          <view class="balance-list-item-content-title">{{
            item.businessName
          }}</view>
          <view
            class="balance-list-item-content-notes"
            v-if="item.remark || item.sourceCode"
            >{{ item.remark }}（{{ item.sourceCode }}）</view
          >
          <view class="balance-list-item-content-time">{{
            item.createTime
          }}</view>
        </view>
        <view
          class="balance-list-item-content-right"
          :style="{ color: item.billType ? '#ff0000' : '#1a1a1a' }"
        >
          <text v-if="item.billType">+</text>
          <text v-else>-</text>
          <text>{{ item.entryValue }}</text>
        </view>
      </view>

      <noData
        v-if="pointsList == 0"
        :config="{ top: 5, content: '暂无数据~' }"
      />
      <loadMore v-if="pointsList.length > 0" :status="status" />
    </view>

    <!-- 转换积分 -->
    <!-- <RedeemPoints
      ref="redeemPointsRef"
      @confirm="handleExchangeConfirm"
      title="转换"
    /> -->
  </view>
</template>

<script setup>
import { ref } from "vue";
import {
  onLoad,
  onReachBottom,
  onPullDownRefresh,
  onShow,
} from "@dcloudio/uni-app";
import { userBalanceRecordPage_Api } from "@/api/index";
import { balanceToIntegral_Api } from "@/api/index.js";
import { isSetPayPassword_Api, totalBalance_Api } from "@/api/userInfo.js";

const balance = ref(0); // 余额
const params = ref({ pageNum: 1, pageSize: 10 });
const pointsList = ref([]);
const status = ref("loading");
const redeemPointsRef = ref(null);
const isSetPayPassword = ref(null);
// 获取余额明细列表
const getList = () => {
  status.value = "loading";
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  userBalanceRecordPage_Api(params.value)
    .then((res) => {
      uni.hideLoading();
      if (res && res.code == 200) {
        uni.stopPullDownRefresh();
        pointsList.value = pointsList.value.concat(res.rows);
        if (res.total <= pointsList.value.length) {
          status.value = "noMore";
        } else {
          status.value = "more";
        }
      }
    })
    .catch((err) => {
      uni.hideLoading();
    });
};

// 跳转提现页面
const goToWithdraw = () => {
  uni.navigateTo({
    url: "/pages/user/wallet/reflect?pageType=1",
  });
};

// 获取账户信息
const accountInfo = () => {
  totalBalance_Api().then((res) => {
    if (res && res.code == 200) {
      balance.value = res.data || "0.00";
    }
  });
};

// 转换积分
const turnClick = () => {
  // console.log(item);
  if (!isSetPayPassword.value) {
    uni.$uv.toast("请先设置支付密码");
    setTimeout(() => {
      uni.navigateTo({
        url: "/pages/set/payPassword",
      });
    }, 500);
    return;
  }
  redeemPointsRef.value.open({
    totalNum: (balance.value * 1).toFixed(2),
  });
};

// 转换积分确认
const handleExchangeConfirm = (data) => {
  console.log("转换积分确认", data);
  return;
  let form = {
    payPassword: data.payPassword,
    integral: data.exchangePoints,
  };
  uni.showLoading({ title: "转换中...", mask: true });
  balanceToIntegral_Api(form)
    .then((res) => {
      uni.hideLoading();
      // console.log(res);
      if (res && res.code == 200) {
        uni.$uv.toast("兑换成功");
        exchangePopupRef.value.close();
        handleReset();
      }
    })
    .catch((err) => {
      console.log(err);
      uni.hideLoading();
    });
};

// onShow(() => {
// if (isSetPayPassword.value == null) {
//   try {
//     isSetPayPassword_Api().then((res) => {
//       // console.log(res);
//       if (res && res.code == 200 && res.data != null) {
//         isSetPayPassword.value = res.data ? true : false;
//       }
//     });
//   } catch (error) {}
// }
// });

onLoad((options) => {
  accountInfo();
  params.value.pageNum = 1;
  pointsList.value = [];
  getList();
});

onReachBottom(() => {
  if (status.value !== "loading" && status.value !== "noMore") {
    params.value.pageNum++;
    getList();
  }
});
onPullDownRefresh(() => {
  accountInfo();
  params.value.pageNum = 1;
  pointsList.value = [];
  getList();
});
</script>

<style lang="scss" scoped>
.balance-container {
  background: #f7f7f7;
  min-height: 100vh;
  box-sizing: border-box;
  .balance-top {
    padding: 167rpx 30rpx 0 30rpx;
    min-height: 364rpx;
    position: relative;
    box-sizing: border-box;
    .balance-img {
      position: absolute;
      left: 30rpx;
      top: 30rpx;
      width: 690rpx;
      height: 334rpx;
      z-index: 1;
    }
    .balance-info {
      position: relative;
      z-index: 2;
      padding: 0 32rpx 0 37rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .balance-info-left {
        flex: 1;
        margin-right: 20rpx;
        .balance-nums {
          font-size: 40rpx;
          font-weight: normal;
          color: #ffffff;
          // line-height: 38rpx;
          margin-bottom: 30rpx;
          .balance-nums-text {
            font-size: 28rpx;
            font-weight: normal;
            color: #ffffff;
            margin-right: 5rpx;
          }
        }
      }

      .balance-nums-unit {
        font-size: 30rpx;
        font-weight: 400;
        color: #ffffff;
      }

      .balance-info-btn {
        flex-shrink: 0;
        width: 166rpx;
        height: 68rpx;
        line-height: 68rpx;
        background: #ffffff;
        border-radius: 34rpx;
        box-shadow: 0px 3rpx 6rpx 0px rgba(68, 16, 16, 0.43);

        font-size: 30rpx;
        font-weight: 700;
        color: #ef7373;
        text-align: center;
      }

      .right-text {
        text-align: center;
        margin-top: 16rpx;
        color: #ffffff;
      }
    }
  }
  .balance-list {
    padding: 30rpx 54rpx;
    margin-top: 30rpx;
    // background: url("https://shop.xiaocaituan.com/image/personalCenter/wallet/icon_bg.png");
    background-image: url("https://shop.xiaocaituan.com/image/personalCenter/wallet/icon_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 1079rpx;
    background-color: #ffffff;
    .balance-list-title {
      .balance-list-title-img {
        width: 61rpx;
        height: 48rpx;
      }
      .balance-list-title-text {
        font-size: 34rpx;
        font-weight: 700;
        color: #1a1a1a;
        margin-left: 10rpx;
      }
    }
    .balance-list-item {
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f0f0f0;

      .balance-list-item-content-left {
        flex: 1;
        .balance-list-item-content-title {
          font-size: 28rpx;
        }
        .balance-list-item-content-notes {
          font-size: 26rpx;
          color: #666666;
          margin-top: 5rpx;
        }
        .balance-list-item-content-time {
          font-size: 22rpx;
          color: #999999;
          margin-top: 5rpx;
        }
      }
      .balance-list-item-content-right {
        flex-shrink: 0;
        margin-left: 20rpx;
        font-size: 30rpx;
        font-weight: 700;
      }
    }
  }
}
</style>