政务云找回

front/src/views/home/components/GovernmentCloudResources.vue

@@ -2,36 +2,59 @@
  * @Author: Light
  * @Date: 2022-11-16 16:46:16
  * @LastEditors: Light
- * @LastEditTime: 2022-11-17 09:46:45
+ * @LastEditTime: 2022-11-21 10:54:23
  * @Description: 政务云资源列表
 -->
 <template>
   <div class="top">
-    <div>检索结果：60项</div>
+    <div>检索结果：{{ props.governmentCloud.total }}项</div>
     <div>
       使用声明:
       附加增值服务，委办局单位可以根据自身需求，按需采购，由采购单位付费。
     </div>
   </div>
-  <div class="bottom">
+  <div
+    class="bottom"
+    v-for="(item, index) in props.governmentCloud.data"
+    :key="item.service_item_tier1 + index"
+  >
     <div class="left"></div>
     <div class="right">
       <div class="title">
         <div>
-          <div class="name">云主机</div>
-          <div class="type">基础服务</div>
+          <div class="name">{{ item.service_item_tier1 }}</div>
+          <div class="type">{{ item.service_type }}</div>
         </div>
-        <div>年份：2022</div>
+        <div>年份：{{ item.year }}</div>
       </div>
-      <div class="text">云主机配置</div>
+      <div class="text">{{ item.service_description }}</div>
       <div class="info">
-        <div>一级条目：主机服务</div>
-        <div>规格：1H2G</div>
+        <div>一级条目：{{ item.service_item_tier2 }}</div>
+        <div>规格：{{ item.specification }}</div>
       </div>
     </div>
   </div>
+  <a-pagination
+    v-model:current="current"
+    :pageSize="5"
+    :total="props.governmentCloud.total"
+    :showSizeChanger="false"
+    @change="changeCurrent"
+    show-less-items
+  />
 </template>
-<script setup></script>
+<script setup>
+  import { ref, defineProps, defineEmits } from 'vue'
+  const props = defineProps({
+    governmentCloud: { type: Object, default: null },
+  })
+  const emit = defineEmits(['getGovernmentCloud'])
+  const current = ref(props.governmentCloud.current)
+  const changeCurrent = (current) => {
+    console.log(current)
+    emit('getGovernmentCloud', current)
+  }
+</script>
 <style lang="less" scoped>
   .top {
     display: flex;