Bläddra i källkod

feat(frontend): 添加金币充值功能并优化设置页面

- 新增金币充值功能,用户可以在设置页面看到剩余金币并进行充值
- 优化设置页面布局,使用 template 标签替代原有的 div 结构
- 添加 config.json 文件,用于统一管理 API 地址等配置信息
- 更新用户信息获取接口,增加 device 参数
-调整代理服务器地址,使用 config.json 中的配置
panqiuyao 5 månader sedan
förälder
incheckning
9748dd8cad

+ 4 - 0
frontend/src/config.json

@@ -0,0 +1,4 @@
+{
+    "api": "https://dev2.pubdata.cn",
+    "tkkWebUrl": "http://localhost:3001/tkk"
+}

+ 3 - 1
frontend/src/stores/modules/user.ts

@@ -87,7 +87,9 @@ export const useUserInfo = defineStore('userInfo', () => {
    */
   const getInfo = async () => {
     try {
-      const res = await getUserInfo(); // 调用获取用户信息接口
+      const res = await getUserInfo({
+        device:'aigc',
+      }); // 调用获取用户信息接口
       const { data } = res;
       if (!data) {
         updateToken(''); // 如果没有数据,清空令牌

+ 4 - 0
frontend/src/utils/appconfig.ts

@@ -1,3 +1,7 @@
+
+import config from "@/config.json";
+
+export const configs = config;
 export const imagesUpload = {
   accept: ['jpg', 'png', 'gif'],
   fileSize: 2048 * 10,

+ 1 - 1
frontend/src/views/Photography/shot.vue

@@ -206,7 +206,7 @@ const menu = computed(()=>{
         type:'setting'
       },
       {
-        name:'切换到拍摄模式',
+        name:'切换模式',
         icon:qiehuan,
         click(){
           configInfoStore.updateAppModel(1)

+ 25 - 0
frontend/src/views/Setting/components/otherConfig.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="flex left fs-14 line-40 mar-top-10" style="margin-left: 100px">
+    剩余金币:{{ useUserInfoStore.userInfo.coin_amount }}
+    <el-button class="mar-left-10" @click="showRechargeDialog = true">充值金币</el-button>
+  </div>
+
+  <!-- 新增:充值金币弹窗 -->
+  <el-dialog v-model="showRechargeDialog" title="充值金币" width="700px" :height="630 + 'px'" :destroy-on-close="true">
+    <iframe :src="rechargeUrl" width="660" height="610" frameborder="0"></iframe>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { configs } from '@/utils/appconfig';
+import { ref } from "vue";
+import useUserInfo from "@/stores/modules/user";
+const useUserInfoStore = useUserInfo();
+import  tokenInfo  from '@/stores/modules/token';
+const tokenInfoStore = tokenInfo();
+
+
+// 数据定义
+const showRechargeDialog = ref(false);
+const rechargeUrl = ref(configs.tkkWebUrl + '/other/recharge_gold_coin?token='+tokenInfoStore.getToken);
+</script>

+ 38 - 31
frontend/src/views/Setting/index.vue

@@ -54,40 +54,46 @@
         </div>
       <!--基础配置-->
       <!--其他设置-->
-          <div class="selectBox" style="padding-top: 0px" v-if="activeIndex === 2">
-                <div class="form-item">
-                    <label>产品类型:</label>
-                    <div class="select-wrapper">
-                    <el-select v-model="formData.other_configs.product_type" placeholder="请选择">
-                      <el-option v-for="item in productTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                    </el-select>
-                    </div>
+          <template v-if="activeIndex === 2">
+
+            <div class="selectBox" style="padding-top: 0px" >
+              <div class="form-item">
+                <label>产品类型:</label>
+                <div class="select-wrapper">
+                  <el-select v-model="formData.other_configs.product_type" placeholder="请选择">
+                    <el-option v-for="item in productTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                  </el-select>
                 </div>
-                <div class="form-item">
-                    <label>默认抠图模式:</label>
-                    <div class="select-wrapper">
-                    <el-select v-model="formData.other_configs.cutout_mode" placeholder="请选择">
-                      <el-option v-for="item in defaultCutoutModeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                    </el-select>
-                    </div>
+              </div>
+              <div class="form-item">
+                <label>默认抠图模式:</label>
+                <div class="select-wrapper">
+                  <el-select v-model="formData.other_configs.cutout_mode" placeholder="请选择">
+                    <el-option v-for="item in defaultCutoutModeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                  </el-select>
                 </div>
-                <div class="form-item">
-                    <label>设备运动速度:</label>
-                    <div class="select-wrapper">
-                    <el-select v-model="formData.other_configs.device_speed" placeholder="请选择">
-                      <el-option v-for="item in deviceSpeedList" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                    </el-select>
-                    </div>
+              </div>
+              <div class="form-item">
+                <label>设备运动速度:</label>
+                <div class="select-wrapper">
+                  <el-select v-model="formData.other_configs.device_speed" placeholder="请选择">
+                    <el-option v-for="item in deviceSpeedList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                  </el-select>
                 </div>
-<!--                <div class="form-item">
-                    <label>运行模式:</label>
-                    <div class="select-wrapper">
-                    <el-select v-model="formData.other_configs.running_mode" placeholder="请选择">
-                      <el-option v-for="item in runModeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                    </el-select>
-                    </div>
-                </div>-->
-          </div>
+              </div>
+
+              <!--                <div class="form-item">
+                                  <label>运行模式:</label>
+                                  <div class="select-wrapper">
+                                  <el-select v-model="formData.other_configs.running_mode" placeholder="请选择">
+                                    <el-option v-for="item in runModeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                                  </el-select>
+                                  </div>
+                              </div>-->
+            </div>
+
+            <other-config/>
+          </template>
       <!--其他设置-->
           <div class="selectBox" style="padding-top: 0px;padding-left: 0;" v-if="activeIndex === 4">
             <actionConfig/>
@@ -123,6 +129,7 @@ import { digiCamControlWEB } from  '@/utils/appconfig'
 import { useCheckInfo } from '@/composables/userCheck';
 import { preview } from '@planckdev/element-plus/utils'
 import actionConfig from './components/action_config.vue'
+import otherConfig from './components/otherConfig'
 useCheckInfo();
 
 // 路由和状态管理初始化

+ 4 - 1
frontend/vite.config.ts

@@ -1,8 +1,11 @@
 import { defineConfig,loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import replace from '@rollup/plugin-replace'
+import config from "./src/config.json";
 import path from 'path'
 
+
+
 // https://vite.dev/config/
 export default ({mode, command})=> {
   const env = loadEnv(mode, process.cwd(), 'API_') as Record<
@@ -61,7 +64,7 @@ export default ({mode, command})=> {
         // 当请求以'/api'开头时,将其代理到目标服务器
         '/api': {
           // 目标服务器的地址
-          target: 'http://dev2.pubdata.cn',
+          target: config.api,
           // 允许更改目标服务器的来源
           changeOrigin: true
         },