api2gpt-web/src/views/index.vue

<template>
  <div class="main">
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>帐户管理</span>
        <div>
          <el-button type="success" style="margin-right: 10px;" @click="flush()">刷新</el-button>
          <router-link to="/money">
            <el-button type="primary">去充值</el-button>
          </router-link>
        </div>
      </div>
    </template>
    <el-row :gutter="20" class="info">
      <el-col :span="8">帐户余额：￥<el-text class="mx-1" >{{ NumFilter(userBalance) }}</el-text></el-col>
      <el-col :span="8">本月消费：￥<el-text class="mx-1" >{{ NumFilter(userBalanceMonth) }}</el-text></el-col>
      <el-col :span="8">当日消费：￥<el-text class="mx-1" >{{ NumFilter(userBalanceDay) }}</el-text></el-col>
    </el-row>
  </el-card>
  <div class="main2" v-if="pushSwitch == 'Y'">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>推荐计划</span>
        </div>
      </template>
      <el-input v-model="pushUrl"  size="large" readonly @click.stop="handleCopy(pushUrl)">
        <template #append>
          <el-button @click="handleCopy(pushUrl)">复制链接</el-button>
        </template>
      </el-input>
    </el-card>
    <el-alert :title="'推荐用户首次充值成功后将获得佣金奖励：' + rewardDesc+'，奖励可在充值记录中查看'" type="success" :closable="false"  />
  </div>
  <div class="main2">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>服务信息</span>
          <div>
            <router-link to="/key">
            <el-button type="primary">KEY管理</el-button>
            </router-link>
          </div>
        </div>
      </template>
      <div style="margin-top: 10px; margin-bottom: 10px;">
        <el-input v-model="serverUrl"  size="large" readonly  @click.stop="handleCopy(serverUrl)">
          <template #prepend>Api Server:</template>
          <template #append>
            <el-button @click="handleCopy(serverUrl)">复制</el-button>
          </template>
        </el-input>
      </div>
      <div style="margin-top: 10px; margin-bottom: 10px;">
        <el-input v-model="userKey"  size="large" readonly @click.stop="handleCopy(userKey)">
          <template #prepend>Api Key:</template>
          <template #append>
            <el-button @click="handleCopy(userKey)">复制</el-button>
          </template>
        </el-input>
      </div>
      <div style="margin-top: 10px; margin-bottom: 10px;">
        <el-input v-model="serverUrl2" size="large" type="password" readonly @click.stop="handleCopy(serverUrl2)">
          <template #prepend>Api Server备用:</template>
          <template #append>
            <el-button @click="handleCopy(serverUrl2)">复制</el-button>
          </template>
        </el-input>
      </div>
    </el-card>
    <el-alert title="点击输入框或按钮可直接复制" type="success" :closable="false"  />
  </div>
  <div class="main2">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>模型定价</span>
        </div>
      </template>
      <div style="margin-bottom: 10px;">
        <el-alert title="注意：模型价格中的计费单位为每1000个token，而不是字数。算法基本和官方保持一致，一个中文字符大致消耗2个token, 用英文提问回复更省token" type="warning" :closable="false"/>
      </div>
      <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">
            ￥{{NumFilter4(scope.row.modelPrice*1000)}}/k
          </template>
          </el-table-column>
        <el-table-column prop="modelPrice2" label="回答价格" width="180">
          <template #default="scope">
            ￥{{NumFilter4(scope.row.modelPrice2*1000)}}/k
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
      </el-table>
      <div>
        <el-alert title="GPT4接口暂未上线，尽请期待" type="error" :closable="false"/>
      </div>
    </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 { proxy } = getCurrentInstance();
const modelList = ref([]);
const serverUrl = ref("");
const serverUrl2 = ref("");
const userKey = ref("");
const userBalance = ref(0);
const userBalanceMonth = ref(0);
const userBalanceDay = 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
    userBalanceDay.value = response.data.userBalanceDay
    pushUrl.value  = response.data.pushUrl
    modelList.value = response.data.modelList
  })
}

function handleCopy(id){
  // 获取需要复制的元素以及元素内的文本内容
  const text = id;
  // 添加一个input元素放置需要的文本内容
  const input = document.createElement("input");
  input.value = text;
  document.body.appendChild(input);
  // 选中并复制文本到剪切板
  input.select();
  document.execCommand("copy");
  // 移除input元素
  document.body.removeChild(input);
  proxy.$modal.msgSuccess("复制成功");
}

function NumFilter (value) {
  // 截取当前数据到小数点后两位
  let realVal = parseFloat(value).toFixed(2)
  return realVal
}

function NumFilter4 (value) {
  // 截取当前数据到小数点后两位
  let realVal = parseFloat(value).toFixed(4)
  return realVal
}

function flush () {
  getIndex()
  proxy.$modal.msgSuccess("刷新成功");
}

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>