消耗样式

src/views/consume/gold/addCoinConsume.vue

@@ -524,7 +524,8 @@ onMounted(async function () {
 </script>
 
 <template>
-  <div>
+  <div class="father1">
+    <div class="left">
     <el-form :model="addConsume" ref="Ref" :rules="rules" style="max-width: 600px;" class="add-form" label-width="auto" label-position="right">
       <el-form-item prop="jwcode" label="精网号" style="margin-top: 50px">
         <el-input v-model="addConsume.jwcode" style="width: 10vw;"/>
@@ -573,8 +574,9 @@ onMounted(async function () {
       <el-button type="success" @click="resetForm()" style="margin-left: 200px;margin-top:10px">重置</el-button>
       <el-button type="primary" :disabled="addDisabled" @click="addBefore" style="margin-top:10px"> 提交</el-button>
     </el-form>
+  </div>
 
-
+<div class="right">
     <!-- 客户信息栏 -->
     <el-card v-if="user.jwcode" style="width: 800px; float: right" class="customer-info">
       <el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left">
@@ -779,13 +781,7 @@ onMounted(async function () {
     </el-dialog>
 
   </div>
-
-  <!-- 金币消耗明细的布局------------------------------------------------------- -->
-  <!-- <div v-else-if="activeTab === 'detail'"> -->
-
-  <!-- </div>
-  </div> -->
-
+  </div>
 </template>
 
 
@@ -825,14 +821,6 @@ p {
   margin-bottom: 14px;
 }
 
-.customer-info {
-  width: 700px;
-  float: right;
-  margin-right: 200px;
-  margin-top: 100px;
-}
-
-
 .field-label {
   font-size: 14px;
   color: #606266;
@@ -850,4 +838,31 @@ p {
   justify-content: center;
   gap: 12px;
 }
+
+.father1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .left {
+    width: 35%;
+    float: left;
+    align-items: center;
+  }
+
+  .right {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .customer-info {
+      width: 80%;
+      height: 70%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
 </style>

src/views/consume/gold/coinConsume.vue

@@ -1,39 +1,33 @@
 <template>
-  <div>
-    <!-- 这里放置标签切换的按钮 -->
+
+  <div class="fatherTop">
     <el-button-group>
-      <!-- 切换后状态显示 primary 样式否则是默认样式 -->
-      <el-button
-          :type="activeTab === 'addCoinConsume' ? 'primary' : 'default'"
-          @click="navigateTo('addCoinConsume')"
-          :disabled="!hasAdd"
-      >
+      <el-button :type="activeTab === 'addCoinConsume' ? 'primary' : 'default'" @click="navigateTo('addCoinConsume')"
+        :disabled="!hasAdd">
         新增消耗
       </el-button>
-      <el-button
-          :type="activeTab === 'coinConsumeDetail' ? 'primary' : 'default'"
-          @click="navigateTo('coinConsumeDetail')"
-          :disabled="!hasDetail"
-      >
+      <el-button :type="activeTab === 'coinConsumeDetail' ? 'primary' : 'default'"
+        @click="navigateTo('coinConsumeDetail')" :disabled="!hasDetail">
         金币消耗明细
       </el-button>
     </el-button-group>
-    <!-- 渲染子路由组件 -->
+  </div>
+  <div class="fatherBottom">
     <router-view></router-view>
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref, watch} from 'vue';
-import {useRoute, useRouter} from 'vue-router';
-import {storeToRefs} from "pinia";
-import {useAdminStore} from "@/store/index.js";
-import {hasMenuPermission, permissionMapping} from "@/utils/menuTreePermission.js";
+import { onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { storeToRefs } from "pinia";
+import { useAdminStore } from "@/store/index.js";
+import { hasMenuPermission, permissionMapping } from "@/utils/menuTreePermission.js";
 
 const router = useRouter();
 const route = useRoute();
 const adminStore = useAdminStore();
-const {menuTree} = storeToRefs(adminStore);
+const { menuTree } = storeToRefs(adminStore);
 
 const activeTab = ref('');
 const hasAdd = ref(false);
@@ -41,7 +35,7 @@ const hasDetail = ref(false);
 // 导航方法
 const navigateTo = (name) => {
   activeTab.value = name;
-  router.push({name});
+  router.push({ name });
 };
 
 
@@ -87,3 +81,15 @@ onMounted(() => {
   }
 });
 </script>
+<style lang="scss">
+.fatherTop {
+  width: 100%;
+  height: 6%;
+  float: left;
+}
+
+.fatherBottom {
+  width: 100%;
+  height: 90%;
+}
+</style>

src/views/consume/gold/coinConsumeDetail.vue

@@ -90,33 +90,8 @@ const sortField = ref('')
 const sortOrder = ref('')
 
 // 消费平台选项
-const consumePlatform = [
-  {
-    value: '金币系统',
-    label: '金币系统'
-  },
-
-  {
-    value: 'HomilyChart',
-    label: 'HomilyChart'
-  },
-  {
-    value: 'HomilyLink',
-    label: 'HomilyLink'
-  },
-  {
-    value: 'ERP',
-    label: 'ERP'
-  },
-  {
-    value: '其他',
-    label: '其他'
-  },
-  {
-    value: '初始化金币',
-    label: '初始化金币'
-  },
-]
+const consumePlatform = ref([]);
+
 // 合计数的显示数据
 const tableDataTotal = ref({})
 
@@ -157,21 +132,21 @@ const getAdminData = async function () {
     console.log('请求失败', error)
   }
 }
-// // 平台
-// const getPlatformData = async function () {
-//   try {
-//     const result = await request({
-//       url: '/general/platform',
-//     })
-//     if (result.code === 200){
-//       consumePlatform.value = result.data
-//       console.log('平台信息', consumePlatform.value)
-//       console.log('请求成功', result)
-//     }
-//   } catch (error) {
-//     console.log('请求失败', error)
-//   }
-// }
+// 平台
+const getPlatformData = async function () {
+  try {
+    const result = await request({
+      url: '/general/platform',
+    })
+    if (result.code === 200){
+      consumePlatform.value = result.data
+      console.log('平台信息', consumePlatform.value)
+      console.log('请求成功', result)
+    }
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
 
 
 const ConsumeSelectBy = async function (val) {
@@ -429,7 +404,7 @@ onMounted(async function () {
   // getActivity();
   await getMarket()
   await getGoods()
-  // await getPlatformData()
+  await getPlatformData()
 })
 
 
@@ -576,7 +551,7 @@ const getMarket = async function () {
 </script>
 
 <template>
-      <el-card style="margin-bottom: 20px;margin-top:10px">
+      <el-card style="margin-bottom: 10px;height: 15%;">
         <el-row style="margin-bottom: 10px">
           <el-col :span="5">
             <div class="head-card-element">
@@ -589,7 +564,7 @@ const getMarket = async function () {
               <el-text class="mx-1" size="large">商品名称：</el-text>
               <el-select v-model="consumeUser.goodsName" placeholder="请选择商品名称" style="width: 180px" clearable>
                 <!-- 修改 v-for 绑定逻辑 -->
-                <el-option v-for="(item, index) in goods" :key="index" :label="item " :value="item" />
+                <el-option v-for="(item, index) in goods" :key="item.id" :label="item.goodsname " :value="item.goodsname" />
               </el-select>
             </div>
           </el-col>
@@ -602,7 +577,7 @@ const getMarket = async function () {
             <div class="head-card-element">
               <el-text class="mx-1" size="large">消耗平台：</el-text>
               <el-select v-model="consumeUser.payPlatform" placeholder="请选择消耗平台" style="width: 180px" clearable>
-                <el-option v-for="item in consumePlatform" :key="item.value" :label="item.label" :value="item.value"/>
+                <el-option v-for="item in consumePlatform" :key="item.id" :label="item.platform" :value="item.platform" />
               </el-select>
             </div>
           </el-col>
@@ -644,8 +619,8 @@ const getMarket = async function () {
           任务金币：{{ format3(Math.abs(taskGolds)) }}
         </div>
         <!-- 设置表格容器的高度和滚动样式 -->
-        <div style="height: 576px; overflow-y: auto">
-          <el-table :data="tableData" style="width: 100%" height="576px" @sort-change="handleSortChange">
+        <div style="height: 540px; overflow-y: auto">
+          <el-table :data="tableData" style="width: 100%;height: 100%" @sort-change="handleSortChange">
             <el-table-column type="index" label="序号" width="80px" fixed="left">
               <template #default="scope">
                 <span>{{