新增接口

src/services/ConfigService.ts

+import Api,{ HttpResponse, Result } from './../utils/request';
+
+/**
+ * 配置相关方法
+ */
+class ConfigService{
+
+    /**
+     * 
+     * @returns 获取模板查询条件
+     */
+    static async GetTemplateQueryAsync():Promise<HttpResponse>{
+        return Api.Post("triptemplate_GetTemplateConfigData",{})
+    }
+
+ 
+    /**
+     * 获取模板市场分页列表
+     */
+    static async GetTemplagePageAsync(params : any):Promise<HttpResponse>{
+        return Api.Post("triptemplate_GetTripTemplatePage",params);
+    }
+}
+export default ConfigService;
\ No newline at end of file

src/views/Market/Index.vue

@@ -17,17 +17,34 @@
             <div class="q-mt-lg bg-white q-pa-lg rounded">
                 <div class="row text-small items-center">
                     <span style="margin-right: 50px;">适用线路：</span>
-                    <el-check-tag :checked="queryObj.lineId == 0" @change="onLineChangeHandler(0)"
+                    <el-check-tag :checked="queryObj.LineId == 0" @change="onLineChangeHandler(0)"
                         class="text-small q-mr-md">全部</el-check-tag>
-                    <el-check-tag :checked="queryObj.lineId == x.LineID" @change="onLineChangeHandler(x.LineID)" class="text-small q-mr-md"
-                        v-for="x in lines" :key="x.LineID">{{x.LineName}}</el-check-tag>
+                    <el-check-tag :checked="queryObj.LineId == x.LineID" @change="onLineChangeHandler(x.LineID)"
+                        class="text-small q-mr-md" v-for="x in lines" :key="x.LineID">{{x.LineName}}</el-check-tag>
                 </div>
                 <el-divider style="margin:12px 0;border-top-color:#f3f6fb;"></el-divider>
                 <div class="row text-small items-center">
                     <span style="margin-right: 50px;">适用国家：</span>
-                    <el-check-tag :checked="queryObj.CountryName == ''" @change="onCountryNameChangeHandler('')" class="text-small q-mr-md">通用</el-check-tag>
-                    <el-check-tag :checked="queryObj.CountryName == x" @change="onCountryNameChangeHandler(x)" class="text-small q-mr-md"
-                        v-for="(x,i) in countries" :key="i">{{x}}</el-check-tag>
+                    <el-check-tag :checked="queryObj.CountryName == ''" @change="onCountryNameChangeHandler('')"
+                        class="text-small q-mr-md">通用</el-check-tag>
+                    <el-check-tag :checked="queryObj.CountryName == x" @change="onCountryNameChangeHandler(x.CountryName)"
+                        class="text-small q-mr-md" v-for="(x,i) in countries" :key="i">{{x.CountryName}}</el-check-tag>
+                </div>
+                <el-divider style="margin:12px 0;border-top-color:#f3f6fb;"></el-divider>
+                <div class="row text-small items-center">
+                    <span style="margin-right: 50px;">季节：</span>
+                    <el-check-tag :checked="queryObj.SeasonName == ''" @change="onSeasonNameChangeHandler('')"
+                        class="text-small q-mr-md">通用</el-check-tag>
+                    <el-check-tag :checked="queryObj.SeasonName == x" @change="onSeasonNameChangeHandler(x.SeasonName)"
+                        class="text-small q-mr-md" v-for="(x,i) in seasonArr" :key="i">{{x.SeasonName}}</el-check-tag>
+                </div>
+                <el-divider style="margin:12px 0;border-top-color:#f3f6fb;"></el-divider>
+                <div class="row text-small items-center">
+                    <span style="margin-right: 50px;">颜色：</span>
+                    <el-check-tag :checked="queryObj.ColorName == ''" @change="onColorNameChangeHandler('')"
+                        class="text-small q-mr-md">通用</el-check-tag>
+                    <el-check-tag :checked="queryObj.ColorName == x" @change="onColorNameChangeHandler(x.ColorName)"
+                        class="text-small q-mr-md" v-for="(x,i) in colorArr" :key="i">{{x.ColorName}}</el-check-tag>
                 </div>
             </div>
         </div>
@@ -35,56 +52,133 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "vue";
-import LineService from '@/services/LineService'
-import { userStore } from "@/store/user";
-import { storeToRefs } from "pinia";
+    import {
+        reactive,
+        ref
+    } from "vue";
+    import LineService from '@/services/LineService'
+    import ConfigService from '@/services/ConfigService'
+    import {
+        userStore
+    } from "@/store/user";
+    import {
+        storeToRefs
+    } from "pinia";
 
-const {userInfo} = storeToRefs(userStore())
-const lines = ref([] as Array<any>)
-const countries = ref(['日本','韩国','老挝','法国','意大利'] as Array<any>)
-const queryObj = reactive({
-    lineId: 0,
-    Title: '',
-    CountryName:''
-})
+    const {
+        userInfo
+    } = storeToRefs(userStore())
+    const lines = ref([] as Array < any > ) //线路
+    const countries = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
+    const colorArr = ref([] as Array < any > ); //颜色
+    const seasonArr = ref([] as Array < any > ); //季节
+    const queryObj = reactive({
+        pageIndex: 1,
+        pageSize: 10,
+        LineId: 0,
+        Title: '',
+        CountryName: '',
+        SeasonName: '',
+        ColorName: ''
+    })
+
+    /***
+     * 获取模板市场分页列表
+     */
+    const queryTemplateBySearchHandler = () => {
+        try {
+            let pageRes = ConfigService.GetTemplagePageAsync(queryObj);
+            console.log("queryTemplateBySearchHandler", pageRes);
+        } catch (error) {
 
-const queryTemplateBySearchHandler = () => { }
-const onLineChangeHandler = (lineId: number) => {
-    queryObj.lineId = lineId
-}
-const onCountryNameChangeHandler = (CountryName: string) => {
-    queryObj.CountryName = CountryName
-}
-const getLinesHandler = async ()=>{
-    try {
-        let response = await LineService.GetLineListAsync()
-        if(response.data.resultCode==1){
-            lines.value= response.data.data
-            console.log(lines.value)
         }
-    } catch (error) { }
-}
-getLinesHandler()
+    }
+
+    //线路切换
+    const onLineChangeHandler = (lineId: number) => {
+        queryObj.lineId = lineId;
+        queryTemplateBySearchHandler();
+    }
+    //国家切换
+    const onCountryNameChangeHandler = (CountryName: string) => {
+        queryObj.CountryName = CountryName;
+        queryTemplateBySearchHandler();
+    }
+
+    //季节切换
+    const onSeasonNameChangeHandler = (SeasonName: string) => {
+        queryObj.SeasonName = SeasonName;
+        queryTemplateBySearchHandler();
+    }
+
+    //颜色切换
+    const onColorNameChangeHandler = (ColorName: string) => {
+        queryObj.ColorName = ColorName;
+        queryTemplateBySearchHandler();
+    }
+
+    /**
+     * 获取线路列表
+     */
+    const getLinesHandler = async () => {
+        try {
+            let response = await LineService.GetLineListAsync()
+            if (response.data.resultCode == 1) {
+                lines.value = response.data.data;
+            }
+        } catch (error) {
+            console.log("getLinesHandler", error);
+        }
+    }
+
+    /**
+     * 获取模板市场查询条件
+     */
+    const getTemplateQuery = async () => {
+        try {
+            let res = await ConfigService.GetTemplateQueryAsync();
+            if (res.data.resultCode == 1) {
+                var tempData = res.data.data;
+                //国家
+                if (tempData && tempData.CountryList) {
+                    countries.value = tempData.CountryList;
+                }
+                //颜色
+                if (tempData && tempData.ColorList) {
+                    colorArr.value = tempData.ColorList;
+                }
+                //季节
+                if (tempData && tempData.SeasonList) {
+                    seasonArr.value = tempData.SeasonList;
+                }
+            }
+        } catch (error) {
+            console.log("getTemplateQuery", error);
+        }
+    }
+
+    getLinesHandler();
+    getTemplateQuery();
 </script>
 
 <style>
-@import url('../../assets/styles/common.css');
+    @import url('../../assets/styles/common.css');
 
-@font-face {
-    font-family: "alifont";
-    font-weight: 400;
-    src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/285OveHVCHM7.woff2") format("woff2"),
-        url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
-    font-display: swap;
-}
+    @font-face {
+        font-family: "alifont";
+        font-weight: 400;
+        src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/285OveHVCHM7.woff2") format("woff2"),
+            url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
+        font-display: swap;
+    }
 
-.alifont {
-    font-family: alifont;
-}
+    .alifont {
+        font-family: alifont;
+    }
 
-.el-check-tag {
-    background: #FFF;
-    font-weight: 500 !important;
-    font-size: 12px !important;
-}</style>
+    .el-check-tag {
+        background: #FFF;
+        font-weight: 500 !important;
+        font-size: 12px !important;
+    }
+</style>
\ No newline at end of file