1

pages/case/index.vue

@@ -0,0 +1,154 @@
+<template>
+
+  <!-- 主体部分 -->
+  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-2">
+    <el-page-header :icon="ArrowLeft" @back="goBack">
+      <template #content>
+        <span class="text-large font-600 line-clamp-1"> 客户案例 </span>
+      </template>
+      <template #extra>
+        <el-space class="flex items-center">
+          <el-input
+            v-model="where.keywords"
+            :placeholder="`搜索关键词`"
+            class="hidden-sm-and-down"
+            :suffix-icon="Search"
+            :style="{ width: inputWidth }"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @change="reload"
+          />
+          <el-button class="hidden-sm-and-up" :icon="Search" @click="showSearch = true"></el-button>
+        </el-space>
+        <el-dialog
+          v-model="showSearch"
+          fullscreen
+        >
+          <el-input
+            v-model="where.keywords"
+            :placeholder="`搜索关键词`"
+            size="large"
+            class="w-full my-5"
+            :suffix-icon="Search"
+            @change="reload"
+          />
+        </el-dialog>
+      </template>
+      <el-row :gutter="24" id="container" class="clearfix">
+        <el-col v-for="(item,index) in list" :key="index" :span="6" :xs="24" class="left mb-8">
+          <el-card shadow="hover" :body-style="{ padding: '0px' }" class="cursor-pointer" @mouseover="showDomain(item)"
+                   @mouseleave="hideDomain">
+            <nuxt-link :to="`/market/${item.websiteId}`">
+              <div class="flex-1 px-4 py-5 sm:p-4 !p-4">
+                <div class="text-gray-700 dark:text-white text-base font-semibold  flex gap-1.5">
+                  <el-avatar
+                    :src="item.websiteLogo" shape="square" :size="55" style="background-color: white;"/>
+                  <div class="flex-1 text-lg cursor-pointer flex flex-col">
+                    {{ item.websiteName }}
+                    <div class="flex justify-between items-center">
+                      <sapn class="text-xs text-gray-400 font-normal line-clamp-1">
+                        {{ id == item.websiteId ? item.domain : item.comments || '暂无描述' }}
+                      </sapn>
+                      <el-button size="small" round>获取</el-button>
+                    </div>
+                  </div>
+                </div>
+                <div class="item-image pt-3 overflow-hidden">
+                  <el-image v-if="item.files" :src="`${JSON.parse(item.files)[0]}`" class="w-full h-1/2 max-h-[220px] transition-transform duration-300 ease-in-out hover:scale-110"/>
+                  <el-image v-else class="w-full h-[220px]"/>
+                </div>
+              </div>
+            </nuxt-link>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-page-header>
+
+    <Pagination :total="total" @done="search"/>
+  </div>
+
+</template>
+<script setup lang="ts">
+import {ArrowLeft, Search} from '@element-plus/icons-vue'
+import type {CmsArticleParam} from "~/api/cms/cmsArticle/model";
+import {pageCmsWebsiteAll} from "~/api/cms/cmsWebsite";
+import type {CmsWebsite, CmsWebsiteParam} from "~/api/cms/cmsWebsite/model";
+
+const route = useRoute();
+const router = useRouter();
+// 页面信息
+const list = ref<CmsWebsite[]>([]);
+const total = ref(0);
+const id = ref<number>();
+const inputWidth = ref<string>('180px');
+const showSearch = ref<boolean>(false);
+
+// 搜索表单
+const where = reactive<CmsWebsiteParam>({
+  keywords: '',
+  page: 1,
+  limit: 12,
+  status: undefined,
+  recommend: undefined,
+  search: true,
+  websiteType: undefined,
+  categoryId: undefined,
+  lang: undefined
+});
+
+const goBack = () => {
+  router.back();
+}
+const handleFocus = () => {
+  inputWidth.value = '400px'; // 聚焦时宽度
+}
+const handleBlur = () => {
+  inputWidth.value = '180px'; // 聚焦时宽度
+}
+
+const showDomain = (item: CmsWebsite) => {
+  id.value = Number(item.websiteId);
+};
+
+const hideDomain = () => {
+  id.value = 0;
+};
+
+// 加载页面数据
+const reload = async () => {
+  await pageCmsWebsiteAll({
+    ...where,
+    plugin: false
+  }).then(response => {
+    if (response?.list) {
+      list.value = response?.list;
+      total.value = response.count;
+    }
+  }).catch(() => {
+  }).finally(() => showSearch.value = false)
+}
+
+/**
+ * 搜索
+ * @param data
+ */
+const search = (data: CmsArticleParam) => {
+  where.page = data.page;
+  reload();
+}
+
+watch(
+  () => route.params.id,
+  () => {
+    reload();
+  },
+  {immediate: true}
+);
+</script>
+<style lang="scss">
+.el-input {
+  transition: width 0.3s ease;
+}
+</style>
+
+