接口

src/components/body-d-left/oneL.vue

@@ -1,88 +1,109 @@
 <template>
-    <div>
-        <public-title title="服务详情数据"/>
-        <div class="inner">
-          <div class="type-time">
-              <span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span>
-          </div>
-          <div class="server-container">
-            <div class="server-item" v-for="(item,index) in dataLists" :key="index">
-              <span>{{item.title}}</span>
-              <span>{{item.iphone}}</span>
-            </div>
-          </div>
+  <div>
+    <public-title title="服务详情数据"/>
+    <div class="inner">
+      <div class="type-time">
+                <span
+                    v-for="(item, index) in typeTime"
+                    :key="index"
+                    :class="selectIndex === index ? 'select' : 'unSelect'"
+                    @click="handleSelect(index)"
+                >{{ item.name }}</span
+                >
+      </div>
+      <div class="server-container">
+        <div v-for="(item, index) in dataLists" :key="index" class="server-item">
+          <span>{{ item.title }}</span>
+          <span>{{ item.iphone }}</span>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
-import PublicTitle from "../publicTitle.vue";
+import {onMounted, ref} from 'vue';
+import PublicTitle from '../publicTitle.vue';
+import {list} from './left.api';
+
 const typeTime = ref([
-    {
-      name:'全部',
-      value:'all',
-    },{
-      name:'本年',
-      value:'year',
-    },
-    {
-      name:'本月',
-      value:'month',
-    },
-    {
-      name:'本周',
-      value:'week',
-    }
-  ])
+  {
+    name: '全部',
+    value: 'all',
+  },
+  {
+    name: '本年',
+    value: 'year',
+  },
+  {
+    name: '本月',
+    value: 'month',
+  },
+  {
+    name: '本周',
+    value: 'week',
+  },
+]);
 const dataLists = ref([
   {
-    title:'最新呼入电话',
-    iphone:'18394578789'
+    title: '最新呼入电话',
+    iphone: '18394578789',
   },
   {
-    title:'最新呼入电话',
-    iphone:'18394578789'
+    title: '最新呼入电话',
+    iphone: '18394578789',
   },
   {
-    title:'最新呼入电话',
-    iphone:'18394578789'
+    title: '最新呼入电话',
+    iphone: '18394578789',
   },
   {
-    title:'最新呼入电话',
-    iphone:'18394578789'
+    title: '最新呼入电话',
+    iphone: '18394578789',
   },
-])
-const selectIndex = ref(0)
+]);
+const selectIndex = ref(0);
+onMounted(() => {
+  list({
+    condition: '',
+  }).then(() => {
 
-function handleSelect(index:number){
+  });
+});
+
+function handleSelect(index: number) {
   selectIndex.value = index;
 }
 </script>
 <style scoped lang="less">
 .inner {
-    height: calc(100% - 40px);
-    .server-container{
-      color: #A3A4A4;
-      padding-top: 4%;
-      height: 88%;
-      display: grid;
-      align-items: start;
-      .server-item{
-        font-size: 16px;
-        span{
-          display: inline-block;
-          width: 50%;
-          font-weight: bold;
-        }
-        span:nth-child(1){
-          text-align: left;
-          padding-left: 5%;
-        }
-        span:nth-child(2){
-          text-align: right;
-          padding-right: 6%;
-        }
+  height: calc(100% - 40px);
+
+  .server-container {
+    color: #a3a4a4;
+    padding-top: 4%;
+    height: 88%;
+    display: grid;
+    align-items: start;
+
+    .server-item {
+      font-size: 16px;
+
+      span {
+        display: inline-block;
+        width: 50%;
+        font-weight: bold;
+      }
+
+      span:nth-child(1) {
+        text-align: left;
+        padding-left: 5%;
+      }
+
+      span:nth-child(2) {
+        text-align: right;
+        padding-right: 6%;
       }
     }
+  }
 }
-</style>
+</style>