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" v-if="pushSwitch">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>推荐计划</span>
        </div>
      </template>
      <p class="info">推荐用户首次充值成功后将获得佣金奖励：{{ rewardDesc }}，奖励可在充值记录中查看</p>
      <el-input v-model="pushUrl"  size="large" readonly>
        <template #prepend>推广链接:</template>
      </el-input>
    </el-card>
  </div>
  <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 { getConfigKey } from "@/api/system/config";
import { ref } from 'vue';

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

function getIndex() {
  // 是否开启推广链接
  getConfigKey("invite.distribution.switch").then(response => {
    pushSwitch.value = response.msg;
  });
  getConfigKey("invite.distribution.type").then(resp1 => {
    getConfigKey("invite.distribution.quota").then(resp2 => {
      const type = resp1.msg
      const quota = resp2.msg
      if (type == "percent") {
        rewardDesc.value = "被邀请用户首单充值"+quota+"%"
      }else {
        rewardDesc.value = quota +"元"
      }
    });
  });
  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
    pushUrl.value  = response.data.pushUrl
    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 {
    margin: 0;
    font-size: 15px;
    color: #606266;
 }
</style>