fashion-ssr-vue3/pages/blog/index.vue

<script lang='ts' setup>
import { submitSubscribeApi } from '~/api/model/common'
import { PageSizeEnum } from '~/enums/sizeEnum'
import {
  getBlogsListApi,
} from '~/api/model/blogs'

const list = ref<any>([])
const currentPage = ref(PageSizeEnum.PAGE)
const total = ref()
const page_size = ref(9)
const categories = ref(
  [
    {
      key: '',
      title: 'All',
      slug: 'all',
    },
    {
      key: 'instructions',
      title: 'Security settings instructions',
      slug: 'instructions',
    },
    {
      key: 'settings',
      title: 'Multiple account settings',
      slug: 'settings',
    },
  ],
)
const category = ref('')
const form = ref<any>({
  mail: '',
})
async function getVideoOrBlogsList(pageNo = currentPage.value, pageSize = page_size.value) {
  const params = {
    pageNo,
    pageSize,
    categoryId: category.value,
    orderBy: 'createTime',
    orderType: 'desc',
  }
  const res: any = await getBlogsListApi(params)
  total.value = res.total
  currentPage.value = res.current
  list.value = res.records
}
getVideoOrBlogsList()
async function submitSubscribe() {
  try {
    await submitSubscribeApi(form.value)
    ElMessage.success(`You've subscribed successfully.`)
    form.value.mail = ''
  }
  catch (error) {
    console.log(error)
  }
}
function onSelectCategory(item: any) {
  category.value = item.key
  currentPage.value = PageSizeEnum.PAGE
  getVideoOrBlogsList(currentPage.value, page_size.value)
}
function changePage(current: number, size: number) {
  getVideoOrBlogsList(current, size)
}
const validateEmail = computed(() => {
  const emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
  if (!form.value.mail)
    return true
  return emailReg.test(form.value.mail)
})
</script>

<template>
  <div>
    <div class="pt-184px pb-50px bg-#F3F4FB text-center">
      <h2 class="text-60px fw-800 ls-2 text-#333 inline-block pos-relative custom-title-font">
        EJET Spark  <span class="custom-title-bg03">Blog</span>
        <img src="@/assets/images/blog_icon05.png" class="w-90px h-90px pos-absolute top--10px left--120px" alt="" srcset="">
        <img src="@/assets/images/blog_icon06.png" class="w-70px h-70px pos-absolute top--20px right--100px" alt="" srcset="">
      </h2>
      <div class="pos-relative w-500px mx-auto mb-60px mt-40px">
        <el-input v-model.trim="form.mail" class="custom-input h-46px !b-rd-200px overflow-hidden" placeholder="Please enter your email address" />
        <el-button :disabled="!validateEmail || !form.mail" type="primary" class="!bg-#9B6CFF text-#fff pos-absolute !b-0px top-50% transform-translate-y--50% right-10px w-120px !text-16px !b-rd-150px" @click="submitSubscribe">
          Subscribe
        </el-button>
      </div>

      <div class="flex gap-30px justify-center">
        <div
          v-for="(item, index) in categories"
          :key="index"
          class="h-60px lh-60px px-30px b-rd-200px text-16px cursor-pointer hover:bg-#EAE5FA hover:text-#9B6CFF transition-all duration-300"
          :class="
            category === item.key
              ? '!bg-#EAE5FA !text-#9B6CFF'
              : 'bg-#fff text-#333'
          "
          @click="onSelectCategory(item)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="pt-120px w-1200-auto">
      <div class="grid grid-cols-3 gap-col-40px gap-row-60px ">
        <div v-for="item, index in list" :key="index">
          <common-blog-item :item="item" />
        </div>
      </div>
      <div class="mt-60px flex justify-center">
        <el-pagination
          v-model:current-page="currentPage" :page-size="page_size" :pager-count="10"
          layout="prev, pager, next" :total="total" @change="changePage"
        />
      </div>
    </div>
    <AppFooter />
  </div>
</template>

<style lang='less' scoped>
::v-deep(.custom-input){
  .el-input__wrapper{
    border-radius:4px!important;
    padding: 7px 10px!important;
    color: #999;
    font-size: 16px;
    box-shadow: unset!important;
  }
}
</style>