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

<template>
  <view class="edit-container">
    <uni-forms ref="transferForm" :modelValue="transferFormData" :label-width="250" label-position="top"
      :rules="transferFormRules">

      <uni-forms-item label="转出账户" required name="senderAccountId">
        <uni-data-select :localdata="accountSelectedData" v-model="transferFormData.senderAccountId"></uni-data-select>
      </uni-forms-item>

      <uni-forms-item label="转入账户" required name="recipientAccountId">
        <uni-data-select :localdata="accountSelectedData"
          v-model="transferFormData.recipientAccountId"></uni-data-select>
      </uni-forms-item>

      <uni-forms-item label="转账积分" required name="transferPoints">
        <uni-easyinput v-model="transferFormData.transferPoints" placeholder="请输入转账积分" type="digit" />
      </uni-forms-item>

      <!-- 按钮组 -->
      <view class="button-container">
        <button type="default" style="width:300rpx;" @click="cancel()">取消</button>
        <button type="primary" style="color:#ffffff;backgroundColor:#2A82E4;width:300rpx;"
          @click="transfer()">转账</button>
      </view>
    </uni-forms>
  </view>
</template>

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

// 组件
/**
 * 账户表单
 */
const transferForm = ref(null);

// 属性

/**
 * 账户表单数据
 */
const transferFormData = ref({});

/**
 * 账户下拉框数据
 */
const accountSelectedData = ref([]);

/**
 * 打卡任务表单规则
 */
const transferFormRules = ref({
  senderAccountId: {
    rules: [{
      required: true,
      errorMessage: '转出账户不能为空'
    }]
  },
  recipientAccountId: {
    rules: [{
      required: true,
      errorMessage: '转入账户不能为空'
    }]
  },
  transferPoints: {
    rules: [{
      required: true,
      errorMessage: '转出积分不能为空'
    }, {
      format: 'number',
      errorMessage: "请输入有效数字"
    }, {
      minimum: 1,
      errorMessage: "最小值{minimum}"
    }]
  }
});

// 方法
/**
 * 保存奖励
 */
const transfer = () => {
  transferForm.value.validate(['id']).then(() => {
    return accountApi.transfer(transferFormData.value)
  }).then(datt => {
    uni.showToast({
      title: '转账成功',
      icon: 'success',
      duration: 2000
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 2000);
  });
}

/**
 * 后退
 */
const cancel = () => {
  uni.navigateBack();
}

/**
 * 获取账户数据
 */
const loadAccountData = async () => {
  let res = await accountApi.queryAccountList();
  if (!res) {
    accountSelectedData.value = [];
    return;
  }
  accountSelectedData.value = res.map(item => {
    let text = `${item.accountName}（${item.points}积分）`;
    return {
      text,
      value: item.id
    }
  });
}

// 生命周期
onShow(() => {
  loadAccountData();
});
</script>

<style lang="scss" scoped>
.edit-container {
  margin: 16rpx;

  .button-container {
    background-color: #FFFFFF;
    display: flex;
    /* 使用Flexbox布局 */
    justify-content: space-between;
    /* 按钮之间的空间分布 */
    padding: 20rpx;
    /* 容器两侧的空白填充 */
  }
}
</style>