refactor: 整理代码，清除无用代码

app.vue

@@ -3,7 +3,6 @@
 <script setup>
 import '@unocss/reset/tailwind.css'
 import LoginModal from '~/components/common/login/index.vue'
-import MessageModal from '~/components/common/message/index.vue'
 
 const router = useRouter()
 router.beforeEach(() => {
@@ -62,7 +61,6 @@ useHead({
   <NuxtLayout>
     <NuxtPage />
     <LoginModal />
-    <MessageModal />
   </NuxtLayout>
 </template>
 

components/AppFooter.vue

@@ -1,5 +1,4 @@
 <script lang='ts' setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 </script>
 
 <template>

components/AppHeader.vue

@@ -11,29 +11,24 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div class="flex justify-between h-42px  w-1400px mx-auto">
+  <div class="flex justify-between items-center z-100 px-20px h-48px pos-fixed top-40px w-1200-auto left-50% translate-x--50% bg-#fff rd-190px b-1px b-solid b-#fff backdrop-blur-10px">
     <div class="flex items-center">
       <NuxtLink to="/">
         <img
           src="~/assets/images/ejet_logo.png"
           alt="logo"
-          class="w-200px h-31px cursor-pointer"
+          class="w-140px h-24px cursor-pointer"
         >
       </NuxtLink>
     </div>
+    <div class="mx-auto">
+      jsgha
+    </div>
     <div class="flex items-center ">
-      <!-- 使用 t 方法获取翻译文本 -->
-      {{ t('Popular_test') }}
-      <!-- <NuxtLink to="/" class="hover:underline">
-        SELL ON EJET
-      </NuxtLink> -->
+      <!-- {{ t('Popular_test') }}
       <div class="w-1px bg-#D8D8D8 h-20px mx-20px" />
-      <select-lang />
-      <!-- <div class="w-1px bg-#D8D8D8 h-20px mx-20px" v-if="isLogin"/>
-      <NuxtLink v-if="isLogin" to="/cart">
-        <svgo-cart class="!w-24px !h-24px ml-20px" />
-      </NuxtLink> -->
-      <user-avatar class="ml-30px" />
+      <common-select-lang /> -->
+      <common-user-avatar class="ml-30px" />
     </div>
   </div>
 </template>

components/LanguageSwitcher.vue

@@ -1,28 +0,0 @@
-<script setup>
-const { locale, locales, setLocale } = useI18n()
-
-const availableLocales = computed(() => {
-  return (locales.value)
-})
-
-function updateLocale(event) {
-  setLocale(event.target.value)
-  window.location.reload()
-}
-
-onMounted(() => {
-  const langSwitcher = document.querySelector('#langSwitcher')
-  langSwitcher.value = locale.value
-})
-</script>
-
-<template>
-  <div flex gap2 items-center mt-5>
-    Language:
-    <select id="langSwitcher" rounded-md text-sm p-1 @change="updateLocale">
-      <option v-for="loc in availableLocales" :key="loc.code" :value="loc.code" p-1>
-        {{ loc.name }}
-      </option>
-    </select>
-  </div>
-</template>

components/banner-category-sider/index.vue

@@ -1,59 +0,0 @@
-<script lang='ts' setup>
-defineProps({
-  isOpen: {
-    type: Boolean,
-    default: false,
-  },
-})
-const emit = defineEmits(['click'])
-const list = defineModel('list', {
-  type: Array as PropType<any[]>,
-  default: () => [],
-})
-const activeIndex = defineModel('activeIndex', {
-  type: String,
-  default: '',
-})
-
-function handleSelect(value: any) {
-  activeIndex.value = value
-  emit('click', value)
-}
-</script>
-
-<template>
-  <div>
-    <el-menu
-      :unique-opened="true"
-      :default-active="activeIndex"
-      active-text-color="#CC9879"
-      class="el-menu-banner-slider"
-      @select="handleSelect"
-    >
-      <el-menu-item
-        v-for="item, index in list" :key="index"
-        :index="item.key"
-      >
-        {{ item.title }}
-      </el-menu-item>
-    </el-menu>
-  </div>
-</template>
-
-<style lang='less' scoped>
-::v-deep(.el-menu-banner-slider){
-  // 继承
-  background-color: inherit!important;
-    .el-menu-item{
-      margin-bottom: 30px;
-      padding: 0!important;
-      height: 16px!important;
-      font-size: 16px!important;
-      line-height: normal!important;
-      color: #333;
-      &:last-child{
-        margin-bottom: 0;
-      }
-    }
-}
-</style>

components/business/account/favourite/brands.vue

@@ -1,55 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { getCollectBrandsListApi } from '@/api/model/my'
-import { PageSizeEnum } from '~/enums/sizeEnum'
-
-const props = defineProps<{
-  activeName: string
-}>()
-const list = ref<any[]>([])
-const currentPage = ref(PageSizeEnum.PAGE)
-const total = ref()
-const page_size = ref(8)
-watch(() => props.activeName, (newVal) => {
-  if (newVal === 'following')
-    getCollectBrandsList()
-}, { immediate: true })
-
-async function getCollectBrandsList(pageNo = currentPage.value, pageSize = page_size.value) {
-  const data: any = await getCollectBrandsListApi({
-    pageNo,
-    pageSize,
-  })
-  total.value = data.total
-  currentPage.value = data.current
-  list.value = data.records
-}
-function changePage(current: number, size: number) {
-  getCollectBrandsList(current, size)
-}
-</script>
-
-<template>
-  <div class="min-h-400px flex items-center">
-    <div v-if="list.length">
-      <div class="grid grid-gap-y-41px grid-gap-x-55px grid-cols-4">
-        <div v-for="item in list" :key="item.id">
-          <common-brand-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>
-    <common-empty v-else />
-  </div>
-</template>
-
-<style lang="less" scoped></style>

components/business/account/favourite/products.vue

@@ -1,55 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { getCollectionGoodsListApi } from '@/api/model/my'
-import { PageSizeEnum } from '~/enums/sizeEnum'
-
-const props = defineProps<{
-  activeName: string
-}>()
-const list = ref<any[]>([])
-const currentPage = ref(PageSizeEnum.PAGE)
-const total = ref()
-const page_size = ref(8)
-
-async function getCollectProductsList(pageNo = currentPage.value, pageSize = page_size.value) {
-  const data: any = await getCollectionGoodsListApi({
-    pageNo,
-    pageSize,
-  })
-  total.value = data.total
-  currentPage.value = data.current
-  list.value = data.records
-}
-function changePage(current: number, size: number) {
-  getCollectProductsList(current, size)
-}
-
-watch(() => props.activeName, (newVal) => {
-  if (newVal === 'products')
-    getCollectProductsList()
-}, { immediate: true })
-</script>
-
-<template>
-  <div class="min-h-400px flex items-center">
-    <div v-if="list.length">
-      <div class="grid grid-gap-40px grid-cols-4">
-        <div v-for="item in list" :key="item.id">
-          <common-goods-item :item />
-        </div>
-      </div>
-      <div class="mt-60px flex justify-center">
-        <el-pagination
-          :page-size="page_size"
-          :pager-count="10"
-          layout="prev, pager, next"
-          :total="total" @change="changePage"
-        />
-      </div>
-    </div>
-    <common-empty v-else />
-  </div>
-</template>
-
-<style lang="less" scoped></style>

components/business/account/icon-group.vue

@@ -1,25 +0,0 @@
-<script lang='ts' setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-
-defineProps({
-  icon: {
-    type: String,
-    default: '',
-  },
-})
-</script>
-
-<template>
-  <div class="">
-    <svgo-dashboard v-if="icon === 'dashboard'" class="!w-22px !h-22px" />
-    <svgo-rfqs v-if="icon === 'rfqs'" class="!w-20px !h-20px" />
-    <svgo-favorite v-if="icon === 'favourite'" class="!w-22px !h-22px" />
-    <svgo-order v-if="icon === 'order'" class="!w-22px !h-22px" />
-    <svgo-notice v-if="icon === 'notice'" class="!w-22px !h-22px" />
-    <svgo-message v-if="icon === 'message'" class="!w-22px !h-22px" />
-    <svgo-setting v-if="icon === 'setting'" class="!w-22px !h-22px" />
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/business/account/left.vue

@@ -1,89 +0,0 @@
-<script lang='ts' setup>
-import defaultAvatar from '~/assets/icons/user.svg'
-import { useUserStore } from '~/stores/modules/user'
-
-const userStore = useUserStore()
-const { avatar, nickname } = storeToRefs(userStore)
-const route = useRoute()
-const activeMenu = ref('')
-
-const menus = [
-  { icon: 'dashboard', title: 'Dashboard', path: '/account/panel' },
-  { icon: 'rfqs', title: 'RFQs', path: '/account/rfqs' },
-  { icon: 'favourite', title: 'Favourites', path: '/account/favourites', query: 'tab=products' },
-  { icon: 'order', title: 'Orders', path: '/account/orders', query: 'tab=submitted' },
-  // { icon: 'message', title: 'Messages', path: '/account/messages' },
-  { icon: 'notice', title: 'Notice', path: '/account/notice' },
-  { icon: 'setting', title: 'Settings', path: '/account/settings', query: 'tab=profile' },
-]
-watch(() => route.path, (path) => {
-  activeMenu.value = path
-}, {
-  immediate: true,
-  deep: true,
-})
-</script>
-
-<template>
-  <div class="py-30px px-20px">
-    <div class="mb-40px">
-      <div class="flex justify-center">
-        <img v-if="avatar" :src="avatar" class="w-60px h-60px b-rd-50% mb-10px" alt="" srcset="">
-        <svgo-user v-else class="!w-60px !h-60px b-rd-50%" />
-      </div>
-      <div class="mt-16px mb-10px text-#111 overflow-hidden text-ellipsis line-clamp-1'">
-        {{ nickname }}
-      </div>
-      <!-- <div class="text-#D98808 flex items-center justify-center">
-        <img src="~/assets/images/my_vip.png" class="w-20px h-16px mr-4px" alt="" srcset="">
-        V1
-      </div> -->
-    </div>
-
-    <el-menu :default-active="activeMenu" class="el-menu-vertical-my">
-      <el-menu-item v-for="item in menus" :key="item.path" :index="item.path">
-        <el-icon>
-          <business-account-icon-group :icon="item.icon" />
-        </el-icon>
-        <template #title>
-          <nuxt-link :to="`${item.path}${item.query ? `?${item.query}` : ''}`" class="ml-4px">
-            {{ item.title }}
-          </nuxt-link>
-        </template>
-      </el-menu-item>
-    </el-menu>
-  </div>
-</template>
-
-<style lang='less' scoped>
-.el-menu-vertical-my {
-    .el-menu-item {
-        padding-left: unset !important;
-        padding-right: unset !important;
-        color: #999!important;
-        background-color: #FAFAFA;
-        &:hover{
-            color:#C58C64!important;
-            background-color: #FAFAFA!important;
-        }
-        a {
-            color: #999999;
-            font-size: 18px;
-             &:hover{
-                color: #C58C64!important;
-            }
-        }
-
-        &.is-active {
-            color: #C58C64!important;
-            a {
-                color: #C58C64;
-                &.router-link-active {
-                    color:#C58C64;
-                }
-            }
-        }
-
-    }
-}
-</style>

components/business/account/message/ChatInput.vue

@@ -1,94 +0,0 @@
-<!-- @format -->
-
-<script setup>
-import { ref } from 'vue'
-import { useMessage } from './useMessage'
-import { ossUploadApi } from '@/api/model/common'
-
-const { sendMessage } = useMessage()
-
-const messageValue = ref('')
-const input = ref(null)
-const sending = ref(false)
-
-async function onSendMessage() {
-  if (messageValue.value.trim()) {
-    sending.value = true
-    await sendMessage(messageValue.value, '1')
-    sending.value = false
-    messageValue.value = ''
-  }
-}
-function uploadImg() {
-  input.value?.click()
-}
-function inputChange(e) {
-  const file = e.target.files[0]
-  if (sending.value)
-    return ElMessage.error('Sending message, please wait')
-
-  if (file.size > 1024 * 1024 * 10)
-    return ElMessage.error('Image size cannot exceed 10M')
-
-  sendImgMessage(file)
-}
-async function sendImgMessage(file) {
-  try {
-    sending.value = true
-    const imgUrl = await ossUploadApi(file)
-    await sendMessage(imgUrl, '2')
-    sending.value = false
-  }
-  catch (error) {
-    ElMessage.error('send failed')
-    console.log(error)
-  }
-  finally {
-    sending.value = false
-  }
-}
-</script>
-
-<template>
-  <div class=" bg-#fff b-rd-6px">
-    <div class="px-15px py-12px">
-      <img
-        src="@/assets/images/addImage.png"
-        class="w-24px h-24px cursor-pointer"
-        @click="uploadImg"
-      >
-      <input
-        ref="input"
-        type="file"
-        class="hidden"
-        accept="image/*"
-        @change="inputChange"
-      >
-    </div>
-    <div class="p-10px pos-relative">
-      <el-input
-        v-model="messageValue"
-        type="textarea"
-        placeholder="Please enter your message here"
-        class="!b-0 custom-textarea"
-        :rows="6"
-        @press-enter.prevent="onSendMessage"
-      />
-      <el-button
-        :disabled="!messageValue"
-        class="pos-absolute w-160px bottom-20px right-20px px-30px py-10px !h-40px !bg-#C58C64 !text-#fff" @click="onSendMessage"
-      >
-        Send
-      </el-button>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-::v-deep(.custom-textarea) {
-  .el-textarea__inner{
-    border: none !important;
-    box-shadow: unset !important;
-  }
-}
-</style>

components/business/account/message/ChatWindow.vue

@@ -1,137 +0,0 @@
-<!-- @format -->
-
-<script setup>
-import dayjs from 'dayjs'
-import { useMessage } from './useMessage'
-import { useUserStore } from '@/stores/modules/user'
-
-const props = defineProps({
-  isUseContact: {
-    type: Boolean,
-    default: true,
-  },
-})
-
-defineEmits(['scroll-top'])
-
-const {
-  onScrollTop,
-  loading,
-  noMore,
-  selectedContact,
-  messageList,
-  isScrollBottom,
-} = useMessage()
-
-const userStore = useUserStore()
-const { avatar } = storeToRefs(userStore)
-
-const chatContainer = ref(null)
-const isScrolledToTop = ref(false)
-const status = computed(() => {
-  return loading.value ? '加载中...' : noMore.value ? '没有更多了~' : ''
-})
-
-function scrollToBottom() {
-  nextTick(() => {
-    if (chatContainer.value) {
-      const timer = setTimeout(() => {
-        clearTimeout(timer)
-        chatContainer.value.scrollTop = chatContainer.value.scrollHeight
-      }, 300)
-    }
-  })
-}
-async function handleScroll(event) {
-  if (!chatContainer.value)
-    return
-  const scrollTop = event.target.scrollTop
-  const previousScrollHeight = chatContainer.value.scrollHeight
-  isScrolledToTop.value = scrollTop <= 0
-  if (isScrolledToTop.value && !loading.value) {
-    await onScrollTop()
-    chatContainer.value.scrollTop = (chatContainer.value.scrollHeight - previousScrollHeight)
-  }
-}
-watch(
-  () => isScrollBottom.value,
-  (val) => {
-    !!val && scrollToBottom()
-  },
-  {
-    immediate: true,
-  },
-)
-</script>
-
-<template>
-  <div
-    ref="chatContainer"
-    class="space-y-4 overflow-y-auto scroll-custom pb-30px"
-    :class="isUseContact ? 'h-530px' : 'h-355px'"
-    @scroll="handleScroll"
-  >
-    <div class="text-center text-#999 text-14px">
-      {{ status }}
-    </div>
-    <div v-for="message in messageList" :key="message.id">
-      <div v-if="message.senderType === '1'" class="flex items-center">
-        <img
-          v-if="selectedContact.sessionType === '2'"
-          :src="selectedContact.brandInfo?.brandLogo"
-          class="w-40px h-40px object-cover b-rd-50%"
-        >
-        <img
-          v-if="selectedContact.sessionType === '1'"
-          src="@/assets/images/avatar.png"
-          class="b-rd-50% w-40px h-40px b-rd-50%"
-          alt=""
-          srcset=""
-        >
-        <div
-          class="ml-20px flex items-center w-60% "
-        >
-          <div v-if="message.type === '1'" class=" p-10px bg-#fff b-rd-20px b-rd-tl-0 w-full">
-            {{ message.content }}
-          </div>
-          <div v-if="message.type === '2'" class="w-200px h-200px">
-            <img :src="message.imageUrl" class="w-100% h-100% object-cover" alt="" srcset="">
-          </div>
-        </div>
-        <div
-          class="text-14px text-#999 ml-20px"
-        >
-          {{ dayjs(message.sendTime).format("YYYY/MM/DD HH:MM") }}
-        </div>
-      </div>
-      <div v-if="message.senderType === '2'" class="flex justify-end items-center">
-        <div
-          class="text-14px text-#999 mr-20px"
-        >
-          {{ dayjs(message.sendTime).format("YYYY/MM/DD HH:MM") }}
-        </div>
-        <div
-          class="w-60% mr-20px"
-          :class="{ 'flex justify-end': message.type === '2' }"
-        >
-          <div v-if="message.type === '1'" class="py-10px  b-rd-20px b-rd-tr-0 px-20px bg-#CDA98F text-#fff">
-            {{ message.content }}
-          </div>
-          <div v-if="message.type === '2'" class="w-200px h-200px">
-            <img :src="message.imageUrl" class="w-100% h-100% object-cover" alt="" srcset="">
-          </div>
-        </div>
-        <img v-if="avatar" :src="avatar" class="w-40px h-40px">
-        <img v-else src="@/assets/images/avatar.png" class="w-40px h-40px">
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.scroll-custom {
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-</style>

components/business/account/message/ContactHead.vue

@@ -1,37 +0,0 @@
-<!-- @format -->
-
-<script setup>
-import { useMessage } from './useMessage'
-
-const { selectedContact } = useMessage()
-</script>
-
-<template>
-  <div
-    v-if="selectedContact"
-    class="flex items-center"
-  >
-    <div>
-      <el-avatar v-if="selectedContact.sessionType === '2'" :size="48" :src="selectedContact.brandInfo?.brandLogo" />
-      <img
-        v-if="selectedContact.sessionType === '1'"
-        src="@/assets/images/avatar.png"
-        class="b-rd-50% w-48px h-48px"
-        alt=""
-        srcset=""
-      >
-    </div>
-    <div class="text-20px fw-600 text-#333 ml-20px">
-      {{ selectedContact.sessionType === '2'
-        ? selectedContact.brandInfo?.brandName
-        : '客服消息' }}
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.ant-avatar {
-  width: 40px;
-  height: 40px;
-}
-</style>

components/business/account/message/ContactList.vue

@@ -1,107 +0,0 @@
-<!-- @format -->
-
-<script setup>
-import dayjs from 'dayjs'
-import { useMessage } from './useMessage'
-import { deleteContactApi } from '@/api/model/message'
-
-const { contacts, selectContact, getContactList, selectedContact, handleClick }
-  = useMessage()
-const activeName = ref('all')
-function onSelectContact(item) {
-  selectContact(item)
-}
-async function deleteContact(item) {
-  try {
-    await deleteContactApi({
-      sessionId: item.sessionId,
-    })
-    await getContactList()
-    ElMessage.success('删除成功')
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-</script>
-
-<template>
-  <div class="bg-#FAFAFA ">
-    <el-tabs v-model="activeName" class="contact-list-tabs" @tab-click="handleClick">
-      <el-tab-pane label="All" name="all" />
-      <el-tab-pane label="Unread" name="unread" />
-    </el-tabs>
-    <div class="overflow-y-auto h-800px">
-      <div
-        v-for="item in contacts"
-        :key="item.sessionId"
-        class="py-12px px-20px hover:bg-#fff cursor-pointer"
-        :class="{ '!bg-#fff': selectedContact.sessionId === item.sessionId }"
-        @click="onSelectContact(item)"
-      >
-        <div>
-          <div class="flex  items-center">
-            <div class="flex items-center">
-              <div class="mr-20px">
-                <el-avatar
-                  v-if="item.sessionType === '2'"
-                  :src="item.brandInfo?.brandLogo"
-                  class="!w-48px !h-48px"
-                />
-                <img
-                  v-if="item.sessionType === '1'"
-                  src="@/assets/images/avatar.png"
-                  class="b-rd-50% w-48px h-48px"
-                >
-              </div>
-            </div>
-            <div class="flex-1">
-              <div class="flex justify-between items-center">
-                <div class="fw-600 text-16px text-#333">
-                  {{
-                    item.sessionType === "2"
-                      ? item.brandInfo?.brandName
-                      : "客服消息"
-                  }}
-                </div>
-                <div class="text-12px text-#999">
-                  {{
-                    dayjs(item.lastMessage?.sendTime).format("HH:mm")
-                  }}
-                </div>
-              </div>
-              <div class="text-14px text-#999 mt-4px line-clamp-1 lh-18px">
-                {{ item.lastMessage?.content }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-.contact-list-tabs {
-  background-color: #FAFAFA;
-  border-radius: 10px;
-  padding: 30px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  ::v-deep(.el-tabs__header){
-    .el-tabs__item{
-      color: #333;
-      font-size: 16px;
-      font-weight: 500!important;
-      padding-right: 10px;
-      padding-left: 10px;
-      &.is-active {
-        color: #C58C64!important;
-      }
-    }
-    .el-tabs__active-bar{
-      background-color: #C58C64!important;
-    }
-  }
-}
-</style>

components/business/account/message/useMessage.ts

@@ -1,197 +0,0 @@
-/** @format */
-import {
-  createNewChatApi,
-  getBrandConversationApi,
-  getContactListApi,
-  getContactMessagesApi,
-  getNewMessageListApi,
-  sendMessageApi,
-} from '@/api/model/message'
-
-const messageList = ref<any[]>([])
-const contacts = ref<any[]>([])
-const selectedContact = ref<any>({})
-const isScrollBottom = ref<boolean>(false)
-const currentPage = ref<number>(1)
-const loading = ref<boolean>(false)
-const noMore = ref<boolean>(false)
-const timer = ref<any>(null)
-
-export function useMessage() {
-  /**
-   * 创建客服
-   */
-  const createServer = async () => {
-    try {
-      await createNewChatApi({
-        sessionType: '1',
-      })
-    }
-    catch (error) {
-      console.log(error)
-    }
-  }
-  /**
-   * 创建品牌对话
-   */
-  const createBrandConversation = async (brandId: any) => {
-    try {
-      const { id } = await createNewChatApi({
-        brandId,
-        sessionType: '2',
-      })
-      selectedContact.value.sessionId = id
-    }
-    catch (error) {
-      console.log(error)
-    }
-  }
-  /**
-   * 获取和品牌的对话
-   */
-  const getBrandConversation = async (brandId: any) => {
-    try {
-      await getBrandConversationApi({
-        brandId,
-        sessionType: '2',
-      })
-    }
-    catch (error) {
-      console.log(error)
-    }
-  }
-
-  /**
-   * 获取联系列表
-   */
-  const getContactList = async () => {
-    try {
-      const res: any = await getContactListApi()
-      contacts.value = res.records
-    }
-    catch (error) {
-      console.log(error)
-    }
-  }
-  /**
-   * 获取最新消息列表
-   */
-  const getNewMessageList = async () => {
-    try {
-      const params = {
-        messageId: messageList.value[messageList.value.length - 1].id,
-        sessionId: selectedContact.value.sessionId,
-      }
-      const result: any = await getNewMessageListApi(params)
-      messageList.value = [...messageList.value, ...result.reverse()]
-    }
-    catch (error) {
-      console.log(error)
-    }
-  }
-
-  /**
-   * 获取当前联系人的聊天记录
-   */
-  const getContactMessages = async (pageNo = 1, pageSize = 10) => {
-    try {
-      const params = {
-        sessionId: selectedContact.value.sessionId,
-        pageNo,
-        pageSize,
-      }
-      loading.value = true
-      const { records }: any = await getContactMessagesApi(params)
-      messageList.value = [...records.reverse(), ...messageList.value]
-      loading.value = false
-      if (records.length < pageSize)
-        noMore.value = true
-    }
-    catch (error) {
-      console.log(error)
-    }
-  }
-
-  const onScrollTop = async () => {
-    currentPage.value++
-    await getContactMessages(currentPage.value)
-  }
-  /**
-   * 选择联系人
-   */
-  const selectContact = async (contact: any) => {
-    if (selectedContact.value.sessionId === contact.sessionId)
-      return
-    isScrollBottom.value = false
-    selectedContact.value = contact
-    messageList.value = []
-    currentPage.value = 1
-    noMore.value = false
-    await getContactMessages(currentPage.value)
-    isScrollBottom.value = true
-  }
-  // 循环调用新聊天内容接口
-  const setRoundNewMessage = () => {
-    timer.value = setInterval(() => {
-      if (messageList.value.length > 0)
-        getNewMessageList()
-      else
-        clearInterval(timer.value)
-    }, 5000)
-  }
-
-  /**
-   * 发送的消息
-   */
-  const sendMessage = async (message: any, type: string) => {
-    try {
-      isScrollBottom.value = false
-      const params: any = {
-        sessionId: selectedContact.value.sessionId,
-        type,
-      }
-      if (type === '1')
-        params.content = message
-      else
-        params.imageUrl = message
-
-      await sendMessageApi(params)
-      if (currentPage.value === 1 && messageList.value.length === 0) {
-        await getContactMessages()
-        // 轮询调用接口
-        setRoundNewMessage()
-      }
-      else {
-        await getNewMessageList()
-      }
-      isScrollBottom.value = true
-    }
-    catch (error) {
-      console.log(error)
-    }
-  }
-  const handleClick = (tab: any) => {
-    console.log(tab, 'tab')
-  }
-
-  return {
-    getContactList,
-    handleClick,
-    setRoundNewMessage,
-    messageList,
-    timer,
-    contacts,
-    onScrollTop,
-    noMore,
-    createServer,
-    selectContact,
-    selectedContact,
-    getNewMessageList,
-    getContactMessages,
-    isScrollBottom,
-    createBrandConversation,
-    getBrandConversation,
-    loading,
-    sendMessage,
-  }
-}

components/business/account/notice/detailModal.vue

@@ -1,74 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-defineProps({
-  detail: {
-    type: Object,
-    default: () => ({}),
-  },
-})
-const visible = defineModel('visible', { type: Boolean, required: true })
-</script>
-
-<template>
-  <el-dialog
-    v-model="visible"
-    :append-to-body="true"
-    width="800"
-    modal-class="custom-notice-modal"
-  >
-    <template #header>
-      <div
-        class="px-40px py-25px bg-#F5F5F5 b-rd-lt-6px b-rd-rt-6px text-18px fw-500 text-#333"
-      >
-        Notice
-      </div>
-    </template>
-    <div class="py-24px px-40px">
-      <div class="mb-20px">
-        <div class="text-16px mb-10px text-#333">
-          Notification Name
-        </div>
-        <el-input :value="detail?.title" :disabled="true" />
-      </div>
-      <div class="mb-20px">
-        <div class="text-16px mb-10px text-#333">
-          Notification Time
-        </div>
-        <el-input :value="detail?.sendTime" :disabled="true" />
-      </div>
-      <div class="mb-20px">
-        <div class="text-16px mb-10px text-#333">
-          Content
-        </div>
-        <el-input
-          :value="detail?.msgContent"
-          type="textarea"
-          :rows="5"
-          :disabled="true"
-        />
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<style lang="less">
-.custom-notice-modal {
-  .el-dialog {
-    padding: unset !important;
-    .el-dialog__header {
-      padding: 0 !important;
-      .el-dialog__headerbtn {
-        right: 20px;
-        top: 10px;
-      }
-    }
-    .el-dialog__footer {
-      padding-top: 0 !important;
-      padding-bottom: 24px !important;
-      padding-left: 40px !important;
-      padding-right: 40px !important;
-    }
-  }
-}
-</style>

components/business/account/notice/index.vue

@@ -1,114 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import dayjs from 'dayjs'
-import { PageSizeEnum } from '~/enums/sizeEnum'
-import { getNoticeListApi } from '@/api/model/notice'
-import { useCommonStore } from '@/stores/modules/common'
-
-const commonStore = useCommonStore()
-const tableData = ref([])
-const currentPage = ref(1)
-const page_size = ref(10)
-const total = ref(1)
-const visible = ref(false)
-const detailData = ref()
-
-async function getTableList(
-  pageNo = PageSizeEnum.PAGE,
-  pageSize = PageSizeEnum.PAGE_SIZE,
-) {
-  try {
-    const res: any = await getNoticeListApi({
-      pageNo,
-      pageSize,
-    })
-    total.value = res.total
-    tableData.value = res.records.map((item: any) => {
-      return {
-        ...item,
-        sendTime: dayjs(item.sendTime).format('YYYY-MM-DD'),
-      }
-    })
-    await commonStore.getNoticeRemind()
-  }
-  catch (e) {
-    console.log(e)
-  }
-}
-function changePage(page: number, pageSize: number) {
-  currentPage.value = page
-  getTableList(page, pageSize)
-}
-function tableRowClassName({ rowIndex }: any) {
-  if (rowIndex % 2 === 0)
-    return 'warning-row'
-  return ''
-}
-function onDetail(row: any) {
-  visible.value = true
-  detailData.value = row
-}
-getTableList()
-</script>
-
-<template>
-  <div>
-    <el-table
-      :data="tableData"
-      style="width: 100%"
-      :row-class-name="tableRowClassName"
-    >
-      <el-table-column prop="title" label="Notification Name" />
-      <el-table-column prop="sendTime" label="Notification Time" />
-      <el-table-column fixed="right" label="Action">
-        <template #default="{ row }">
-          <el-button
-            class="!text-#C58C64 !h-40px !b-unset !bg-transparent hover:!bg-transparent hover:!text-#C58C64 hover:!underline"
-          >
-            <div class="text-primary" @click="onDetail(row)">
-              View details
-            </div>
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div v-if="tableData.length" class="mt-25px flex justify-end">
-      <el-pagination
-        :page-size="page_size"
-        class="custom-pagination"
-        :pager-count="10"
-        layout="prev, pager, next"
-        :total="total"
-        @change="changePage"
-      />
-    </div>
-    <Business-account-notice-detail-modal v-if="visible" v-model:visible="visible" :detail="detailData" />
-  </div>
-</template>
-
-<style lang="less" scoped>
-::v-deep(.el-table) {
-  color: #333;
-
-  .el-table__header-wrapper {
-    .el-table__header {
-      height: 50px;
-
-      .el-table__cell {
-        color: #333;
-        font-weight: 400 !important;
-        background-color: #fff2e1;
-      }
-    }
-  }
-
-  .el-table__row {
-    height: 68px;
-
-    &.warning-row {
-      --el-table-tr-bg-color: #f7f7f7;
-    }
-  }
-}
-</style>

components/business/account/notification.vue

@@ -1,66 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import dayjs from 'dayjs'
-import { getNoticeListApi } from '@/api/model/notice'
-import { PageSizeEnum } from '~/enums/sizeEnum'
-import { useCommonStore } from '@/stores/modules/common'
-
-const list = ref<any>([])
-const commonStore = useCommonStore()
-
-async function getNoticeList(
-  pageNo = PageSizeEnum.PAGE,
-  pageSize = 4,
-) {
-  try {
-    const res: any = await getNoticeListApi({
-      pageNo,
-      pageSize,
-    })
-    list.value = res.records
-    await commonStore.getNoticeRemind()
-  }
-  catch (e) {
-    console.log(e)
-  }
-}
-getNoticeList()
-</script>
-
-<template>
-  <div class="bg-#FAFAFA b-rd-10px py-10px px-24px">
-    <div
-      class="py-18px text-#36363D fw-600 text-18px b-b-solid b-b-1px b-b-#eee"
-    >
-      Notification Board
-    </div>
-    <div v-if="list.length">
-      <div
-        v-for="(item, index) in list"
-        :key="index"
-        class="py-16px b-b-solid b-b-#eee b-b-1px"
-      >
-        <div class="text-16px mb-10px  text-#333 w-210px line-clamp-1">
-          {{ item.title }}
-        </div>
-        <div class="flex justify-between items-center">
-          <div class="text-#999 text-14px w-210px line-clamp-1">
-            {{ item.msgContent }}
-          </div>
-          <div class="text-#999 text-14px">
-            {{ dayjs(item.sendTime).format("YYYY-MM-DD") }}
-          </div>
-        </div>
-      </div>
-      <div class="text-center text-primary text-18px py-24px cursor-pointer hover:underline">
-        <router-link to="/account/notice">
-          View details
-        </router-link>
-      </div>
-    </div>
-    <common-empty v-else title="No data found ~" />
-  </div>
-</template>
-
-<style lang="less" scoped></style>

components/business/account/orders/all.vue

@@ -1,117 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { useData } from "./useData"
-
-const {
-  tableData,
-  total,
-  getTableList,
-  changePage,
-  currentPage,
-  page_size,
-  cancelOrder,
-} = useData({ type: "" })
-
-function tableRowClassName({ rowIndex }: any) {
-  if (rowIndex % 2 === 0) return "warning-row"
-  return ""
-}
-getTableList()
-</script>
-
-<template>
-  <div>
-    <el-table
-      :data="tableData"
-      style="width: 100%"
-      :row-class-name="tableRowClassName"
-    >
-      <el-table-column prop="billNo" label="Order No." width="180">
-        <template #default="{ row }">
-          <nuxt-link
-            :to="`/orders/${row.id}`"
-            class="hover:underline text-#0068FF"
-          >
-            {{ row.billNo }}
-          </nuxt-link>
-        </template>
-      </el-table-column>
-      <!-- <el-table-column prop="brandQuantity" label="Brand Qty." width="180" /> -->
-      <el-table-column
-        prop="merchandiseQuantity"
-        label="Products"
-        width="180"
-      />
-
-      <el-table-column prop="totalPrice" label="Order Total" width="180" />
-      <el-table-column label="Status" width="180">
-        <template #default="{ row }">
-          <div :class="row.state === '1' && 'text-#0068FF'">
-            {{ row.state === "1" ? "Submitted" : "Cancelled" }}
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="createTime" label="Created Time" width="180" />
-      <el-table-column fixed="right" label="Action" min-width="240">
-        <template #default="{ row }">
-          <el-button
-            class="!text-#C58C64 !h-40px !b-unset !bg-transparent hover:!bg-transparent hover:!text-#C58C64 hover:!underline"
-          >
-            <nuxt-link :to="`/orders/${row.id}`"> View details </nuxt-link>
-          </el-button>
-          <el-popconfirm
-            title="Are you sure to cancel?"
-            @confirm="cancelOrder(row)"
-          >
-            <template #reference>
-              <el-button
-                v-if="row.state === '1'"
-                class="!text-#C58C64 !h-40px !b-unset !bg-transparent hover:!bg-transparent hover:!text-#C58C64 hover:!underline"
-              >
-                Cancel
-              </el-button>
-            </template>
-          </el-popconfirm>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div v-if="tableData.length" class="mt-25px flex justify-end">
-      <el-pagination
-        v-model:current-page="currentPage"
-        :page-size="page_size"
-        :pager-count="10"
-        class="custom-pagination"
-        layout="prev, pager, next"
-        :total="total"
-        @change="changePage"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-::v-deep(.el-table) {
-  color: #333;
-
-  .el-table__header-wrapper {
-    .el-table__header {
-      height: 50px;
-
-      .el-table__cell {
-        color: #333;
-        font-weight: 400 !important;
-        background-color: #fff2e1;
-      }
-    }
-  }
-
-  .el-table__row {
-    height: 68px;
-
-    &.warning-row {
-      --el-table-tr-bg-color: #f7f7f7;
-    }
-  }
-}
-</style>

components/business/account/orders/cancelled.vue

@@ -1,95 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { useData } from "./useData"
-
-const { tableData, total, getTableList, changePage, page_size } = useData({
-  type: "2",
-})
-
-function tableRowClassName({ rowIndex }: any) {
-  if (rowIndex % 2 === 0) return "warning-row"
-  return ""
-}
-getTableList()
-</script>
-
-<template>
-  <div>
-    <el-table
-      :data="tableData"
-      style="width: 100%"
-      :row-class-name="tableRowClassName"
-    >
-      <el-table-column prop="billNo" label="Order No." width="180">
-        <template #default="{ row }">
-          <nuxt-link
-            :to="`/orders/${row.id}`"
-            class="hover:underline text-#0068FF"
-          >
-            {{ row.billNo }}
-          </nuxt-link>
-        </template>
-      </el-table-column>
-      <!-- <el-table-column prop="brandQuantity" label="Brand Qty." width="180" /> -->
-      <el-table-column
-        prop="merchandiseQuantity"
-        label="Products"
-        width="180"
-      />
-
-      <el-table-column prop="totalPrice" label="Order Total" width="180" />
-      <el-table-column label="Status" width="180">
-        <template #default="{ row }">
-          {{ row.state === "1" ? "Submitted" : "Cancelled" }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="createTime" label="Created Time" width="180" />
-      <el-table-column fixed="right" label="Action" min-width="240">
-        <template #default="{ row }">
-          <el-button
-            class="!text-#C58C64 !h-40px !b-unset !bg-transparent hover:!bg-transparent hover:!text-#C58C64 hover:!underline"
-          >
-            <nuxt-link :to="`/orders/${row.id}`"> View details </nuxt-link>
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div v-if="tableData.length" class="mt-25px flex justify-end">
-      <el-pagination
-        :page-size="page_size"
-        class="custom-pagination"
-        :pager-count="10"
-        layout="prev, pager, next"
-        :total="total"
-        @change="changePage"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-::v-deep(.el-table) {
-  color: #333;
-
-  .el-table__header-wrapper {
-    .el-table__header {
-      height: 50px;
-
-      .el-table__cell {
-        color: #333;
-        font-weight: 400 !important;
-        background-color: #fff2e1;
-      }
-    }
-  }
-
-  .el-table__row {
-    height: 68px;
-
-    &.warning-row {
-      --el-table-tr-bg-color: #f7f7f7;
-    }
-  }
-}
-</style>

components/business/account/orders/remarkModal.vue

@@ -1,128 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { Message } from '@element-plus/icons-vue'
-import { updateOrderApi } from '@/api/model/order'
-
-const props = defineProps({
-  orderId: {
-    type: String,
-    default: '',
-  },
-})
-const visible = defineModel('visible', { type: Boolean, required: true })
-const product = defineModel('product', {
-  type: Object,
-  default: () => ({}),
-})
-function handleClose() {
-  console.log('close')
-}
-
-function getFileTitle(file: string) {
-  const fileArr = file.split('/')
-  return fileArr[fileArr.length - 1]
-}
-async function onSave() {
-  try {
-    const params = {
-      file: product.value.file,
-      orderId: props.orderId,
-      merchandiseId: product.value.merchandiseId,
-    }
-    await updateOrderApi(params)
-    ElMessage.success('update success')
-    visible.value = false
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-function del(i: number) {
-  product.value.file = product.value.file.filter((item: any, index: number) => index !== i)
-  console.log('product.value', product.value)
-}
-</script>
-
-<template>
-  <el-dialog
-    v-model="visible"
-    :append-to-body="true"
-    width="800"
-    modal-class="custom-remark-modal"
-    @close="handleClose"
-  >
-    <template #header>
-      <div
-        class="px-40px py-25px bg-#F5F5F5 b-rd-lt-6px b-rd-rt-6px text-18px fw-500 text-#333"
-      >
-        Remark
-      </div>
-    </template>
-    <div class="py-24px px-40px">
-      <div
-        class="p-16px bg-#F7F8FA b-1px b-solid b-#E0E0E0 text-#333333 b-rd-4px"
-      >
-        {{ product?.remark }}
-      </div>
-      <div class="mt-28px">
-        <div
-          v-for="(items, index) in product?.file"
-          :key="items.id"
-          class="py-14px px-16px bg-#F7F8FA flex items-center justify-between mb-16px b-solid b-1px b-#E0E0E0 b-rd-4px"
-        >
-          <div class="flex items-center">
-            <svgo-file
-              class="!w-20px cursor-pointer !h-20px text-#333 mr-16px"
-            />
-            附件{{ index }}：  <a :href="items"> {{ getFileTitle(items) }}</a>
-          </div>
-          <div>
-            <img
-              src="@/assets/images/file_delete.png"
-              class="!w-20px cursor-pointer !h-20px"
-              alt=""
-              srcset=""
-              @click="del(index)"
-            >
-          </div>
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <el-button
-        class="!bg-#fff !text-#C58C64 !ml-0 mr-24px !w-110px !h-48px !text-14px !fw-500 !b-rd-6px"
-        @click="visible = false"
-      >
-        Cancel
-      </el-button>
-      <el-button
-        class="!bg-#C58C64 !text-#fff !ml-0 !w-110px !h-48px !text-14px !fw-500 !b-rd-6px"
-        @click="onSave"
-      >
-        Save
-      </el-button>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="less">
-.custom-remark-modal {
-  .el-dialog {
-    padding: unset !important;
-    .el-dialog__header {
-      padding: 0 !important;
-      .el-dialog__headerbtn {
-        right: 20px;
-        top: 10px;
-      }
-    }
-    .el-dialog__footer {
-      padding-top: 0 !important;
-      padding-bottom: 24px !important;
-      padding-left: 40px !important;
-      padding-right: 40px !important;
-    }
-  }
-}
-</style>

components/business/account/orders/submitted.vue

@@ -1,108 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { useData } from "./useData"
-
-const { tableData, total, getTableList, changePage, page_size, cancelOrder } =
-  useData({ type: "1" })
-
-function tableRowClassName({ rowIndex }: any) {
-  if (rowIndex % 2 === 0) return "warning-row"
-  return ""
-}
-getTableList()
-</script>
-
-<template>
-  <div>
-    <el-table
-      :data="tableData"
-      style="width: 100%"
-      :row-class-name="tableRowClassName"
-    >
-      <el-table-column prop="billNo" label="Order No." width="180">
-        <template #default="{ row }">
-          <nuxt-link
-            :to="`/orders/${row.id}`"
-            class="hover:underline text-#0068FF"
-          >
-            {{ row.billNo }}
-          </nuxt-link>
-        </template>
-      </el-table-column>
-      <!-- <el-table-column prop="brandQuantity" label="Brand Qty." width="180" /> -->
-      <el-table-column
-        prop="merchandiseQuantity"
-        label="Products"
-        width="180"
-      />
-      <el-table-column prop="totalPrice" label="Order Total" width="180" />
-      <el-table-column label="Status" width="180">
-        <template #default="{ row }">
-          <div class="text-#0068FF">
-            {{ row.state === "1" ? "Submitted" : "Cancelled" }}
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="createTime" label="Created time" width="180" />
-      <el-table-column fixed="right" label="Action" min-width="240">
-        <template #default="{ row }">
-          <el-button
-            class="!text-#C58C64 !h-40px !b-unset !bg-transparent hover:!bg-transparent hover:!text-#C58C64 hover:!underline"
-          >
-            <nuxt-link :to="`/orders/${row.id}`"> View details </nuxt-link>
-          </el-button>
-          <el-popconfirm
-            title="Are you sure to cancel?"
-            @confirm="cancelOrder(row)"
-          >
-            <template #reference>
-              <el-button
-                v-if="row.state === '1'"
-                class="!text-#C58C64 !h-40px !b-unset !bg-transparent hover:!bg-transparent hover:!text-#C58C64 hover:!underline"
-              >
-                Cancel
-              </el-button>
-            </template>
-          </el-popconfirm>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div v-if="tableData.length" class="mt-25px flex justify-end">
-      <el-pagination
-        :page-size="page_size"
-        class="custom-pagination"
-        :pager-count="10"
-        layout="prev, pager, next"
-        :total="total"
-        @change="changePage"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-::v-deep(.el-table) {
-  color: #333;
-
-  .el-table__header-wrapper {
-    .el-table__header {
-      height: 50px;
-
-      .el-table__cell {
-        color: #333;
-        font-weight: 400 !important;
-        background-color: #fff2e1;
-      }
-    }
-  }
-
-  .el-table__row {
-    height: 68px;
-
-    &.warning-row {
-      --el-table-tr-bg-color: #f7f7f7;
-    }
-  }
-}
-</style>

components/business/account/orders/useData.ts

@@ -1,59 +0,0 @@
-import dayjs from 'dayjs'
-import { PageSizeEnum } from '~/enums/sizeEnum'
-import { cancelOrderApi, getOrderListApi } from '@/api/model/order'
-
-export function useData({ type }: any) {
-  const tableData = ref([])
-  const currentPage = ref(1)
-  const page_size = ref(10)
-  const total = ref(1)
-
-  const getTableList = async (
-    pageNo = PageSizeEnum.PAGE,
-    pageSize = PageSizeEnum.PAGE_SIZE,
-    state = type,
-  ) => {
-    try {
-      const params = {
-        pageNo,
-        state,
-        pageSize,
-      }
-      const res: any = await getOrderListApi(params)
-      total.value = res.total
-      tableData.value = res.records.map((item: any) => {
-        return {
-          ...item,
-          totalPrice: `${numberToTwoDecimals(item.totalPrice)} USD`,
-          createTime: dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss'),
-        }
-      })
-    }
-    catch (e) {
-      console.log(e)
-    }
-  }
-  const cancelOrder = async (data: any) => {
-    try {
-      await cancelOrderApi({ id: data.id })
-      ElMessage.success('取消订单成功')
-      await getTableList()
-    }
-    catch (error) {
-      console.log(error)
-    }
-  }
-  const changePage = (page: number, pageSize: number) => {
-    currentPage.value = page
-    getTableList(page, pageSize, type)
-  }
-  return {
-    tableData,
-    page_size,
-    currentPage,
-    total,
-    cancelOrder,
-    getTableList,
-    changePage,
-  }
-}

components/business/account/panel/swiper-brands.vue

@@ -1,89 +0,0 @@
-<script lang='ts' setup>
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Navigation, Pagination } from 'swiper/modules'
-import {
-  getSimilarBrandListApi,
-} from '~/api/model/brand'
-
-// import "swiper/css/pagination"
-import 'swiper/css'
-import 'swiper/css/navigation'
-
-const swiperVertical = ref<any>(null)
-const modules = [Navigation, Pagination]
-const similarBrandList = ref<any>([])
-
-async function getSimilarBrandList() {
-  try {
-    const params = {
-      pageNo: 1,
-      pageSize: 20,
-    }
-    const data: any = await getSimilarBrandListApi(params)
-    similarBrandList.value = data.records
-  }
-  catch (error) {
-    console.log('error', error)
-  }
-}
-function onVerticalSwiper(swiper: any) {
-  swiperVertical.value = swiper
-}
-function onClickLeft() {
-  swiperVertical.value.slidePrev()
-}
-function onClickRight() {
-  swiperVertical.value.slideNext()
-}
-getSimilarBrandList()
-</script>
-
-<template>
-  <div class="w-726px">
-    <div class="m-auto pos-relative px-66px">
-      <div
-        v-if="similarBrandList.length"
-        class="pos-absolute cursor-pointer left-10px top-58px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-        @click="onClickLeft()"
-      >
-        <img src="~/assets/images/arrow_left.png" alt="" class="w-26px h-26px" srcset="">
-      </div>
-      <div
-        v-if="similarBrandList.length"
-        class="pos-absolute cursor-pointer  right-10px top-58px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-        @click="onClickRight()"
-      >
-        <img src="~/assets/images/arrow_right.png" alt="" class="w-26px h-26px" srcset="">
-      </div>
-      <Swiper
-        :slides-per-view="4"
-        :space-between="50"
-        :modules="modules"
-        :loop="true"
-        :navigation="false"
-        :pagination="true"
-        class="pos-relative"
-        @swiper="onVerticalSwiper"
-      >
-        <SwiperSlide v-for="(item, index) in similarBrandList" :key="index">
-          <div class="text-center">
-            <img
-              :src="item.thumbnail || item.masterImage"
-              alt=""
-              srcset=""
-              class="w-80px h-80px object-cover b-rd-50% mx-auto"
-            >
-            <h3
-              class="!mt-16px"
-            >
-              {{ item.brandName }}
-            </h3>
-          </div>
-        </SwiperSlide>
-      </Swiper>
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/business/account/panel/swiper-recommend.vue

@@ -1,83 +0,0 @@
-<script lang='ts' setup>
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Navigation, Pagination } from 'swiper/modules'
-import { getGoodsRecommendListApi } from '~/api/model/goods'
-import { useUserStore } from '@/stores/modules/user'
-
-// import "swiper/css/pagination"
-import 'swiper/css'
-import 'swiper/css/navigation'
-
-const swiperVertical = ref<any>(null)
-const modules = [Navigation, Pagination]
-const goodsRecommendList = ref<any>([])
-
-const userStore = useUserStore()
-const { userInfo } = storeToRefs(userStore)
-
-async function getGoodsRecommendList() {
-  try {
-    const params = {
-      fcId: userInfo.value.purchaseCategory,
-      pageNo: 1,
-      pageSize: 20,
-    }
-    const data: any = await getGoodsRecommendListApi(params)
-    goodsRecommendList.value = data.records
-  }
-  catch (error) {
-    console.log('error', error)
-  }
-}
-function onVerticalSwiper(swiper: any) {
-  swiperVertical.value = swiper
-}
-function onClickLeft() {
-  swiperVertical.value.slidePrev()
-}
-function onClickRight() {
-  swiperVertical.value.slideNext()
-}
-getGoodsRecommendList()
-</script>
-
-<template>
-  <div class="w-1146px">
-    <div v-if="goodsRecommendList.length" class="m-auto pos-relative px-66px">
-      <div
-        v-if="goodsRecommendList.length"
-        class="pos-absolute cursor-pointer left-10px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-        @click="onClickLeft()"
-      >
-        <img src="~/assets/images/arrow_left.png" alt="" class="w-26px h-26px" srcset="">
-      </div>
-      <div
-        v-if="goodsRecommendList.length"
-        class="pos-absolute cursor-pointer right-10px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-        @click="onClickRight()"
-      >
-        <img src="~/assets/images/arrow_right.png" alt="" class="w-26px h-26px" srcset="">
-      </div>
-      <Swiper
-        :slides-per-view="4"
-        :space-between="25"
-        :modules="modules"
-        :loop="true"
-        :navigation="false"
-        :pagination="true"
-        class="pos-relative"
-        @swiper="onVerticalSwiper"
-      >
-        <SwiperSlide v-for="(item, index) in goodsRecommendList" :key="index">
-          <common-goods-item :item w="w-250px" h="h-250px" />
-        </SwiperSlide>
-      </Swiper>
-    </div>
-    <div v-else>
-      <common-empty />
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/business/account/rfqs/index.vue

@@ -1,112 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import dayjs from 'dayjs'
-import { PageSizeEnum } from '~/enums/sizeEnum'
-import { getRFQsListApi } from '@/api/model/my'
-
-const emit = defineEmits(['openModel'])
-const tableData = ref([])
-const currentPage = ref(1)
-const page_size = ref(10)
-const total = ref(1)
-async function getTableList(pageNo = PageSizeEnum.PAGE, pageSize = PageSizeEnum.PAGE_SIZE) {
-  try {
-    const res: any = await getRFQsListApi({
-      pageNo,
-      pageSize,
-    })
-    total.value = res.total
-    tableData.value = res.records.map((item: any) => {
-      return {
-        ...item,
-        createTime: dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss'),
-      }
-    })
-  }
-  catch (e) {
-    console.log(e)
-  }
-}
-function changePage(page: number, pageSize: number) {
-  currentPage.value = page
-  getTableList(page, pageSize)
-}
-
-function tableRowClassName({ rowIndex }: any) {
-  if (rowIndex % 2 === 0)
-    return 'warning-row'
-  return ''
-}
-getTableList()
-defineExpose({
-  getTableList,
-})
-</script>
-
-<template>
-  <div>
-    <el-table
-      :data="tableData"
-      style="width: 100%"
-      :row-class-name="tableRowClassName"
-    >
-      <el-table-column prop="productName" label="Product name" width="300" show-overflow-tooltip="true" />
-      <el-table-column label="Quotations">
-        <template #default="{ row }">
-          <div :class="row.state === '1' && 'text-#0068FF'">
-            {{ row.state === "1" ? "Quoted" : "Unquoted" }}
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="createTime" label="Created Time" />
-      <el-table-column fixed="right" label="Action">
-        <template #default="{ row }">
-          <el-button
-            class="!text-#C58C64 !h-40px !b-unset !bg-transparent hover:!bg-transparent hover:!text-#C58C64 hover:!underline"
-            @click="() => $emit('openModel', row.id)"
-          >
-            View details
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div v-if="tableData.length" class="mt-25px flex justify-end">
-      <el-pagination
-        v-model:current-page="currentPage"
-        :page-size="page_size"
-        :pager-count="10"
-        class="custom-pagination"
-        layout="prev, pager, next"
-        :total="total"
-        @change="changePage"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-::v-deep(.el-table) {
-  color: #333;
-
-  .el-table__header-wrapper {
-    .el-table__header {
-      height: 50px;
-
-      .el-table__cell {
-        color: #333;
-        font-weight: 400 !important;
-        background-color: #fff2e1;
-      }
-    }
-  }
-
-  .el-table__row {
-    height: 68px;
-
-    &.warning-row {
-      --el-table-tr-bg-color: #f7f7f7;
-    }
-  }
-}
-</style>

components/business/account/rfqs/quotationModal.vue

@@ -1,263 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { Plus } from '@element-plus/icons-vue'
-import { getRFQsDetailApi, submitRFQsApiApi } from '@/api/model/my'
-import { ossUploadApi } from '@/api/model/common'
-import { downloadFileByA } from '@/utils/common/download'
-
-const props = defineProps({
-  rfqId: {
-    type: String,
-    default: '',
-  },
-})
-const emit = defineEmits(['update:data'])
-watch(() => props.rfqId, (val: any) => {
-  if (val)
-    getRFQsDetail(val)
-}, { immediate: true })
-const input = ref(null)
-const ruleFormRef = ref<any>()
-const loading = ref<boolean>(false)
-const ruleForm = ref<any>({
-  productName: '',
-  sourceQuantity: '',
-  content: '',
-  attachments: [],
-})
-const rules = ref<any>({
-  productName: { required: true, message: 'Please input product name', trigger: 'blur' },
-  sourceQuantity: { required: true, message: 'Please input sourcing quantity', trigger: 'blur' },
-  content: { required: true, message: 'Please input detailed requirements', trigger: 'blur' },
-})
-const visible = defineModel('visible', { type: Boolean, required: true })
-function handleClose() {
-  console.log('close')
-}
-async function getRFQsDetail(id: any) {
-  try {
-    const res: any = await getRFQsDetailApi({
-      id,
-    })
-    ruleForm.value = res
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-function uploadData() {
-  input.value?.click()
-}
-function inputChange(e: any) {
-  const fileList = e.target.files
-  const fileArr = Array.from(fileList)
-  fileArr.forEach(async (file: any) => {
-    const resourceUrl: any = await getResource(file)
-    ruleForm.value.attachments.push({
-      fileName: getFileTitle(resourceUrl),
-      fileUrl: resourceUrl,
-    })
-  })
-}
-async function getResource(file: any) {
-  try {
-    if (file.size > 1024 * 1024 * 10)
-      return ElMessage.error('Image size cannot exceed 10M')
-    return await ossUploadApi(file)
-  }
-  catch (error) {
-    ElMessage.error('send failed')
-  }
-}
-function getFileTitle(file: string) {
-  const fileArr = file.split('/')
-  return fileArr[fileArr.length - 1]
-}
-function del(i: number) {
-  ruleForm.value.attachments = ruleForm.value.attachments.filter((item, index) => index !== i)
-}
-
-async function submitForm(formEl: any | undefined) {
-  if (!formEl)
-    return
-  await formEl.validate(async (valid, fields) => {
-    if (valid) {
-      loading.value = true
-      await submitRFQsApiApi(ruleForm.value)
-      ElMessage.success('submit success')
-      visible.value = false
-      loading.value = false
-      emit('update:data')
-    }
-    else {
-      console.log('error submit!', fields)
-      loading.value = false
-    }
-  })
-}
-</script>
-
-<template>
-  <el-dialog
-    v-model="visible"
-    :append-to-body="true"
-    width="800"
-    modal-class="custom-quotation-modal"
-    @close="handleClose"
-  >
-    <template #header>
-      <div
-        class="px-40px py-25px bg-#F5F5F5 b-rd-lt-6px b-rd-rt-6px text-18px fw-500 text-#333"
-      >
-        Request For Quotation
-      </div>
-    </template>
-    <div class="py-24px px-40px">
-      <el-form
-        ref="ruleFormRef"
-        :model="ruleForm"
-        :rules="rules"
-        :disabled="!!rfqId"
-        label-width="auto"
-        class="custom-ruleForm"
-        status-icon
-      >
-        <el-form-item label="Product Name" prop="productName">
-          <el-input v-model="ruleForm.productName" placeholder="Please input product name" />
-        </el-form-item>
-        <el-form-item label="Sourcing quantity" prop="sourceQuantity">
-          <el-input
-            v-model="ruleForm.sourceQuantity"
-            placeholder="Please input"
-          >
-            <template #append>
-              Pcs
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="Detailed requirements" prop="content">
-          <el-input
-            v-model="ruleForm.content"
-            :rows="4"
-            type="textarea"
-            placeholder="I 'm looking for..."
-          />
-        </el-form-item>
-      </el-form>
-      <div>
-        <div v-if="!rfqId" class="flex items-center mb-16px">
-          <el-button
-            class="!bg-#C58C46 !text-#fff !ml-0 !w-250px !h-48px !text-14px !fw-500 !b-rd-6px"
-            :icon="Plus"
-            @click="uploadData"
-          >
-            Upload sourcing documents
-          </el-button>
-          <div class="ml-16px text-12px">
-            Max file size: 10MB. Types supported: jpg, jpeg, png, pdf, docx, doc, xlsx, xls.
-          </div>
-        </div>
-        <input
-          ref="input"
-          multiple="true"
-          type="file"
-          class="hidden"
-          @change="inputChange"
-        >
-        <div>
-          <div
-            v-for="(items, index) in ruleForm.attachments"
-            :key="index"
-            class="py-14px px-16px bg-#F7F8FA flex items-center justify-between mt-8px b-solid b-1px b-#E0E0E0 b-rd-4px"
-          >
-            <div class="flex items-center">
-              <svgo-file
-                class="!w-20px cursor-pointer !h-20px text-#333 mr-16px"
-              />
-              附件{{ index }}：
-              <a :href="items.fileUrl"> {{ getFileTitle(items.fileUrl) }}</a>
-            </div>
-            <img v-if="!rfqId" src="@/assets/images/file_delete.png" class="!w-20px cursor-pointer !h-20px" alt="" srcset="" @click="del(index)">
-          </div>
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <el-button
-        v-if="!rfqId"
-        :loading="loading"
-        class="!bg-#C58C46 !text-#fff !ml-0 !w-170px !h-48px !text-14px !fw-500 !b-rd-6px"
-        @click="submitForm(ruleFormRef)"
-      >
-        Submit FRQ
-      </el-button>
-      <div v-if="rfqId">
-        <div
-          class="w-full py-24px !text-left px-16px b-dashed b-1px b-#E0E0E0 b-rd-4px    "
-        >
-          <div v-if="ruleForm?.quotes">
-            <div class="fw-700   text-#3D3D3D">
-              Quotation for product
-            </div>
-            <div class="mt-20px mb-28px">
-              <div v-for="item in ruleForm?.quotes?.attachments" :key="item.id" class="py-4px underline cursor-pointer" @click="downloadFileByA(item.fileUrl, item.fileName)">
-                {{ getFileTitle(item.fileUrl) }}
-              </div>
-            </div>
-            <div class="fw-700 my-20px  text-#3D3D3D">
-              Remark
-            </div>
-            <div class="text-#333">
-              {{ ruleForm?.quotes?.remark }}
-            </div>
-          </div>
-          <div v-else class="flex justify-center items-center">
-            <svgo-quotation class="!w-28px !h-28px mr-14px" />
-            No quotation yet
-          </div>
-        </div>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="less">
-.custom-quotation-modal {
-  .el-dialog {
-    padding: unset !important;
-    .el-dialog__header {
-      padding: 0 !important;
-      .el-dialog__headerbtn {
-        right: 20px;
-        top: 10px;
-      }
-    }
-    .custom-ruleForm{
-      .el-form-item{
-        display: block;
-        .el-form-item__label-wrap{
-          margin-left: unset !important;
-          margin-bottom: 5px;
-
-        }
-        .el-input__wrapper{
-          .el-input__inner{
-            height: 40px !important;
-          }
-        }
-        .el-input-group--append{
-            width: 480px!important;
-          }
-      }
-    }
-    .el-dialog__footer {
-      padding-top: 24px !important;
-      padding-bottom: 24px !important;
-      padding-left: 40px !important;
-      padding-right: 40px !important;
-      border: 1px solid #E0E0E0;
-    }
-  }
-}
-</style>

components/business/account/settings/changePsw.vue

@@ -1,187 +0,0 @@
-<script lang='ts' setup>
-import type { FormInstance, FormRules } from 'element-plus'
-import { passwordRegular } from '~/enums/regEnum'
-import { resetOrChangePasswordApi } from '~/api/model/user'
-
-const ruleFormRef = ref<FormInstance>()
-const params = ref({
-  oldPassword: '',
-  newPassword: '',
-  confirmPassword: '',
-})
-const rules = ref<FormRules>({
-  oldPassword: [
-    {
-      required: true,
-      trigger: 'change',
-      validator: (rule, value, callback) => {
-        if (value) {
-          if (passwordRegular.test(value))
-            callback()
-          else
-            callback(new Error('Please enter password that matches the rules'))
-        }
-
-        else { callback(new Error('Old password must be filled in')) }
-      },
-    },
-  ],
-  newPassword: [
-    {
-      required: true,
-      trigger: 'change',
-      validator: (rule, value, callback) => {
-        if (value) {
-          if (passwordRegular.test(value))
-            callback()
-          else
-            callback(new Error('Please enter password that matches the rules'))
-        }
-
-        else { callback(new Error('New password must be filled in')) }
-      },
-    },
-  ],
-  confirmPassword: [
-    {
-      required: true,
-      trigger: 'change',
-      validator: (rule, value, callback) => {
-        if (value) {
-          if (passwordRegular.test(value))
-            callback()
-          else
-            callback(new Error('Please enter password that matches the rules'))
-        }
-        else { callback(new Error('Password must be filled in')) }
-      },
-    },
-  ],
-})
-
-async function submitForm(formEl: FormInstance | undefined) {
-  if (!formEl)
-    return
-  await formEl.validate(async (valid, fields) => {
-    if (valid) {
-      try {
-        await resetOrChangePasswordApi(params.value)
-        ElMessage.success('Password updated successfully')
-      }
-      catch (error) {
-        console.log('error', error)
-      }
-    }
-    else { console.log('error submit!', fields) }
-  })
-}
-</script>
-
-<template>
-  <div class="flex w-100% justify-center">
-    <div>
-      <div class="fw-700 mb-30px text-20px text-#333">
-        Change Password
-      </div>
-      <el-form
-        ref="ruleFormRef"
-        :model="params"
-        :rules="rules"
-        label-width="auto"
-        size="default"
-        status-icon
-      >
-        <el-form-item
-          label="Old Password"
-          class="custom-form-item w-500px"
-          prop="oldPassword"
-        >
-          <el-popover
-            placement="right"
-            :width="270"
-            class="!text-#5B463E !text-16px"
-            trigger="hover"
-            content="6-20 characters, contain letters numbers or symbols only"
-          >
-            <template #reference>
-              <el-input v-model="params.oldPassword" :show-password="true" placeholder="Please enter old password" class="h-50px" />
-            </template>
-          </el-popover>
-        </el-form-item>
-        <el-form-item
-          label="New Password"
-          class="custom-form-item w-500px"
-          prop="newPassword"
-        >
-          <el-popover
-            placement="right"
-            :width="270"
-            class="!text-#5B463E !text-16px"
-            trigger="hover"
-            content="6-20 characters, contain letters numbers or symbols only"
-          >
-            <template #reference>
-              <el-input v-model="params.newPassword" :show-password="true" placeholder="Please enter new password" class="h-50px" />
-            </template>
-          </el-popover>
-        </el-form-item>
-        <el-form-item
-          label="Confirm New Password"
-          class="custom-form-item w-500px"
-          prop="confirmPassword"
-        >
-          <el-popover
-            placement="right"
-            :width="270"
-            class="!text-#5B463E !text-16px"
-            trigger="hover"
-            content="6-20 characters, contain letters numbers or symbols only"
-          >
-            <template #reference>
-              <el-input v-model="params.confirmPassword" :show-password="true" placeholder="Please confirm new password" class="h-50px" />
-            </template>
-          </el-popover>
-        </el-form-item>
-        <el-form-item>
-          <el-button plain class="!bg-#C58C64 !text-#fff !w-500px !h-50px !text-18px !fw-500 !b-rd-6px " @click="submitForm(ruleFormRef)">
-            Submit
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-:deep(.custom-form-item) {
-  margin-bottom: 30px;
-  display: block !important;
-  .el-form-item__content{
-    .el-input{
-      .el-select{
-        .el-select__wrapper{
-          height: 50px!important;
-          background-color: #fff!important;
-        }
-      }
-    }
-  }
-
-  .el-form-item__label-wrap {
-     margin-left: unset!important;
-     .el-form-item__label {
-        margin-bottom: 5px;
-        font-size: 16px !important;
-        color: #333 !important;
-      }
-    }
-  &.custom-form-item-hidden-label {
-    width: 270px;
-    &:last-child {
-      .el-form-item__label-wrap {
-        opacity: 0;
-      }
-    }
-  }
-}
-</style>

components/business/account/settings/profile.vue

@@ -1,429 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import type { FormInstance, FormRules } from 'element-plus'
-import { getCategoryListApi, getDictListApi } from '~/api/model/common'
-import { getUserProfileApi, updateUserInfoApi } from '~/api/model/user'
-
-const params = ref<any>({
-  email: '',
-  country_dictText: '',
-  companyType_dictText: '',
-  companyName: '',
-  companyAddress: '',
-  website: '',
-  annualPurchaseAmount: undefined,
-  firstName: '',
-  lastName: '',
-  mobile: '',
-  mobileAreaCode: '+86',
-})
-
-const countryList = ref()
-const categoryList = ref()
-const mobileAreaCodeList = ref()
-const businessTypesList = ref()
-const annualPurchaseAmountList = ref()
-const companySizeList = ref()
-
-const ruleFormRef = ref<FormInstance>()
-const rules = ref<FormRules>({
-  email: [
-    {
-      required: true,
-      message: 'Username must be filled in',
-      trigger: 'blur',
-    },
-  ],
-  country: [
-    {
-      required: true,
-      message: 'Country must be selected',
-      trigger: 'change',
-    },
-  ],
-  companyName: [
-    {
-      required: true,
-      message: 'CompanyName must be filled in',
-      trigger: 'blur',
-    },
-  ],
-  companyAddress: [
-    {
-      required: true,
-      message: 'companyAddress must be filled in',
-      trigger: 'blur',
-    },
-  ],
-
-  companyType: [
-    {
-      required: true,
-      message: 'CompanyType must be selected',
-      trigger: 'change',
-    },
-  ],
-  annualPurchaseAmount: [
-    {
-      required: true,
-      message: 'annualPurchaseAmount must be filled in',
-      trigger: 'blur',
-    },
-  ],
-  companySize: [
-    {
-      required: true,
-      message: 'CompanySize must be selected',
-      trigger: 'blur',
-    },
-  ],
-  firstName: [
-    {
-      required: true,
-      message: 'firstName must be filled in',
-      trigger: 'blur',
-    },
-  ],
-  lastName: [
-    {
-      required: true,
-      message: 'lastName must be filled in',
-      trigger: 'blur',
-    },
-  ],
-  mobile: [
-    {
-      required: true,
-      message: 'mobile must be filled in',
-      trigger: 'blur',
-    },
-  ],
-  mobileAreaCode: [
-    {
-      required: true,
-      message: 'mobileAreaCode must be filled in',
-      trigger: 'blur',
-    },
-  ],
-})
-async function getMobileAreaCodeList() {
-  const list = await getDictListApi('A064')
-  mobileAreaCodeList.value = list
-}
-async function getCountryList() {
-  const list = await getDictListApi('A070')
-  countryList.value = list
-}
-async function getBusinessTypesList() {
-  const list = await getDictListApi('A071')
-  businessTypesList.value = list
-}
-async function getAnnualPurchaseAmountList() {
-  const list = await getDictListApi('A072')
-  annualPurchaseAmountList.value = list
-}
-async function getCompanySizeList() {
-  const list = await getDictListApi('company_size')
-  companySizeList.value = list
-}
-async function getCategoryList() {
-  const list = await getCategoryListApi({
-    all: false,
-  })
-  categoryList.value = list
-}
-
-async function submitForm(formEl: FormInstance | undefined) {
-  if (!formEl)
-    return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      updateUserInfoApi(params.value)
-      ElMessage.success('Your updated profile has been submitted successfully')
-    }
-    else { console.log('error submit!', fields) }
-  })
-}
-async function getUserProfile() {
-  try {
-    const data = await getUserProfileApi()
-    params.value = {
-      ...data,
-      purchaseCategory: data.purchaseCategory.split(','),
-    }
-    console.log('params.value', params.value)
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-
-async function getData() {
-  await getCountryList()
-  await getCategoryList()
-  await getBusinessTypesList()
-  await getCompanySizeList()
-  await getAnnualPurchaseAmountList()
-  await getMobileAreaCodeList()
-  await getUserProfile()
-}
-getData()
-</script>
-
-<template>
-  <div class="w-500px ">
-    <el-form
-      ref="ruleFormRef"
-      :model="params"
-      :rules="rules"
-      label-width="auto"
-      size="default"
-      status-icon
-    >
-      <el-form-item
-        label="User Name"
-        class="custom-form-item"
-        prop="email"
-      >
-        <el-input
-          v-model="params.email" :disabled="true"
-          placeholder="Company name"
-          class="h-50px"
-        />
-      </el-form-item>
-      <el-form-item label="Country/Region" prop="country" class="custom-form-item">
-        <!-- <el-select v-model="params.country" placeholder="Country">
-          <el-option
-            v-for="(item, index) in countryList"
-            :key="index"
-            class="!h-50px"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select> -->
-        <el-input
-          v-model="params.country_dictText"
-          placeholder="Country/Region"
-          :disabled="true"
-          class="h-50px"
-        />
-      </el-form-item>
-      <el-form-item
-        label="Company Type&Name"
-        prop="companyType"
-        class="custom-form-item flex "
-      >
-        <!-- <el-select v-model="params.companyType" placeholder="Business Types">
-          <el-option
-            v-for="(item, index) in businessTypesList"
-            :key="index"
-            class="!h-50px"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select> -->
-        <!-- <el-input
-          v-model="params.companyName"
-          placeholder="Company name"
-          class="h-50px"
-        /> -->
-        <el-input
-          v-model="params.companyType_dictText"
-          placeholder="Company Types"
-          :disabled="true"
-          class="h-50px flex-grow-3 mr-10px !w-unset"
-        />
-        <el-input
-          v-model="params.companyName"
-          placeholder="company name"
-          :disabled="true"
-          class="h-50px flex-grow-2 !w-unset"
-        />
-      </el-form-item>
-      <el-form-item
-        label="Company Address"
-        prop="companyAddress"
-        class="custom-form-item"
-      >
-        <el-input
-          v-model="params.companyAddress"
-          type="textarea"
-          placeholder="companyAddress"
-          class="h-100px"
-        />
-      </el-form-item>
-      <el-form-item
-        label="Company Website"
-        prop="website"
-        class="custom-form-item"
-      >
-        <el-input
-          v-model="params.website"
-          placeholder="website"
-          class="h-50px"
-        />
-      </el-form-item>
-      <div class="flex">
-        <el-form-item
-          label="Name"
-          prop="firstName"
-          class="custom-form-item !w-unset flex-grow-3"
-        >
-          <el-input
-            v-model="params.firstName"
-            placeholder="firstName"
-            class="h-50px"
-          />
-        </el-form-item>
-        <el-form-item
-          label=" "
-          prop="lastName"
-          class="custom-form-item  !w-unset flex-grow-1 ml-10px"
-        >
-          <el-input
-            v-model="params.lastName"
-            placeholder="lastName"
-            class="h-50px flex-1"
-          />
-        </el-form-item>
-      </div>
-      <el-form-item
-        label="Category"
-        prop="purchaseCategory"
-        class="custom-form-item"
-      >
-        <el-select v-model="params.purchaseCategory" placeholder="Category" multiple>
-          <el-option
-            v-for="(item, index) in categoryList"
-            :key="index"
-            class="!h-50px !lh-50px"
-            :label="item.title"
-            :value="item.key"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        label="Annual sourcing budget"
-        prop="annualPurchaseAmount"
-        class="custom-form-item"
-      >
-        <el-select
-          v-model="params.annualPurchaseAmount"
-          placeholder="Annual sourcing budget"
-        >
-          <el-option
-            v-for="(item, index) in annualPurchaseAmountList"
-            :key="index"
-            class="!h-50px"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        label="company size"
-        prop="companySize"
-        class="custom-form-item"
-      >
-        <el-select
-          v-model="params.companySize"
-          placeholder="company size"
-        >
-          <el-option
-            v-for="(item, index) in companySizeList"
-            :key="index"
-            class="!h-50px !lh-50px"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <div class="flex">
-        <el-form-item
-          label="Mobile Number"
-          class="custom-form-item"
-          prop="mobile"
-        >
-          <el-input v-model="params.mobile" placeholder="Mobile Number" class="h-50px">
-            <template #prepend>
-              <el-select v-model="params.mobileAreaCode" class="!h-50px" placeholder="Select" style="width: 120px">
-                <el-option
-                  v-for="(item, index) in mobileAreaCodeList"
-                  :key="index"
-                  :value="item.value"
-                  :label="`${item.value} ${item.label}`"
-                >
-                  {{ item.value }} {{ item.label }}
-                </el-option>
-              </el-select>
-            </template>
-          </el-input>
-        </el-form-item>
-      </div>
-      <el-form-item class="form-footer mt-25px">
-        <el-button
-          class="!bg-#C58C64 !text-#fff !ml-0 !w-100% !h-50px !text-18px !fw-500 !b-rd-6px"
-          @click="submitForm(ruleFormRef)"
-        >
-          Save
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<style lang="less" scoped>
-:deep(.custom-form-item) {
-  width: 100%;
-  margin-bottom: 22px;
-  display: block !important;
-  .el-select__wrapper {
-    height: 50px !important;
-  }
-  .el-form-item__label-wrap {
-    margin-left: unset !important;
-    .el-form-item__label {
-      margin-bottom: 5px;
-      font-size: 16px !important;
-      color: #5b463e !important;
-    }
-  }
-.el-form-item__content{
-  .el-textarea {
-    .el-textarea__inner{
-      height: 100px !important;
-    }
-  }
-}
-  .el-checkbox {
-    .el-checkbox__input {
-        &.is-checked {
-            .el-checkbox__inner {
-                color: #CC9879 !important;
-                background-color: #CC9879 !important;
-                border: 1px solid #CC9879 !important;
-            }
-        }
-
-        .el-checkbox__inner {
-            &:hover {
-                border-color: #CC9879 !important;
-            }
-        }
-    }
-
-    &.is-checked {
-        .el-checkbox__label {
-            color: #CC9879 !important;
-        }
-    }
-}
-}
-::v-deep(.form-footer) {
-  .el-form-item__content {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-</style>

components/business/brand/footer.vue

@@ -1,74 +0,0 @@
-<script lang='ts' setup>
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Navigation, Pagination } from 'swiper/modules'
-import {
-  getSimilarBrandListApi,
-} from '~/api/model/brand'
-
-// import "swiper/css/pagination"
-import 'swiper/css'
-import 'swiper/css/navigation'
-
-const swiperVertical = ref<any>(null)
-const modules = [Navigation, Pagination]
-const similarBrandList = ref<any>([])
-
-async function getSimilarBrandList() {
-  try {
-    const params = {
-      pageNo: 1,
-      pageSize: 20,
-    }
-    const data: any = await getSimilarBrandListApi(params)
-    similarBrandList.value = data.records
-  }
-  catch (error) {
-    console.log('error', error)
-  }
-}
-function onVerticalSwiper(swiper: any) {
-  swiperVertical.value = swiper
-}
-function onClickLeft() {
-  swiperVertical.value.slidePrev()
-}
-function onClickRight() {
-  swiperVertical.value.slideNext()
-}
-getSimilarBrandList()
-</script>
-
-<template>
-  <div class="w-1400px mx-auto mb-160px">
-    <h2 class="!mb-100px fw-700 text-40px text-#333 text-center">
-      Shop Similar Brands
-    </h2>
-    <div v-if="similarBrandList.length">
-      <div class="w-1300px mx-auto pos-relative">
-        <div
-          class="pos-absolute cursor-pointer left--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-          @click="onClickLeft()"
-        >
-          <img src="~/assets/images/arrow_left.png" alt="" class="w-26px h-26px" srcset="">
-        </div>
-        <div
-          class="pos-absolute cursor-pointer  right--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-          @click="onClickRight()"
-        >
-          <img src="~/assets/images/arrow_right.png" alt="" class="w-26px h-26px" srcset="">
-        </div>
-        <Swiper
-          :slides-per-view="4" :space-between="55" :modules="modules" :loop="true" :navigation="false"
-          :pagination="true" class="pos-relative" @swiper="onVerticalSwiper"
-        >
-          <SwiperSlide v-for="(item, index) in similarBrandList" :key="index">
-            <common-brand-item :item="item" />
-          </SwiperSlide>
-        </Swiper>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/business/category/exploreProduct.vue

@@ -1,40 +0,0 @@
-<script lang='ts' setup>
-import {
-  getFeatureListApi,
-} from '~/api/model/feature'
-import { PageSizeEnum } from '~/enums/sizeEnum'
-
-const list = ref<any>([])
-const page_size = ref(3)
-async function getFeatureList(pageNo = PageSizeEnum.PAGE, pageSize = page_size.value) {
-  const params = {
-    pageNo,
-    pageSize,
-  }
-  const res: any = await getFeatureListApi(params)
-  list.value = res.records
-}
-getFeatureList()
-</script>
-
-<template>
-  <div class="w-1400px mx-auto mb-160px">
-    <h2 class="!mb-60px fw-700 text-40px text-#363C40 text-center">
-      Explore More Product Collections
-    </h2>
-    <div class="grid grid-cols-3 gap-x-106px gap-y-60px px-66px">
-      <div v-for="item, index in list" :key="index">
-        <common-featured-item2 :item />
-      </div>
-    </div>
-    <!-- <div class="flex justify-center items-center cursor-pointer mt-60px">
-      <div class="underline fw-500 text-24px hover:text-#CC9879">
-        View All
-      </div>
-      <svgo-arrow class="!w-12px !h-12px ml-14px" />
-    </div> -->
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/business/category/headerBanner.vue

@@ -1,55 +0,0 @@
-<script lang='ts' setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useUserStore } from '@/stores/modules/user'
-import { getBannerDataApi } from '~/api/model/common'
-
-const props = defineProps({
-  slug: {
-    type: String,
-    default: '',
-  },
-})
-
-const userStore = useUserStore()
-const { isLogin } = storeToRefs(userStore)
-const dynamicImg = ref('')
-const bannerTitle = ref('')
-const subTitle = ref('')
-watch(() => props.slug, async (val: any) => {
-  const data: any = await getBannerDataApi({ slug: val })
-  dynamicImg.value = data.bannerImg
-  bannerTitle.value = data.contentTitle
-  subTitle.value = data.subhead
-}, {
-  immediate: true,
-})
-</script>
-
-<template>
-  <div class="">
-    <el-skeleton :loading="!dynamicImg" class="w-full h-[400px]" animated>
-      <template #template>
-        <el-skeleton-item variant="h3" class="w-full !h-[400px]" />
-      </template>
-      <template #default>
-        <img :src="dynamicImg" class="w-full h-[400px] object-cover" alt="" srcset="">
-      </template>
-    </el-skeleton>
-    <div class="pos-absolute top-[50%] left-[50%]  translate-x-[-50%]   translate-y-[-50%] w-1400px mx-auto">
-      <h1 class="!mb-20px text-#333333 text-40px fw-700 custom-title-font">
-        {{ bannerTitle }}
-      </h1>
-      <div class="mb-20px text-#999999 w-800px">
-        {{ subTitle }}
-      </div>
-      <el-button v-if="!isLogin" type="primary" plain class="w-160px !bg-#C58C64 !text-#fff !h-40px !text-16px !fw-500 !b-rd-150px">
-        <nuxt-link to="/register">
-          Shop on EJET
-        </nuxt-link>
-      </el-button>
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/business/category/leftFilters.vue

@@ -1,188 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { getDictListApi, getProductLabelAndTrendApi } from '@/api/model/common'
-
-const emit = defineEmits(['onSelectFilters'])
-
-const all_is_open = ref(true)
-const featured_is_open = ref(true)
-// const Trending_is_open = ref(true)
-const Material_is_open = ref(true)
-const featuredList = ref<any>([])
-const trendingList = ref<any>([])
-const textureList = ref<any>([])
-async function getProductLabelAndTrend(tagType: any) {
-  try {
-    const res: any = await getProductLabelAndTrendApi({
-      tagType,
-      state: 1,
-    })
-    if (tagType)
-      trendingList.value = res.valueList
-    else
-      featuredList.value = res.valueList
-  }
-  catch (err) {}
-}
-async function getMaterialList() {
-  const list = await getDictListApi('A126')
-  textureList.value = list
-}
-
-function checkFeatured(flag = true) {
-  const checkedList = featuredList.value.filter((item: any) => item.checked).map((item: any) => item.values)
-  flag && emit('onSelectFilters', 'recommend', checkedList)
-}
-function checkTrending(flag = true) {
-  const checkedList = trendingList.value.filter((item: any) => item.checked).map((item: any) => item.values)
-  flag && emit('onSelectFilters', 'trendingCollections', checkedList)
-}
-function checkMaterial(flag = true) {
-  const checkedList = textureList.value.filter((item: any) => item.checked).map((item: any) => item.value)
-  flag && emit('onSelectFilters', 'texture', checkedList)
-}
-
-function onHandleClearFeatured(flag = true) {
-  featuredList.value.forEach((item: any) => {
-    item.checked = false
-  })
-  checkFeatured(flag)
-}
-function onHandleClearTrending(flag = true) {
-  trendingList.value.forEach((item: any) => {
-    item.checked = false
-  })
-  checkTrending(flag)
-}
-function onHandleClearMeterial(flag = true) {
-  textureList.value.forEach((item: any) => {
-    item.checked = false
-  })
-  checkMaterial(flag)
-}
-function onHandleClearAll() {
-  onHandleClearFeatured(false)
-  onHandleClearTrending(false)
-  onHandleClearMeterial(false)
-  emit('onSelectFilters', 'clearAll')
-}
-
-getProductLabelAndTrend(0)
-getProductLabelAndTrend(1)
-// getMaterialList()
-</script>
-
-<template>
-  <div>
-    <div class="flex justify-between items-center mb-32px">
-      <div
-        class="text-20px fw-700 flex items-center cursor-pointer"
-        @click="all_is_open = !all_is_open"
-      >
-        Filters
-        <svgo-arrow-rotate
-          class="!w-18px !h-18px ml-10px transition"
-          :class="all_is_open ? '' : 'rotate-180'"
-        />
-      </div>
-      <div class="text-#333 cursor-pointer" @click="onHandleClearAll">
-        Clear all
-      </div>
-    </div>
-    <div
-      class="pl-8px"
-      :class="all_is_open ? '!h-full block' : '!h-0 overflow-hidden'"
-    >
-      <div class="mb-24px">
-        <div class="flex justify-between items-center">
-          <div
-            class="text-16px fw-700 flex items-center cursor-pointer"
-            @click="featured_is_open = !featured_is_open"
-          >
-            Featured
-            <svgo-arrow-rotate
-              class="!w-18px !h-18px ml-10px"
-              :class="featured_is_open ? '' : 'rotate-180'"
-            />
-          </div>
-          <div class="text-#333 cursor-pointer" @click="onHandleClearFeatured">
-            Clear
-          </div>
-        </div>
-        <div
-          class="mt-24px flex gap-20px flex-col"
-          :class="featured_is_open ? '!h-full block' : '!h-0 overflow-hidden'"
-        >
-          <div v-for="item in featuredList" :key="item.values">
-            <common-components-checkbox
-              v-model:checked="item.checked"
-              :label="item.values"
-              @checked="checkFeatured"
-            />
-          </div>
-        </div>
-      </div>
-      <!-- <div class="mb-24px">
-        <div class="flex justify-between items-center">
-          <div
-            class="text-16px fw-700 flex items-center cursor-pointer"
-            @click="Trending_is_open = !Trending_is_open"
-          >
-            Trending
-            <svgo-arrow-rotate
-              class="!w-18px !h-18px ml-10px"
-              :class="Trending_is_open ? '' : 'rotate-180'"
-            />
-          </div>
-          <div class="text-#333 cursor-pointer" @click="onHandleClearTrending">
-            Clear
-          </div>
-        </div>
-        <div
-          class="my-24px flex gap-20px flex-col"
-          :class="Trending_is_open ? '!h-full block' : '!h-0 overflow-hidden'"
-        >
-          <div v-for="item in trendingList" :key="item.values">
-            <common-components-checkbox
-              v-model:checked="item.checked"
-              :label="item.values"
-              @checked="checkTrending"
-            />
-          </div>
-        </div>
-      </div> -->
-      <!-- <div class="mb-24px">
-        <div class="flex justify-between items-center">
-          <div
-            class="text-16px fw-700 flex items-center cursor-pointer"
-            @click="Material_is_open = !Material_is_open"
-          >
-            Material
-            <svgo-arrow-rotate
-              class="!w-18px !h-18px ml-10px"
-              :class="Material_is_open ? '' : 'rotate-180'"
-            />
-          </div>
-          <div class="text-#333 cursor-pointer" @click="onHandleClearMeterial">
-            Clear
-          </div>
-        </div>
-        <div
-          class="my-24px flex gap-20px flex-col"
-          :class="Material_is_open ? '!h-full block' : '!h-0 overflow-hidden'"
-        >
-          <div v-for="item in textureList" :key="item.value">
-            <common-components-checkbox
-              v-model:checked="item.checked"
-              :label="item.label"
-              @checked="checkMaterial"
-            />
-          </div>
-        </div>
-      </div> -->
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped></style>

components/business/category/leftSlider.vue

@@ -1,49 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-defineProps({
-  topLevel: {
-    type: Object,
-    default: () => {},
-  },
-  list: {
-    type: Array as any,
-    default: () => [],
-  },
-})
-const emit = defineEmits(['onSelect'])
-const selectedValue = defineModel('selectedValue')
-function onHandleTopLevel(topLevel: any) {
-  selectedValue.value = topLevel.key
-  emit('onSelect', topLevel.key)
-}
-function onHandleChildLevel(childLevel: any) {
-  selectedValue.value = childLevel.key
-  emit('onSelect', childLevel.key)
-}
-</script>
-
-<template>
-  <div>
-    <div
-      class="!fw-700 text-20px text-#333 !mb-40px cursor-pointer hover:text-#B06B3C"
-      :class="selectedValue === topLevel.key ? 'text-#B06B3C' : ''"
-      @click="onHandleTopLevel(topLevel)"
-    >
-      {{ topLevel.label }}({{ topLevel.entityQty }})
-    </div>
-    <div class="gap-28px flex flex-col pl-10px text-#333">
-      <div
-        v-for="item in list"
-        :key="item.key"
-        :class="selectedValue === item.key && 'text-#B06B3C'"
-        class="cursor-pointer hover:text-#B06B3C"
-        @click="onHandleChildLevel(item)"
-      >
-        {{ item.title }} ({{ item.entityQty }})
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped></style>

components/business/category/swiperBrands.vue

@@ -1,79 +0,0 @@
-<script lang='ts' setup>
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Navigation, Pagination } from 'swiper/modules'
-import {
-  getSimilarBrandListApi,
-} from '~/api/model/brand'
-
-// import "swiper/css/pagination"
-import 'swiper/css'
-import 'swiper/css/navigation'
-
-const swiperVertical = ref<any>(null)
-const modules = [Navigation, Pagination]
-const similarBrandList = ref<any>([])
-
-async function getCategoryBrandList() {
-  try {
-    const params = {
-      pageNo: 1,
-      pageSize: 20,
-    }
-    const data: any = await getSimilarBrandListApi(params)
-    similarBrandList.value = data.records
-  }
-  catch (error) {
-    console.log('error', error)
-  }
-}
-function onVerticalSwiper(swiper: any) {
-  swiperVertical.value = swiper
-}
-function onClickLeft() {
-  swiperVertical.value.slidePrev()
-}
-function onClickRight() {
-  swiperVertical.value.slideNext()
-}
-getCategoryBrandList()
-</script>
-
-<template>
-  <div class="w-1400px mx-auto mb-160px">
-    <h2 class="!mb-60px fw-700 text-40px text-#363C40 text-center">
-      Collection Brands in This Category
-    </h2>
-    <div class="w-1300px mx-auto pos-relative">
-      <div
-        class="pos-absolute cursor-pointer left--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-        @click="onClickLeft()"
-      >
-        <img src="~/assets/images/arrow_left.png" alt="" class="w-26px h-26px" srcset="">
-      </div>
-      <div
-        class="pos-absolute cursor-pointer  right--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-        @click="onClickRight()"
-      >
-        <img src="~/assets/images/arrow_right.png" alt="" class="w-26px h-26px" srcset="">
-      </div>
-      <Swiper
-        v-if="similarBrandList.length"
-        :slides-per-view="4" :space-between="55" :modules="modules" :loop="true" :navigation="false"
-        :pagination="true" class="pos-relative" @swiper="onVerticalSwiper"
-      >
-        <SwiperSlide v-for="(item, index) in similarBrandList" :key="index">
-          <common-brand-item :item="item" />
-        </SwiperSlide>
-      </Swiper>
-    </div>
-    <div class="flex justify-center items-center cursor-pointer mt-60px">
-      <div class="underline fw-500 text-24px hover:text-#CC9879">
-        View All
-      </div>
-      <svgo-arrow class="!w-12px !h-12px ml-14px" />
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/business/forgot/stageOne.vue

@@ -1,117 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import type { FormInstance, FormRules } from 'element-plus'
-import { useForgot } from '~/pages/forgot/useForgot'
-import DragVerify from '~/components/common/drag-verify/index.vue'
-import { validateEmailApi } from '~/api/model/user'
-
-const { setStage } = useForgot()
-const ruleFormRef = ref<FormInstance>()
-
-const params = ref({
-  email: '',
-  isUnlock: false,
-})
-const rules = ref<FormRules>({
-  email: [
-    { required: true, message: 'Email must be filled in', trigger: 'blur' },
-    {
-      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-      message: 'please fill in correct email',
-    },
-  ],
-  isUnlock: [
-    {
-      required: true,
-      validator: (rule, value, callback) => {
-        if (value)
-          callback()
-        else callback(new Error('Please slide to verity'))
-      },
-    },
-  ],
-})
-
-async function sendEmail(formEl: FormInstance | undefined) {
-  if (!formEl)
-    return
-  await formEl.validate(async (valid, fields) => {
-    if (valid) {
-      await validateEmailApi(params.value)
-      setStage()
-    }
-    else { console.log('error submit!', fields) }
-  })
-}
-</script>
-
-<template>
-  <div>
-    <div class="fw-500 text-40px text-#1F2D2C mb-40px">
-      Enter your registered email
-    </div>
-
-    <el-form
-      ref="ruleFormRef"
-      :model="params"
-      :rules="rules"
-      label-width="auto"
-      size="default"
-      status-icon
-    >
-      <el-form-item
-        label="Email"
-        class="custom-form-item"
-        prop="email"
-      >
-        <el-input v-model="params.email" placeholder="Email" class="h-50px" />
-      </el-form-item>
-      <el-form-item label="Verity" class="custom-form-item" prop="isUnlock">
-        <DragVerify
-          v-model:value="params.isUnlock"
-          start-text="please slide to verify"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button class="!bg-#CC9879 mt-18px !text-#fff !w-full !h-50px !text-18px !fw-500 !b-rd-6px " @click="sendEmail(ruleFormRef)">
-          Send email
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<style lang="less" scoped>
-:deep(.custom-form-item) {
-  margin-bottom: 22px;
-  display: block !important;
-  .el-form-item__content{
-    .el-input{
-      .el-select{
-        .el-select__wrapper{
-          height: 50px!important;
-          background-color: #fff!important;
-        }
-      }
-    }
-  }
-
-  .el-form-item__label-wrap {
-     margin-left: unset!important;
-     .el-form-item__label {
-        margin-bottom: 5px;
-        font-size: 16px !important;
-        color: #5b463e !important;
-      }
-    }
-  &.custom-form-item-hidden-label {
-    width: 270px;
-    &:last-child {
-      .el-form-item__label-wrap {
-        opacity: 0;
-      }
-    }
-  }
-}
-</style>

components/business/forgot/stageThree.vue

@@ -1,30 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { useForgot } from '~/pages/forgot/useForgot'
-
-const { resetStage } = useForgot()
-onUnmounted(() => {
-  resetStage()
-})
-</script>
-
-<template>
-  <div>
-    <div class="fw-500 text-20px text-#333 mb-20px">
-      Email Has Been Sent
-    </div>
-    <div class="text-14px mb-30px w-470px">
-      Still not received? Please contact our customer service team to get help.
-    </div>
-    <div class="text-#333 text-14px">
-      <div class="">
-        Customer service
-      </div>
-      <div class="my-10px">
-        Tell: +86 13588692156
-      </div>
-      <div>Email: marketing@ejet.com</div>
-    </div>
-  </div>
-</template>

components/business/forgot/stageTwo.vue

@@ -1,31 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { useForgot } from '~/pages/forgot/useForgot'
-
-const { setStage } = useForgot()
-function reSendEmail() {
-  setStage()
-}
-</script>
-
-<template>
-  <div>
-    <div class="fw-500 text-40px text-#1F2D2C mb-40px">
-      Verification through email
-    </div>
-    <div class="text-18px mb-40px">
-      <div class="flex">
-        In order to ensure the security of your account, please complete the
-        required verification
-      </div>
-    </div>
-    <div class="text-18px mb-60px">
-      A verification link has been sent to your email, please click the link
-      through your email to finish the verfication
-    </div>
-    <el-button class="!bg-#CC9879 mt-18px !text-#fff !w-full !h-50px !text-18px !fw-500 !b-rd-6px " @click="reSendEmail">
-      ReSend email
-    </el-button>
-  </div>
-</template>

components/business/goods/attribute.vue

@@ -1,59 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({
-      properties: [
-        {
-          chinaName: 'Color',
-        },
-      ],
-    }),
-  },
-})
-const is_open = ref(false)
-const propertiesList = computed(() => {
-  const originList = props.data?.propertiesList
-  if (!originList)
-    return []
-  const list = originList?.filter((item: any) => item.englishName)
-  if (list.length > 9)
-    return list.slice(0, 9)
-
-  return list
-})
-</script>
-
-<template>
-  <div>
-    <div
-      class="text-16px fw-700 flex items-center cursor-pointer mb-20px"
-      @click="is_open = !is_open"
-    >
-      Other attributes
-      <svgo-arrow-rotate
-        class="!w-18px !h-18px ml-10px"
-        :class="is_open ? 'rotate-180' : ''"
-      />
-    </div>
-    <div
-      v-show="is_open && propertiesList && propertiesList.length"
-      class="grid w-1400px grid-cols-3"
-    >
-      <div v-for="item in propertiesList" :key="item.id" class="py-10px flex">
-        <div class="w-auto text-#999">
-          {{
-            item.englishName
-          }}&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;
-        </div>
-        <div class="text-#333">
-          {{ item.value }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped></style>

components/business/goods/left.vue

@@ -1,125 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Mousewheel, Navigation } from 'swiper/modules'
-import 'swiper/css'
-import 'swiper/css/navigation'
-
-defineProps({
-  data: {
-    type: Object,
-    default: () => ({}),
-  },
-})
-const modules = [Navigation, Mousewheel]
-const swiperVertical = ref<any>(null)
-const swiperHorizontal = ref<any>(null)
-const selectedIndex = ref<number | null>(null)
-function onSlideChange(swiper: any) {
-  swiperHorizontal.value.slideTo(swiper.activeIndex)
-  swiperVertical.value.slideTo(swiper.activeIndex)
-  selectedIndex.value = swiper.activeIndex
-}
-function syncHorizontalSwiper(index: number) {
-  nextTick(() => {
-    swiperHorizontal.value.slideTo(index)
-    selectedIndex.value = index
-  })
-}
-function onVerticalSwiper(swiper: any) {
-  swiperVertical.value = swiper
-}
-function onHorizontalSwiper(swiper: any) {
-  swiperHorizontal.value = swiper
-}
-
-function isSelected(index: number) {
-  return selectedIndex.value === index ? 'selected-border' : ''
-}
-</script>
-
-<template>
-  <div class="mr-50px">
-    <div class="flex">
-      <div class="vertical-swiper mr-40px h-600px w-165px">
-        <Swiper
-          v-if="data?.goodsImgOrVideoList && data?.goodsImgOrVideoList.length"
-          direction="vertical"
-          :modules="modules"
-          :slides-per-view="3"
-          :space-between="50"
-          :navigation="true"
-          :mousewheel="{
-            enabled: false,
-          }"
-          :style="{ height: `${600}px` }"
-          @swiper="onVerticalSwiper"
-          @slide-change="onSlideChange"
-        >
-          <SwiperSlide
-            v-for="(item, index) in data?.goodsImgOrVideoList"
-            :key="index"
-            @click="syncHorizontalSwiper(index)"
-          >
-            <img :src="item" class="w-165px h-165px object-cover cursor-pointer b-rd-10px" :class="[isSelected(index)]" alt="" srcset="">
-          </SwiperSlide>
-        </Swiper>
-      </div>
-      <div class="h-swiper w-600px h-600px">
-        <Swiper
-          v-if="data?.goodsImgOrVideoList && data?.goodsImgOrVideoList.length"
-          :modules="modules"
-          :navigation="true"
-          :style="{ height: `${600}px` }"
-          @slide-change="onSlideChange"
-          @swiper="onHorizontalSwiper"
-        >
-          <SwiperSlide v-for="item, index in data?.goodsImgOrVideoList" :key="index">
-            <img :src="item" class="w-full h-full object-cover b-rd-10px" alt="" srcset="">
-          </SwiperSlide>
-        </Swiper>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.selected-border {
-  border: 2px solid #c58c64;
-}
-.vertical-swiper {
-  :deep(.swiper-button-prev) {
-    transform: rotate(90deg) translateY(25%);
-    top: 4% !important;
-    left: 50% !important;
-    &:after {
-      content: url('@/assets/icons/swiperLeft.svg');
-    }
-  }
-
-  :deep(.swiper-button-next) {
-    transform: rotate(90deg) translateY(25%);
-    top: 94% !important;
-    left: 50% !important;
-    &:after {
-      content: url('@/assets/icons/swiperRight.svg');
-    }
-  }
-}
-.h-swiper {
-  :deep(.swiper-button-prev) {
-    left: 16px!important;
-    &:after {
-      content: url('@/assets/icons/swiperLeft.svg');
-    }
-  }
-
-  :deep(.swiper-button-next) {
-     right: 16px!important;
-    &:after {
-      content: url('@/assets/icons/swiperRight.svg');
-    }
-  }
-}
-</style>

components/business/goods/moreFromBrand.vue

@@ -1,63 +0,0 @@
-<script lang='ts' setup>
-import { getBrandGoodsListApi } from '~/api/model/brand'
-import { PageSizeEnum } from '~/enums/sizeEnum'
-
-const props = defineProps({
-  brandId: { type: String, default: '' },
-  brandInfo: { type: Object, default: () => {} },
-})
-const brandGoodsList = ref<any>([])
-watch(() => props.brandId, (id) => {
-  if (!id)
-    return
-  getBrandGoodsList(id)
-}, {
-  immediate: true,
-})
-
-async function getBrandGoodsList(brandId = props.brandId, pageNo = PageSizeEnum.PAGE, pageSize = 8) {
-  const res: any = await getBrandGoodsListApi({
-    brandId,
-    pageNo,
-    pageSize,
-  })
-  brandGoodsList.value = res.records
-}
-</script>
-
-<template>
-  <div v-if="!!brandInfo" class="w-1400px mx-auto mb-160px">
-    <h2 class="!mb-60px !fw-700 text-40px text-#363C40 text-center custom-title-font">
-      Brand information
-    </h2>
-    <div class="flex pb-60px items-center">
-      <img :src="brandInfo?.brandLogo" class="w-120px h-120px object-contain b-rd-10px" alt="" srcset="">
-      <div class="ml-28px">
-        <div class="fw-700 text-32px text-#363C40 custom-title-font mb-24px">
-          {{ brandInfo?.brandName }}
-        </div>
-        <div class="text-16px text-#999999">
-          {{ brandInfo?.brandStory }}
-        </div>
-      </div>
-    </div>
-    <div v-if="brandGoodsList.length">
-      <div class="grid grid-gap-66px grid-cols-4">
-        <div v-for="item in brandGoodsList" :key="item.id">
-          <common-goods-item :item @update:login="getBrandGoodsList" />
-        </div>
-      </div>
-    </div>
-    <div class="flex justify-center items-center mt-60px">
-      <NuxtLink :to="`/brand/${brandId}`" class="flex justify-center items-center cursor-pointer">
-        <div class="underline fw-500 text-#5B463E text-22px hover:text-#CC9879">
-          View All
-        </div>
-        <svgo-arrow class="!w-20px !h-20px ml-16px" />
-      </NuxtLink>
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/business/goods/productRecommend.vue

@@ -1,58 +0,0 @@
-<script lang='ts' setup>
-import { PageSizeEnum } from '~/enums/sizeEnum'
-import {
-  getRecommendListOneApi,
-  getRecommendListTwoApi,
-} from '~/api/model/goods'
-
-const props = defineProps({
-  id: { type: String, default: '' },
-})
-watch(() => props.id, (mId: any) => {
-  if (!mId)
-    return
-  getGoodsListOne({ mId })
-  getGoodsListTwo({ mId })
-}, {
-  immediate: true,
-})
-const goodsListOne = ref<any>([])
-const goodsListTwo = ref<any>([])
-async function getGoodsListOne(params?: any, pageNo = PageSizeEnum.PAGE, pageSize = 4) {
-  const data: any = await getRecommendListOneApi({
-    ...params,
-    pageNo,
-    pageSize,
-  })
-  goodsListOne.value = data.records
-}
-async function getGoodsListTwo(params?: any, pageNo = PageSizeEnum.PAGE, pageSize = 4) {
-  const data: any = await getRecommendListTwoApi({
-    ...params,
-    pageNo,
-    pageSize,
-  })
-  goodsListTwo.value = data.records
-}
-</script>
-
-<template>
-  <div v-if="goodsListOne.length || goodsListTwo.length" class="w-1400px mx-auto mb-160px">
-    <h2 class="!mb-60px fw-700 text-40px text-#363C40 text-center custom-title-font">
-      Product recommendation
-    </h2>
-    <div class="grid grid-gap-66px grid-cols-4 mb-66px">
-      <div v-for="item in goodsListOne" :key="item.id">
-        <common-goods-item :item @update:login="goodsListOne" />
-      </div>
-    </div>
-    <div class="grid grid-gap-66px grid-cols-4">
-      <div v-for="item in goodsListTwo" :key="item.id">
-        <common-goods-item :item @update:login="goodsListTwo" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/business/goods/right.vue

@@ -1,203 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { useUserStore } from '@/stores/modules/user'
-import { addShopCartApi } from '~/api/model/goods'
-
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({}),
-  },
-})
-const emit = defineEmits(['update:data', 'addToCart', 'inquire'])
-const userStore = useUserStore()
-const { isLogin } = storeToRefs(userStore)
-const { openLoginModal } = useLoginModal()
-const temporaryData = ref()
-const price = ref(0)
-const quantity = ref(0)
-
-watch(
-  () => props.data,
-  (data) => {
-    temporaryData.value = JSON.parse(JSON.stringify(data))
-    quantity.value = +data.moq
-    price.value = +data.sellPrice
-    // const timer = setTimeout(() => {
-    //   handlerData(quantity.value)
-    //   clearTimeout(timer)
-    // }, 200)
-  },
-  {
-    immediate: true,
-    deep: true,
-  },
-)
-async function onInquire() {
-  try {
-    const { status, isFirstLogin } = await openLoginModal()
-    if (status) {
-      emit('inquire')
-      if (isFirstLogin)
-        emit('update:data')
-    }
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-const getLabelList = computed(() => {
-  if (!props.data.tag_dictText)
-    return []
-  // 字符串转化为数组
-  return props.data.tag_dictText.split(',')
-})
-</script>
-
-<template>
-  <div class="flex-1">
-    <div class="flex justify-between">
-      <h1
-        class="fw-700 text-30px w-510px lh-40px line-clamp-2 text-#363C40 custom-title-font"
-      >
-        {{ data.merchandiseEnglishName }}
-      </h1>
-      <common-favorite :data="data" w="34px" svg-size="18" />
-    </div>
-    <div v-if="getLabelList.length" class="flex gap-12px mt-20px">
-      <div
-        v-for="item in getLabelList"
-        :key="item.id"
-        class="bg-#8230F5 b-rd-6px text-#fff py-8px px-12px"
-      >
-        {{ item }}
-      </div>
-    </div>
-    <div class="my-20px">
-      <div v-if="isLogin" class="text-24px text-#C58C46 flex">
-        <div class="fw-700 w-200px">
-          Unit Price
-        </div>
-        <span class="cursor-pointer hover:underline fw-500 ml-40px" @click="onInquire">Go inquire</span>
-      </div>
-      <div
-        v-else
-        class="fw-500 text-24px underline my-20px text-#C58C64 cursor-pointer"
-        @click="onInquire"
-      >
-        Inquire
-      </div>
-    </div>
-
-    <div class="py-20px pb-40px">
-      <div class="mb-25px flex">
-        <div class="w-200px text-#666">
-          Product Code
-        </div>
-        <div class="ml-40px text-#333">
-          {{ data.billNo }}
-        </div>
-      </div>
-      <div class="mb-25px flex">
-        <div class="w-200px text-#666">
-          Size
-        </div>
-        <div class="ml-40px text-#333">
-          {{ data.size }} cm
-        </div>
-      </div>
-      <div class="mb-25px flex">
-        <div class="w-200px text-#666">
-          Caton Size
-        </div>
-        <div class="ml-40px text-#333">
-          {{ data.width }}cm * {{ data.height }}cm * {{ data.length }}cm
-        </div>
-      </div>
-      <div class="mb-25px flex">
-        <div class="w-200px text-#666">
-          Material
-        </div>
-        <div class="ml-40px text-#333">
-          others
-        </div>
-      </div>
-      <div class="mb-25px flex">
-        <div class="w-200px text-#666">
-          Packaging Method
-        </div>
-        <div class="ml-40px text-#333">
-          {{ data.packagingMethod }}
-        </div>
-      </div>
-      <div class="mb-25px flex">
-        <div class="w-200px text-#666">
-          QTY/CTN
-        </div>
-        <div class="ml-40px text-#333">
-          {{ data.cartonQuantity }}
-        </div>
-      </div>
-      <div class="mb-25px flex">
-        <div class="w-200px text-#666">
-          Delivery Time
-        </div>
-        <div class="ml-40px text-#333">
-          {{ data.deliveryTime }}
-        </div>
-      </div>
-      <div class="flex items-center">
-        <div class="w-200px text-#666">
-          MOQ
-        </div>
-        <div class="ml-40px text-#333">
-          {{ data.moq }} {{ data.unitCode_dictText }}
-          <!-- <el-input-number
-            :disabled="!isLogin"
-            :model-value="quantity"
-            class="!w-150px custom-input"
-            :step="1"
-            :min="data.moq"
-            @change="changeQuantity"
-          /> -->
-        </div>
-      </div>
-    </div>
-    <el-button
-      plain
-      class="!bg-#C58C46 !text-#fff !w-full !h-48px !text-16px !b-rd-6px"
-      @click="emit('addToCart')"
-    >
-      <!-- Add to Cart (${{ quantity * price ? (quantity * price).toFixed(2) : 0 }}) -->
-      Add to Cart
-    </el-button>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.custom-input {
-  height: 32px !important;
-  border-radius: 2px;
-  ::v-deep(.el-input-number__increase) {
-    width: 36px !important;
-    display: flex;
-    justify-content: items-center;
-    align-items: center;
-    &:hover {
-      color: #c58c64 !important;
-      box-shadow: 0 0 0 1px #c58c64 inset !important;
-    }
-  }
-  ::v-deep(.el-input-number__decrease) {
-    width: 36px !important;
-    display: flex;
-    justify-content: items-center;
-    align-items: center;
-    &:hover {
-      color: #c58c64 !important;
-      box-shadow: 0 0 0 1px #c58c64 inset !important;
-    }
-  }
-}
-</style>

components/business/goods/selectQuantity.vue

@@ -1,242 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { useUserStore } from '@/stores/modules/user'
-import { ossUploadApi } from '@/api/model/common'
-import { addShopCartApi } from '~/api/model/goods'
-
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({}),
-  },
-})
-const emit = defineEmits(['update:data'])
-
-const { openLoginModal } = useLoginModal()
-const temporaryData = ref()
-const input = ref(null)
-const loading = ref(false)
-const price = ref(0)
-const fileArrList = ref<any>([])
-const params = ref<any>({
-  file: '',
-  mid: '',
-  quantity: '',
-  remark: '',
-})
-
-const userStore = useUserStore()
-const { isLogin } = storeToRefs(userStore)
-const visible = defineModel('visible', { type: Boolean, required: true })
-function handleClose() {
-  console.log('close')
-}
-
-watch(
-  () => props.data,
-  (data: any) => {
-    temporaryData.value = JSON.parse(JSON.stringify(data))
-    params.value.quantity = +data.moq
-    params.value.mid = data.id
-    price.value = +data.sellPrice
-  },
-  {
-    immediate: true,
-    deep: true,
-  },
-)
-const totalPrice = computed(() => {
-  return (params.value.quantity * price.value).toFixed(2)
-})
-function changeQuantity(currentValue: any) {
-  params.value.quantity = currentValue
-}
-function uploadData() {
-  input.value?.click()
-}
-function inputChange(e: any) {
-  const fileList = e.target.files
-  // fileList 转化为正式数组
-  const fileArr = Array.from(fileList)
-  fileArr.forEach(async (file: any) => {
-    const resourceUrl = await getResource(file)
-    fileArrList.value.push(resourceUrl)
-  })
-}
-async function getResource(file: any) {
-  try {
-    if (file.size > 1024 * 1024 * 10)
-      return ElMessage.error('Image size cannot exceed 10M')
-    return await ossUploadApi(file)
-  }
-  catch (error) {
-    ElMessage.error('send failed')
-  }
-}
-function getFileTitle(file: string) {
-  const fileArr = file.split('/')
-  return fileArr[fileArr.length - 1]
-}
-function del(i: number) {
-  fileArrList.value = fileArrList.value.filter((item, index) => index !== i)
-}
-async function addShopCart() {
-  try {
-    loading.value = true
-    const { status, isFirstLogin }: any = await openLoginModal()
-    if (status) {
-      params.value.file = fileArrList.value.join(',')
-      await addShopCartApi(params.value)
-      ElMessage({
-        message: 'Add to cart successfully',
-        type: 'success',
-        plain: true,
-      })
-      loading.value = false
-      visible.value = false
-      if (isFirstLogin)
-        emit('update:data')
-    }
-  }
-  catch (error) {
-    loading.value = false
-    console.log(error)
-  }
-  finally {
-    loading.value = false
-  }
-}
-</script>
-
-<template>
-  <el-dialog
-    v-model="visible"
-    :append-to-body="true"
-    width="800"
-    modal-class="custom-select-modal"
-    @close="handleClose"
-  >
-    <template #header>
-      <div
-        class="px-40px py-25px bg-#F5F5F5 b-rd-lt-6px b-rd-rt-6px text-18px fw-700 text-#333"
-      >
-        Select quantity
-      </div>
-    </template>
-    <div class="py-20px px-40px pb-0">
-      <div class="r-rd-8px bg-#F9F9F9 p-24px flex">
-        <img
-          :src="data?.goodsImgOrVideoList[0]"
-          alt=""
-          srcset=""
-          class="w-120px h-120px b-solid b-1px b-#e0e0e0 mr-24px"
-        >
-        <div>
-          <div class="mb-34px custom-title-font !text-20px !fw-700">
-            {{ data.merchandiseEnglishName }}
-          </div>
-          <div class="text-#666">
-            MOQ: {{ data.moq }} {{ data.unitCode_dictText }}
-          </div>
-        </div>
-      </div>
-      <div class="flex justify-end items-center mt-24px mb-20px">
-        <!-- <div class="fw-500 mr-20px">
-          $ {{ price }}
-        </div> -->
-        <el-input-number
-          :disabled="!isLogin"
-          :model-value="params.quantity"
-          class="!w-150px custom-input"
-          :step="1"
-          :min="data.moq"
-          @change="changeQuantity"
-        />
-      </div>
-      <div class="mb-24px text-20px fw-700">
-        Remark
-      </div>
-      <div>
-        <el-input
-          v-model="params.remark"
-          style="width: 100%"
-          :rows="5"
-          type="textarea"
-          placeholder="Please input"
-        />
-        <div class="my-20px py-8px px-20px b-rd-4px cursor-pointer bg-#f0f6ff inline-block" @click="uploadData">
-          <svgo-enclosure class="!w-32px !h-32px text-#0068FF" />
-          <input
-            ref="input"
-            multiple="true"
-            type="file"
-            class="hidden"
-            @change="inputChange"
-          >
-        </div>
-        <div>
-          <div
-            v-for="(items, index) in fileArrList"
-            :key="index"
-            class="py-14px px-16px bg-#F7F8FA flex items-center justify-between mb-16px b-solid b-1px b-#E0E0E0 b-rd-4px"
-          >
-            <div class="flex items-center">
-              <svgo-file
-                class="!w-20px cursor-pointer !h-20px text-#333 mr-16px"
-              />
-              附件{{ index }}：
-              <a :href="items"> {{ getFileTitle(items) }}</a>
-            </div>
-            <img src="@/assets/images/file_delete.png" class="!w-20px cursor-pointer !h-20px" alt="" srcset="" @click="del(index)">
-          </div>
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <div>
-        <!-- <div class="mb-8px">
-          Subtotal
-        </div>
-        <div class="text-20px fw-700 text-#333">
-          $ {{ totalPrice }}
-        </div> -->
-      </div>
-      <el-button
-        plain
-        :loading="loading"
-        class="!bg-#C58C46 !text-#fff !w-240px !h-48px !text-16px !b-rd-6px"
-        @click="addShopCart"
-      >
-        <!-- Add to Cart (${{ quantity * price ? (quantity * price).toFixed(2) : 0 }}) -->
-        Add to Cart
-      </el-button>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="less">
-.custom-select-modal {
-  .el-dialog {
-    padding: unset !important;
-    .el-dialog__header {
-      padding: 0 !important;
-      .el-dialog__headerbtn {
-        right: 10px;
-        top: 10px;
-      }
-    }
-    .el-dialog__footer {
-      padding-top: 25px !important;
-      padding-bottom: 24px !important;
-      padding-left: 40px !important;
-      padding-right: 40px !important;
-      border-top: 1px solid #E0E0E0;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      text-align: left;
-    }
-  }
-}
-</style>

components/business/goods/similarProduct.vue

@@ -1,83 +0,0 @@
-<script lang='ts' setup>
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Navigation, Pagination } from 'swiper/modules'
-import { getGoodsRecommendListApi } from '~/api/model/goods'
-
-// import "swiper/css/pagination"
-import 'swiper/css'
-import 'swiper/css/navigation'
-
-const props = defineProps({
-  id: { type: String, default: '' },
-})
-
-const swiperVertical = ref<any>(null)
-const modules = [Navigation, Pagination]
-const similarGoodsList = ref<any>([])
-watch(() => props.id, (id: any) => {
-  if (!id)
-    return
-  getSimilarGoodsList(id)
-}, {
-  immediate: true,
-})
-async function getSimilarGoodsList(id: any) {
-  try {
-    const params = {
-      id,
-      pageNo: 1,
-      pageSize: 20,
-    }
-    const data: any = await getGoodsRecommendListApi(params)
-    similarGoodsList.value = data.records
-  }
-  catch (error) {
-    console.log('error', error)
-  }
-}
-function onVerticalSwiper(swiper: any) {
-  swiperVertical.value = swiper
-}
-function onClickLeft() {
-  swiperVertical.value.slidePrev()
-}
-function onClickRight() {
-  swiperVertical.value.slideNext()
-}
-</script>
-
-<template>
-  <div v-if="similarGoodsList.length" class="w-1400px mx-auto my-160px">
-    <h2 class="!mb-60px fw-700 text-40px text-#363C40 text-center custom-title-font">
-      Shop Similar Products
-    </h2>
-    <div>
-      <div class="w-1300px mx-auto pos-relative">
-        <div
-          class="pos-absolute cursor-pointer left--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-          @click="onClickLeft()"
-        >
-          <img src="~/assets/images/arrow_left.png" alt="" class="w-26px h-26px" srcset="">
-        </div>
-        <div
-          class="pos-absolute cursor-pointer  right--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-          @click="onClickRight()"
-        >
-          <img src="~/assets/images/arrow_right.png" alt="" class="w-26px h-26px" srcset="">
-        </div>
-        <Swiper
-          v-if="similarGoodsList.length"
-          :slides-per-view="4" :space-between="55" :modules="modules" :loop="true" :navigation="false"
-          :pagination="true" class="pos-relative" @swiper="onVerticalSwiper"
-        >
-          <SwiperSlide v-for="(item, index) in similarGoodsList" :key="index">
-            <common-goods-item :item="item" />
-          </SwiperSlide>
-        </Swiper>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/business/home/banner.vue

@@ -1,5 +1,4 @@
 <script lang='ts' setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useUserStore } from '@/stores/modules/user'
 
 const userStore = useUserStore()

components/business/home/blogs.vue

@@ -1,89 +0,0 @@
-<script lang='ts' setup>
-import img01 from '@/assets/images/home_blog_img01.png'
-import img02 from '@/assets/images/home_blog_img02.png'
-import img03 from '@/assets/images/home_blog_img03.png'
-import {
-  getBlogsListApi,
-} from '~/api/model/blogs'
-
-const list = ref<any>([])
-// [
-//   {
-//     img: img01,
-//     title: 'The Ultimate Guide to Choosing aPerfect',
-//     link: '',
-//   },
-//   {
-//     img: img02,
-//     title: 'The Ultimate Guide to Choosing aPerfect',
-//     link: '',
-//   },
-//   {
-//     img: img03,
-//     title: 'The Ultimate Guide to Choosing aPerfect',
-//     link: '',
-//   },
-// ]
-
-async function getVideoOrBlogsList(pageNo = 1, pageSize = 3) {
-  const params = {
-    pageNo,
-    pageSize,
-    categoryId: '',
-    orderBy: 'createTime',
-    orderType: 'desc',
-  }
-  const res: any = await getBlogsListApi(params)
-  list.value = res.records
-}
-getVideoOrBlogsList()
-</script>
-
-<template>
-  <div class="mt-160px mb-150px text-center">
-    <h2 class="fw-600 text-40px text-#363C40 custom-title-font">
-      Latest Blogs
-    </h2>
-    <div class="mt-20px w-500px mx-auto text-#999 text-16px lh-24px">
-      Stay informed with industry trends, product highlights, and expert tips to
-      help you grow your business.
-    </div>
-    <div class="mt-60px px-75px grid grid-cols-3 gap-106px text-left">
-      <div v-for="item, index in list" :key="index">
-        <NuxtLink to="/register">
-          <!-- <img :src="item.thumbnailUrl" alt="" srcset="" class="hover-effect w-352px h-352px b-rd-10px">
-          <div class="mt-20px">
-            <div class="mb-10px text-#666 text-14px">
-              {{ item.contentType === '1' ? 'Blog' : 'Video' }}
-            </div>
-            <h3 class="!mb-10px fw-600 text-24px text-#363C40 line-clamp-2 custom-title-font">
-              {{ item.contentTitle }}
-            </h3>
-            <h2 class="!mb-20px  text-14px text-#999 line-clamp-2">
-              {{ item.contentSubhead }}
-            </h2>
-            <div class="text-14px text-#C58C64 cursor-pointer read-more pos-relative  ">
-              Read More
-            </div>
-          </div> -->
-          <common-blog-item :item="item" />
-        </NuxtLink>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-.read-more {
-  &:after{
-    position: absolute;
-    content: "";
-    bottom: -4px;
-    left: 0;
-   width: 18%;
-    height: 2px;
-    background: #CDA274 ;
-    transition: height 0.3s, background 0.3s; /* 明确过渡效果 */
-  }
-}
-</style>

components/business/home/brands.vue

@@ -1,87 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Navigation, Pagination } from 'swiper/modules'
-import 'swiper/css'
-import 'swiper/css/navigation'
-import { getHomeBrandListApi } from '~/api/model/brand'
-// import "swiper/css/pagination"
-
-const modules = [Navigation, Pagination]
-const brandList = ref<any>([])
-const swiperVertical = ref<any>(null)
-
-getHomeBrandList()
-async function getHomeBrandList() {
-  try {
-    const params = {
-      pageNo: 1,
-      pageSize: 8,
-    }
-    const data: any = await getHomeBrandListApi(params)
-    brandList.value = data.records
-  }
-  catch (error) {
-    console.log('error', error)
-  }
-}
-
-function onVerticalSwiper(swiper: any) {
-  swiperVertical.value = swiper
-}
-function onClickLeft() {
-  // swiperVertical.value.slideTo()
-  swiperVertical.value.slidePrev()
-}
-function onClickRight() {
-  // swiperVertical.value.slideTo(4)
-  swiperVertical.value.slideNext()
-}
-</script>
-
-<template>
-  <div class="pt-100px text-center">
-    <h2 class="fw-600 text-40px text-#363C40 custom-title-font">
-      Our Top Brands
-    </h2>
-    <div class="mt-20px w-500px mx-auto text-#999 text-16px lh-24px">
-      Wholesale unique and high-quality products from trusted Chinese brands,
-      all in one place.
-    </div>
-    <div class="my-60px">
-      <div class="w-1300px mx-auto pos-relative">
-        <div
-          class="pos-absolute cursor-pointer left--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-          @click="onClickLeft()"
-        >
-          <img src="~/assets/images/arrow_left.png" alt="" class="w-26px h-26px" srcset="">
-        </div>
-        <div
-          class="pos-absolute cursor-pointer  right--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-          @click="onClickRight()"
-        >
-          <img src="~/assets/images/arrow_right.png" alt="" class="w-26px h-26px" srcset="">
-        </div>
-        <Swiper
-          v-if="brandList.length" :slides-per-view="4" :space-between="55" :modules="modules" :loop="true" :navigation="false"
-          :pagination="true" class="pos-relative" @swiper="onVerticalSwiper"
-        >
-          <SwiperSlide v-for="(item, index) in brandList" :key="index">
-            <common-brand-item :item="item" />
-          </SwiperSlide>
-        </Swiper>
-      </div>
-    </div>
-    <div class="flex justify-center items-center">
-      <NuxtLink to="/suppliers/all-brands" class="flex justify-center items-center cursor-pointer">
-        <div class="underline fw-600 text-#5B463E text-22px hover:text-#CC9879 custom-title-font">
-          View All
-        </div>
-        <svgo-arrow class="!w-20px !h-20px ml-16px" />
-      </NuxtLink>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped></style>

components/business/home/products.vue

@@ -1,126 +0,0 @@
-<script lang='ts' setup>
-import {
-  getFeatureListApi,
-} from '~/api/model/feature'
-
-const list = ref<any>([])
-
-async function getFeatureList(pageNo = 1, pageSize = 4) {
-  const params = {
-    pageNo,
-    pageSize,
-  }
-  const res: any = await getFeatureListApi(params)
-  list.value = res.records
-}
-getFeatureList()
-</script>
-
-<template>
-  <div class="pt-160px text-center">
-    <h2 class="fw-600 text-40px text-#363C40 custom-title-font">
-      Product Collections
-    </h2>
-    <div class="mt-20px w-500px mx-auto text-#999 text-16px lh-24px">
-      Stay ahead with our selection of trending and exclusive products across various categories.
-    </div>
-    <div class="flex my-60px">
-      <div class="pos-relative mr-20px">
-        <img :src="list[0]?.thumbnailUrl" alt="" class="w-580px h-860px object-cover b-rd-20px" srcset="">
-        <div class="pos-absolute bottom-0 w-100% p-20px">
-          <div class="text-#fff text-left">
-            <h3 class="fw-600 w-400px filterText text-26px !mb-10px custom-title-font">
-              {{ list[0]?.title }}
-            </h3>
-            <div class="text-18px w-400px line-clamp-2 filterText mb-20px text-#d9d4cf lh-28px">
-              {{ list[0]?.headImageText }}
-            </div>
-          </div>
-
-          <NuxtLink v-if="list[0]" class="cursor-pointer" :to="{ name: 'collections-name', params: { name: list[0]?.slug } }">
-            <svgo-arrowRight
-              class="!w-40px !h-40px cursor-pointer hover-effect !fill-#fff text-16px"
-              :filled="true"
-            />
-          </NuxtLink>
-        </div>
-        <img src="~/assets/images/decorate.png" class="w-384px h-128px pos-absolute top-0 right-6px" alt="" srcset="">
-      </div>
-      <div>
-        <div class="pos-relative">
-          <img :src="list[1]?.thumbnailUrl" alt="" class="w-800px h-406px object-cover b-rd-20px" srcset="">
-          <div class="pos-absolute bottom-0 w-100% p-20px">
-            <div class="text-#fff text-left">
-              <h3 class="fw-600 w-600px filterText  text-26px !mb-10px custom-title-font">
-                {{ list[1]?.title }}
-              </h3>
-              <div class="text-18px w-400px filterText line-clamp-2 mb-20px text-#d9d4cf lh-28px">
-                {{ list[1]?.headImageText }}
-              </div>
-            </div>
-            <NuxtLink v-if="list[1]" class="cursor-pointer" :to="{ name: 'collections-name', params: { name: list[1]?.slug } }">
-              <svgo-arrowRight
-                class="!w-40px !h-40px cursor-pointer hover-effect !fill-#fff text-16px"
-                :filled="true"
-              />
-            </NuxtLink>
-          </div>
-        </div>
-        <div class="flex mt-20px">
-          <div class="pos-relative mr-20px">
-            <img :src="list[2]?.thumbnailUrl" alt="" class="w-390px h-434px object-cover b-rd-20px" srcset="">
-            <div class="pos-absolute bottom-0 w-100% p-20px">
-              <div class="text-#fff text-left">
-                <h3 class="fw-500 w-400px filterText text-26px !mb-10px custom-title-font">
-                  {{ list[2]?.title }}
-                </h3>
-                <div class="text-18px w-280px line-clamp-2 filterText mb-20px text-#d9d4cf lh-28px">
-                  {{ list[2]?.headImageText }}
-                </div>
-              </div>
-              <NuxtLink v-if="list[2]" class="cursor-pointer" :to="{ name: 'collections-name', params: { name: list[2]?.slug } }">
-                <svgo-arrowRight
-                  class="!w-40px !h-40px   cursor-pointer hover-effect !fill-#fff text-16px"
-                  :filled="true"
-                />
-              </NuxtLink>
-            </div>
-          </div>
-          <div class="pos-relative">
-            <img :src="list[3]?.thumbnailUrl" alt="" class="w-390px h-434px object-cover b-rd-20px" srcset="">
-            <div class="pos-absolute bottom-0 w-100% p-20px">
-              <div class="text-#fff text-left">
-                <h3 class="fw-600 w-400px filterText text-26px mb-10px custom-title-font">
-                  {{ list[3]?.title }}
-                </h3>
-                <div class="text-18px w-280px line-clamp-2 filterText mb-20px text-#d9d4cf lh-28px">
-                  {{ list[3]?.headImageText }}
-                </div>
-              </div>
-              <NuxtLink v-if="list[3]" class="cursor-pointer" :to="{ name: 'collections-name', params: { name: list[3]?.slug } }">
-                <svgo-arrowRight
-                  class="!w-40px !h-40px cursor-pointer hover-effect !fill-#fff text-16px"
-                  :filled="true"
-                />
-              </NuxtLink>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="flex justify-center items-center">
-      <NuxtLink to="/collections" class="flex justify-center items-center cursor-pointer">
-        <div class="underline fw-600 text-#5B463E text-22px hover:text-#CC9879 custom-title-font">
-          View All
-        </div>
-        <svgo-arrow class="!w-20px !h-20px ml-16px" />
-      </NuxtLink>
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-.filterText{
-  filter: drop-shadow(2px 4px 6px black);
-}
-</style>

components/business/home/week.vue

@@ -1,84 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { PageSizeEnum } from '~/enums/sizeEnum'
-import {
-  getGoodsHotSaleListApi,
-  getGoodsListApi,
-  getGoodsTrendingListApi,
-} from '~/api/model/goods'
-
-const goodsList = ref<any>([])
-const labelGroup = ref<any>([
-  {
-    label: 'New Arrivals',
-    value: 'arrivals',
-  },
-  {
-    label: 'Bestsellers',
-    value: 'hotSale',
-  },
-  {
-    label: 'Trending',
-    value: 'trends',
-  },
-])
-const active = ref<string>('arrivals')
-async function getGoodsList(params?: any, pageNo = PageSizeEnum.PAGE, pageSize = 8) {
-  const fetchTask: any
-    = active.value === 'arrivals'
-      ? getGoodsListApi
-      : active.value === 'trends'
-        ? getGoodsTrendingListApi
-        : getGoodsHotSaleListApi
-  const data = await fetchTask({
-    ...params,
-    pageNo,
-    pageSize,
-  })
-  goodsList.value = data.records
-}
-function selectLabel(val: string) {
-  active.value = val
-  getGoodsList()
-}
-
-getGoodsList()
-</script>
-
-<template>
-  <div class="pt-120px text-center">
-    <h2 class="fw-600 text-40px text-#363C40 custom-title-font">
-      Products of The Week
-    </h2>
-    <div class="mt-20px w-500px mx-auto text-#999 text-16px lh-24px">
-      Navigate through our diverse range of categories to find the products that fit your retail needs.
-    </div>
-    <div class="mt-40px mb-60px">
-      <div class="flex mb-40px gap-85px justify-center">
-        <div
-          v-for="item in labelGroup"
-          :key="item.value"
-          class="cursor-pointer hover:text-#C58C64 pos-relative after:content-empty after:left-30% after:right-30% after:bottom--10px after:h-2px after:bg-#C58C64"
-          :class="active === item.value && 'text-#C58C64 after:pos-absolute'"
-          @click="selectLabel(item.value)"
-        >
-          <h3>
-            {{ item.label }}
-          </h3>
-        </div>
-      </div>
-      <div class="grid grid-gap-66px grid-cols-4">
-        <div v-for="item in goodsList" :key="item.id">
-          <common-goods-item :item @update:login="getGoodsList" />
-        </div>
-      </div>
-      <!-- <div class="flex justify-center items-center cursor-pointer">
-        <div class="underline fw-500 text-32px hover:text-#CC9879">
-          View All
-        </div>
-        <svgo-arrow class="!w-12px !h-12px ml-14px" />
-      </div> -->
-    </div>
-  </div>
-</template>

components/business/order/step.vue

@@ -1,106 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-const step = ref(0)
-const items = [
-  {
-    key: 'one',
-    title: 'Submit a wish order',
-    description: 'Submit a wish order',
-  },
-  {
-    key: 'two',
-    title: 'Settle essential terms',
-    description: 'Our customer service staff will approach to you to settle the the required terms with you , and will then prepare PI',
-  },
-  {
-    key: 'three',
-    title: 'Confirm PI',
-    description: 'After you confirm the PI sent to you, a deal is made',
-  },
-  {
-    key: 'four',
-    title: 'Order made',
-    description: 'We will make the order, and you may check it in my orders',
-  },
-]
-</script>
-
-<template>
-  <div class="custom-order-steps" style="height: 400px; max-width: 600px">
-    <el-steps :active="step" direction="vertical" align-center finish-status="success">
-      <el-step v-for="item in items" :key="item.key" :title="item.title" :description="item.description" />
-    </el-steps>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.custom-order-steps {
-  ::v-deep(.el-step) {
-    .el-step__head {
-        width: 32px;
-      .el-step__line {
-        top: 45% !important;
-        left: 50% !important;
-        bottom: 15% !important;
-        transform: translateX(-50%);
-        background-color: #CCCCCC !important;
-        .el-step__line-inner{
-          border: unset!important;
-        }
-      }
-      &.is-process{
-      .el-step__icon { width: 32px;
-        height: 32px;
-        background-color: #cc9879 !important;
-        border: unset !important;
-        .el-step__icon-inner {
-          color: #fff !important;
-        }
-      }
-    }
-    &.is-wait{
-        .el-step__icon { width: 32px;
-          height: 32px;
-        border: 1px solid #5B463E  !important;
-        .el-step__icon-inner {
-          color: #5B463E  !important;
-        }
-      }
-    }
-    &.is-success{
-      .el-step__icon { width: 32px;
-          height: 32px;
-        background-color: #E9E9E9 !important;
-        border: 1px solid #E9E9E9  !important;
-        .el-step__icon-inner {
-          color: #666666  !important;
-        }
-      }
-    }
-}
-    .el-step__main{
-        padding-left: 40px;
-        .el-step__title{
-            font-weight: 600 !important;
-            margin-bottom: 10px;
-            padding-bottom: unset;
-            &.is-process{
-                // font-weight: normal!important;
-            }
-            &.is-wait{
-                // font-weight: normal!important;
-                color: #5B463E!important;
-            }
-            &.is-success{
-              color: #5B463E!important;
-            }
-        }
-        .el-step__description{
-            font-size: 14px;
-            color: #333333;
-        }
-    }
-  }
-}
-</style>

components/business/register/step.vue

@@ -1,89 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { useRegister } from '~/pages/register/useRegister'
-
-const { currentStep } = useRegister()
-const items = [
-  {
-    key: 'Company',
-    title: 'Company',
-  },
-  {
-    key: 'Personal',
-    title: 'Personal',
-  },
-  {
-    key: 'Email',
-    title: 'Email',
-  },
-]
-</script>
-
-<template>
-  <div class="custom-steps">
-    <el-steps :active="currentStep" align-center finish-status="success">
-      <el-step v-for="item in items" :key="item.key" :title="item.title" />
-    </el-steps>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.custom-steps {
-  ::v-deep(.el-step) {
-    .el-step__head {
-      .el-step__line {
-        left: 65% !important;
-        right: -35% !important;
-        background-color: #CCCCCC !important;
-        .el-step__line-inner{
-          border: unset!important;
-        }
-      }
-      &.is-process{
-      .el-step__icon { width: 32px;
-        height: 32px;
-        background-color: #cc9879 !important;
-        border: unset !important;
-        .el-step__icon-inner {
-          color: #fff !important;
-        }
-      }
-    }
-    &.is-wait{
-        .el-step__icon { width: 32px;
-          height: 32px;
-        border: 1px solid #5B463E  !important;
-        .el-step__icon-inner {
-          color: #5B463E  !important;
-        }
-      }
-    }
-    &.is-success{
-      .el-step__icon { width: 32px;
-          height: 32px;
-        background-color: #E9E9E9 !important;
-        border: 1px solid #E9E9E9  !important;
-        .el-step__icon-inner {
-          color: #666666  !important;
-        }
-      }
-    }
-}
-    .el-step__main{
-        .el-step__title{
-            &.is-process{
-                font-weight: normal!important;
-            }
-            &.is-wait{
-                font-weight: normal!important;
-                color: #5B463E!important;
-            }
-            &.is-success{
-              color: #5B463E!important;
-            }
-        }
-    }
-  }
-}
-</style>

components/business/register/stepOne.vue

@@ -1,236 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import type { FormInstance, FormRules } from 'element-plus'
-import DragVerify from '~/components/common/drag-verify/index.vue'
-import { useRegister } from '~/pages/register/useRegister'
-import { getDictListApi } from '~/api/model/common'
-import { passwordRegular } from '~/enums/regEnum'
-
-const { params, register, backStep } = useRegister()
-
-const mobileAreaCodeList = ref()
-const ruleFormRef = ref<FormInstance>()
-const rules = ref<FormRules>({
-  firstName: [
-    {
-      required: true,
-      message: 'FirstName must be filled in',
-      trigger: 'blur',
-    },
-  ],
-  lastName: [
-    {
-      required: true,
-      message: 'LastName must be filled in',
-      trigger: 'blur',
-    },
-  ],
-  email: [
-    { required: true, message: 'Email must be filled in', trigger: 'blur' },
-    {
-      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-      message: 'please fill in correct email',
-    },
-  ],
-  mobile: [
-    {
-      required: true,
-      message: 'Mobile must be filled in',
-      trigger: 'blur',
-    },
-  ],
-  password: [
-    {
-      required: true,
-      trigger: 'change',
-      validator: (rule, value, callback) => {
-        if (value) {
-          if (passwordRegular.test(value))
-            callback()
-          else
-            callback(new Error('Please enter password that matches the rules'))
-        }
-
-        else { callback(new Error('Password must be filled in')) }
-      },
-    },
-  ],
-  checked: [
-    {
-      required: true,
-      validator: (rule, value, callback) => {
-        if (value)
-          callback()
-        else callback(new Error('Please check the agreement'))
-      },
-    },
-  ],
-  isUnlock: [
-    {
-      required: true,
-      validator: (rule, value, callback) => {
-        if (value)
-          callback()
-        else callback(new Error('Please slide to verity'))
-      },
-    },
-  ],
-})
-async function getMobileAreaCodeList() {
-  const list = await getDictListApi('A064')
-  mobileAreaCodeList.value = list
-}
-async function submitForm(formEl: FormInstance | undefined) {
-  if (!formEl)
-    return
-  await formEl.validate((valid, fields) => {
-    if (valid)
-      register()
-    else
-      console.log('error submit!', fields)
-  })
-}
-getMobileAreaCodeList()
-</script>
-
-<template>
-  <div>
-    <div class="fw-500 mb-24px text-40px text-#000">
-      Personal
-    </div>
-    <el-form
-      ref="ruleFormRef"
-      :model="params"
-      :rules="rules"
-      label-width="auto"
-      size="default"
-      status-icon
-    >
-      <div class="flex">
-        <el-form-item
-          class="custom-form-item custom-form-item-hidden-label mr-12px"
-          label="Full Name"
-          prop="firstName"
-        >
-          <el-input v-model="params.firstName" placeholder="Full Name" class="h-50px" />
-        </el-form-item>
-        <el-form-item
-          class="custom-form-item custom-form-item-hidden-label mr-12px"
-          label="Last Name"
-          prop="lastName"
-        >
-          <el-input v-model="params.lastName" placeholder="Last Name" class="h-50px" />
-        </el-form-item>
-      </div>
-      <el-form-item
-        label="Email"
-        class="custom-form-item     "
-        prop="email"
-      >
-        <el-input v-model="params.email" placeholder="Email" class="h-50px" />
-      </el-form-item>
-      <el-form-item
-        label="Mobile Number"
-        class="custom-form-item"
-        prop="mobile"
-      >
-        <el-input v-model="params.mobile" placeholder="Mobile Number" class="h-50px">
-          <template #prepend>
-            <el-select v-model="params.mobileAreaCode" class="!h-50px" placeholder="Select" style="width: 120px">
-              <el-option
-                v-for="(item, index) in mobileAreaCodeList"
-                :key="index"
-                :value="item.value"
-                :label="`${item.value} ${item.label}`"
-              >
-                {{ item.value }} {{ item.label }}
-              </el-option>
-            </el-select>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item
-        label="Create Password"
-        class="custom-form-item"
-        prop="password"
-      >
-        <el-popover
-          placement="right"
-          :width="270"
-          class="!text-#5B463E !text-16px"
-          trigger="hover"
-          content="6-20 characters, contain letters numbers or symbols only"
-        >
-          <template #reference>
-            <el-input v-model="params.password" :show-password="true" placeholder="Password" class="h-50px" />
-          </template>
-        </el-popover>
-      </el-form-item>
-      <el-form-item label="Verity" class="custom-form-item !mb-12px" prop="isUnlock">
-        <DragVerify
-          v-model:value="params.isUnlock"
-          start-text="please slide to verify"
-        />
-      </el-form-item>
-      <el-form-item label="" class="custom-form-item" prop="checked">
-        <el-checkbox v-model="params.checked">
-          I agree to the
-        </el-checkbox>
-        <span class="text-16px text-#CC9879 cursor-pointer">《Terms & Conditions》
-        </span>
-        <a href="/policy"> <span class="text-16px text-#CC9879 cursor-pointer"> Privacy Policy
-        </span></a>.
-      </el-form-item>
-      <el-form-item class="custom-form-item">
-        <el-button
-          class="!bg-#fff !text-#5B463E !w-48% !h-50px !text-18px !fw-500 !b-rd-6px b-#5B463E"
-          @click="backStep"
-        >
-          Back
-        </el-button>
-        <el-button
-          class="!bg-#C58C64 !text-#fff !ml-0 !w-48% !h-50px !text-18px !fw-500 !b-rd-6px"
-          @click="submitForm(ruleFormRef)"
-        >
-          Next
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<style lang="less" scoped>
-:deep(.custom-form-item) {
-  margin-bottom: 22px;
-  display: block !important;
-  .el-form-item__content{
-    justify-content: space-between;
-    .el-input{
-      .el-select{
-        .el-select__wrapper{
-          height: 50px!important;
-          background-color: #fff!important;
-        }
-      }
-    }
-  }
-
-  .el-form-item__label-wrap {
-     margin-left: unset!important;
-     .el-form-item__label {
-        margin-bottom: 5px;
-        font-size: 16px !important;
-        color: #5b463e !important;
-      }
-    }
-  &.custom-form-item-hidden-label {
-    width: 270px;
-    &:last-child {
-      .el-form-item__label-wrap {
-        opacity: 0;
-      }
-    }
-  }
-}
-</style>

components/business/register/stepThree.vue

@@ -1,52 +0,0 @@
-<script lang='ts' setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-
-const enum Status {
-  unResend = 'unResend',
-  reSended = 'reSended',
-}
-const isResend = ref(Status.unResend)
-function resend() {
-  isResend.value = Status.reSended
-}
-</script>
-
-<template>
-  <div class="mt-80px">
-    <div v-if="isResend === Status.unResend">
-      <h1 class="fw-500 text-40px">
-        Verity Your Account
-      </h1>
-      <div class="mt-14px mb-40px">
-        We are asking all customers to verify their accounts. To confirm your account, please check your email and click the verification link that our team has sent over.
-      </div>
-      <el-button
-        class="!bg-#C58C64 !text-#fff !w-200px !h-50px !text-16px !fw-500 !b-rd-6px"
-        @click="resend"
-      >
-        Next
-      </el-button>
-    </div>
-    <div v-if="isResend === Status.reSended">
-      <div class="fw-500 text-40px mb-24px text-#000">
-        Email has been sent
-      </div>
-      <div class="mb-24px w-460px text-16px text-#1F2D2C lh-24px">
-        Still not received? you can try to contact our customerservice to solve
-        this issue
-      </div>
-      <div class="text-#1F2D2C text-16px">
-        <div class="fw-bold mb-10px">
-          Customer service
-        </div>
-        <div class="">
-          Hotline: +86 13588692156
-        </div>
-        <div>Email: marketing@ejet.com</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/business/register/stepTwo.vue

@@ -1,280 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import type { FormInstance, FormRules } from 'element-plus'
-import { useRegister } from '~/pages/register/useRegister'
-import { getCategoryListApi, getDictListApi } from '~/api/model/common'
-
-const { params, nextStep } = useRegister()
-
-const countryList = ref()
-const categoryList = ref()
-const businessTypesList = ref()
-const annualPurchaseAmountList = ref()
-const companySizeList = ref()
-
-const ruleFormRef = ref<FormInstance>()
-const rules = ref<FormRules>({
-  country: [
-    {
-      required: true,
-      message: 'Country must be selected',
-      trigger: 'change',
-    },
-  ],
-  companyName: [
-    {
-      required: true,
-      message: 'CompanyName must be filled in',
-      trigger: 'blur',
-    },
-  ],
-  purchaseCategory: [
-    {
-      required: true,
-      message: 'Category must be selected',
-      trigger: 'change',
-    },
-  ],
-  companyType: [
-    {
-      required: true,
-      message: 'CompanyType must be selected',
-      trigger: 'change',
-    },
-  ],
-  annualPurchaseAmount: [
-    {
-      required: true,
-      message: 'AnnualPurchaseAmount must be selected',
-      trigger: 'change',
-    },
-  ],
-  companySize: [
-    {
-      required: true,
-      message: 'CompanySize must be selected',
-      trigger: 'blur',
-    },
-  ],
-
-})
-async function getCountryList() {
-  const list = await getDictListApi('A070')
-  countryList.value = list
-}
-async function getBusinessTypesList() {
-  const list = await getDictListApi('A071')
-  businessTypesList.value = list
-}
-async function getAnnualPurchaseAmountList() {
-  const list = await getDictListApi('A072')
-  annualPurchaseAmountList.value = list
-}
-async function getCompanySizeList() {
-  const list = await getDictListApi('A167')
-  companySizeList.value = list
-}
-async function getCategoryList() {
-  const list = await getCategoryListApi({
-    all: false,
-  })
-  categoryList.value = list
-}
-
-async function submitForm(formEl: FormInstance | undefined) {
-  if (!formEl)
-    return
-  await formEl.validate((valid, fields) => {
-    if (valid)
-      nextStep()
-    else
-      console.log('error submit!', fields)
-  })
-}
-getCountryList()
-getCategoryList()
-getCompanySizeList()
-getBusinessTypesList()
-getAnnualPurchaseAmountList()
-</script>
-
-<template>
-  <div>
-    <div class="fw-500 mb-24px text-40px text-#000">
-      Company
-    </div>
-    <el-form
-      ref="ruleFormRef"
-      :model="params"
-      :rules="rules"
-      label-width="auto"
-      size="default"
-      status-icon
-    >
-      <el-form-item label="Country" prop="country" class="custom-form-item">
-        <el-select v-model="params.country" placeholder="Country" filterable>
-          <el-option
-            v-for="(item, index) in countryList"
-            :key="index"
-            class="!h-50px !lh-50px"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item
-        label="Company Name"
-        class="custom-form-item"
-        prop="companyName"
-      >
-        <el-input
-          v-model="params.companyName"
-          placeholder="Company name"
-          class="h-50px"
-        />
-      </el-form-item>
-
-      <el-form-item
-        label="Category"
-        prop="purchaseCategory"
-        class="custom-form-item"
-      >
-        <el-select v-model="params.purchaseCategory" placeholder="Category" multiple>
-          <el-option
-            v-for="(item, index) in categoryList"
-            :key="index"
-            class="!h-50px !lh-50px"
-            :label="item.title"
-            :value="item.key"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        label="Business Types"
-        prop="companyType"
-        class="custom-form-item"
-      >
-        <el-select v-model="params.companyType" placeholder="Business Types">
-          <el-option
-            v-for="(item, index) in businessTypesList"
-            :key="index"
-            class="!h-50px !lh-50px"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        label="Annual sourcing budget"
-        prop="annualPurchaseAmount"
-        class="custom-form-item"
-      >
-        <el-select
-          v-model="params.annualPurchaseAmount"
-          placeholder="Annual sourcing budget"
-        >
-          <el-option
-            v-for="(item, index) in annualPurchaseAmountList"
-            :key="index"
-            class="!h-50px !lh-50px"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        label="company size"
-        prop="companySize"
-        class="custom-form-item"
-      >
-        <el-select
-          v-model="params.companySize"
-          placeholder="company size"
-        >
-          <el-option
-            v-for="(item, index) in companySizeList"
-            :key="index"
-            class="!h-50px !lh-50px"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Website" class="custom-form-item">
-        <el-input
-          v-model="params.website"
-          placeholder="website"
-          class="h-50px"
-        />
-      </el-form-item>
-      <el-form-item class="form-footer mt-50px">
-        <!-- <el-button
-          class="!bg-#fff !text-#5B463E !w-48% !h-50px !text-18px !fw-500 !b-rd-6px b-#5B463E"
-          @click="backStep"
-        >
-          Back
-        </el-button>
-        <el-button
-          class="!bg-#C58C64 !text-#fff !ml-0 !w-48% !h-50px !text-18px !fw-500 !b-rd-6px"
-          @click="submitForm(ruleFormRef)"
-        >
-          Next
-        </el-button> -->
-        <el-button class="!bg-#C58C64 !text-#fff !w-full !h-50px !text-16px !fw-500 !b-rd-6px " @click="submitForm(ruleFormRef)">
-          Next
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<style lang="less" scoped>
-:deep(.custom-form-item) {
-  width: 100%;
-  margin-bottom: 22px;
-  display: block !important;
-  .el-select__wrapper {
-    height: 50px !important;
-  }
-  .el-form-item__label-wrap {
-    margin-left: unset !important;
-    .el-form-item__label {
-      margin-bottom: 5px;
-      font-size: 16px !important;
-      color: #5b463e !important;
-    }
-  }
-
-  .el-checkbox {
-    .el-checkbox__input {
-        &.is-checked {
-            .el-checkbox__inner {
-                color: #CC9879 !important;
-                background-color: #CC9879 !important;
-                border: 1px solid #CC9879 !important;
-            }
-        }
-
-        .el-checkbox__inner {
-            &:hover {
-                border-color: #CC9879 !important;
-            }
-        }
-    }
-
-    &.is-checked {
-        .el-checkbox__label {
-            color: #CC9879 !important;
-        }
-    }
-}
-}
-::v-deep(.form-footer) {
-  .el-form-item__content {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-</style>

components/business/reset-password/stageOne.vue

@@ -1,153 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import type { FormInstance, FormRules } from 'element-plus'
-import { useReset } from '~/pages/reset-password/useReset'
-import { passwordRegular } from '~/enums/regEnum'
-import { resetOrChangePasswordApi } from '~/api/model/user'
-
-const { setStage } = useReset()
-const ruleFormRef = ref<FormInstance>()
-const params = ref({
-  newPassword: '',
-  confirmPassword: '',
-})
-const rules = ref<FormRules>({
-  newPassword: [
-    {
-      required: true,
-      trigger: 'change',
-      validator: (rule, value, callback) => {
-        if (value) {
-          if (passwordRegular.test(value))
-            callback()
-          else
-            callback(new Error('Please enter password that matches the rules'))
-        }
-
-        else { callback(new Error('Password must be filled in')) }
-      },
-    },
-  ],
-  confirmPassword: [
-    {
-      required: true,
-      trigger: 'change',
-      validator: (rule, value, callback) => {
-        if (value) {
-          if (passwordRegular.test(value))
-            callback()
-          else
-            callback(new Error('Please enter password that matches the rules'))
-        }
-
-        else { callback(new Error('Password must be filled in')) }
-      },
-    },
-  ],
-})
-
-async function submitForm(formEl: FormInstance | undefined) {
-  if (!formEl)
-    return
-  await formEl.validate(async (valid, fields) => {
-    if (valid) {
-      const route = useRoute()
-      const token = route.query.t
-      await resetOrChangePasswordApi({ ...params.value, token })
-      setStage()
-    }
-    else { console.log('error submit!', fields) }
-  })
-}
-</script>
-
-<template>
-  <div>
-    <div class="fw-500 text-40px text-#1F2D2C mb-40px">
-      Reset Password
-    </div>
-    <el-form
-      ref="ruleFormRef"
-      :model="params"
-      :rules="rules"
-      label-width="auto"
-      size="default"
-      status-icon
-    >
-      <el-form-item
-        label="New Password"
-        class="custom-form-item"
-        prop="newPassword"
-      >
-        <el-popover
-          placement="right"
-          :width="270"
-          class="!text-#5B463E !text-16px"
-          trigger="hover"
-          content="6-20 characters, contain letters numbers or symbols only"
-        >
-          <template #reference>
-            <el-input v-model="params.newPassword" :show-password="true" placeholder="Please enter a new password" class="h-50px" />
-          </template>
-        </el-popover>
-      </el-form-item>
-      <el-form-item
-        label="Confirm New Password"
-        class="custom-form-item"
-        prop="confirmPassword"
-      >
-        <el-popover
-          placement="right"
-          :width="270"
-          class="!text-#5B463E !text-16px"
-          trigger="hover"
-          content="6-20 characters, contain letters numbers or symbols only"
-        >
-          <template #reference>
-            <el-input v-model="params.confirmPassword" :show-password="true" placeholder="Please enter a new password" class="h-50px" />
-          </template>
-        </el-popover>
-      </el-form-item>
-      <el-form-item>
-        <el-button plain class="!bg-#CC9879 !text-#fff !w-full !h-50px !text-18px !fw-500 !b-rd-6px " @click="submitForm(ruleFormRef)">
-          Submit
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<style lang="less" scoped>
-:deep(.custom-form-item) {
-  margin-bottom: 40px;
-  display: block !important;
-  .el-form-item__content{
-    .el-input{
-      .el-select{
-        .el-select__wrapper{
-          height: 50px!important;
-          background-color: #fff!important;
-        }
-      }
-    }
-  }
-
-  .el-form-item__label-wrap {
-     margin-left: unset!important;
-     .el-form-item__label {
-        margin-bottom: 5px;
-        font-size: 16px !important;
-        color: #5b463e !important;
-      }
-    }
-  &.custom-form-item-hidden-label {
-    width: 270px;
-    &:last-child {
-      .el-form-item__label-wrap {
-        opacity: 0;
-      }
-    }
-  }
-}
-</style>

components/business/reset-password/stageTwo.vue

@@ -1,33 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { useReset } from '~/pages/reset-password/useReset'
-
-const { openLoginModal } = useLoginModal()
-
-const { resetStage } = useReset()
-const router = useRouter()
-async function toLogin() {
-  const { status } = await openLoginModal()
-  if (status)
-    router.push('/')
-}
-onUnmounted(() => {
-  resetStage()
-})
-</script>
-
-<template>
-  <div>
-    <div class="fw-500 text-20px   text-#1F2D2C mb-30px">
-      Your Password Has Been Reset Successfully
-    </div>
-    <div class="text-14px mb-40px  text-#333 lh-24px">
-      Please take care of your new password and do not share it with any circumstance.
-    </div>
-
-    <el-button class="!bg-#C58C64 !text-#fff !w-full !h-50px !text-18px !fw-500 !b-rd-6px" plain @click="toLogin">
-      Sign In
-    </el-button>
-  </div>
-</template>

components/category-header/index.vue

@@ -1,247 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue'
-import { getCategoryListApi } from '~/api/model/common'
-import { useCommonStore } from '@/stores/modules/common'
-import {
-  getFeatureListApi,
-} from '~/api/model/feature'
-
-getCategories()
-const route = useRoute()
-const commonStore = useCommonStore()
-const categories = ref<any>([])
-const featureList = ref<any>([])
-const categoryList = ref<any>([])
-const secondCategoryList = ref<any>([])
-const status = ref(false)
-const firstCategory = ref()
-const headerBg = ref('#fff')
-const router = useRouter()
-const secondCategoryCache = new Map()
-const list = [
-  // {
-  //   label: 'Collections',
-  //   link: '/collections',
-  //   key: 'Featured',
-  //   slug: 'featured',
-  //   type: '',
-  // },
-  {
-    label: 'Brands',
-    link: '/suppliers/all-brands',
-    key: 'Brands',
-    slug: 'brands',
-    type: '',
-  },
-]
-async function getCategories() {
-  const data = await getCategoryListApi({ all: false })
-  data.forEach((item: any) => {
-    item.link = 'categories-id'
-    item.type = 'category'
-  })
-  categoryList.value = data
-  categories.value = [...list, ...data]
-}
-
-function setSelectedCategory(data: any) {
-  const linkName = useRoute().name
-  if (linkName === data[0].link)
-    commonStore.setSelectedCategory(useRoute().params.id)
-  else
-    commonStore.setSelectedCategory('')
-}
-
-async function getFeatureList() {
-  const params = {
-    pageNo: 1,
-    pageSize: 4,
-  }
-  const res: any = await getFeatureListApi(params)
-  featureList.value = res.records
-}
-getFeatureList()
-
-async function onSelectedCategory(item: any) {
-  const keys = list.map(item => item.key)
-  firstCategory.value = item
-  if (keys.includes(item.key)) {
-    status.value = false
-    return
-  }
-  // 缓存当前下的分类
-  if (secondCategoryCache.get(item.key)) {
-    secondCategoryList.value = secondCategoryCache.get(item.key)
-    status.value = true
-    return
-  }
-  const data = await getCategoryListApi({ code: item.code, all: true })
-  secondCategoryList.value = data
-  secondCategoryCache.set(item.key, data)
-  status.value = true
-}
-
-watch(
-  () => route.path,
-  (value: any) => {
-    const newList = list.filter((item: any) => item.link === value)
-    if (newList.length) {
-      commonStore.setSelectedCategory(newList[0].slug)
-    }
-    else {
-      if (!categoryList.value.length)
-        return
-      setSelectedCategory(categoryList.value)
-    }
-  },
-  {
-    immediate: true,
-  },
-)
-
-// function handleSelectedCategory(key: any) {
-//   router.push({
-//     path: `/categories/${encodeURIComponent(firstCategory.value.slug)}`,
-//     query: {
-//       secondKey: key,
-//     },
-//   })
-//   status.value = false
-// }
-// function onClickFeature(item: any) {
-//   router.push({
-//     path: `/collections/${item.slug}`,
-//   })
-//   status.value = false
-// }
-
-watch(() => router.currentRoute.value.path, (v: any) => {
-  if (v === '/')
-    headerBg.value = '#FAF5F1'
-  else
-    headerBg.value = '#fff'
-}, {
-  immediate: true,
-})
-</script>
-
-<template>
-  <div class="mt-30px w-1400px mx-auto pb-30px">
-    <div class="flex justify-center gap-x-50px" @mouseleave="status = false">
-      <div
-        v-for="item in categories"
-        :key="item.key"
-        class="category-item position-relative cursor-pointer text-#666666"
-        :class="commonStore.selectedCategory === item.slug && 'active fw-500'"
-        @mouseover="onSelectedCategory(item)"
-      >
-        <el-dropdown v-if="item.type">
-          <NuxtLink :to="{ name: item.link, params: { id: item.slug } }">
-            {{ item.label }}
-          </NuxtLink>
-          <template v-if="item.type" #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item v-for="item, index in secondCategoryList" :index="item.key">
-                <nuxt-link :to="{ name: 'categories-id', params: { id: firstCategory?.slug }, query: { secondKey: item.key } }">
-                  {{ item.title }}
-                </nuxt-link>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-        <NuxtLink v-else :to="item.link">
-          {{ item.label }}
-        </NuxtLink>
-      </div>
-    </div>
-    <!-- <div :class="status ? 'h-420px opacity-100' : 'h-0 overflow-hidden opacity-0'" :style="{ backgroundColor: headerBg }" class="transition-duration-300 pos-absolute left-0 top-120px right-0 z-1000 custom-banner" @mouseover="status = true" @mouseleave="status = false">
-      <div class=" w-1400px mx-auto py-30px ">
-        <div class="flex">
-          <div class="w-250px pos-relative after:pos-absolute after:content-empty after:top-0 after:bottom-0 after:w-1px after:right-0 after:bg-#D8D8D8">
-            <div class="fw-600 text-22px text-#333 !mb-30px">
-              Categories
-            </div>
-            <div class="h-300px overflow-y-scroll hidden-scrollbar">
-              <banner-category-sider :list="secondCategoryList" @click="handleSelectedCategory" />
-            </div>
-          </div>
-          <div class="ml-40px w-full">
-            <div class="fw-600 text-22px text-#333">
-              Collection
-            </div>
-            <div class="flex mt-30px">
-              <div class="grid grid-gap-x-20px grid-gap-y-20px flex-1 grid-cols-2">
-                <div v-for="(item, index) in featureList" :key="item.id" :class="(index === 1 || index === 2) ? 'bg-#F4F6F6' : 'bg-#FFF5EF'" class="p-20px b-rd-10px flex justify-between h-140px">
-                  <div>
-                    <div class="fw-600 text-20px text-#363C40 custom-title-font w-200px line-clamp-2">
-                      {{ item.headImageText }}
-                    </div>
-                    <div class="mt-10px text-#C58C64 underline cursor-pointer" @click="onClickFeature(item)">
-                      Shop Now
-                    </div>
-                  </div>
-                  <img :src="item.thumbnailUrl" class="w-120px h-100px b-rd-4px object-cover" alt="" srcset="">
-                </div>
-              </div>
-              <div class="w-285px text-center ml-40px">
-                <nuxt-link to="/suppliers/all-brands">
-                  <img src="~/assets/images/header_banner.png" class="w-260px h-260px cursor-pointer" alt="">
-                  <div class="mt-18px">
-                    Shop Top Brands
-                  </div>
-                </nuxt-link>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div> -->
-  </div>
-</template>
-
-<style lang="less" scoped>
-.category-item{
-  &::before{
-    position: absolute;
-    content: "";
-    bottom: 20%;
-    top: 20%;
-    right: -26px;
-    width: 1px;
-    background: #CCCCCC;
-    border-radius: 2px;
-  }
-  &:last-child::before{
-    display: none;
-  }
-}
-.category-item:hover,
-.active {
-  color: var(--primary-hover-color);
-
-}
-
-.category-item:hover::after,
-.active::after {
-  position: absolute;
-  content: "";
-  bottom: -10px;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: var(--primary-hover-color);
-  border-radius: 2px;
-  z-index: 100;
-  transition: height 0.3s, background 0.3s; /* 明确过渡效果 */
-}
-.hidden-scrollbar{
-  &::-webkit-scrollbar{
-    display: none;
-  }
-}
-.custom-banner{
-  box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.06);
-}
-</style>

components/category-sider/index.vue

@@ -1,109 +0,0 @@
-<script lang='ts' setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-
-defineProps({
-  type: {
-    type: String,
-    default: 'brand',
-  },
-  isOpen: {
-    type: Boolean,
-    default: false,
-  },
-})
-const emit = defineEmits(['click', 'onMainCategory'])
-const list = defineModel('list', {
-  type: Array as PropType<any[]>,
-  default: () => [],
-})
-
-const activeIndex = defineModel('activeIndex', {
-  type: String,
-  default: '',
-})
-const status = ref(true)
-const defaultOpeneds = computed(() => {
-  return []
-})
-function handleSelect(value: any) {
-  activeIndex.value = value
-  emit('click', value)
-}
-
-function onClose() {
-  activeIndex.value = ''
-  emit('click', '')
-}
-function onClickAll() {
-  status.value = false
-  onClose()
-  const timer = setTimeout(() => {
-    status.value = true
-    clearTimeout(timer)
-  }, 0)
-}
-</script>
-
-<template>
-  <div class="">
-    <div v-if="type === 'brand'" class="px-20px py-12px text-16px cursor-pointer pos-relative after:pos-absolute after:content-empty after:bottom-0% after:left-20px after:right-20px after:h-1px after:bg-#DCDFE6" :class="!activeIndex && 'text-#CC9879'" @click="onClickAll">
-      All brands
-    </div>
-    <el-menu
-      v-if="status"
-      :default-openeds="defaultOpeneds"
-      :unique-opened="false"
-      :default-active="activeIndex"
-      active-text-color="#CC9879"
-      class="el-menu-vertical-demo"
-      @select="handleSelect"
-      @close="onClose"
-    >
-      <el-sub-menu
-        v-for="item, index in list" :key="index"
-        :index="item.key"
-      >
-        <template #title>
-          <span>{{ item.title }}</span>
-        </template>
-        <el-menu-item v-for="items, indexs in item.children" :index="items.key">
-          {{ items.title }}
-        </el-menu-item>
-        <!-- <el-sub-menu index="1-4">
-                  <template #title>
-                    item four
-                  </template>
-                  <el-menu-item index="1-4-1">
-                    item one
-                  </el-menu-item>
-                </el-sub-menu> -->
-      </el-sub-menu>
-    </el-menu>
-  </div>
-</template>
-
-<style lang='less' scoped>
-::v-deep(.el-menu-vertical-demo){
-  .el-sub-menu{
-    .el-sub-menu__title{
-      position: relative;
-      &:after{
-        content: '';
-        position: absolute;
-        left: 20px;
-        right: 20px;
-        bottom:0;
-        height: 1px;
-        background: #DCDFE6;
-      }
-    }
-    &:last-child{
-      .el-sub-menu__title{
-          &:after{
-            content: unset;
-          }
-        }
-      }
-  }
-}
-</style>

components/circleMore.vue

@@ -1,17 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup></script>
-
-<template>
-  <div>
-    <div class="flex">
-      <div class="w-10px h-10px mr-6px bg-#111 b-rd-50%" />
-      <div class="w-10px h-10px mr-6px bg-#ccc b-rd-50%" />
-      <div class="w-10px h-10px mr-6px bg-#ccc b-rd-50%" />
-      <div class="w-10px h-10px mr-6px bg-#ccc b-rd-50%" />
-      <div class="w-10px h-10px bg-#ccc b-rd-50%" />
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped></style>

components/common/blog/item.vue

@@ -1,51 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-defineProps({
-  item: Object as any,
-})
-</script>
-
-<template>
-  <div>
-    <nuxt-link :to="{ name: 'blog-slug', params: { slug: item?.slug } }">
-      <img :src="item.thumbnailUrl" alt="" srcset="" class="hover-effect w-352px h-352px b-rd-10px object-cover">
-      <div class="mt-20px">
-        <div class="mb-10px text-#666 text-14px fw-400 mb-10px">
-          {{ item.category_dictText }}
-        </div>
-        <h3
-          class="!mb-10px fw-600 text-24px text-#363C40 line-clamp-2 custom-title-font"
-        >
-          {{ item.contentTitle }}
-        </h3>
-        <div class="!mb-20px text-14px text-#999 line-clamp-2">
-          {{ item.contentSubhead }}
-        </div>
-        <div
-          class="text-14px text-#C58C64 cursor-pointer read-more pos-relative"
-        >
-          Read More
-        </div>
-      </div>
-    </nuxt-link>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.read-more {
-  &:after {
-    position: absolute;
-    content: "";
-    bottom: -4px;
-    left: 0;
-    width: 20%;
-    height: 2px;
-    background: #cda274;
-    border-radius: 1dvb;
-    transition:
-      height 0.3s,
-      background 0.3s; /* 明确过渡效果 */
-  }
-}
-</style>

components/common/brand/item.vue

@@ -1,102 +0,0 @@
-<script lang='ts' setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-
-import { setBrandFavoriteApi } from '~/api/model/brand'
-
-defineProps({
-  item: Object as any,
-  isFavorite: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['update:favorite', 'click:detail'])
-const { openLoginModal } = useLoginModal()
-
-const hoverStatus = ref<any>()
-
-async function onFavorite(item: any) {
-  try {
-    const { status } = await openLoginModal()
-    if (status) {
-      const params = { bid: item.id, type: item.isFavorite ? 2 : 1 }
-      await setBrandFavoriteApi(params)
-      item.isFavorite = !item.isFavorite
-      ElMessage({
-        message: `${item.isFavorite ? 'Add' : 'Remove'} to My Favourites Successfully`,
-        type: 'success',
-        plain: true,
-      })
-      emit('update:favorite', item)
-    }
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-function toDetail(item: any) {
-  const router = useRouter()
-  router.push({ path: `/brand/${item.id}` })
-  // emit('click:detail', item)
-}
-</script>
-
-<template>
-  <div>
-    <div class="text-left " @click="toDetail(item)">
-      <div class="b-rd-10px custom-main mx-auto  !w-300px h-300px mb-20px overflow-hidden pos-relative">
-        <img
-          :src="item.thumbnail || item.masterImage"
-          alt=""
-          srcset=""
-          class="w-100% h-100% object-contain hover-effect"
-        >
-        <div
-          v-if="isFavorite"
-          class="b-rd-50% custom-like b-1px b-solid w-32px h-32px flex cursor-pointer justify-center items-center bg-#CC9879/10% pos-absolute bottom-20px hover:bg-#CC9879"
-          :class="item.isFavorite && '!bg-#CC9879'"
-          @mouseover="hoverStatus = '!fill-#fff'"
-          @mouseleave="hoverStatus = '!fill-#CC9879'"
-          @click.stop="onFavorite(item)"
-        >
-          <svgo-like
-            :class="(item.isFavorite && '!fill-#fff') || hoverStatus"
-            class="!fill-#CC9879 text-16px"
-            :filled="true"
-          />
-        </div>
-      </div>
-      <div class="fw-400 text-14px text-#666">
-        {{ item?.categoryNames ? (item?.categoryNames.join(','))[0] : '' }}
-      </div>
-      <h3
-        class="fw-600 text-24px !my-10px text-#363C40 custom-title-font line-clamp-1"
-      >
-        {{ item.brandName }}
-      </h3>
-      <div class="text-#999 text-18px mb-20px h-48px lh-24px line-clamp-2">
-        {{ item.brandStory }}
-      </div>
-      <div class="underline text-#C58C64 cursor-pointer">
-        Shop Now
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.custom-main {
-  .custom-like {
-    right: -50px;
-    opacity: 0;
-    transition: all 0.3s ease-out;
-  }
-  &:hover {
-    .custom-like {
-      right: 12px;
-      opacity: 1;
-    }
-  }
-}
-</style>

components/common/components/checkbox.vue

@@ -1,31 +0,0 @@
-<script lang='ts' setup>
-defineProps({
-  label: {
-    type: String,
-    default: '',
-  },
-})
-const emit = defineEmits(['checked'])
-const checked = defineModel('checked', {
-  type: Boolean,
-  default: false,
-})
-function onChecked() {
-  checked.value = !checked.value
-  emit('checked')
-}
-</script>
-
-<template>
-  <div class="checkbox flex items-center cursor-pointer" @click="onChecked">
-    <div class="w-24px h-24px b-rd-4px flex items-center justify-center w-24px h-24px b-1px pos-relative" :class="checked ? 'b-#B06B3C' : 'b-#666'">
-      <svgo-selected v-show="checked" class="!w-22px !h-22px pos-absolute left-0 right-0 top-0 bottom-0 z-10 !text-#B06B3C" />
-    </div>
-    <div class="ml-12px">
-      {{ label }}
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/common/drag-verify/index.vue

@@ -1,157 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { Check, DArrowRight } from '@element-plus/icons-vue'
-
-defineProps({
-  // 成功图标
-  successIcon: {
-    type: String,
-    default: 'iconfont icon-status-nor',
-  },
-  // 成功文字
-  successText: {
-    type: String,
-    default: '验证成功',
-  },
-  // 开始的图标
-  startIcon: {
-    type: String,
-    default: 'iconfont icon-login-slid',
-  },
-  // 开始的文字
-  startText: {
-    type: String,
-    default: '拖动滑块到最右边',
-  },
-})
-const modelValue = defineModel('value')
-const verifyResult = ref(false) // 验证结果
-const isTouch = (function () {
-  if (typeof document === 'undefined' || !document.documentElement)
-    return false
-
-  return 'ontouchstart' in document.documentElement
-})()
-const moveEvent = isTouch ? 'touchmove' : 'mousemove'
-const upEvent = isTouch ? 'touchend' : 'mouseup'
-
-// 滑块触摸开始
-function onStart(ev: MouseEvent | TouchEvent) {
-  let disX = 0 // 滑块移动距离
-  const iconWidth = 40 // 滑动图标宽度
-  const ele = document.querySelector('.drag-verify .block') as HTMLElement
-  const startX
-    = (ev as MouseEvent).clientX || (ev as TouchEvent).touches[0].pageX
-  const parentWidth = ele.offsetWidth
-  const MaxX = parentWidth - iconWidth
-  if (verifyResult.value)
-    return false
-
-  // 滑块触摸移动
-  const onMove = (e: MouseEvent | TouchEvent) => {
-    const endX = (e as MouseEvent).clientX || (e as TouchEvent).touches[0].pageX
-    disX = endX - startX
-    if (disX <= 0)
-      disX = 0
-
-    if (disX >= MaxX - iconWidth)
-      disX = MaxX
-
-    ele.style.transition = '.1s all'
-    ele.style.transform = `translateX(${disX}px)`
-  }
-
-  // 滑块触摸结束
-  const onEnd = () => {
-    if (disX !== MaxX) {
-      ele.style.transition = '.5s all'
-      ele.style.transform = 'translateX(0)'
-    }
-    else {
-      // 执行成功
-      verifyResult.value = true
-      // emit('update:value', verifyResult.value)
-      modelValue.value = verifyResult.value
-    }
-
-    document.removeEventListener(moveEvent, onMove)
-    document.removeEventListener(upEvent, onEnd)
-  }
-
-  document.addEventListener(moveEvent, onMove)
-  document.addEventListener(upEvent, onEnd)
-}
-</script>
-
-<template>
-  <div class="drag-verify">
-    <div class="range" :class="verifyResult ? 'success' : ''">
-      <div class="block" @mousedown="onStart" @touchstart="onStart">
-        <el-icon v-if="verifyResult" class="icon">
-          <Check />
-        </el-icon>
-        <el-icon v-else class="icon">
-          <DArrowRight />
-        </el-icon>
-      </div>
-      <span class="text">{{ verifyResult ? successText : startText }}</span>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-@primary-color: #CC9879;
-.drag-verify {
-  width: 100%;
-  .range {
-    background-color: #ececee;
-    position: relative;
-    border-radius: 4px;
-    transition: 1s all;
-    user-select: none;
-    color: #666;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 40px;
-    &.success {
-      background-color: @primary-color;
-      color: #fff;
-      .text {
-        position: relative;
-        z-index: 1;
-      }
-      .block .icon {
-        color: @primary-color;
-      }
-    }
-    .block {
-      display: block;
-      position: absolute;
-      left: calc(-100% + 40px);
-      width: 100%;
-      height: 100%;
-      background: @primary-color;
-      border-radius: 4px;
-      overflow: hidden;
-      .icon {
-        position: absolute;
-        right: 0;
-        width: 40px;
-        height: 100%;
-        font-size: 20px;
-        color: #c8c9cc;
-        background-color: #fff;
-        border: 1px solid #e5e5e5;
-        border-radius: 4px;
-        cursor: pointer;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-  }
-}
-</style>

components/common/favorite/index.vue

@@ -1,61 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { setGoodsFavoriteApi } from '~/api/model/goods'
-
-defineProps({
-  data: { type: Object, default: () => {} },
-  svgSize: {
-    type: String,
-    default: '24px',
-  },
-  w: {
-    type: String,
-    default: '50px',
-  },
-})
-const emit = defineEmits(['update:favorite'])
-const { openLoginModal } = useLoginModal()
-
-const hoverStatus = ref<any>()
-
-async function handleFavorite(item: any) {
-  try {
-    const { status } = await openLoginModal()
-    if (status) {
-      const params = { mid: item.id, type: item.isFavorite ? 2 : 1 }
-      await setGoodsFavoriteApi(params)
-      item.isFavorite = !item.isFavorite
-      ElMessage({
-        message: `${item.isFavorite ? 'Add' : 'Remove'} to My Favourites Successfully`,
-        type: 'success',
-        plain: true,
-      })
-      emit('update:favorite', item)
-    }
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-</script>
-
-<template>
-  <div
-    class="b-rd-50% b-1px b-solid b-#FAE7CE flex  cursor-pointer justify-center items-center bg-#F9F6F2   hover:bg-#CC9879"
-    :class="[{ '!bg-#CC9879': data.isFavorite }]"
-    :style="{ width: w, height: w }"
-    @mouseover="hoverStatus = '!fill-#fff'"
-    @mouseleave="hoverStatus = '!fill-#CC9879'"
-    @click.stop="handleFavorite(data)"
-  >
-    <svgo-like
-      :class="(data.isFavorite && '!fill-#fff') || hoverStatus"
-      class="!fill-#CC9879  "
-      :style="{ fontSize: svgSize }"
-      :filled="true"
-    />
-  </div>
-</template>
-
-<style lang="less" scoped></style>

components/common/featured/item.vue

@@ -1,55 +0,0 @@
-<script lang='ts' setup>
-import dayjs from 'dayjs'
-import { useUserStore } from '@/stores/modules/user'
-
-defineProps({
-  item: Object as any,
-})
-const router = useRouter()
-const userStore = useUserStore()
-const { isLogin } = storeToRefs(userStore)
-const { openLoginModal } = useLoginModal()
-
-async function openFeaturedDetail(item: any) {
-  if (!item.userEnable) {
-    router.push({
-      path: `/collections/${item.slug}`,
-    })
-    return
-  }
-  const { status } = await openLoginModal()
-  if (status) {
-    router.push({
-      path: `/collections/${item.slug}`,
-      query: {
-        id: item.id,
-      },
-    })
-  }
-}
-</script>
-
-<template>
-  <div class="pos-relative cursor-pointer" @click="openFeaturedDetail(item)">
-    <div v-if="!isLogin && item.userEnable" class="flex text-#666 items-center pos-absolute top-20px right-20px cursor-pointer">
-      <svgo-lock class="!w-20px !h-20px ml-4px" />
-    </div>
-    <!-- <NuxtLink class="cursor-pointer" :to="{ name: 'collections-name', params: { name: item.title }, query: { id: item.id } }"> -->
-    <img :src="item.thumbnailUrl" alt="" srcset="" class="w-680px b-rd-14px h-385px object-cover mr-100px">
-    <div class="mt-28px">
-      <div class="text-32px fw-700 line-clamp-2 text-#363C40 lh-40px custom-title-font">
-        {{ item.title }}
-      </div>
-      <div class="flex mt-20px mb-24px text-#7C7C7C text-18px">
-        <div class="mr-48px">
-          {{ dayjs(item.createTime).format('MMMM D, YYYY') }}
-        </div>
-        <div>{{ item.merchandiseQuantity }} products</div>
-      </div>
-      <div class="text-18px lh-24px line-clamp-1 text-#666">
-        {{ item.headImageText }}
-      </div>
-    </div>
-    <!-- </NuxtLink> -->
-  </div>
-</template>

components/common/featured/item2.vue

@@ -1,19 +0,0 @@
-<script lang='ts' setup>
-defineProps({
-  item: Object as any,
-})
-</script>
-
-<template>
-  <div>
-    <img :src="item.thumbnailUrl" alt="" srcset="" class="w-352px b-rd-16px h-320px object-cover">
-    <h3 class="text-20px fw-700 line-clamp-2 text-#363C40 lh-24px !my-20px custom-title-font">
-      {{ item.title }}
-    </h3>
-    <NuxtLink class="cursor-pointer" :to="{ name: 'collections-name', params: { name: item.slug } }">
-      <div class="underline text-#C58C64 text-14px">
-        View All
-      </div>
-    </NuxtLink>
-  </div>
-</template>

components/common/featured/item3.vue

@@ -1,34 +0,0 @@
-<script lang='ts' setup>
-import dayjs from 'dayjs'
-
-defineProps({
-  item: Object as any,
-})
-const router = useRouter()
-
-async function openFeaturedDetail(item: any) {
-  // 在线画册
-  router.push({
-    path: `/collections/${item.slug}`,
-  })
-}
-</script>
-
-<template>
-  <div class="pos-relative cursor-pointer" @click="openFeaturedDetail(item)">
-    <img :src="item.thumbnailUrl" alt="" srcset="" class="w-680px b-rd-14px h-385px object-cover mr-100px">
-    <div class="mt-28px">
-      <div class="text-32px fw-700 line-clamp-2 text-#363C40 lh-40px custom-title-font">
-        {{ item.title }}
-      </div>
-      <div class="flex mt-20px mb-24px text-#7C7C7C text-18px">
-        <div class="mr-48px">
-          {{ dayjs(item.createTime).format('MMMM D, YYYY') }}
-        </div>
-      </div>
-      <div class="text-18px lh-24px line-clamp-1 text-#666">
-        {{ item.headImageText }}
-      </div>
-    </div>
-  </div>
-</template>

components/common/goods/item.vue

@@ -1,209 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { useUserStore } from '@/stores/modules/user'
-import { addShopCartApi } from '~/api/model/goods'
-
-const props = defineProps({
-  item: Object as any,
-  w: {
-    type: String,
-    default: 'w-300px',
-  },
-  h: {
-    type: String,
-    default: 'h-300px',
-  },
-})
-const emit = defineEmits(['update:login'])
-
-const flag = ref(false)
-const inquireVisible = ref(false)
-const userStore = useUserStore()
-const { isLogin } = storeToRefs(userStore)
-const { openLoginModal } = useLoginModal()
-
-function onClickDetail(item: any) {
-  const router = useRouter()
-  router.push({
-    path: `/product/${item.id}`,
-  })
-}
-async function addShopCart() {
-  try {
-    const { status, isFirstLogin } = await openLoginModal()
-    if (status) {
-      await addShopCartApi({
-        mid: props.item.id,
-        quantity: props.item.moq,
-      })
-      ElMessage({
-        message: 'Add to cart successfully',
-        type: 'success',
-        plain: true,
-      })
-      if (isFirstLogin)
-        emit('update:login')
-      // commonStore.getCartGoodsList()
-    }
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-async function onClickLogin() {
-  const { status, isFirstLogin } = await openLoginModal()
-  if (status) {
-    inquireVisible.value = true
-    if (isFirstLogin)
-      emit('update:login')
-  }
-}
-function getFeaturedLabel(item: any) {
-  if (item.recommend)
-    return item.recommend.split(',')[0]
-
-  return ''
-}
-
-// 验证是否过期
-function getIsExpire(item: any) {
-  const currentTime = Date.now()
-  if (item.recommendPeriodTime) {
-    // 转化为时间戳
-    const expireTime = new Date(item.recommendPeriodTime).getTime()
-    if (expireTime < currentTime)
-      return true
-    return false
-  }
-  return false
-}
-function getImgList() {
-  const list = []
-  if (props.item.masterImage)
-    list.push(...props.item.masterImage.split(','))
-  if (list.length > 2)
-    return list
-  else if (list.length > 0 && list.length < 2 && props.item.detailImage)
-    return list.concat(...props.item.detailImage.split(','))
-
-  return list
-}
-</script>
-
-<template>
-  <div>
-    <div
-      class="pos-relative custom-main cursor-pointer b-rd-10px b-#FAFAFA b-1px b-solid overflow-hidden"
-      :class="[w, h]"
-      @click="onClickDetail(item)"
-    >
-      <img
-        class="object-cover h-full w-full"
-        :src="getImgList()[0]"
-        alt=""
-        srcset=""
-      >
-      <img
-        class="object-cover h-full w-full pos-absolute top-0 left-0 right-0 bottom-0 z-10 transition-duration-1000"
-        :class="flag ? 'opacity-100' : 'opacity-0'"
-        :src="getImgList()[1]"
-        alt=""
-        srcset=""
-        @mouseover="flag = true"
-        @mouseleave="flag = false"
-      >
-      <div
-        v-if="getFeaturedLabel(item) && !getIsExpire(item)"
-        class="py-4px px-10px bg-#CC9879 text-#fff pos-absolute top-10px left-10px b-rd-4px z-12"
-      >
-        {{ getFeaturedLabel(item) }}
-      </div>
-      <common-favorite
-        :data="item"
-        class="custom-like pos-absolute bottom-60px z-12"
-        svg-size="18px"
-        w="36px"
-      />
-      <el-button
-        class="custom-add !h-40px !b-rd-6px !bg-transparent pos-absolute left-50% transform-translate-x--50% w-94% z-12"
-        @click.stop="addShopCart"
-      >
-        Add to Cart
-      </el-button>
-    </div>
-    <div class="text-left">
-      <div class="text-16px hover:underline text-#666 mt-20px mb-10px">
-        <nuxt-link v-if="item.brandId" :to="`/brand/${item.brandId}`">
-          {{ item.brandName }}
-        </nuxt-link>
-        <div v-else class="h-21px" />
-      </div>
-      <div
-        class="fw-600 text-24px mb-20px text-#363C40 line-clamp-2 cursor-pointer hover:underline custom-title-font"
-        @click="onClickDetail(item)"
-      >
-        {{ item.title }}
-      </div>
-      <div class="flex justify-between items-center">
-        <div class="text-#666666">
-          MOQ {{ item.moq }} Pcs
-        </div>
-        <div v-if="!isLogin" class="flex items-center">
-          <div class="text-#AB7045 cursor-pointer hover:fw-500" @click="onClickLogin">
-            Inquire
-          </div>
-          <!-- <el-popover
-            placement="top"
-            :width="200"
-            popper-class="text-center"
-            trigger="hover"
-            content="Join to unlock pricing"
-          >
-            <template #reference>
-              <div
-                class="underline text-#B06B3C ml-8px cursor-pointer"
-                @click="onClickLogin"
-              >
-                Price
-              </div>
-            </template>
-          </el-popover> -->
-        </div>
-        <div v-else class="text-#B06B3C cursor-pointer" @click="onClickLogin">
-          <!-- $ {{ numberToTwoDecimals(item.sellPrice || 0) }} USD -->
-          Inquire
-        </div>
-      </div>
-    </div>
-    <business-account-rfqs-quotation-modal v-if="inquireVisible" v-model:visible="inquireVisible" />
-  </div>
-</template>
-
-<style lang="less" scoped>
-.custom-main {
-  .custom-like {
-    right: -50px;
-    opacity: 0;
-    transition: all 0.3s ease-out;
-  }
-
-  .custom-add {
-    bottom: -50px;
-    opacity: 0;
-    transition: all 0.3s ease-out;
-  }
-
-  &:hover {
-    .custom-like {
-      right: 10px;
-      opacity: 1;
-    }
-
-    .custom-add {
-      bottom: 10px;
-      opacity: 1;
-    }
-  }
-}
-</style>

components/common/message/index.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import BusinessAccountMessage from '~/pages/account/messages.vue'
-
-const { isMessageModalOpen, closeMessageModal, isNeedContact, option } = useMessageModal()
-
-// async function handleLogin() {
-//   error.value = false
-//   isLoading.value = true
-//   try {
-//     await login(loginForm.value)
-//     closeLoginModal({ status: true })
-//   }
-//   catch (err) {
-//     error.value = true
-//   }
-//   finally {
-//     isLoading.value = false
-//   }
-// }
-
-function handleClose() {
-  closeMessageModal({ status: false, error: '用户取消登录' })
-}
-</script>
-
-<template>
-  <el-dialog
-    v-model="isMessageModalOpen"
-    :append-to-body="true"
-    width="800"
-    @close="handleClose"
-  >
-    <BusinessAccountMessage v-if="!isNeedContact && isMessageModalOpen" :option :is-use-contact="false" />
-    <BusinessAccountMessage v-else-if="isMessageModalOpen" refer="global" />
-  </el-dialog>
-</template>
-
-<style lang="less">
-
-</style>

components/common/user-avatar/index.vue

@@ -0,0 +1,87 @@
+<!-- @format -->
+
+<script setup lang="ts">
+import { useUserStore } from '@/stores/modules/user'
+import { useCommonStore } from '@/stores/modules/common'
+
+const commonStore = useCommonStore()
+const userStore = useUserStore()
+const { isLogin } = storeToRefs(userStore)
+const { noticeRemind } = storeToRefs(commonStore)
+const hoverStatus = ref<any>()
+
+const { openLoginModal } = useLoginModal()
+commonStore.getNoticeRemind()
+
+// const { locale, setLocale } = useI18nLocale()
+// function handleClick({ key }: any) {
+//   setLocale(key)
+// }
+
+async function clickLogin() {
+  try {
+    const { status } = await openLoginModal()
+    if (status)
+      location.reload()
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+
+async function onSelected(command: string | number | object) {
+  if (command === 'signOut') {
+    // 退出登录
+    try {
+      userStore.logout()
+    }
+    catch (error) {
+      console.log(error, 'error')
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="!isLogin">
+      <el-button
+        class="b-solid b-1px b-#AB7045 custom-btn-login !text-#AB7045 !w-100px !h-34px !text-16px !b-rd-150px"
+        @mouseover="hoverStatus = '!fill-#fff'" @mouseleave="hoverStatus = '!fill-#CC9879'" @click="clickLogin"
+      >
+        <template #icon>
+          <svgo-user :class="hoverStatus" class="w-24px h-24px" :filled="true" />
+        </template> Log In
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+ .custom-btn-login {
+  .el-icon{
+    font-size: 24px;
+  }
+}
+.custom-dropdown {
+&.el-dropdown__popper{
+  border-radius: 10px;
+
+.el-scrollbar{
+  .el-dropdown__list{
+    width: 415px;
+    padding: 30px!important;
+  }
+  .el-dropdown-menu {
+    .el-dropdown-menu__item{
+      padding-bottom: 20px;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+      padding-top: 0 !important;
+      &:last-child{
+        padding-bottom: 0;
+      }
+    }}
+  }}
+}
+</style>

components/cookieTip.vue

@@ -1,52 +0,0 @@
-<script lang="ts" setup>
-const visible = ref(false);
-
-onMounted(() => {
-  getCookieTip();
-});
-
-function getCookieTip() {
-  if (process.client) {
-    const savedData = localStorage.getItem("cookieTip");
-    if (savedData) {
-      const { status } = JSON.parse(savedData);
-      visible.value = status;
-    } else {
-      visible.value = true;
-    }
-  }
-}
-
-function setCookieTip() {
-  if (process.client) {
-    visible.value = false;
-    localStorage.setItem("cookieTip", JSON.stringify({ status: false }));
-  }
-}
-</script>
-
-<template>
-  <div
-    v-if="visible"
-    class="cookie-tip w-full bg-#fff py-36px px-40px flex items-center justify-between pos-fixed bottom-0 left-0 right-0 z-10000"
-  >
-    <div class="text-#333 w-900px lh-24px">
-      We use cookies to enable services and functionality on our site and to
-      improve your experience. Byusing our website, you agree to our use of such
-      technologies as laid out in the
-      <a href="/policy" class="underline">Privacy Policy</a>.
-    </div>
-    <el-button
-      class="w-100px px-30px py-10px !h-40px !bg-#C58C64 !text-#fff !b-rd-148px"
-      @click="setCookieTip"
-    >
-      OK
-    </el-button>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.cookie-tip {
-  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
-}
-</style>

components/discountTip.vue

@@ -1,16 +0,0 @@
-<script lang='ts' setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-</script>
-
-<template>
-  <div class="py-12px w-100% mx-auto text-center bg-#CDA98F text-#fff  ">
-    Wholesale home decor online from selected Chinese brands. <span class="underline cursor-pointer">
-      <NuxtLink to="/contact">
-        Get in Touch
-      </NuxtLink>
-    </span>
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

components/user-avatar/index.vue

@@ -1,162 +0,0 @@
-<!-- @format -->
-
-<script setup lang="ts">
-import { useUserStore } from '@/stores/modules/user'
-import { useCommonStore } from '@/stores/modules/common'
-
-const commonStore = useCommonStore()
-const userStore = useUserStore()
-const { isLogin } = storeToRefs(userStore)
-const { noticeRemind } = storeToRefs(commonStore)
-const hoverStatus = ref<any>()
-
-const { openLoginModal } = useLoginModal()
-commonStore.getNoticeRemind()
-
-// const { locale, setLocale } = useI18nLocale()
-// function handleClick({ key }: any) {
-//   setLocale(key)
-// }
-
-async function clickLogin() {
-  try {
-    const { status } = await openLoginModal()
-    if (status)
-      location.reload()
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-
-async function onSelected(command: string | number | object) {
-  if (command === 'signOut') {
-    // 退出登录
-    try {
-      userStore.logout()
-    }
-    catch (error) {
-      console.log(error, 'error')
-    }
-  }
-}
-</script>
-
-<template>
-  <div>
-    <div v-if="!isLogin">
-      <el-button
-        class="b-solid b-1px b-#AB7045 custom-btn-login !text-#AB7045 !w-100px !h-34px !text-16px !b-rd-150px"
-        @mouseover="hoverStatus = '!fill-#fff'" @mouseleave="hoverStatus = '!fill-#CC9879'" @click="clickLogin"
-      >
-        <template #icon>
-          <svgo-user :class="hoverStatus" class="w-24px h-24px" :filled="true" />
-        </template> Log In
-      </el-button>
-    </div>
-    <div v-else>
-      <el-dropdown :hide-on-click="false" placement="bottom-end" popper-class="custom-dropdown" @command="onSelected">
-        <template #default>
-          <svgo-user class="!w-30px !h-30px !fill-#5B463E" :filled="true" />
-        </template>
-        <template #dropdown>
-          <div class="flex items-center ">
-            <svgo-user-avatar class="!w-20px !h-20px" />
-            <span class="text-20px fw-500 text-#333 ml-20px">
-              {{ userStore.userInfo.firstName }}
-              {{ userStore.userInfo.lastName }}
-            </span>
-          </div>
-          <div class="text-16px text-#999 mt-10px">
-            {{ userStore.userInfo.email }}
-          </div>
-          <!-- <div class="w-full bg-#D8D8D8 h-1px my-20px" />
-          <div class="text-16px text-#333">
-            Unlock <span class="text-#AB7045">$ 8000</span> Buy Now Pay Later Limit （60 day terms）
-          </div> -->
-          <div class="w-full bg-#D8D8D8 h-1px my-20px" />
-          <el-dropdown-menu>
-            <el-dropdown-item command="dashboard">
-              <NuxtLink to="/account/panel" class="flex items-center text-16px">
-                <svgo-dashboard class="!w-22px !h-22px mr-16px" /> Dashboard
-              </NuxtLink>
-            </el-dropdown-item>
-            <el-dropdown-item command="message">
-              <NuxtLink to="/account/rfqs" class="flex items-center text-16px">
-                <svgo-rfqs class="!w-20px !h-20px  mr-18px" />
-                RFQS
-              </NuxtLink>
-            </el-dropdown-item>
-            <el-dropdown-item command="favorites">
-              <NuxtLink to="/account/favourites?tab=products" class="flex items-center text-16px">
-                <svgo-favorite class="!w-22px !h-22px  mr-16px" />
-                Favourites
-              </NuxtLink>
-            </el-dropdown-item>
-            <el-dropdown-item command="orders">
-              <NuxtLink to="/account/orders?tab=submitted" class="flex items-center text-16px">
-                <svgo-order class="!w-22px !h-22px  mr-16px" />
-                Orders
-              </NuxtLink>
-            </el-dropdown-item>
-            <!-- <el-dropdown-item command="message">
-              <NuxtLink to="/account/messages" class="flex items-center text-16px">
-                <svgo-message class="!w-22px !h-22px  mr-16px" />
-                Messages
-              </NuxtLink>
-            </el-dropdown-item> -->
-            <el-dropdown-item command="message">
-              <NuxtLink to="/account/notice" class="flex items-center text-16px pos-relative">
-                <svgo-notice class="!w-22px !h-22px  mr-16px" />
-                <div v-if="noticeRemind" class="pos-absolute top-0 left-20px bg-primary w-5px h-5px b-rd-50%" />
-                Notice
-              </NuxtLink>
-            </el-dropdown-item>
-            <el-dropdown-item command="setting">
-              <NuxtLink to="/account/settings?tab=profile" class="flex items-center text-16px">
-                <svgo-setting class="!w-22px !h-22px  mr-16px" />
-                Settings
-              </NuxtLink>
-            </el-dropdown-item>
-            <div class="w-full bg-#D8D8D8 h-1px mb-20px" />
-            <el-dropdown-item command="signOut">
-              <div class=" flex items-center text-16px">
-                <svgo-logout class="!w-22px !h-22px mr-16px" />
-                Sign out
-              </div>
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </div>
-  </div>
-</template>
-
-<style lang="less">
- .custom-btn-login {
-  .el-icon{
-    font-size: 24px;
-  }
-}
-.custom-dropdown {
-&.el-dropdown__popper{
-  border-radius: 10px;
-
-.el-scrollbar{
-  .el-dropdown__list{
-    width: 415px;
-    padding: 30px!important;
-  }
-  .el-dropdown-menu {
-    .el-dropdown-menu__item{
-      padding-bottom: 20px;
-      padding-left: 0 !important;
-      padding-right: 0 !important;
-      padding-top: 0 !important;
-      &:last-child{
-        padding-bottom: 0;
-      }
-    }}
-  }}
-}
-</style>

composables/useFetchRequest.ts

@@ -1,10 +1,10 @@
 /** @format */
 
 // MyRequest.ts
-import { ElMessage } from "element-plus"
-import { useFetch, useRequestHeaders, useRuntimeConfig } from "#app"
-import { ResultEnum } from "@/enums/httpEnum"
-import { useUserStore } from "@/stores/modules/user"
+import { ElMessage } from 'element-plus'
+import { useFetch, useRequestHeaders, useRuntimeConfig } from '#app'
+import { ResultEnum } from '@/enums/httpEnum'
+import { useUserStore } from '@/stores/modules/user'
 
 type UrlType =
   | string
@@ -21,27 +21,28 @@ export function useMyRequest() {
   const request = async (
     url: UrlType,
     params: any,
-    options: RequestOptions = {}
+    options: RequestOptions = {},
   ) => {
-    const headers = useRequestHeaders(["cookie"])
+    const headers = useRequestHeaders(['cookie'])
     const { apiBase: baseURL } = useRuntimeConfig().public
-    let { method = (options?.method || "GET") as string } = options
+    let { method = (options?.method || 'GET') as string } = options
     method = method.toUpperCase()
 
     // 处理请求体
     let requestBody: any
-    if (method === "POST") {
+    if (method === 'POST') {
       // 如果参数是 FormData 类型（文件上传），直接使用，不要 JSON.stringify
       if (params instanceof FormData) {
         requestBody = params
         // 删除 Content-Type header，让浏览器自动设置正确的 boundary
-        delete headers["Content-Type"]
-      } else {
+        delete headers['Content-Type']
+      }
+      else {
         requestBody = JSON.stringify(params)
-        headers["Content-Type"] = "application/json"
+        headers['Content-Type'] = 'application/json'
       }
     }
-    const isProduction = process.env.NODE_ENV === "production"
+    const isProduction = process.env.NODE_ENV === 'production'
 
     // eslint-disable-next-line no-async-promise-executor
     return new Promise(async (resolve, reject) => {
@@ -52,7 +53,7 @@ export function useMyRequest() {
         params: { ...params },
         headers,
         server: options.server || false,
-        credentials: "include",
+        credentials: 'include',
         body: requestBody,
         onRequest: ({ request, options }) => {
           const userStore = useUserStore()
@@ -60,79 +61,83 @@ export function useMyRequest() {
           if (token.value) {
             options.headers = {
               ...options.headers,
-              Authorization: token.value,
-              "X-Access-Token": token.value,
+              'Authorization': token.value,
+              'X-Access-Token': token.value,
             }
           }
         },
         onRequestError: ({ request, options, error }) => {
           ElMessage.closeAll()
-          console.log("onRequestError--------error------>>121", error)
-
-          error &&
-            ElMessage({
-              message: "Sorry, The Data Request Failed",
-              type: "error",
-              plain: true,
-            })
+          error
+          && ElMessage({
+            message: 'Sorry, The Data Request Failed',
+            type: 'error',
+            plain: true,
+          })
         },
         onResponse: ({ request, response, options }) => {
           try {
             const data = response._data
             const { code, result, message } = data
             // 这里逻辑可以根据项目进行修改
-            const hasSuccess =
-              data && Reflect.has(data, "code") && code === ResultEnum.SUCCESS
-            if (hasSuccess) return resolve(result)
-            let msg = ""
+            const hasSuccess
+              = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS
+            if (hasSuccess)
+              return resolve(result)
+            let msg = ''
             switch (code) {
               case ResultEnum.TIMEOUT:
-                msg = "Login timeout, please login again."
+                msg = 'Login timeout, please login again.'
                 // 被动登出，带redirect地址
                 useUserStore().logout()
                 break
               case 10010:
                 // 此处10010控制无效的分享
-                msg = ""
+                msg = ''
                 break
               default:
-                if (message) msg = message
+                if (message)
+                  msg = message
             }
             if (msg) {
               ElMessage({
                 message: msg,
-                type: "error",
+                type: 'error',
                 plain: true,
               })
             }
-            throw new Error(msg || "Error in request, please try again later.")
-          } catch (error) {
+            throw new Error(msg || 'Error in request, please try again later.')
+          }
+          catch (error) {
             return reject(response._data)
           }
         },
         onResponseError: (error: any) => {
           const { response, code, message } = error || {}
-          const msg: string = response?.data?.message ?? ""
-          const err: string = error?.toString?.() ?? ""
-          let errMessage = ""
+          const msg: string = response?.data?.message ?? ''
+          const err: string = error?.toString?.() ?? ''
+          let errMessage = ''
           try {
-            if (code === "ECONNABORTED" && message.includes("timeout"))
-              errMessage =
-                "The interface request timed out. Please refresh the page and try again."
+            if (code === 'ECONNABORTED' && message.includes('timeout')) {
+              errMessage
+                = 'The interface request timed out. Please refresh the page and try again.'
+            }
 
-            if (err?.includes("Network Error"))
-              errMessage =
-                "The network is abnormal. Please check whether your network connection is normal."
+            if (err?.includes('Network Error')) {
+              errMessage
+                = 'The network is abnormal. Please check whether your network connection is normal.'
+            }
 
             if (errMessage) {
               ElMessage({
                 message: errMessage,
-                type: "error",
+                type: 'error',
                 plain: true,
               })
               return reject(error)
             }
-          } catch (error) {
+          }
+          catch (error) {
             throw new Error(error as unknown as string)
           }
           const status = error?.response?.status
@@ -142,46 +147,46 @@ export function useMyRequest() {
               break
             // 401: Not logged in
             case 401:
-              errMessage = msg || "用户没有权限"
+              errMessage = msg || '用户没有权限'
               // 被动登出，带redirect地址
               useUserStore().logout()
               break
             case 403:
-              errMessage = "用户得到授权，但是访问是被禁止的"
+              errMessage = '用户得到授权，但是访问是被禁止的'
               break
             case 404:
-              errMessage = "网络请求错误，未找到该资源"
+              errMessage = '网络请求错误，未找到该资源'
               break
             case 405:
-              errMessage = "网络请求错误，请求方法未允许"
+              errMessage = '网络请求错误，请求方法未允许'
               break
             case 408:
-              errMessage = "网络请求超时"
+              errMessage = '网络请求超时'
               break
             case 500:
-              errMessage = "服务器错误，请联系管理员"
+              errMessage = '服务器错误，请联系管理员'
               break
             case 501:
-              errMessage = "网络未实现"
+              errMessage = '网络未实现'
               break
             case 502:
-              errMessage = "网络错误"
+              errMessage = '网络错误'
               break
             case 503:
-              errMessage = "服务器不可用，服务器暂时过载或维护"
+              errMessage = '服务器不可用，服务器暂时过载或维护'
               break
             case 504:
-              errMessage = "网络超时"
+              errMessage = '网络超时'
               break
             case 505:
-              errMessage = "http版本不支持该请求"
+              errMessage = 'http版本不支持该请求'
               break
             default:
           }
           if (errMessage) {
             ElMessage({
               message: errMessage,
-              type: "error",
+              type: 'error',
               plain: true,
             })
           }
@@ -193,16 +198,16 @@ export function useMyRequest() {
 
   return {
     get: (url: UrlType, params?: any, option?: RequestOptions) => {
-      return request(url, params, { method: "GET", ...option })
+      return request(url, params, { method: 'GET', ...option })
     },
     post: (url: UrlType, params?: any, option?: RequestOptions) => {
-      return request(url, params, { method: "POST", ...option })
+      return request(url, params, { method: 'POST', ...option })
     },
     put: (url: UrlType, params?: any, option?: RequestOptions) => {
-      return request(url, params, { method: "GET", ...option })
+      return request(url, params, { method: 'GET', ...option })
     },
     delete: (url: UrlType, params?: any, option?: RequestOptions) => {
-      return request(url, params, { method: "POST", ...option })
+      return request(url, params, { method: 'POST', ...option })
     },
   }
 }

composables/useMessageModal.ts

@@ -1,37 +0,0 @@
-import { ref } from 'vue'
-
-interface MessageResult {
-  status: boolean
-  error?: string
-}
-const isMessageModalOpen = ref(false)
-const isNeedContact = ref(false)
-const option = ref(null)
-let resolvePromise: ((value: MessageResult) => void) | null = null
-
-export function useMessageModal() {
-  const openMessageModal = (opt: any): Promise<MessageResult> => {
-    isMessageModalOpen.value = true
-    isNeedContact.value = !opt || false
-    option.value = opt
-    return new Promise((resolve) => {
-      resolvePromise = resolve
-    })
-  }
-
-  const closeMessageModal = (result: MessageResult) => {
-    isMessageModalOpen.value = false
-    if (resolvePromise) {
-      resolvePromise(result)
-      resolvePromise = null
-    }
-  }
-
-  return {
-    isMessageModalOpen,
-    isNeedContact,
-    option,
-    openMessageModal,
-    closeMessageModal,
-  }
-}

layouts/default.vue

@@ -6,7 +6,7 @@ watch(
   () => router.currentRoute.value.path,
   (v) => {
     if (v === '/')
-      headerBg.value = '#FAF5F1'
+      headerBg.value = '#0F0820'
     else headerBg.value = '#fff'
   },
   {
@@ -18,16 +18,15 @@ watch(
 <template>
   <div class="common-layout">
     <el-container class="h-full">
-      <!-- <DiscountTip /> -->
-      <el-header :style="{ backgroundColor: headerBg }" class="pos-relative">
+      <!-- <el-header :style="{ backgroundColor: headerBg }" class="pos-relative">
         <AppHeader />
         <category-header />
-      </el-header>
+      </el-header> -->
       <el-main id="app-scroller" class="relative">
+        <AppHeader />
         <slot />
       </el-main>
       <!-- <el-footer><AppFooter /></el-footer> -->
-      <cookie-tip />
     </el-container>
   </div>
 </template>

pages/about/index.vue

@@ -1,232 +0,0 @@
-<script lang='ts' setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { ConstKeys } from '~/enums/const-enums'
-import Team001 from '~/assets/images/about_team_01.png'
-import Team002 from '~/assets/images/about_team_02.png'
-import Team003 from '~/assets/images/about_team_03.png'
-import Team004 from '~/assets/images/about_team_04.png'
-import Team005 from '~/assets/images/about_team_05.png'
-import Team006 from '~/assets/images/about_team_06.png'
-
-useHead({
-  title: 'About Us | EJET Selection',
-  meta: [
-    {
-      name: 'description',
-      content:
-         `Discover how EJET Selection connects global retailers with trusted Chinese manufacturers. Learn about our mission, values, and commitment to quality and innovation.`,
-    },
-    {
-      property: 'og:title',
-      content: 'About Us | EJET Selection',
-    },
-    {
-      property: 'og:description',
-      content:
-        `Discover how EJET Selection connects global retailers with trusted Chinese manufacturers. Learn about our mission, values, and commitment to quality and innovation.`,
-    },
-    {
-      property: 'og:type',
-      content: 'website',
-    },
-    {
-      property: 'twitter:title',
-      content: 'About Us | EJET Selection',
-    },
-    {
-      property: 'twitter:description',
-      content:
-        `Discover how EJET Selection connects global retailers with trusted Chinese manufacturers. Learn about our mission, values, and commitment to quality and innovation.`,
-    },
-    {
-      property: 'twitter:card',
-      content: 'summary_large_image',
-    },
-  ],
-  link: [
-    {
-      rel: 'canonical',
-      href: `${ConstKeys.DOMAINPRO}/about`,
-    },
-  ],
-})
-
-const team = [
-  {
-    avatar: Team001,
-    name: 'Jason',
-    position: 'Founder & CEO',
-  },
-  {
-    avatar: Team002,
-    name: 'Andy Wong',
-    position: 'EJET Supply Chain Manager',
-  },
-  {
-    avatar: Team003,
-    name: 'Phoebe Mo',
-    position: 'EJET Procurement Manager',
-  },
-  {
-    avatar: Team004,
-    name: 'Fiona Zhang',
-    position: 'EBU-CEO',
-  },
-  {
-    avatar: Team005,
-    name: 'Mandy Huang',
-    position: 'Sales Manager',
-  },
-  {
-    avatar: Team006,
-    name: 'Pony Hu',
-    position: 'Guangzhou Branch Manager',
-  },
-]
-const faq = ref([
-  {
-    question: 'What is EJET Selection?',
-    isExpand: false,
-    type: 1,
-    answer: 'EJET Selection is a premier wholesale marketplace designed to connect international retailers with toptier Chinese manufacturers and brands. We provide a platform for accessing a wide range of unique and high-quality products, ensuring retailers can offer exceptional value to their customers.',
-  },
-  {
-    question: 'How does EJET Selection ensure product quality?',
-    isExpand: false,
-    type: 1,
-    answer: 'We collaborate with trusted wholesale suppliers who undergo a rigorous vetting process. Our commitment to quality includes regular inspections and adherence to strict standards, ensuring that all products meet the highest levels of excellence and reliability.',
-  },
-  {
-    question: 'What are the benefits of buying from EJET Selection?',
-    isExpand: false,
-    type: 1,
-    answer: 'Retailers can access to a wide selection of unique and high-quality products, and connect with reliable brand wholesale suppliers from China. Our platform is designed to enhance your business offerings, supported by comprehensive assistance and seamless delivery, empowering you to succeed in a competitive market.',
-  },
-  {
-    isExpand: false,
-    question: 'How do I shop wholesale on EJET Selection？',
-    answer: '',
-    type: 2,
-  },
-])
-</script>
-
-<template>
-  <div class="w-1400px mx-auto">
-    <div class="flex justify-between items-center pt-40px mb-160px">
-      <div class="w-1/2">
-        <img src="~/assets/images/about_img01.png" class="w-600px h-560px" alt="" srcset="">
-      </div>
-      <div class="w-1/2">
-        <h1 class="fw-600 text-48px text-#333 !mb-40px custom-title-font">
-          About EJET Selection
-        </h1>
-        <p class="!text-#999 mb-20px lh-22px">
-          EJET Selection was born from a vision to bridge premium Chinese manufacturing brands withinternational retailers. Founded by an experienced team in the wholesale industry and globalcollaboration, we saw the opportunity to showcase the exceptional craftsmanship and unigueproducts that Chinese brands have to offer.
-        </p>
-        <p class="!text-#999 lh-22px">
-          We created a platform and meticulously curated a selection of suppliers known for their excellenceand reliability, ensuring that every product meets our high standards. We are committed to inspiringand supporting retailers by providing access to unigue brands and products that elevate theibusinesses and delight their customers.
-        </p>
-        <el-button class="!bg-#C58C64 mt-40px !text-#fff !w-160px !h-40px  !b-rd-148px">
-          <a href="/contact">
-            Contact Us
-          </a>
-        </el-button>
-      </div>
-    </div>
-    <div class="flex">
-      <div class="w-1/2">
-        <h2 class="text-#333333 fw-600 text-40px !mb-42px custom-title-font">
-          We Are Committed To
-        </h2>
-        <div class="flex items-center mb-30px">
-          <img src="~/assets/images/about_icon01.png" class="w-36px h-36px mr-20px" alt="" srcset="">
-          <div>
-            <h3 class="text-#333 fw-600 text-24px !mb-12px custom-title-font">
-              Quality
-            </h3>
-            <p class="text-#999 lh-24px w-450px">
-              We are committed to providing exceptional products by partnering with trusted suppliers.
-            </p>
-          </div>
-        </div>
-        <div class="flex items-center mb-30px">
-          <img src="~/assets/images/about_icon02.png" class="w-36px h-36px mr-20px" alt="" srcset="">
-          <div>
-            <h3 class="text-#333 fw-600 text-24px !mb-12px custom-title-font">
-              Innovation
-            </h3>
-            <p class="text-#999 lh-24px w-450px">
-              We embrace creativity and forward-thinking solutions to continuously improve our platform.
-            </p>
-          </div>
-        </div>
-        <div class="flex items-center">
-          <img src="~/assets/images/about_icon03.png" class="w-36px h-36px mr-20px" alt="" srcset="">
-          <div>
-            <h3 class="text-#333 fw-600 text-24px !mb-12px custom-title-font">
-              Partnership
-            </h3>
-            <p class="text-#999 lh-24px w-450px">
-              We believe in building strong, collaborative relationships with our suppliers and retailers.
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="w-1/2">
-        <img src="~/assets/images/about_img02.png" class="w-680px h-640px" alt="" srcset="">
-      </div>
-    </div>
-    <div class="mt-160px text-center mb-160px">
-      <h2 class="!mb-20px text-40px fw-600 text-#363C40 custom-title-font">
-        Our Team
-      </h2>
-      <p class="text-#999 mb-60px">
-        Meet the experts driving our success and innovation.
-      </p>
-      <div class="grid grid-cols-3 gap-x-107px gap-y-40px px-66px text-left">
-        <div v-for="item, index in team" :key="index">
-          <img :src="item.avatar" alt="" srcset="" class="w-352px h-320px b-rd-10px">
-          <div class="my-20px text-24px fw-600 text-#363C40 custom-title-font">
-            {{ item.name }}
-          </div>
-          <div class="text-#999">
-            {{ item.position }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="mt-160px text-center mb-160px px-105px">
-      <h2 class="!mb-20px text-40px fw-600 text-#363C40 custom-title-font">
-        FAQ
-      </h2>
-      <p class="text-#999 mb-60px">
-        Your questions answered: explore our most common inquiries.
-      </p>
-      <div class="text-left">
-        <div v-for="item, index in faq" :key="index" class="mb-50px last:mb-0 pos-relative after:content-[''] after:w-3px after:h-full after:bg-#333 after:pos-absolute after:left--40px after:b-rd-tl-3px after:b-rd-bl-3px after:top-0 after:bottom-0">
-          <h3 class="text-24px text-#333  cursor-pointer" @click="item.isExpand = !item.isExpand">
-            {{ item.question }}
-          </h3>
-          <div :class="(item.isExpand) ? item.type === 1 ? 'h-40px mt-20px overflow-unset' : 'h-144px mt-20px overflow-unset' : ''" class="h-0 text-#999 lh-24px transition-all duration-300 overflow-hidden">
-            <div v-if="item.answer">
-              {{ item.answer }}
-            </div>
-            <div v-else class="lh-24px">
-              <p>1. Sign Up: Create an account to access exclusive wholesale pricing.</p>
-              <p>2. Browse Products: Explore our wide range of categories and brands.</p>
-              <p>3. Add to Cart: Select products and add them to your cart.</p>
-              <p>4. Submit Wish Order: Submit your wish order and a dedicated customer manager will contact you to understand your detailed needs and requirements. </p>
-              <p>5. Place Orders: Easily order through our platform with the customer manager's assistance.</p>
-              <p>6. Enjoy Benefits: Experience seamless transactions and reliable supplier connections.</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <AppFooter />
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

pages/account.vue

@@ -1,62 +0,0 @@
-<script lang='ts' setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { ConstKeys } from '~/enums/const-enums'
-
-useHead({
-  title: 'EJET Selection Retailer | View Your Favourites and Orders',
-  meta: [
-    {
-      name: 'description',
-      content:
-         `Access and manage your wholesale account at EJET Selection. Review orders, manage favourites, update preferences, and enjoy a seamless wholesale shopping experience.`,
-    },
-    {
-      property: 'og:title',
-      content: 'EJET Selection Retailer | View Your Favourites and Orders',
-    },
-    {
-      property: 'og:description',
-      content: `Access and manage your wholesale account at EJET Selection. Review orders, manage favourites, update preferences, and enjoy a seamless wholesale shopping experience.`,
-    },
-    {
-      property: 'og:type',
-      content: 'website',
-    },
-    {
-      property: 'twitter:title',
-      content: 'EJET Selection Retailer | View Your Favourites and Orders',
-    },
-    {
-      property: 'twitter:description',
-      content: `Access and manage your wholesale account at EJET Selection. Review orders, manage favourites, update preferences, and enjoy a seamless wholesale shopping experience.`,
-    },
-    {
-      property: 'twitter:card',
-      content: 'summary_large_image',
-    },
-  ],
-  link: [
-    {
-      rel: 'canonical',
-      href: `${ConstKeys.DOMAINPRO}/account`,
-    },
-  ],
-})
-</script>
-
-<template>
-  <div>
-    <div class="w-1400px mx-auto flex pt-40px pb-216px">
-      <div class="w-180px bg-#FAFAFA b-rd-10px">
-        <business-account-left />
-      </div>
-      <div class="flex-1 ml-16px">
-        <NuxtPage />
-      </div>
-    </div>
-    <common-footer-guide />
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

pages/account/favourites.vue

@@ -1,55 +0,0 @@
-<script lang='ts' setup>
-const activeName = ref()
-const router = useRouter()
-const route = useRoute()
-
-function handleClick(tab: any) {
-  const tabName = tab.paneName
-  activeName.value = tabName
-  router.push({
-    path: '/account/favourites',
-    query: {
-      tab: tabName,
-    },
-  })
-}
-onMounted(() => {
-  activeName.value = route.query.tab as string
-})
-</script>
-
-<template>
-  <div class="">
-    <div class="py-18px px-24px bg-#FAFAFA b-rd-10px text-#000 text-20px fw-500 mb-20px">
-      Favourites
-    </div>
-    <el-tabs v-model="activeName" class="favorite-tabs" @tab-click="handleClick">
-      <el-tab-pane label="Products" name="products">
-        <business-account-favourite-products :active-name="activeName" />
-      </el-tab-pane>
-      <el-tab-pane label="Brands" name="following">
-        <business-account-favourite-brands :active-name="activeName" />
-      </el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-
-<style lang='less' scoped>
-.favorite-tabs {
-  background-color: #FAFAFA;
-  border-radius: 10px;
-  padding: 20px;
-  padding-top: 0px;
-  ::v-deep(.el-tabs__header){
-    .el-tabs__item{
-      color: #333;
-      &.is-active {
-        color: #C58C64!important;
-      }
-    }
-    .el-tabs__active-bar{
-      background-color: #C58C64!important;
-    }
-  }
-}
-</style>

pages/account/messages.vue

@@ -1,84 +0,0 @@
-<script lang='ts' setup>
-import { useMessage } from '@/components/business/account/message/useMessage'
-
-const props = defineProps({
-  isUseContact: {
-    type: Boolean,
-    default: true,
-  },
-  refer: {
-    type: String,
-  },
-  option: {
-    type: Object || null,
-  },
-})
-const {
-  contacts,
-  selectedContact,
-  messageList,
-  getContactList,
-  getContactMessages,
-  createBrandConversation,
-  createServer,
-  setRoundNewMessage,
-  timer,
-  isScrollBottom,
-} = useMessage()
-async function asyncData() {
-  if (props.isUseContact) {
-    isScrollBottom.value = false
-    if (props.refer === 'contact')
-      await createServer()
-    await getContactList()
-    selectedContact.value = contacts.value[0]
-    await getContactMessages()
-    isScrollBottom.value = true
-    setRoundNewMessage()
-  }
-  else {
-    isScrollBottom.value = false
-    // 先根据品牌id，创建一个会话
-    await createBrandConversation(props.option?.id)
-    selectedContact.value.sessionType = '2'
-    selectedContact.value.brandInfo = props.option
-    await getContactMessages()
-    isScrollBottom.value = true
-    setRoundNewMessage()
-  }
-}
-asyncData()
-onUnmounted(() => {
-  clearInterval(timer.value)
-  messageList.value = []
-})
-</script>
-
-<template>
-  <div>
-    <div v-if="isUseContact" class="py-18px px-24px bg-#FAFAFA b-rd-10px text-#000 text-20px fw-500 mb-20px">
-      Messages
-    </div>
-    <el-container :class=" isUseContact ? 'h-850px' : 'h-640px' ">
-      <el-aside v-if="isUseContact" class="w-364px bg-#FAFAFA !overflow-y-hidden">
-        <business-account-message-contact-list />
-      </el-aside>
-      <el-container>
-        <el-header class=" bg-#C58C64/6 custom-header">
-          <business-account-message-contact-head />
-        </el-header>
-        <el-main class="bg-#C58C64/6 !p-20px !pt-0">
-          <business-account-message-chat-window :is-use-contact="isUseContact" />
-          <business-account-message-chat-input />
-        </el-main>
-      </el-container>
-    </el-container>
-  </div>
-</template>
-
-<style lang='less' scoped>
-.custom-header {
-  box-shadow: unset !important;
-  padding: 20px !important;
-}
-</style>

pages/account/notice.vue

@@ -1,34 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup></script>
-
-<template>
-  <div>
-    <div
-      class="py-18px px-24px bg-#FAFAFA b-rd-10px text-#000 text-20px fw-500 mb-20px"
-    >
-      Notice
-    </div>
-    <Business-account-notice />
-  </div>
-</template>
-
-<style lang="less" scoped>
-.favorite-tabs {
-  background-color: #fafafa;
-  border-radius: 10px;
-  padding: 20px;
-  padding-top: 0px;
-  ::v-deep(.el-tabs__header) {
-    .el-tabs__item {
-      color: #333;
-      &.is-active {
-        color: #c58c64 !important;
-      }
-    }
-    .el-tabs__active-bar {
-      background-color: #c58c64 !important;
-    }
-  }
-}
-</style>

pages/account/orders.vue

@@ -1,58 +0,0 @@
-<script lang='ts' setup>
-const activeName = ref()
-const router = useRouter()
-const route = useRoute()
-
-function handleClick(tab: any) {
-  const tabName = tab.paneName
-  activeName.value = tabName
-  router.push({
-    path: '/account/orders',
-    query: {
-      tab: tabName,
-    },
-  })
-}
-onMounted(() => {
-  activeName.value = route.query.tab as string
-})
-</script>
-
-<template>
-  <div>
-    <div class="py-18px px-24px bg-#FAFAFA b-rd-10px text-#000 text-20px fw-500 mb-20px">
-      Wish Orders
-    </div>
-    <el-tabs v-model="activeName" class="favorite-tabs" @tab-click="handleClick">
-      <el-tab-pane label="Submitted" name="submitted">
-        <Business-account-orders-submitted v-if="activeName === 'submitted'" />
-      </el-tab-pane>
-      <el-tab-pane label="Cancelled" name="cancelled">
-        <Business-account-orders-cancelled v-if="activeName === 'cancelled'" />
-      </el-tab-pane>
-      <el-tab-pane label="All" name="all">
-        <Business-account-orders-all v-if="activeName === 'all'" />
-      </el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-
-<style lang='less' scoped>
-.favorite-tabs {
-  background-color: #FAFAFA;
-  border-radius: 10px;
-  padding: 20px;
-  padding-top: 0px;
-  ::v-deep(.el-tabs__header){
-    .el-tabs__item{
-      color: #333;
-      &.is-active {
-        color: #C58C64!important;
-      }
-    }
-    .el-tabs__active-bar{
-      background-color: #C58C64!important;
-    }
-  }
-}
-</style>

pages/account/panel.vue

@@ -1,91 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { getStaticDataApi } from '~/api/model/my'
-
-const staticList = ref({
-  wishOrderCount: 0,
-  rfqCount: 0,
-  merchandiseFavoriteCount: 0,
-  brandFavoriteCount: 0,
-})
-
-async function getStaticData() {
-  try {
-    const data = await getStaticDataApi()
-    staticList.value = data
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-getStaticData()
-</script>
-
-<template>
-  <div class="">
-    <div
-      class="py-16px px-24px bg-#FAFAFA b-rd-10px text-#000 text-20px fw-500 mb-20px"
-    >
-      Dashboard
-    </div>
-    <div class="flex">
-      <div class="flex-grow-1">
-        <div class="mb-20px bg-#FAFAFA b-rd-10px py-40px flex">
-          <div
-            class="text-center py-15px w-30% pos-relative after:pos-absolute after:content-empty after:right-0 after:top-0 after:bottom-0 after:w-1px after:bg-#EEEEEE"
-          >
-            <div class="mb-4px fw-500 text-40px text-#AB7045">
-              {{ staticList.rfqCount }}
-            </div>
-            <div class="text-#999">
-              Cart
-            </div>
-          </div>
-          <div
-            class="text-center py-15px w-30% pos-relative after:pos-absolute after:content-empty after:right-0 after:top-0 after:bottom-0 after:w-1px after:bg-#EEEEEE"
-          >
-            <div class="mb-4px fw-500 text-40px text-#AB7045">
-              {{ staticList.wishOrderCount }}
-            </div>
-            <div class="text-#999">
-              Orders
-            </div>
-          </div>
-          <div class="text-center w-60% py-15px">
-            <div class="flex text-#36363D justify-center mb-14px">
-              <div class="mr-30px">
-                <span class="fw-500 text-40px text-#AB7045 mr-4px">{{ staticList.merchandiseFavoriteCount }}</span>
-                Products
-              </div>
-              <div>
-                <span class="fw-500 text-40px text-#AB7045 mr-4px">{{ staticList.brandFavoriteCount }}</span>
-                Brands
-              </div>
-            </div>
-            <div class="text-#999">
-              Favorites
-            </div>
-          </div>
-        </div>
-        <div class="bg-#FAFAFA b-rd-10px pt-18px pb-52px px-24px">
-          <div class="text-18px fw-500 text-#36363D mb-24px">
-            Brands
-          </div>
-          <business-account-panel-swiper-brands />
-        </div>
-      </div>
-      <div class="w-410px ml-20px bg-#FAFAFA b-rd-10px">
-        <business-account-notification />
-      </div>
-    </div>
-    <div class="bg-#FAFAFA b-rd-10px mt-20px p-20px pb-30px">
-      <div class="text-18px fw-500 text-#36363D mb-24px">
-        Recommended
-      </div>
-      <business-account-panel-swiper-recommend />
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped></style>

pages/account/rfqs.vue

@@ -1,54 +0,0 @@
-<script lang='ts' setup>
-const quotationModalVisible = ref<boolean>(false)
-const rfqId = ref<any>('')
-const rfqsRef = ref<any>(null)
-function onDetail(id: any) {
-  rfqId.value = id
-  quotationModalVisible.value = true
-}
-function addRFQs() {
-  rfqId.value = ''
-  quotationModalVisible.value = true
-}
-function updateRFQsList() {
-  rfqsRef.value.getTableList()
-}
-</script>
-
-<template>
-  <div>
-    <div class="flex justify-between items-center bg-#FAFAFA mb-20px">
-      <div class="py-18px px-24px  b-rd-10px text-#000 text-20px fw-500">
-        Wish Orders
-      </div>
-      <el-button class="!bg-#C58C64 !text-#fff  !w-176px !h-48px  !fw-500 !b-rd-8px" @click="addRFQs">
-        Post an RFQ
-      </el-button>
-    </div>
-    <business-account-rfqs ref="rfqsRef" @open-model="onDetail" />
-    <business-account-rfqs-quotation-modal v-if="quotationModalVisible" v-model:visible="quotationModalVisible" :rfq-id="rfqId" @update:data="updateRFQsList" />
-  </div>
-</template>
-
-<style lang='less' scoped>
-.favorite-tabs {
-    background-color: #FAFAFA;
-    border-radius: 10px;
-    padding: 20px;
-    padding-top: 0px;
-
-    ::v-deep(.el-tabs__header) {
-        .el-tabs__item {
-            color: #333;
-
-            &.is-active {
-                color: #C58C64 !important;
-            }
-        }
-
-        .el-tabs__active-bar {
-            background-color: #C58C64 !important;
-        }
-    }
-}
-</style>

pages/account/settings.vue

@@ -1,60 +0,0 @@
-<script lang='ts' setup>
-const activeName = ref()
-const router = useRouter()
-const route = useRoute()
-
-function handleClick(tab: any) {
-  const tabName = tab.paneName
-  activeName.value = tabName
-  router.push({
-    path: '/account/settings',
-    query: {
-      tab: tabName,
-    },
-  })
-}
-onMounted(() => {
-  activeName.value = route.query.tab as string
-})
-</script>
-
-<template>
-  <div>
-    <div class="py-18px px-24px bg-#FAFAFA b-rd-10px text-#000 text-20px fw-500 mb-20px">
-      Settings
-    </div>
-    <el-tabs v-model="activeName" class="favorite-tabs" @tab-click="handleClick">
-      <el-tab-pane label="My Profile" name="profile">
-        <Business-account-settings-profile v-if="activeName === 'profile'" />
-      </el-tab-pane>
-      <el-tab-pane label="Change Password" name="password">
-        <Business-account-settings-changePsw v-if="activeName === 'password'" />
-      </el-tab-pane>
-    </el-tabs>
-  </div>
-</template>
-
-<style lang='less' scoped>
-.favorite-tabs {
-  background-color: #FAFAFA;
-  border-radius: 10px;
-  padding: 20px;
-  padding-top: 0px;
-  .el-tab-pane{
-    display: flex;
-    justify-content: center;
-    padding: 60px 0;
-  }
-  ::v-deep(.el-tabs__header){
-    .el-tabs__item{
-      color: #333;
-      &.is-active {
-        color: #C58C64!important;
-      }
-    }
-    .el-tabs__active-bar{
-      background-color: #C58C64!important;
-    }
-  }
-}
-</style>

pages/blog/[slug].vue

@@ -1,208 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import dayjs from "dayjs"
-import { getBlogsDetailApi, getReleaseBlogApi } from "~/api/model/blogs"
-import { ConstKeys } from "~/enums/const-enums"
-
-const route = useRoute()
-const detail = ref<any>({})
-const list = ref<any>([])
-const page_size = ref(3)
-
-const slug = route.params.slug
-const { data, pending, error, refresh } = await useAsyncData(
-  "blog-detail",
-  () =>
-    $fetch(`${ConstKeys.DOMAINPRO}/client/content/detail`, { params: { slug } }),
-)
-const seoData = data.value?.result
-
-useHead({
-  title: seoData?.contentTitle,
-  meta: [
-    {
-      name: "description",
-      content: seoData?.contentSubhead,
-    },
-    {
-      property: "og:title",
-      content: seoData?.contentTitle,
-    },
-    {
-      property: "og:description",
-      content: seoData?.contentSubhead,
-    },
-    {
-      property: "og:image",
-      content: seoData?.thumbnailUrl,
-    },
-    {
-      property: 'og:url',
-      content: `${ConstKeys.DOMAINPRO}/blog/${slug}`,
-    },
-    {
-      property: "og:type",
-      content: "website",
-    },
-    {
-      property: "twitter:title",
-      content: seoData?.contentTitle,
-    },
-    {
-      property: "twitter:description",
-      content: seoData?.contentSubhead,
-    },
-    {
-      property: 'twitter:site',
-      content: `${ConstKeys.DOMAINPRO}/blog/${slug}`,
-    },
-    {
-      property: "twitter:image",
-      content: seoData?.thumbnailUrl,
-    },
-    {
-      property: "twitter:card",
-      content: "summary_large_image",
-    },
-  ],
-  link: [
-    {
-      rel: 'canonical',
-      href: `${ConstKeys.DOMAINPRO}/blog/${slug}`,
-    },
-  ],
-})
-
-async function getNewBlogsList(
-  params?: any,
-  pageNo = 1,
-  pageSize = page_size.value
-) {
-  const res: any = await getReleaseBlogApi({
-    ...params,
-    type: 1,
-    pageNo,
-    pageSize,
-  })
-  list.value = res.records
-}
-getNewBlogsList({
-  orderBy: "createTime",
-  orderType: "desc",
-})
-
-async function getVideoOrBlogsDetail() {
-  const res = await getBlogsDetailApi({
-    slug,
-  })
-  detail.value = res
-}
-getVideoOrBlogsDetail()
-</script>
-
-<template>
-  <div class="blog-detail">
-    <div class="py-100px pb-120px w-1400px m-auto px-65px">
-      <h1 class="fw-700 text-40px lh-40px text-#363C40 custom-title-font">
-        {{ detail.contentTitle }}
-      </h1>
-      <div class="mt-20px flex mb-42px text-16px text-#4d4d4d">
-        <!-- <div class="flex">
-          <div>Creator:</div>
-          <div class="ml-10px text-#999999">
-            {{ detail.createBy }}
-          </div>
-        </div> -->
-        <!-- <div class="mx-10px b-r-1px b-r-solid b-r-#D8D8D8 h-20px" /> -->
-        <div class="text-16px flex text-#666666">
-          <div>Last Update: &nbsp;</div>
-          {{ dayjs(detail?.createTime).format("MM/DD/YYYY") }}
-        </div>
-        <div
-          v-if="detail.category_dictText"
-          class="mx-10px b-r-1px b-r-solid b-r-#D8D8D8 h-20px"
-        />
-        <div class="text-#999999">
-          {{ detail.category_dictText }}
-        </div>
-      </div>
-      <div
-        class="text-#333333 content-detail custom-html"
-        v-html="detail.content"
-      />
-      <div class="mt-100px">
-        <h2 class="fw-700 text-40px text-#3d3d3d !mb-60px custom-title-font">
-          Here are some related articles you may find interesting:
-        </h2>
-        <div class="mt-70px grid grid-cols-3 gap-x-106px gap-y-65px">
-          <div v-for="(item, index) in list" :key="index">
-            <common-blog-item :item="item" />
-          </div>
-        </div>
-      </div>
-    </div>
-    <AppFooter />
-  </div>
-</template>
-
-<style lang="less" scoped>
-.blog-detail {
-  ::v-deep(.content-detail) {
-    font-family: sans-serif;
-    h2 {
-      font-size: 1.5em;
-      font-family: "CustomTitleFont";
-      margin-top: 1em !important;
-      margin-bottom: 1em !important;
-      font-weight: bold;
-    }
-    h3 {
-      display: block;
-      font-size: 1.17em;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-      margin-bottom: 1em !important;
-      font-weight: bold;
-      unicode-bidi: isolate;
-      font-family: "CustomTitleFont";
-    }
-    p {
-      display: block;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-      unicode-bidi: isolate;
-    }
-    ul {
-      display: block;
-      list-style-type: disc;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-      padding-inline-start: 40px;
-      unicode-bidi: isolate;
-      li {
-        display: list-item;
-        text-align: -webkit-match-parent;
-        unicode-bidi: isolate;
-      }
-    }
-    ol {
-      list-style-type: decimal;
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-      padding-inline-start: 40px;
-      unicode-bidi: isolate;
-    }
-  }
-}
-</style>

pages/blog/index.vue

@@ -1,129 +0,0 @@
-<script lang='ts' setup>
-import { getBlogCategoryListApi, getBlogsListApi } from '~/api/model/blogs'
-import { PageSizeEnum } from '~/enums/sizeEnum'
-import { ConstKeys } from '~/enums/const-enums'
-
-useHead({
-  title: 'Insights, Trends, and Tips for Retail Success| EJET Selection Blog',
-  meta: [
-    {
-      name: 'description',
-      content:
-         `Stay updated with EJET Selection's blog! Explore industry insights, product trends, and expert tips to grow your retail business and stay ahead in the market.`,
-    },
-    {
-      property: 'og:title',
-      content: 'Insights, Trends, and Tips for Retail Success| EJET Selection Blog',
-    },
-    {
-      property: 'og:description',
-      content:
-        `Stay updated with EJET Selection's blog! Explore industry insights, product trends, and expert tips to grow your retail business and stay ahead in the market.`,
-    },
-    {
-      property: 'og:type',
-      content: 'website',
-    },
-    {
-      property: 'twitter:title',
-      content: 'Insights, Trends, and Tips for Retail Success| EJET Selection Blog',
-    },
-    {
-      property: 'twitter:description',
-      content:
-        `Stay updated with EJET Selection's blog! Explore industry insights, product trends, and expert tips to grow your retail business and stay ahead in the market.`,
-    },
-    {
-      property: 'twitter:card',
-      content: 'summary_large_image',
-    },
-  ],
-  link: [
-    {
-      rel: 'canonical',
-      href: `${ConstKeys.DOMAINPRO}/blog`,
-    },
-  ],
-})
-
-const active = ref('all')
-const categoryList = ref([
-  {
-    title: 'All posts',
-    key: 'all',
-  },
-])
-const list = ref<any>([])
-const page_size = ref(9)
-const total = ref()
-const currentPage = ref(PageSizeEnum.PAGE)
-
-async function getBlogCategoryList() {
-  const res: any = await getBlogCategoryListApi()
-  categoryList.value = categoryList.value.concat(res)
-}
-
-async function getBlogsList(params?: any, pageNo = PageSizeEnum.PAGE, pageSize = page_size.value) {
-  const res: any = await getBlogsListApi({
-    ...params,
-    pageNo,
-    pageSize,
-    orderBy: 'createTime',
-    orderType: 'desc',
-  })
-  list.value = res.records
-  total.value = res.total
-  currentPage.value = res.current
-}
-function onSelectedCategory(item: any) {
-  active.value = item.key
-  getBlogsList({
-    categoryId: item.key === 'all' ? '' : item.key,
-  }, PageSizeEnum.PAGE, page_size.value)
-}
-function changePage(current: number, size: number) {
-  getBlogsList({ categoryId: active.value === 'all' ? '' : active.value }, current, size)
-}
-getBlogCategoryList()
-getBlogsList()
-</script>
-
-<template>
-  <div class="">
-    <div class="text-center py-80px">
-      <h1 class="fw-700 text-40px !mb-20px text-#363C40 custom-title-font">
-        Our Blog
-      </h1>
-      <div class="lh-24px text-16px w-500px mx-auto">
-        Explore industry insights, product trends, and expert tips to grow your retail business and stay ahead in the market.
-      </div>
-    </div>
-    <div class="w-1400px mx-auto mb-120px">
-      <div class="flex gap-84px text-#999999 text-18px justify-center">
-        <h2
-          v-for="item, index in categoryList" :key="index" class="pb-10px cursor-pointer fw-500 pos-relative" :class="active === item.key && 'after:pos-absolute after:content-empty after:bottom-0 after:left-15% after:right-15% after:h-2px after:bg-#C58C64 text-#C58C64'"
-          @click="onSelectedCategory(item)"
-        >
-          {{ item.title }}
-        </h2>
-      </div>
-      <div class="mt-70px grid grid-cols-3 gap-x-106px gap-y-65px px-66px">
-        <div v-for="item, index in list" :key="index">
-          <common-blog-item :item="item" />
-        </div>
-      </div>
-      <div class="mt-100px 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"></style>

pages/brand/[id].vue

@@ -1,219 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { useBrandDetailData } from "./useBrandDetailData"
-import { setBrandFavoriteApi } from "~/api/model/brand"
-import { useUserStore } from "@/stores/modules/user"
-import { ConstKeys } from "~/enums/const-enums"
-
-const route = useRoute()
-const id = route.params.id
-
-const { data, pending, error, refresh } = await useAsyncData(
-  "brand-detail",
-  () => $fetch(`${ConstKeys.DOMAINPRO}/client/brand/detail`, { params: { id } })
-)
-const seoData = data.value?.result
-
-useHead({
-  title: `Shop ${seoData?.brandName} Brand Wholesale | EJET Selection`,
-  meta: [
-    {
-      name: "description",
-      content: `Explore EJET Selection's Top Brands, featuring trusted Chinese wholesale suppliers known for quality and innovation. Discover unique and exclusive home decor products for your store.`,
-    },
-    {
-      property: "og:title",
-      content: `Shop ${seoData?.brandName} Brand Wholesale | EJET Selection`,
-    },
-    {
-      property: "og:description",
-      content: `Explore EJET Selection's Top Brands, featuring trusted Chinese wholesale suppliers known for quality and innovation. Discover unique and exclusive home decor products for your store.`,
-    },
-    {
-      property: "og:image",
-      content: seoData?.headeImage,
-    },
-    {
-      property: "og:url",
-      content: `${ConstKeys.DOMAINPRO}/brand/${id}`,
-    },
-    {
-      property: "og:type",
-      content: "website",
-    },
-    {
-      property: "twitter:title",
-      content: `Shop ${seoData?.brandName} Brand Wholesale | EJET Selection`,
-    },
-    {
-      property: "twitter:description",
-      content: `Explore EJET Selection's Top Brands, featuring trusted Chinese wholesale suppliers known for quality and innovation. Discover unique and exclusive home decor products for your store.`,
-    },
-    {
-      property: "twitter:site",
-      content: `${ConstKeys.DOMAINPRO}/brand/${id}`,
-    },
-    {
-      property: "twitter:image",
-      content: seoData?.headeImage,
-    },
-    {
-      property: "twitter:card",
-      content: "summary_large_image",
-    },
-  ],
-  link: [
-    {
-      rel: "canonical",
-      href: `${ConstKeys.DOMAINPRO}/brand/${id}`,
-    },
-  ],
-})
-
-const userStore = useUserStore()
-const { isLogin } = storeToRefs(userStore)
-const { openLoginModal } = useLoginModal()
-const { openMessageModal } = useMessageModal()
-const {
-  detail,
-  getDetailInfo,
-  brandGoodsList,
-  page_size,
-  changePage,
-  total,
-  currentPage,
-  handleSelectedCategory,
-} = useBrandDetailData()
-const tagList = computed(() => {
-  console.log("taglist", detail.value?.brandTag?.split(","))
-  return detail.value?.brandTag?.split(",") || []
-})
-async function onFavorite(item: any) {
-  try {
-    const { status } = await openLoginModal()
-    if (status) {
-      const params = { bid: item.id, type: item.isFavorite ? 2 : 1 }
-      await setBrandFavoriteApi(params)
-      item.isFavorite = !item.isFavorite
-      ElMessage({
-        message: `${item.isFavorite ? "Add" : "Remove"} to My Favourites Successfully`,
-        type: "success",
-        plain: true,
-      })
-    }
-  } catch (error) {
-    console.log(error)
-  }
-}
-async function getAsyncData() {
-  await getDetailInfo()
-  await handleSelectedCategory("")
-}
-getAsyncData()
-async function openMessage() {
-  const { status } = await openLoginModal()
-  if (status) {
-    const res = await openMessageModal(detail.value)
-    console.log(res)
-  }
-}
-</script>
-
-<template>
-  <div class="">
-    <img
-      :src="detail?.headeImage"
-      class="w-full h-400px object-cover"
-      alt=""
-      srcset=""
-    />
-    <div
-      class="w-1400px mx-auto pt-110px pb-20px pos-relative flex justify-between items-center"
-    >
-      <div
-        class="w-160px h-160px pos-absolute top--80px left-0 overflow-hidden b-rd-10px bg-#fff"
-      >
-        <img :src="detail?.brandLogo" class="object-contain" alt="" srcset="" />
-      </div>
-      <div class="w-1000px">
-        <h1 class="fw-700 text-32px text-#363C40 !mb-24px">
-          {{ detail?.brandName }}
-        </h1>
-        <div class="flex text-#999999 lh-24px">
-          {{ detail?.brandStory }}
-        </div>
-      </div>
-      <div v-if="!isLogin">
-        <el-button
-          type="primary"
-          plain
-          class="w-160px !bg-#C58C64 !text-#fff !h-40px !text-16px !fw-500 !b-rd-150px"
-          @click="openLoginModal"
-        >
-          Sign on EJET
-        </el-button>
-      </div>
-      <div v-else class="flex items-center">
-        <el-button
-          class="!bg-#CC9879 !text-#fff !w-120px !h-40px !b-rd-150px"
-          @click="onFavorite(detail)"
-        >
-          {{ detail?.isFavorite ? "Unfollow" : "Follow" }}
-        </el-button>
-        <!-- <el-button class="!text-#C58C64 !w-120px !h-40px !b-rd-150px !ml-18px" @click="openMessage">
-          Message
-        </el-button> -->
-      </div>
-    </div>
-    <div
-      v-if="detail?.brandTag && tagList.length"
-      class="flex flex-wrap gap-20px w-1400px mx-auto  mb-100px h-38px overflow-hidden"
-    >
-      <div
-        v-for="(item, index) in tagList"
-        :key="index"
-        class="b-1px b-solid b-#d6ab92 b-rd-30px px-20px lh-36px text-#d6ab92"
-      >
-        {{ item }}
-      </div>
-    </div>
-    <div class="w-1400px mx-auto mb-160px">
-      <!-- <h2 class="!mb-68px fw-700 text-24px text-#333">
-        All Products
-      </h2> -->
-      <div
-        v-if="brandGoodsList.length"
-        class="grid grid-gap-x-65px grid-gap-y-65px grid-cols-4"
-      >
-        <div v-for="item in brandGoodsList" :key="item.id">
-          <common-goods-item :item />
-        </div>
-      </div>
-      <common-empty v-else title="">
-        <template #icon>
-          <img
-            src="~/assets/images/featured_empty.png"
-            class="w-200px h-200px"
-            alt=""
-            srcset=""
-          />
-        </template>
-      </common-empty>
-      <div v-if="brandGoodsList.length" 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>
-    <business-brand-footer />
-    <AppFooter />
-  </div>
-</template>
-
-<style lang="less" scoped></style>

pages/brand/useBrandDetailData.ts

@@ -1,86 +0,0 @@
-/** @format */
-
-import { getBrandDetailApi, getBrandGoodsListApi, getDynamicCategoryListApi } from '~/api/model/brand'
-import { PageSizeEnum } from '~/enums/sizeEnum'
-
-export function useBrandDetailData() {
-  const categories = ref<any>([])
-  const brandGoodsList = ref<any>([])
-  const selectedCategory = ref()
-  const page_size = ref(12)
-  const currentPage = ref(PageSizeEnum.PAGE)
-  const total = ref()
-  const detail = ref()
-  const getDetailInfo = async () => {
-    const route = useRoute()
-    const id = route.params.id
-    const info: any = await getBrandDetailApi({ id })
-    detail.value = info
-    // A053_B为禁用，A053_A为启用
-    // if (info.brandState === 'A053_B')
-    // isDisabled.value = true
-    // document.title = info.brandName
-  }
-
-  const getCategories = async () => {
-    try {
-      const route = useRoute()
-      const id = route.params.id
-      const data = await getDynamicCategoryListApi({ id })
-      categories.value = data
-    }
-    catch (error) {
-      console.log(error)
-    }
-  }
-  const getBrandGoodsList = async (
-    pageNo = currentPage.value,
-    pageSize = page_size.value,
-  ) => {
-    const route = useRoute()
-    const brandId = route.params.id
-    const res: any = await getBrandGoodsListApi({
-      categoryId: selectedCategory.value,
-      brandId,
-      pageNo,
-      pageSize,
-    })
-    brandGoodsList.value = res.records
-    total.value = res.total
-    currentPage.value = res.current
-  }
-
-  const handleSelectedCategory = (value: any) => {
-    selectedCategory.value = value
-    getBrandGoodsList()
-    value && addIdParameter(value)
-  }
-  function addIdParameter(value: any) {
-    const currentUrl = new URL(window.location.href)
-    currentUrl.searchParams.set('filters', value)
-    window.history.pushState({}, '', currentUrl.toString())
-  }
-  //   const updateGoodsList = () => {
-  //     changePage(currentPage.value, PageSizeEnum.PAGE_SIZE)
-  //   }
-
-  const changePage = (current: number, size: number) => {
-    getBrandGoodsList(current, size)
-  }
-
-  return {
-    brandGoodsList,
-    getCategories,
-    categories,
-    selectedCategory,
-    page_size,
-    // updateGoodsList,
-    changePage,
-    currentPage,
-    total,
-    getBrandGoodsList,
-    detail,
-    getDetailInfo,
-    handleSelectedCategory,
-  }
-}

pages/cart/index.vue

@@ -1,205 +0,0 @@
-<script lang='ts' setup>
-import { useCart } from './useCart'
-import { numberToTwoDecimals } from '~/utils/number'
-import { ConstKeys } from '~/enums/const-enums'
-
-const { checkAll, isIndeterminate, submitLoading, selectedCount, handleChange, removeCart, submitOrder, checkedCart, cartList, orderTotal, getCartList, handleCheckAllChange, handleCheckedChange } = useCart()
-
-const router = useRouter()
-useHead({
-  title: 'EJET Selection Retailer | Add to Cart',
-  meta: [
-    {
-      name: 'description',
-      content:
-         `Review your selected wholesale products and proceed to submit your wish order. Manage your cart easily with EJET Selection and enjoy wholesale prices.`,
-    },
-    {
-      property: 'og:title',
-      content: 'EJET Selection Retailer | Add to Cart',
-    },
-    {
-      property: 'og:description',
-      content:
-        `Review your selected wholesale products and proceed to submit your wish order. Manage your cart easily with EJET Selection and enjoy wholesale prices.`,
-    },
-    {
-      property: 'og:type',
-      content: 'website',
-    },
-    {
-      property: 'twitter:title',
-      content: 'EJET Selection Retailer | Add to Cart',
-    },
-    {
-      property: 'twitter:description',
-      content:
-        `Review your selected wholesale products and proceed to submit your wish order. Manage your cart easily with EJET Selection and enjoy wholesale prices.`,
-    },
-    {
-      property: 'twitter:card',
-      content: 'summary_large_image',
-    },
-  ],
-  link: [
-    {
-      rel: 'canonical',
-      href: `${ConstKeys.DOMAINPRO}/cart`,
-    },
-  ],
-})
-function onClick(item: any) {
-  router.push(`/brand/${item.brandId}`)
-}
-function onClickProduct(item: any) {
-  router.push(`/product/${item.merchandiseId}`)
-}
-getCartList()
-</script>
-
-<template>
-  <div>
-    <div class="w-1400px mx-auto">
-      <div class="pt-40px pb-20px flex items-center">
-        <h2 class="mr-10px text-24px fw-500 text-#333333">
-          Cart
-        </h2>
-        <div class="text-#666666">
-          ({{ selectedCount }} products)
-        </div>
-      </div>
-      <div v-if="cartList.length">
-        <el-checkbox
-          v-model="checkAll"
-          :indeterminate="isIndeterminate"
-          class="mb-20px !text-#333333 custom-checkbox"
-          @change="handleCheckAllChange"
-        >
-          Select all
-        </el-checkbox>
-        <div>
-          <div class="cart-header py-30px px-42px flex text-#C58C64 text-20px fw-500 b-b-solid b-b-1px b-b-#EBEEF5">
-            <div class="w-500px">
-              Product
-            </div>
-            <div class="w-400px">
-              Brand
-            </div>
-            <!-- <div class="w-215px">
-              Quantity
-            </div>
-            <div class="w-140px">
-              Unit Price
-            </div> -->
-            <div class="w-270px">
-              Total
-            </div>
-            <div class="flex-1" />
-          </div>
-          <div />
-          <el-checkbox-group
-            v-model="checkedCart"
-            @change="handleCheckedChange"
-          >
-            <el-checkbox v-for="item in cartList" :key="item.merchandiseId" :label="item.merchandiseId" :value="item.merchandiseId" class="custom-table-item pr-40px b-b-solid b-b-1px b-b-#EBEEF5">
-              <div class="flex ml-24px  py-20px items-center" @click.prevent>
-                <div class="w-500px flex items-center">
-                  <img :src="(item.masterImage.split(','))[0]" alt="" class="w-100px h-100px object-cover" srcset="">
-                  <div class="ml-20px !w-300px !lh-20px">
-                    <div class=" text-#666666 text-ellipsis overflow-hidden cursor-pointer hover:underline" @click="onClickProduct(item)">
-                      {{ item.title }}
-                    </div>
-                  </div>
-                </div>
-                <div class="w-400px cursor-pointer" @click="onClick(item)">
-                  {{ item.brandName || '-' }}
-                </div>
-                <div class="w-270px">
-                  <el-input-number
-                    v-model="item.quantity"
-                    :disabled="item.disabled"
-                    class="!w-120px"
-                    :min="item.moq"
-                    :max="100000"
-                    controls-position="right"
-                    size="large"
-                    @change="handleChange($event, item)"
-                  />
-                </div>
-                <!-- <div class="w-150px text-#C58C64">
-                  $ {{ item.price && item.price.toFixed(2) || 0 }}
-                </div>
-                <div class="w-270px text-#C58C64">
-                  $ {{ item.price * item.quantity ? numberToTwoDecimals(item.price * item.quantity) : 0 }}
-                </div> -->
-                <div class="flex-1" @click="removeCart(item)">
-                  <svgo-delete class="!w-24px !h-24px !fill-#999999 cursor-pointer" :filled="true" />
-                </div>
-              </div>
-            </el-checkbox>
-          </el-checkbox-group>
-        </div>
-        <div class="flex justify-end text-18px items-center mt-40px mb-120px !fw-500">
-          <!-- <div class="mr-30px flex text-#36363D">
-            Order Total:
-            <div class="text-#C58C64 ml-10px">
-              $ {{ numberToTwoDecimals(orderTotal) || 0 }}
-            </div>
-          </div> -->
-          <el-button :disabled="!checkedCart.length" :loading="submitLoading" class="!bg-#C58C64 !text-#fff !w-250px !h-40px  !b-rd-6px" @click="submitOrder">
-            Submit Wish Order
-          </el-button>
-        </div>
-      </div>
-      <common-empty v-else class="my-200px" title="No goods found ~" />
-    </div>
-    <AppFooter />
-  </div>
-</template>
-
-<style lang='less'>
-.custom-checkbox,.custom-table-item{
-    cursor: auto;
-    .el-checkbox__input{
-      &.is-checked,&.is-indeterminate{
-          color: #000!important;
-          .el-checkbox__inner {
-            color: #000 !important;
-            background-color: #000 !important;
-            border: 1px solid #000 !important;
-        }
-      }
-        .el-checkbox__inner{
-            width: 16px !important;
-            height: 16px !important;
-            &:after{
-              left: 5px!important;
-              top: 2px!important;
-            }
-
-        }
-    }
-    .el-checkbox__label{
-        font-size: 16px !important;
-    }
-    &.is-checked,&.is-indeterminate {
-        .el-checkbox__label {
-            color: #000 !important;
-        }
-    }
-
-}
-.custom-table-item{
-    height: unset!important;
-    width: 100%!important;
-    margin-right: unset!important;
-    .el-checkbox__label{
-        display: block;
-    }
-      &.is-checked,&.is-indeterminate{
-        .el-checkbox__label {
-            color: unset!important;
-        }
-      }
-}
-</style>

pages/cart/useCart.ts

@@ -1,137 +0,0 @@
-import { changeQuantityApi, getCartListApi, removeCartApi, submitOrderApi } from '~/api/model/cart'
-import { numberToTwoDecimals } from '~/utils/number'
-
-const brandCount = ref(0)
-const selectedCount = ref(0)
-const orderTotal = ref(0)
-const checkAll = ref(false)
-const isIndeterminate = ref(false)
-const submitLoading = ref(false)
-const checkedCart = ref<any>([])
-const checkedIds = ref<any>([])
-const cartList = ref<any>([])
-
-export function useCart() {
-  /**
-   * 计算当前id对应list
-   * @param key
-   */
-  const calCheckedGoods = () => {
-    const checkedList = cartList.value.filter((item: any) => checkedIds.value.includes(item.merchandiseId))
-    const brandList = checkedList.map((item: any) => item.brandId)
-    brandCount.value = [...new Set(brandList)].length
-    selectedCount.value = checkedList.length
-    let totalSum = 0
-    checkedList.forEach((item: any) => {
-      totalSum += item.price * item.quantity
-    })
-    orderTotal.value = +totalSum
-  }
-  /**
-   * 全选
-   * @param val
-   */
-  const handleCheckAllChange = (val: boolean) => {
-    const allIds = cartList.value.map((item: any) => item.merchandiseId)
-    checkedCart.value = val ? allIds : []
-    checkedIds.value = val ? allIds : []
-    isIndeterminate.value = false
-    calCheckedGoods()
-  }
-  /**
-   * 单个选择
-   * @param value
-   */
-  const handleCheckedChange = (value: string[]) => {
-    const checkedCount = value.length
-    checkAll.value = checkedCount === cartList.value.length
-    checkedIds.value = value
-    checkedCart.value = value
-    isIndeterminate.value = checkedCount > 0 && checkedCount < cartList.value.length
-    calCheckedGoods()
-  }
-
-  const getCartList = async () => {
-    try {
-      const result: any = await getCartListApi()
-      cartList.value = result
-      // commonStore.setCartGoodsNumber(data.items.length)
-    }
-    catch (error) {
-      console.log(error)
-    }
-  }
-  const removeCart = async (item: any) => {
-    try {
-      await removeCartApi({ mid: item.merchandiseId })
-      cartList.value = cartList.value.filter((items: any) => items.merchandiseId !== item.merchandiseId)
-      const surplusChecked = checkedIds.value.filter((items: any) => items !== item.merchandiseId)
-      ElMessage({
-        message: 'remove cart successfully',
-        type: 'success',
-        plain: true,
-      })
-      handleCheckedChange(surplusChecked)
-    }
-    catch (error) {
-      console.log(error)
-    }
-  }
-
-  /**
-   * 提交订单
-   */
-  const submitOrder = async () => {
-    try {
-      submitLoading.value = true
-      await submitOrderApi({ mids: checkedIds.value })
-      checkAll.value = false
-      checkedIds.value = []
-      checkedCart.value = []
-      selectedCount.value = 0
-      isIndeterminate.value = false
-      ElMessage({
-        message: 'Order Submitted Successfully',
-        type: 'success',
-        plain: true,
-      })
-      submitLoading.value = false
-      const router = useRouter()
-      router.push({ path: '/submit-order' })
-    }
-    catch (error) {
-      console.log(error)
-      submitLoading.value = false
-    }
-  }
-
-  const handleChange = async (e: any, item: any) => {
-    try {
-      // const res: any = await changeQuantityApi({
-      //   mid: item.merchandiseId,
-      //   quantity: item.quantity,
-      // })
-      // item.price = res.price
-      calCheckedGoods()
-    }
-    catch (error) {
-      console.log(error)
-    }
-  }
-  return {
-    brandCount,
-    selectedCount,
-    checkAll,
-    isIndeterminate,
-    checkedCart,
-    orderTotal,
-    cartList,
-    submitLoading,
-    handleCheckAllChange,
-    handleChange,
-    getCartList,
-    removeCart,
-    handleCheckedChange,
-    submitOrder,
-  }
-}

pages/categories/[id].vue

@@ -1,187 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { ArrowRight } from '@element-plus/icons-vue'
-import { useData } from './useData'
-import { getParentsById } from '~/utils/object'
-import { ConstKeys } from '~/enums/const-enums'
-
-const route = useRoute()
-useHead({
-  title: `Wholesale ${route.query.label} for Your Store | EJET Selection`,
-  meta: [
-    {
-      name: 'description',
-      content: `Browse EJET Selection's product categories, including Home Decor, Kitchen Appliance, Beauty, and Pets. Find high-quality wholesale products to meet your retail needs.`,
-    },
-    {
-      property: 'og:title',
-      content: `Wholesale ${route.query.label} for Your Store | EJET Selection`,
-    },
-    {
-      property: 'og:description',
-      content:
-         `Browse EJET Selection's product categories, including Home Decor, Kitchen Appliance, Beauty, and Pets. Find high-quality wholesale products to meet your retail needs.`,
-    },
-    {
-      property: 'og:type',
-      content: 'website',
-    },
-    {
-      property: 'twitter:title',
-      content: `Wholesale ${route.query.label} for Your Store | EJET Selection`,
-    },
-    {
-      property: 'twitter:description',
-      content:
-        `Browse EJET Selection's product categories, including Home Decor, Kitchen Appliance, Beauty, and Pets. Find high-quality wholesale products to meet your retail needs.`,
-    },
-    {
-      property: 'twitter:card',
-      content: 'summary_large_image',
-    },
-  ],
-  link: [
-    {
-      rel: 'canonical',
-      href: `${ConstKeys.DOMAINPRO}/categories/${route.query.key}`,
-    },
-  ],
-})
-const {
-  categories,
-  goodsList,
-  page_size,
-  top_data,
-  selectedCategory,
-  currentPage,
-  getCategories,
-  changePage,
-  form,
-  total,
-  handleSelectedCategory,
-  handleOrderBy,
-  handleSelectedFilters,
-} = useData()
-const crumbs = ref<any>([{ name: 'Home', url: '/' }])
-
-const options = [{
-  label: 'Sort by MOQ',
-  value: 'smoq',
-}, {
-  label: 'Sort by Price',
-  value: 'sprice',
-}, {
-  label: 'Sort by Date',
-  value: 'sdate',
-}]
-
-watch(
-  () => route.query.secondKey,
-  (value: any) => {
-    if (categories.value.length)
-      handleSelectedCategory(value)
-  },
-  {
-    immediate: true,
-  },
-)
-
-watch(
-  () => selectedCategory.value,
-  async (value: any) => {
-    if (value)
-      handlerCrumb(value)
-  },
-)
-function handlerCrumb(value: any) {
-  const filterArr = getParentsById(categories.value, value)
-  const baseCrumb = [{ name: 'Home', url: '/' }, { name: top_data.value.title, url: '' }]
-  if (filterArr.length > 0) {
-    const arr: any = []
-    filterArr.forEach((ele: any) => {
-      arr.unshift({
-        name: ele.title,
-        url: '',
-      })
-    })
-    crumbs.value = [...baseCrumb, ...arr]
-  }
-  else {
-    crumbs.value = [...baseCrumb]
-  }
-}
-
-async function getAllData() {
-  await getCategories()
-  const route = useRoute()
-  const secondLevel = route.query.secondKey
-  if (secondLevel)
-    handleSelectedCategory(secondLevel)
-  else
-    handleSelectedCategory(top_data.value.key)
-  if (route.params.id && secondLevel)
-    handlerCrumb(secondLevel)
-  else crumbs.value.push({ name: top_data.value?.title, url: '' })
-}
-
-getAllData()
-</script>
-
-<template>
-  <div class="">
-    <div class="mb-42px">
-      <div class="relative">
-        <business-category-headerBanner :slug="route.params.id" />
-      </div>
-      <div class="w-1400px mx-auto pt-40px pb-20px">
-        <div class="fw-300">
-          <el-breadcrumb :separator-icon="ArrowRight">
-            <el-breadcrumb-item
-              v-for="(item, index) in crumbs" :key="index"
-              :to="!!item.url ? { path: item.url } : null"
-            >
-              {{ item.name }}
-            </el-breadcrumb-item>
-          </el-breadcrumb>
-        </div>
-      </div>
-    </div>
-    <div class="w-1400px mx-auto mb-120px">
-      <el-row class="row-bg">
-        <el-col :span="5">
-          <business-category-left-slider v-model:selectedValue="selectedCategory" :top-level="top_data" :list="categories" @on-select="handleSelectedCategory" />
-          <div class="h-1px bg-#DCDFE6 my-40px" />
-          <business-category-left-filters @on-select-filters="handleSelectedFilters" />
-        </el-col>
-        <el-col :span="1" />
-        <el-col :span="18">
-          <div class="flex justify-end mb-32px">
-            <el-select v-model="form.orderby" placeholder="Select Sorting Method " :clearable="true" size="large" style="width: 240px" @change="handleOrderBy">
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </div>
-          <div v-if="goodsList.length">
-            <div class="grid grid-gap-x-65px grid-gap-y-65px grid-cols-3">
-              <div v-for="item in goodsList" :key="item.id">
-                <common-goods-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>
-          <common-empty v-else class="mt-200px" title="No brand found ~" />
-        </el-col>
-      </el-row>
-    </div>
-    <business-category-swiperBrands />
-    <business-category-exploreProduct />
-    <AppFooter />
-  </div>
-</template>
-
-<style lang="less" scoped></style>

pages/categories/useData.ts

@@ -1,117 +0,0 @@
-/** @format */
-
-import { getGoodsListApi } from "~/api/model/goods"
-import { PageSizeEnum } from "~/enums/sizeEnum"
-import { getCategoryListApi } from "~/api/model/common"
-import { updateURLParameter } from "~/utils/object"
-
-type FeatureType = "Newest" | "Trending" | " Exlusive"
-
-export function useData() {
-  const categories = ref<any>([])
-  const goodsList = ref<any>([])
-  const selectedCategory = ref()
-  const page_size = ref(15)
-  const currentPage = ref(PageSizeEnum.PAGE)
-  const total = ref()
-  const top_data = ref({
-    entityQty: 0,
-  })
-  const form = ref<any>({
-    orderby: "",
-    trendingCollections: [],
-    recommend: [],
-    texture: [],
-    categoryId: "",
-  })
-  const getCategories = async () => {
-    const route = useRoute()
-    const slug = route.params.id
-    const data = await getCategoryListApi({ slug, all: true, np: 1 })
-    top_data.value = data.shift()
-    categories.value = data
-    top_data.value.entityQty = data.reduce((total: number, item: any) => {
-      total += item.entityQty
-      return total
-    }, 0)
-  }
-  const getGoodsList = async (
-    params?: any,
-    pageNo = currentPage.value,
-    pageSize = page_size.value
-  ) => {
-    const data: any = await getGoodsListApi({
-      ...params,
-      pageNo,
-      pageSize,
-    })
-    total.value = data.total
-    currentPage.value = data.current
-    data.records.forEach((item: any) => {
-      if (form.value.recommend.length && item.recommend) {
-        if (item.recommend.includes(form.value.recommend[0]))
-          item.recommend = form.value.recommend[0]
-      }
-    })
-    goodsList.value = data.records
-  }
-
-  const handleSelectedCategory = (value: any) => {
-    selectedCategory.value = value
-    form.value.categoryId = selectedCategory.value
-    getGoodsList(form.value, PageSizeEnum.PAGE, page_size.value)
-    // 将地址栏中的secondKey参数改为选中的值key
-    const route = useRoute()
-    const secondLevel = route.query.secondKey
-    if (secondLevel) {
-      updateURLParameter("secondKey", value)
-    }
-  }
-
-  const handleSelectedFilters = (type: any, value: any) => {
-    if (type === "clearAll") {
-      form.value.recommend = []
-      form.value.texture = []
-      form.value.trendingCollections = []
-    } else {
-      ;(form.value as any)[type] = value
-    }
-    getGoodsList(form.value, PageSizeEnum.PAGE, page_size.value)
-  }
-
-  const handleOrderBy = (value: any) => {
-    ;(form.value as any).orderby = value
-    getGoodsList(form.value, PageSizeEnum.PAGE, page_size.value)
-  }
-
-  const changePage = (current: number, size: number) => {
-    if (!selectedCategory.value) {
-      const route = useRoute()
-      selectedCategory.value = route.query.key
-    }
-    form.value.categoryId = selectedCategory.value
-    getGoodsList(form.value, current, size)
-    const dom: any = document.getElementById("app-scroller")
-    dom.scrollTo({
-      top: 400,
-      behavior: "smooth",
-    })
-  }
-
-  return {
-    goodsList,
-    getCategories,
-    categories,
-    selectedCategory,
-    page_size,
-    changePage,
-    currentPage,
-    total,
-    top_data,
-    form,
-    getGoodsList,
-    handleSelectedCategory,
-    handleSelectedFilters,
-    handleOrderBy,
-  }
-}

pages/collections/[name].vue

@@ -1,487 +0,0 @@
-<!-- @format -->
-
-<script lang="ts" setup>
-import { ArrowRight } from '@element-plus/icons-vue'
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Navigation, Pagination } from 'swiper/modules'
-import dayjs from 'dayjs'
-import { ConstKeys } from '~/enums/const-enums'
-import { PageSizeEnum } from '~/enums/sizeEnum'
-import {
-  getFeatureAlumDetailApi,
-  getFeatureBrandsListApi,
-  getFeatureDetailApi,
-  getFeatureGoodsListApi,
-} from '~/api/model/feature'
-import img02 from '~/assets/images/featured_img02.png'
-import img03 from '~/assets/images/featured_img03.png'
-import img04 from '~/assets/images/featured_img04.png'
-import img05 from '~/assets/images/featured_img05.png'
-
-import 'swiper/css'
-import 'swiper/css/navigation'
-// import "swiper/css/pagination"
-
-import { useUserStore } from '@/stores/modules/user'
-
-enum Type {
-  Detail = '0',
-  Album = '1',
-}
-
-const userStore = useUserStore()
-const { isLogin } = storeToRefs(userStore)
-const { openLoginModal } = useLoginModal()
-
-const modules = [Navigation, Pagination]
-const brandList = ref<any>([])
-const swiperVertical = ref<any>(null)
-
-const detail = ref()
-const list = ref<any>([])
-const currentPage = ref(0)
-const total = ref(0)
-const page_size = ref(20)
-const isEffective = ref(true)
-const staticList = ref([
-  {
-    icon: img02,
-    title: 'Source Manufacturers',
-    subTitle:
-      'Selected product suppliers with the capability to develop unique products.',
-  },
-  {
-    icon: img03,
-    title: 'Competitive Pricing',
-    subTitle:
-      'Get the best quality products at the most competitive wholesale prices.',
-  },
-  {
-    icon: img04,
-    title: 'Strict Quality Control',
-    subTitle:
-      'Strict quality inspection to ensure the products meet our high standards.',
-  },
-  {
-    icon: img05,
-    title: 'Dedicated Support',
-    subTitle:
-      'Smooth wholesale experience with dedicated customer manager service.',
-  },
-])
-
-const route = useRoute()
-const paintingId = route.query.paintingId
-const slug = route.params.name
-
-const { data, pending, error, refresh } = await useAsyncData(
-  'featured-detail',
-  () => $fetch(`${ConstKeys.DOMAINPRO}/client/topic/detail`, { params: { slug } }),
-)
-const seoData = data.value?.result
-
-useHead({
-  title: seoData?.title,
-  meta: [
-    {
-      name: 'description',
-      content: seoData?.headImageText,
-    },
-    {
-      property: 'og:title',
-      content: seoData?.title,
-    },
-    {
-      property: 'og:description',
-      content: seoData?.headImageText,
-    },
-    {
-      property: 'og:type',
-      content: 'website',
-    },
-    {
-      property: 'twitter:title',
-      content: seoData?.title,
-    },
-    {
-      property: 'twitter:description',
-      content: seoData?.headImageText,
-    },
-    {
-      property: 'twitter:card',
-      content: 'summary_large_image',
-    },
-  ],
-  link: [
-    {
-      rel: 'canonical',
-      href: `${ConstKeys.DOMAINPRO}/collections/${slug}`,
-    },
-  ],
-})
-const isType = computed(() => detail.value?.type === Type.Detail)
-async function getFeatureDetail() {
-  try {
-    const result = await getFeatureDetailApi({ slug })
-    detail.value = result
-  }
-  catch (error) {
-    console.log('error', error)
-  }
-}
-async function getFeatureAlumDetail() {
-  try {
-    const result = await getFeatureAlumDetailApi({ paintingId })
-    isEffective.value = true
-    detail.value = result
-  }
-  catch (error: any) {
-    if (error.code === 10010)
-      isEffective.value = false
-    console.log('error', error)
-  }
-}
-async function getFeatureProductList(
-  pageNo = PageSizeEnum.PAGE,
-  pageSize = page_size.value,
-) {
-  const res: any = await getFeatureGoodsListApi({
-    pageNo,
-    pageSize,
-    topicSlug: slug,
-  })
-  list.value = res.records
-  currentPage.value = res.current
-  total.value = res.total
-}
-function updatePage(currentPage: number, pageSize: number) {
-  getFeatureProductList(currentPage, pageSize)
-}
-async function getHomeBrandList() {
-  try {
-    const data: any = await getFeatureBrandsListApi({
-      pageNo: 1,
-      pageSize: page_size.value,
-      topicSlug: slug,
-    })
-    brandList.value = data.records
-  }
-  catch (error) {
-    console.log('error', error)
-  }
-}
-
-function onVerticalSwiper(swiper: any) {
-  swiperVertical.value = swiper
-}
-function onClickLeft() {
-  swiperVertical.value.slidePrev()
-}
-function onClickRight() {
-  swiperVertical.value.slideNext()
-}
-function getData() {
-  if (!paintingId) {
-    getHomeBrandList()
-    getFeatureProductList()
-    getFeatureDetail()
-  }
-  else {
-    getFeatureAlumDetail()
-  }
-}
-getData()
-async function openLogin() {
-  await openLoginModal()
-}
-</script>
-
-<template>
-  <div class="pos-relative">
-    <div v-if="isType" class="fixed-image">
-      <img
-        :src="detail?.headImageUrl"
-        class="w-full h-360px object-cover"
-        alt=""
-        srcset=""
-      >
-    </div>
-    <div class="scrollable-content">
-      <div
-        v-if="isType"
-        :class="isType ? 'h-360px' : ''"
-        class="content-header"
-      >
-        <h1 class="!text-36px !fw-700 custom-title-font">
-          {{ detail?.title }}
-        </h1>
-        <div class="text-18px">
-          {{ detail?.headImageText }}
-        </div>
-      </div>
-      <div :class="isType ? 'bg-#fff' : ''">
-        <div v-if="isEffective" class="w-1400px mx-auto pt-40px pb-60px">
-          <el-breadcrumb :separator-icon="ArrowRight">
-            <el-breadcrumb-item :to="{ path: '/' }">
-              Home
-            </el-breadcrumb-item>
-            <el-breadcrumb-item :to="{ path: '/collections' }">
-              Collections
-            </el-breadcrumb-item>
-            <el-breadcrumb-item> {{ detail?.title }}</el-breadcrumb-item>
-          </el-breadcrumb>
-        </div>
-        <div v-if="isEffective" class="w-1400px mx-auto mb-60px">
-          <h1 class="!text-26px !fw-700 text-#363C40 custom-title-font">
-            {{ detail?.title }}
-          </h1>
-          <div class="flex my-24px text-#7C7C7C text-18px">
-            <div class="mr-48px">
-              {{ dayjs(detail?.createTime).format('MMMM D, YYYY') }}
-            </div>
-            <div v-if="isType">
-              {{ detail?.merchandiseQuantity }} products
-            </div>
-          </div>
-          <div
-            class="text-18px lh-24px line-clamp-3 text-#666"
-            :title="detail?.headImageText"
-          >
-            {{ detail?.headImageText }}
-          </div>
-        </div>
-        <div>
-          <div v-if="isType">
-            <div
-              v-if="isLogin || !detail?.userEnable"
-              class="w-1400px mx-auto pb-160px"
-            >
-              <div
-                v-if="list.length"
-                class="grid grid-gap-x-65px grid-gap-y-80px grid-cols-4"
-              >
-                <div v-for="item in list" :key="item.id">
-                  <common-goods-item :item />
-                </div>
-              </div>
-              <common-empty v-else class="py-50px" title="">
-                <template #icon>
-                  <img
-                    src="~/assets/images/featured_empty.png"
-                    class="w-200px h-200px"
-                    alt=""
-                    srcset=""
-                  >
-                </template>
-              </common-empty>
-              <div v-if="list.length" 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="updatePage"
-                />
-              </div>
-            </div>
-            <div
-              v-else
-              class="w-1400px mx-auto pt-80px pb-160px flex justify-center"
-            >
-              <div class="cursor-pointer" @click="openLogin">
-                <svgo-lock class="!w-100px !h-100px text-#999 m-auto" />
-                <div class="text-#999 text-42px mt-20px">
-                  Login to view
-                </div>
-              </div>
-            </div>
-          </div>
-          <div v-else class="text-#000 w-1400px mx-auto pb-160px">
-            <div
-              v-if="isEffective"
-              class="text-#333333 content-detail custom-html"
-              v-html="detail?.content"
-            />
-            <div v-else class="pt-160px">
-              Sorry, the shared content has expired.
-            </div>
-          </div>
-          <div
-            v-if="isType"
-            class="flex justify-center items-center py-82px bg-#FAF5F1"
-          >
-            <div class="w-600px">
-              <h2 class="fw-700 text-32px text-#333 !mb-60px">
-                Quality Wholesale, Inspiring Global Retail
-              </h2>
-              <div
-                v-for="(item, index) in staticList"
-                :key="index"
-                class="flex items-center mb-40px last:mb-0"
-              >
-                <img :src="item.icon" alt="" srcset="" class="w-40px h-40px">
-                <div class="ml-30px w-430px">
-                  <h3 class="!fw-500 text-26px text-#333 lh-30px">
-                    {{ item.title }}
-                  </h3>
-                  <div class="mt-10px text-18px text-#999 lh-28px">
-                    {{ item.subTitle }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <img
-              src="~/assets/images/featured_img01.png"
-              class="w-566px h-480px object-cover ml-10px"
-              alt=""
-              srcset=""
-            >
-          </div>
-          <div v-if="isType" class="py-160px w-1400px mx-auto">
-            <h2 class="!mb-40px fw-700 text-40px text-#363C40">
-              Collection Brands
-            </h2>
-            <div v-if="brandList.length">
-              <div class="w-1300px mx-auto pos-relative">
-                <div
-                  class="pos-absolute cursor-pointer left--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-                  @click="onClickLeft()"
-                >
-                  <img
-                    src="~/assets/images/arrow_left.png"
-                    alt=""
-                    class="w-26px h-26px"
-                    srcset=""
-                  >
-                </div>
-                <div
-                  class="pos-absolute cursor-pointer right--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
-                  @click="onClickRight()"
-                >
-                  <img
-                    src="~/assets/images/arrow_right.png"
-                    alt=""
-                    class="w-26px h-26px"
-                    srcset=""
-                  >
-                </div>
-                <Swiper
-                  :slides-per-view="4"
-                  :space-between="55"
-                  :modules="modules"
-                  :loop="true"
-                  :navigation="false"
-                  :pagination="true"
-                  class="pos-relative"
-                  @swiper="onVerticalSwiper"
-                >
-                  <SwiperSlide v-for="(item, index) in brandList" :key="index">
-                    <common-brand-item :item="item" />
-                  </SwiperSlide>
-                </Swiper>
-              </div>
-            </div>
-            <common-empty v-else class="pt-50px" title="">
-              <template #icon>
-                <img
-                  src="~/assets/images/featured_empty.png"
-                  class="w-200px h-200px"
-                  alt=""
-                  srcset=""
-                >
-              </template>
-            </common-empty>
-          </div>
-        </div>
-      </div>
-      <AppFooter class="bg-#fff" />
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.fixed-image {
-  position: fixed;
-  top: 151px;
-  left: 0;
-  width: 100%;
-  height: 360px;
-  z-index: 1;
-  overflow: hidden;
-}
-
-.scrollable-content {
-  position: relative;
-  z-index: 2;
-  width: 100%;
-  color: white;
-
-  .content-header {
-    display: flex;
-    // height: 360px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    background: rgba(0, 0, 0, 0.4);
-    /* 半透明背景使文字在图片上更可读 */
-  }
-  ::v-deep(.content-detail) {
-    font-family: sans-serif;
-    h2 {
-      font-size: 1.5em;
-      font-family: 'CustomTitleFont';
-      margin-top: 1em !important;
-      margin-bottom: 1em !important;
-      font-weight: bold;
-    }
-    h3 {
-      display: block;
-      font-size: 1.17em;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-      margin-bottom: 1em !important;
-      font-weight: bold;
-      unicode-bidi: isolate;
-      font-family: 'CustomTitleFont';
-    }
-    p {
-      display: block;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-      unicode-bidi: isolate;
-    }
-    ul {
-      display: block;
-      list-style-type: disc;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-      padding-inline-start: 40px;
-      unicode-bidi: isolate;
-      li {
-        display: list-item;
-        text-align: -webkit-match-parent;
-        unicode-bidi: isolate;
-      }
-    }
-    ol {
-      list-style-type: decimal;
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0px;
-      margin-inline-end: 0px;
-      padding-inline-start: 40px;
-      unicode-bidi: isolate;
-    }
-  }
-}
-</style>

pages/collections/index.vue

@@ -1,183 +0,0 @@
-<script lang='ts' setup>
-import { ArrowRight } from '@element-plus/icons-vue'
-import { getFeatureListApi } from '~/api/model/feature'
-import { PageSizeEnum } from '~/enums/sizeEnum'
-import { useUserStore } from '@/stores/modules/user'
-import { ConstKeys } from '~/enums/const-enums'
-
-useHead({
-  title:
-    'Product Collections | Discover Top Picks and Trending Items at EJET Selection',
-  meta: [
-    {
-      name: 'description',
-      content: `Explore unique and high-quality wholesale products designed to elevate your retail success! Discover top brands and trending products at EJET Selection's Product Collections. `,
-    },
-    {
-      property: 'og:title',
-      content: 'Product Collections | Discover Top Picks and Trending Items at EJET Selection',
-    },
-    {
-      property: 'og:description',
-      content:
-      `Explore unique and high-quality wholesale products designed to elevate your retail success! Discover top brands and trending products at EJET Selection's Product Collections. `,
-    },
-    {
-      property: 'og:type',
-      content: 'website',
-    },
-    {
-      property: 'twitter:title',
-      content: 'Product Collections | Discover Top Picks and Trending Items at EJET Selection',
-    },
-    {
-      property: 'twitter:description',
-      content:
-      `Explore unique and high-quality wholesale products designed to elevate your retail success! Discover top brands and trending products at EJET Selection's Product Collections. `,
-    },
-    {
-      property: 'twitter:card',
-      content: 'summary_large_image',
-    },
-  ],
-  link: [
-    {
-      rel: 'canonical',
-      href: `${ConstKeys.DOMAINPRO}/collections`,
-    },
-  ],
-})
-
-const userStore = useUserStore()
-const { isLogin } = storeToRefs(userStore)
-const { openLoginModal } = useLoginModal()
-
-const list = ref<any>([])
-const moreList = ref<any>([])
-const total = ref(0)
-const currentPage = ref(0)
-const page_size = ref(10)
-async function getFeatureList(
-  pageNo = PageSizeEnum.PAGE,
-  pageSize = page_size.value,
-) {
-  const params = {
-    pageNo,
-    pageSize,
-  }
-  const res: any = await getFeatureListApi(params)
-  list.value = res.records
-  currentPage.value = res.current
-  total.value = res.total
-}
-
-async function getMoreList(pageNo = PageSizeEnum.PAGE, pageSize = 3) {
-  const params = {
-    pageNo,
-    pageSize,
-  }
-  const res: any = await getFeatureListApi(params)
-  moreList.value = res.records
-}
-
-getFeatureList()
-getMoreList()
-function updatePage(currentPage: number, pageSize: number) {
-  const dom: any = document.getElementById('app-scroller')
-  dom.scrollTo({
-    top: 400,
-    behavior: 'smooth',
-  })
-  getFeatureList(currentPage, pageSize)
-}
-</script>
-
-<template>
-  <div>
-    <div>
-      <div class="relative">
-        <img
-          src="~/assets/images/featured_banner.png"
-          class="w-full h-[400px] object-cover"
-          alt=""
-          srcset=""
-        >
-        <div
-          class="pos-absolute text-center top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]"
-        >
-          <h1 class="!mb-20px text-#fff text-48px fw-700 custom-title-font">
-            Product Collections
-          </h1>
-          <div class="mb-48px text-#f4f4f4 text-24px">
-            Discover top picks and trending items for your retail success
-          </div>
-          <div v-if="!isLogin">
-            <el-button
-              type="primary"
-              plain
-              class="w-176px !bg-#C58C46 !text-#fff !h-48px !text-18px !fw-500 !b-rd-150px"
-              @click="openLoginModal"
-            >
-              Sign on EJET
-            </el-button>
-          </div>
-        </div>
-      </div>
-      <div class="w-1400px mx-auto">
-        <div class="pt-40px pb-60px">
-          <el-breadcrumb :separator-icon="ArrowRight">
-            <el-breadcrumb-item :to="{ path: '/' }">
-              Home
-            </el-breadcrumb-item>
-            <el-breadcrumb-item> Collections</el-breadcrumb-item>
-          </el-breadcrumb>
-        </div>
-        <div class="mb-100px">
-          <div
-            v-if="list.length"
-            class="grid grid-cols-2 gap-x-60px gap-y-100px"
-          >
-            <div v-for="item in list" :key="item.id">
-              <common-featured-item3 v-if="item.type === '1'" :item />
-              <common-featured-item v-else :item />
-            </div>
-          </div>
-          <div v-if="list.length" class="flex justify-center mt-60px">
-            <el-pagination
-              v-model:current-page="currentPage"
-              :page-size="page_size"
-              :pager-count="10"
-              layout="prev, pager, next"
-              :total="total"
-              @change="updatePage"
-            />
-          </div>
-          <common-empty v-else class="pt-50px" title="">
-            <template #icon>
-              <img
-                src="~/assets/images/featured_empty.png"
-                class="w-200px h-200px"
-                alt=""
-                srcset=""
-              >
-            </template>
-          </common-empty>
-        </div>
-      </div>
-    </div>
-    <div class="w-1400px mx-auto mb-160px">
-      <h1 class="fw-500 text-30px text-center text-#333 !mb-50px">
-        Explore More Product Collections
-      </h1>
-      <div class="grid grid-cols-3 gap-x-106px px-66px">
-        <div v-for="(item, index) in moreList" :key="index">
-          <common-featured-item2 :item />
-        </div>
-      </div>
-    </div>
-    <AppFooter />
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

pages/contact/index.vue

@@ -1,238 +0,0 @@
-<script lang='ts' setup>
-import type { FormInstance, FormRules } from 'element-plus'
-import { getContactUsApi, getDictListApi } from '~/api/model/common'
-import { ConstKeys } from '~/enums/const-enums'
-
-useHead({
-  title: 'Contact Us | EJET Selection',
-  meta: [
-    {
-      name: 'description',
-      content:
-         `Reach out to EJET Selection for inquiries, support, or partnership opportunities. We're here to assist you with all your wholesale and retail needs.`,
-    },
-    {
-      property: 'og:title',
-      content: 'Contact Us | EJET Selection',
-    },
-    {
-      property: 'og:description',
-      content:
-      `Reach out to EJET Selection for inquiries, support, or partnership opportunities. We're here to assist you with all your wholesale and retail needs.`,
-    },
-    {
-      property: 'og:type',
-      content: 'website',
-    },
-    {
-      property: 'twitter:title',
-      content: 'Contact Us | EJET Selection',
-    },
-    {
-      property: 'twitter:description',
-      content:
-      `Reach out to EJET Selection for inquiries, support, or partnership opportunities. We're here to assist you with all your wholesale and retail needs.`,
-    },
-    {
-      property: 'twitter:card',
-      content: 'summary_large_image',
-    },
-  ],
-  link: [
-    {
-      rel: 'canonical',
-      href: `${ConstKeys.DOMAINPRO}/contact`,
-    },
-  ],
-})
-
-const ruleFormRef = ref<FormInstance>()
-const mobileAreaCodeList = ref()
-const params = ref<any>({
-  name: '',
-  mail: '',
-  mobileAreaCode: '+86',
-  mobile: '',
-  message: '',
-})
-async function getMobileAreaCodeList() {
-  const list = await getDictListApi('A064')
-  mobileAreaCodeList.value = list
-}
-async function submitForm() {
-  try {
-    await getContactUsApi(params.value)
-    ElMessage.success('Submit Success')
-  }
-  catch (error) {
-    console.log('error', error)
-  }
-}
-getMobileAreaCodeList()
-</script>
-
-<template>
-  <div class="w-1400px mx-auto">
-    <div class="flex items-center pb-160px px-150px pt-140px">
-      <div class="w-50%">
-        <h1 class="text-48px fw-600 text-#333 custom-title-font">
-          Get In Touch
-        </h1>
-        <div class="my-30px h-1px w-100px bg-#999" />
-        <h2 class="text-24px text-#333 !mb-60px">
-          CUSTOMER SUPPORT
-        </h2>
-        <div class="flex items-center mb-40px">
-          <img
-            src="~/assets/images/contact_addr.png"
-            alt=""
-            class="w-36px h-36px mr-20px"
-            srcset=""
-          >
-          <div class="text-24px text-#666 lh-30px">
-            7th Floor, Tianbo International Building,<br> 55 Jiangdong Middle Road,<br> Yiwu, Zhejiang, China
-          </div>
-        </div>
-        <div class="flex items-center mb-40px">
-          <img
-            src="~/assets/images/contact_email.png"
-            alt=""
-            class="w-36px h-36px mr-20px"
-            srcset=""
-          >
-          <div class="text-24px text-#666 lh-30px">
-            selection@ejet.comejet.com
-          </div>
-        </div>
-        <div class="flex items-center mb-40px">
-          <img
-            src="~/assets/images/contact_phone.png"
-            alt=""
-            class="w-36px h-36px mr-20px"
-            srcset=""
-          >
-          <div class="text-24px text-#666 lh-30px">
-            +86 150 8821 0909
-          </div>
-        </div>
-      </div>
-      <div class="w-50%">
-        <el-form
-          ref="ruleFormRef"
-          :model="params"
-          label-width="auto"
-          size="default"
-          status-icon
-        >
-          <el-form-item label="Name" class="custom-form-item">
-            <el-input
-              v-model="params.name"
-              placeholder="Enter your name"
-              class="h-50px"
-            />
-          </el-form-item>
-          <el-form-item label="Email Address" class="custom-form-item">
-            <el-input
-              v-model="params.mail"
-              placeholder="Enter your email"
-              class="h-50px"
-            />
-          </el-form-item>
-          <div class="flex">
-            <el-form-item
-              label="Mobile Number"
-              class="custom-form-item"
-              prop="mobile"
-            >
-              <el-input v-model="params.mobile" placeholder="Mobile Number" class="h-50px">
-                <template #prepend>
-                  <el-select v-model="params.mobileAreaCode" class="!h-50px" placeholder="Select" style="width: 120px">
-                    <el-option
-                      v-for="(item, index) in mobileAreaCodeList"
-                      :key="index"
-                      :value="item.value"
-                      :label="`${item.value} ${item.label}`"
-                    >
-                      {{ item.value }} {{ item.label }}
-                    </el-option>
-                  </el-select>
-                </template>
-              </el-input>
-            </el-form-item>
-          </div>
-          <el-form-item label="Message" class="custom-form-item !mb-60px">
-            <el-input
-              v-model="params.message"
-              type="textarea"
-              placeholder="Enter your message"
-              class="h-120px textarea-custom"
-            />
-          </el-form-item>
-          <el-form-item>
-            <el-button
-              class="!bg-#C58C64 !text-#fff !w-full !h-50px !text-16px !fw-500 !b-rd-6px"
-              @click="submitForm()"
-            >
-              Send Message
-            </el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
-    <AppFooter />
-  </div>
-</template>
-
-<style lang="less" scoped>
-:deep(.custom-form-item) {
-  width: 100%;
-  margin-bottom: 22px;
-  display: block !important;
-  .el-select__wrapper {
-    height: 50px !important;
-  }
-  .el-form-item__label-wrap {
-    margin-left: unset !important;
-    .el-form-item__label {
-      margin-bottom: 5px;
-      font-size: 16px !important;
-      color: #5b463e !important;
-    }
-  }
-
-  .el-checkbox {
-    .el-checkbox__input {
-      &.is-checked {
-        .el-checkbox__inner {
-          color: #cc9879 !important;
-          background-color: #cc9879 !important;
-          border: 1px solid #cc9879 !important;
-        }
-      }
-
-      .el-checkbox__inner {
-        &:hover {
-          border-color: #cc9879 !important;
-        }
-      }
-    }
-
-    &.is-checked {
-      .el-checkbox__label {
-        color: #cc9879 !important;
-      }
-    }
-  }
-  .textarea-custom {
-    .el-textarea__inner {
-      height: 100%;
-    }
-  }
-}
-::v-deep(.form-footer) {
-  .el-form-item__content {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-</style>

pages/forgot/index.vue

@@ -1,37 +0,0 @@
-<script lang='ts' setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useForgot } from './useForgot'
-
-const { stage } = useForgot()
-</script>
-
-<template>
-  <div>
-    <div class="w-1400px mx-auto">
-      <div class="flex    py-150px">
-        <div class="w-50% h-full flex items-center mr-120px">
-          <img
-            src="~/assets/images/register_forgot.png"
-            class="w-620px h-730px"
-            srcset=""
-          >
-          <!-- <img
-        v-else
-        src="@/assets/images/icon-email-verity.png"
-        class="w-550px h-480px"
-        srcset=""
-      > -->
-        </div>
-        <div class="w-50% h-full flex items-center">
-          <business-forgot-stage-one v-if="stage === 1" />
-          <business-forgot-stage-two v-if="stage === 2" />
-          <business-forgot-stage-three v-if="stage === 3" />
-        </div>
-      </div>
-    </div>
-    <common-footer-guide />
-  </div>
-</template>
-
-<style lang='less' scoped>
-</style>

pages/forgot/useForgot.ts

@@ -1,15 +0,0 @@
-const stage = ref(1)
-
-export function useForgot() {
-  const setStage = () => {
-    stage.value++
-  }
-  const resetStage = () => {
-    stage.value = 1
-  }
-  return {
-    stage,
-    setStage,
-    resetStage,
-  }
-}

pages/index.vue

@@ -50,12 +50,8 @@ useHead({
     <business-home-banner />
     <div class="w-1400px mx-auto">
       <business-home-welfare />
-      <business-home-brands />
-      <!-- <business-home-products /> -->
-      <business-home-week />
       <business-home-section01 />
       <business-home-section02 />
-      <business-home-blogs />
     </div>
     <AppFooter />
   </div>