首页-banner

src/service/BannerService/index.ts

+import baseAxios from '../index'
+
+export function queryBannerList(data: { location: string }) {
+  return baseAxios<{
+    count: number
+    file_name: string[]
+  }>({
+    url: '/banner/query/list',
+    method: 'get',
+    params: data,
+  })
+}

src/service/FileService/index.ts

+export function getImageSrcFromFileHash(file_hash: string) {
+  return `/proxyApi/api/v1/image/show?file_hash=${file_hash}`
+}

src/views/withMenu/Home/Banner/Banner.vue

@@ -6,7 +6,7 @@
   </van-swipe>
 </template>
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 import { Image } from "vant";
 
 export default defineComponent({
@@ -15,7 +15,7 @@ export default defineComponent({
   },
   props: {
     bannerUrls: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default() {
         return [
           "https://img01.yzcdn.cn/vant/apple-1.jpg",
@@ -28,11 +28,14 @@ export default defineComponent({
 </script>
 
 <style scoped lang="less">
+.my-swipe {
+  min-height: 200px;
+}
 .my-swipe .van-swipe-item {
   color: #fff;
   font-size: 20px;
   line-height: 100px;
   text-align: center;
-  background-color: #818c92;
+  background-color: #e8edf0;
 }
 </style>

src/views/withMenu/Home/index.vue

 <template>
   <div class="page flex-col">
     <div class="outer1 flex-col">
-      <Banner class="w-full overflow-hidden" />
+      <Banner class="w-full overflow-hidden" :bannerUrls="bannerList" />
       <AppList :appList="appList" class="mt-7" />
       <Notify class="mt-2.5" />
       <!-- <group-title class="mt-7" title="精选理财" /> -->
       <!-- <div class="mx-5 flex justify-between mt-5">
         <FnsCard v-for="(item, index) in loopData0" :item="item" :key="index" />
-      </div> -->
-      <group-title class="mt-7" title="热门贷款" @click="$router.push({name: 'Loan'})"/>
+      </div>-->
+      <group-title class="mt-7" title="热门贷款" @click="$router.push({ name: 'Loan' })" />
       <LoanCard class="mt-5" />
       <group-title class="mt-7" title="精彩直播" />
       <LiveCard class="mt-4" />
@@ -16,17 +16,17 @@
       <img
         class="mx-5 mt-5"
         src="https://alipic.lanhuapp.com/SketchPng94bbf087d5f40926bfd40b724cb11350e55eec2bd48ad126dcc60c87d685ff2d"
-        alt=""
+        alt
         @click="$router.push('ActivityDetail')"
       />
-      <group-title class="mt-7" title="热门资讯"  @click="$router.push('News')" />
+      <group-title class="mt-7" title="热门资讯" @click="$router.push('News')" />
       <HotNews v-for="n in 2" :key="n" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import  { defineComponent } from "vue";
+import { defineComponent } from "vue";
 import Banner from "./Banner/Banner.vue";
 import AppList from "./AppList/index.vue";
 import appList from "./appList";
@@ -37,6 +37,8 @@ import FnsCard from "./FnsCard/index.vue";
 import LoanCard from "@/components/Loan/LoanCard/index.vue";
 import LiveCard from "@/components/LiveCard/index.vue";
 import HotNews from "@/components/HotNews/index.vue";
+import { queryBannerList } from "@/service/BannerService";
+import { getImageSrcFromFileHash } from "@/service/FileService";
 
 export default defineComponent({
   components: {
@@ -53,6 +55,7 @@ export default defineComponent({
   data() {
     return {
       appList,
+      bannerList: [] as string[],
       loopData0: [
         {
           lanhutext0: "货币市场基金",
@@ -76,6 +79,20 @@ export default defineComponent({
       constants: {},
     };
   },
+  mounted(){
+    this.fetchBannerList();
+  },
+  methods: {
+    async fetchBannerList() {
+      const ret = await queryBannerList({ location: '1' });
+      if (ret.code === 200) {
+        const list = ret.data.file_name.map(i => {
+          return getImageSrcFromFileHash(i)
+        })
+        this.bannerList = list;
+      }
+    }
+  }
 });
 </script>
 <style scoped>