PunchSettle-MiniProgram/src/pages/account/accountList.vue

<template>
  <view class="account-header">
    <view v-if="accountNum > 0">账户（{{ generalAccountList.length }}个）
    </view>
    <view v-else>账户</view>
    <view>
      <span @click="goAccountEditPage()">添加</span>
      <span class="account-btn-delimiter">|</span>
      <span @click="goAccountTransferPage()">转账</span>
    </view>
  </view>

  <view class="account-container">
    <view class="account" v-if="basicAccount">
      <span class="account-name">{{ basicAccount.accountName }}</span>
      <span class="account-points">{{ basicAccount.points }}</span>
    </view>

    <view class="general-account-item" v-for="account in generalAccountList" :key="account.id">
      <view class="item-box">
        <view class="item-header">
          <span class="item-title">{{ account.accountName }}</span>
        </view>
        <view class="item-points">{{ account.points }}积分</view>
      </view>
      <view class="btn-group">
        <view class="btn-item" @click="deleteDialogOpen(account.id)">删除</view>
        <view class="btn-item" @click="goAccountEditPage(account.id)">编辑</view>
      </view>
    </view>
  </view>

  <!-- 删除确认框 -->
  <uni-popup ref="deleteDialog" type="dialog">
    <uni-popup-dialog mode="base" :before-close="true" title="删除提示" content="确认删除当前奖励？" @confirm="deleteDialogConfirm"
      @close="deleteDialogClose"></uni-popup-dialog>
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue';
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import { accountApi } from '@/apis/apis';
import router from '@/common/router';


// 组件
/**
 * 删除弹出框
 */
const deleteDialog = ref(null);

// 属性
/**
 * 账户数量
 */
const accountNum = ref(0);

/**
 * 基本账户
 */
const basicAccount = ref(null);

/**
 * 一般账户列表
 */
const generalAccountList = ref(null);

// 方法
/**
 * 跳转编辑页面
 */
const goAccountEditPage = (id) => {
  uni.navigateTo({
    url: id ? router.ACCOUNT_EDIT_PAGE + "?id=" + id : router.ACCOUNT_EDIT_PAGE
  });
};

/**
 * 跳转转账页面
 */
const goAccountTransferPage = () => {
  uni.navigateTo({
    url: router.ACCOUNT_TRANSFER_PAGE
  });
};

/**
 * 加载账户数据
 */
const loadData = async () => {
  let res = await accountApi.queryAccountInfo();
  accountNum.value = res.accountNum;
  basicAccount.value = res.basicAccount;
  generalAccountList.value = res.generalAccountList;
};

/**
 * 打开删除对话框
 */
const deleteDialogOpen = (id) => {
  deleteDialog.value.open();
}

/**
 * 删除确认
 */
const deleteDialogConfirm = async (id) => {
  accountApi.deleteAccount({ id })
    .then(ret => {
      uni.showToast({
        title: '删除成功',
        icon: 'success'
      });
    })
    .catch(err => {
      uni.showToast({
        title: '删除失败',
        icon: 'error'
      });
    }).finally(() => {
      deleteDialog.value.close();
      loadData();
    })
    ;
}

/**
 * 删除取消
 */
const deleteDialogClose = () => {
  deleteDialog.value.close();
}

// 声明周期
onShow(() => {
  loadData();
});

onPullDownRefresh(() => {
  loadData();
  uni.stopPullDownRefresh();
});
</script>

<style lang="scss" scoped>
.account-header {
  margin: 16rpx;
  display: flex;
  // 两侧分布
  justify-content: space-between;
  /* 垂直居中 */
  align-items: center;

  font-size: 30rpx;
  font-weight: 400;
  letter-spacing: 0rpx;
  line-height: 43.44rpx;
  color: #000000;

  .account-btn-delimiter {
    margin: 0 16rpx;
  }
}

.account-container {
  margin: 16rpx;

  .account {
    background-color: #2879ED;
    border-radius: 16rpx;
    height: 125rpx;

    font-size: 40rpx;
    font-weight: 400;
    letter-spacing: 0rpx;
    line-height: 57.92rpx;
    color: #ffffff;

    display: flex;
    justify-content: space-between;
    /* 子元素内容垂直居中 */
    align-items: center;
    padding: 0 24rpx;
  }

  .general-account-item {
    margin-top: 16rpx;
    width: 100%;
    border-radius: 24rpx;
    background: #FFFFFF;
    border: 0.5px solid #E4E4E4;
    box-shadow: 0px 1px 6px #D8D8D8;

    .item-box {
      padding: 16rpx 16rpx 16rpx 24rpx;

      // flex布局，分布两侧，垂直居中
      display: flex;
      justify-content: space-between;
      align-items: center;

      font-size: 40rpx;
      font-weight: 400;
      letter-spacing: 0rpx;
      line-height: 57.92rpx;
      color: #000000;

      .item-header {
        display: flex;
        align-items: center;
      }

      .item-tag:first-child {
        margin-left: 24rpx;
      }

      .item-tag {
        margin-left: 16rpx;
        width: 94rpx;
        height: 38rpx;
        opacity: 1;
        border-radius: 24rpx;
        background: #FFFFFF;
        border: 1px solid #406CE7;

        display: inline-flex;
        justify-content: center;
        align-items: center;

        font-size: 18rpx;
        font-weight: 400;
        letter-spacing: 0rpx;
        // line-height: 26.06rpx;
        color: #406CE7;
      }
    }
  }

  .btn-group {
    margin-top: 16rpx;
    display: flex;
    border-top: 1px solid #C7C7C7;

    .btn-item {
      flex-grow: 1;

      display: inline-flex;
      justify-content: center;
      align-items: center;

      padding: 0rpx 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      letter-spacing: 0prx;
      line-height: 40.54rpx;
      color: #6A6A6A;
    }

    .btn-item:not(:last-child) {
      border-right: 1px solid #C7C7C7;
    }
  }
}
</style>