merchant_feedov_web/src/views/financialManagement/accountBalance/index.vue

<!-- 账户余额-总览界面 -->
<template>
  <div class="customer-top-up">
    <div class="item-box">
      <div class="item-title">总览</div>
      <div class="item-grid-box">
        <div class="grid-item" v-for="(item, index) in cardList" :key="index">
          <div class="grid-item-title">{{ item.name }}</div>
          <div class="grid-item-num">
            <div class="item-num">{{ item.value }}</div>
            <div class="item-dw">{{ item.unit }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="item-box">
      <div class="item-title">账单明细</div>
      <!-- 搜索条件区 -->
      <div class="search-section">
        <a-form :model="searchForm" layout="inline">
          <a-form-item field="startTime" label="开始时间">
            <a-date-picker
              style="width: 220px; margin: 0 24px 24px 0"
              show-time
              v-model="searchForm.startTime"
              :time-picker-props="{ defaultValue: '09:09:06' }"
              format="YYYY-MM-DD HH:mm:ss"
              @ok="onOkStart"
            />
          </a-form-item>
          <a-form-item field="endTime" label="结束时间">
            <a-date-picker
              style="width: 220px; margin: 0 24px 24px 0"
              show-time
              v-model="searchForm.endTime"
              :time-picker-props="{ defaultValue: '09:09:06' }"
              format="YYYY-MM-DD HH:mm:ss"
              @ok="onOkEnd"
            />
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button type="primary" @click="handleSearch">搜索</a-button>
              <a-button @click="resetSearch">重置</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </div>
      <!-- 数据表格 -->
      <a-table
        row-key="customerName"
        :columns="columns"
        :data="tableData"
        :pagination="pagination"
      >
        <template #detail="{ record }">
          <a-button @click="openDetail(record)" type="text">查看</a-button>
          <a-button @click="openTopsUp(record)" type="text">结算</a-button>
        </template>
        <template #status="{ record }">
          <div
            v-if="record.status == 1"
            class="status-table"
            style="color: rgba(43, 164, 113, 1)"
          >
            <div
              class="status-icon"
              style="background-color: rgba(43, 164, 113, 1)"
            ></div>
            已出账
          </div>
          <div v-if="record.status == 2" class="status-table">
            <div class="status-icon"></div>
            欠费中
          </div>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model:visible="showAdd"
      title="结算"
      @cancel="showAdd = false"
      @before-ok="submitAdd"
      okText="确定"
      width="800px"
      cancelText="关闭"
    >
      <a-form :model="formAdd" auto-label-width>
        <a-form-item field="customerName" label="客户名称">
          <!-- <a-input v-model="formAdd.customerName" placeholder="请输入客户" /> -->
          泰国栗
        </a-form-item>
        <a-form-item field="money" label="当前帐单应收金额">
          <!-- <a-input-number v-model="formAdd.money" placeholder="请输入金额" class="input-demo" :min="10"
                        :max="100" /> -->
          1242113.00元
        </a-form-item>
        <a-form-item field="topsUpOpinion" label="结算金额">
          <!-- <a-textarea placeholder="请输入" v-model="formAdd.topsUpOpinion" allow-clear /> -->
          123111.00元
        </a-form-item>
        <a-form-item field="fileList" label="打款凭证">
          <a-upload
            action="/"
            :default-file-list="formAdd.fileList"
            style="width: auto; max-width: 400px"
          />
          <div class="text-box">
            <div class="text">1.请上传客户银行转账等同等性质的支付凭证文件</div>
            <div class="text">2.图片仅支持jpg或png格式</div>
            <div class="text">3.图片不得大于2M</div>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      v-model:visible="showDetail"
      width="1000px"
      title="订单详情"
      :hide-cancel="true"
      @cancel="detailCancel"
    >
      <div class="detail">
        <div class="detail-box">
          <div class="detail-title">账单信息(泰国李总)</div>
          <div class="detail-item-box">
            <div class="detail-item">
              <div class="item-label">订单状态</div>
              <div class="item-content" style="color: rgba(253, 63, 90, 1)">
                欠款中
              </div>
            </div>
            <div class="detail-item">
              <div class="item-label">账单单号</div>
              <div class="item-content">1223423422435343</div>
            </div>
          </div>
          <div class="detail-item-box">
            <div class="detail-item">
              <div class="item-label">订单结算周期</div>
              <div class="item-content">2024-10-24~2025-10-23</div>
            </div>
            <div class="detail-item">
              <div class="item-label">出账日期</div>
              <div class="item-content">2024-10-24</div>
            </div>
          </div>
          <div class="detail-item-box">
            <div class="detail-item">
              <div class="item-label">结算时间</div>
              <div class="item-content">2024-10-24</div>
            </div>
            <div class="detail-item">
              <div class="item-label">账单结算金额</div>
              <div class="item-content">103849美金</div>
            </div>
          </div>
          <div class="detail-title">结算详情</div>
          <div class="js-detail" v-for="item in 4" :key="item">
            <div class="detail-item-box">
              <div class="detail-item">
                <div class="item-label">运营商</div>
                <div class="item-content" style="color: rgba(43, 164, 113, 1)">
                  泰国AIS
                </div>
              </div>
            </div>
            <div class="detail-item-box">
              <div class="detail-item">
                <div class="item-label">套餐流量消耗</div>
                <div class="item-content">7129.76G</div>
              </div>
              <div class="detail-item">
                <div class="item-label">套餐流量计费方式</div>
                <div class="item-content">按单流量消耗计费</div>
              </div>
            </div>
            <div class="detail-item-box">
              <div class="detail-item">
                <div class="item-label">套餐流量价格</div>
                <div class="item-content">0.65美金/G</div>
              </div>
              <div class="detail-item">
                <div class="item-label">结算周期</div>
                <div class="item-content">月</div>
              </div>
            </div>
            <div class="detail-item-box">
              <div class="detail-item">
                <div class="item-label">叠加流量消耗</div>
                <div class="item-content">11244G</div>
              </div>
              <div class="detail-item">
                <div class="item-label">叠加流量计费方式</div>
                <div class="item-content">按周期计算</div>
              </div>
            </div>
            <div class="detail-item-box">
              <div class="detail-item">
                <div class="item-label">叠加流量价格</div>
                <div class="item-content">0.8美金/月</div>
              </div>
              <div class="detail-item">
                <div class="item-label">结算周期</div>
                <div class="item-content">月</div>
              </div>
            </div>
          </div>
          <div class="detail-title">入账订单列表</div>
          <div class="detail-table">
            <a-table
              :columns="columnsDetail"
              :data="dataDetail"
              :pagination="pagination"
            />
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import { getWalletCard } from "@/api/finance.js";

onMounted(() => {
  getWalletCardFc();
});

const cardList = ref([
  { name: "客户消费总金额/人民币", value: 0, unit: "元" },
  { name: "本月应收金额/人民币", value: 0, unit: "元" },
  { name: "客户总欠款金额/人民币", value: 0, unit: "元" },
  { name: "本月消耗流量", value: 0, unit: "G" },
  { name: "总消耗流量", value: 0, unit: "G" },
]);

const searchForm = reactive({
  startTime: "",
  endTime: "",
});

const columns = [
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    render: ({ rowIndex }) => rowIndex + 1,
  },
  {
    title: "账单号",
    dataIndex: "accountNumber",
    ellipsis: true,
    tooltip: true,
    width: 100,
  },
  { title: "客户名称", dataIndex: "customerName" },
  { title: "账单生成时间", dataIndex: "createTime" },
  { title: "结算周期时间段", dataIndex: "createTime" },
  { title: "结算金额", dataIndex: "money" },
  { title: "消耗流量", dataIndex: "deplete" },
  { title: "状态", slotName: "status" },
  { title: "操作", slotName: "detail", align: "center" },
];
const tableData = ref([
  {
    accountNumber: "13800138000",
    customerName: "张三",
    status: "1",
    customerAccountNumber: "jhl001",
    money: "100美金",
    deplete: "100G",
    createTime: "2024-10-11",
    // operate:'上传合同'
  },
  {
    accountNumber: "13800138000",
    customerName: "李四",
    status: "2",
    customerAccountNumber: "jhl001",
    money: "100美金",
    deplete: "100G",
    createTime: "2024-10-11",
    // operate:'上传合同'
  },
  {
    accountNumber: "13800138000",
    customerName: "王五",
    status: "2",
    customerAccountNumber: "jhl001",
    money: "100美金",
    deplete: "100G",
    createTime: "2024-10-11",
    // operate:'上传合同'
  },
  {
    accountNumber: "13800138000",
    customerName: "赵六",
    status: "1",
    customerAccountNumber: "jhl001",
    money: "100美金",
    deplete: "100G",
    createTime: "2024-10-11",
    // operate:'上传合同'
  },
]);
const pagination = reactive({
  total: tableData.value.length,
  current: 1,
  pageSize: 10,
});
const handleSearch = () => {
  console.log("Search form data:", searchForm);
  Message.success("执行搜索操作");
};

const resetSearch = () => {
  Object.keys(searchForm).forEach((key) => {
    if (Array.isArray(searchForm[key])) {
      searchForm[key] = [];
    } else {
      searchForm[key] = null;
    }
  });
  Message.success("搜索条件已重置");
};
const options = [
  { label: "充值", value: "1" },
  { label: "抵充", value: "2" },
  { label: "消费扣除", value: "3" },
];
const openTopsUp = () => {
  showAdd.value = true;
};
const showAdd = ref(false);
const formAdd = reactive({
  customerName: "",
  cardType: "",
  money: "",
  status: "",
  topsUpOpinion: "",
  fileList: [],
});
const submitAdd = () => {
  window.setTimeout(() => {
    showAdd.value = false;
  }, 1000);
};
// 选择时间
const onOkStart = () => {
  console.log(searchForm.startTime, "开始时间");
};
const onOkEnd = () => {
  console.log(searchForm.endTime, "结束时间");
};
const showDetail = ref(false);
const openDetail = () => {
  showDetail.value = true;
};
const detailCancel = () => {};

const getWalletCardFc = async () => {
  const { data } = await getWalletCard();
  cardList.value[0].value = data.rechargeAmount;
  cardList.value[1].value = data.availableAmount;
  cardList.value[2].value = data.oweAmount;
  cardList.value[3].value = data.dataUsage;
};
</script>
<style scoped lang="less">
.customer-top-up {
  padding: 20px;

  .search-section {
    margin-bottom: 20px;
  }

  .audit-btn {
    margin-bottom: 10px;
  }
}

.text-box {
  width: 100%;
  margin-left: 10px;

  .text {
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: 400;
    line-height: 19px;
    color: rgba(153, 153, 153, 1);
    text-align: left;
  }
}

.item-box {
  margin-bottom: 20px;

  .item-title {
    font-family: PingFang SC;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 10px;
  }

  .item-grid-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;

    .grid-item {
      background: rgba(247, 247, 247, 1);
      padding: 20px;
      box-sizing: border-box;
      border-radius: 6px;
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);

      .grid-item-title {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        color: rgba(0, 0, 0, 0.6);
      }

      .grid-item-num {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: PingFang SC;
        font-size: 28px;
        font-weight: 400;
        line-height: 36px;
        color: rgba(0, 0, 0, 0.9);

        .item-num {
        }

        .item-dw {
        }
      }
    }
  }
}

.status-table {
  display: flex;
  align-items: center;
  //styleName: Body/Medium;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  color: rgba(253, 63, 90, 1);

  .status-icon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    background: rgba(253, 63, 90, 1);
  }
}

.detail {
  height: 600px;
  overflow-y: auto;

  .detail-box {
    .detail-title {
      font-family: PingFang SC;
      font-size: 20px;
      font-weight: 400;
      line-height: 28px;
      text-align: left;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 20px;
    }

    .detail-item-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .detail-item {
        //styleName: Body/Medium;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        display: flex;
        align-items: center;
        min-width: 350px;

        .item-label {
          color: rgba(0, 0, 0, 0.4);
          width: 120px;
          text-align: right;
          margin-right: 10px;
        }

        .item-content {
          color: rgba(51, 51, 51, 1);
        }
      }
    }
  }

  .detail-table {
    margin-top: 20px;
  }
}
</style>