api2gpt-web/src/views/index.vue

<template>
  <div class="main">
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>帐户管理</span>
        <router-link to="/money">
          <el-button type="primary">去充值</el-button>
        </router-link>
      </div>
    </template>
    <el-row :gutter="20" class="info">
      <el-col :span="8">帐户余额：￥<el-text class="mx-1" >{{ userBalance }}</el-text></el-col>
      <el-col :span="8">本月消费：￥<el-text class="mx-1" >{{ userBalanceMonth }}</el-text></el-col>
      <el-col :span="8">帐户等级：<el-tag class="ml-2" type="success">1</el-tag></el-col>
    </el-row>
  </el-card>
  <div class="main2">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>服务信息</span>
        </div>
      </template>
      <el-space direction="vertical" alignment="start" :size="30">
            <div>
              <el-input v-model="serverUrl"  size="large" style="width:500px" readonly>
                <template #prepend>Api Server:</template>
              </el-input>
            </div>
            <div>
              <el-input v-model="userKey"  size="large" style="width:500px" readonly>
                <template #prepend>Api Key:</template>
              </el-input>
            </div>
            <div>
              <el-input v-model="serverUrl2"  size="large" style="width:500px" readonly>
                <template #prepend>Api Server备用:</template>
              </el-input>
            </div>
            </el-space>
    </el-card>
  </div>
  <div class="main2">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>模型定价</span>
        </div>
      </template>
      <el-table :data="modelList" height="250" style="width: 100%">
        <el-table-column prop="modelName" label="模型"  />
        <el-table-column prop="modelPrice" label="提问价格" width="180" >
          <template #default="scope">
            ￥{{scope.row.modelPrice*1000}}/k
          </template>
          </el-table-column>
        <el-table-column prop="modelPrice" label="回答价格" width="180">
          <template #default="scope">
            ￥{{scope.row.modelPrice*1000}}/k
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
      </el-table>
    </el-card>
  </div>
  </div>
</template>

<script setup name="Index">
import { getCertIndex } from '@/api/cert/index'
import { ref } from 'vue';

const modelList = ref([]);
const serverUrl = ref("");
const serverUrl2 = ref("");
const userKey = ref("");
const userBalance = ref(0);
const userBalanceMonth = ref(0);

function getIndex() {
  getCertIndex().then(response => {
    serverUrl.value = response.data.serverUrl
    serverUrl2.value = response.data.serverUrl2
    userKey.value = response.data.userKey
    userBalance.value = response.data.userBalance
    userBalanceMonth.value = response.data.userBalanceMonth
    modelList.value = response.data.modelList
  })
}

getIndex()
</script>

<style scoped lang="scss">
.main {
  padding: 20px;
}
.main2 {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.info {
    font-size: 15px;
    color: #606266;
 }
</style>