🐛 fix: 修复面包屑路径栏显示错误, 并移除点击跳转

.prettierrc.js

@@ -8,7 +8,7 @@ module.exports = {
   // 使用制表符而不是空格缩进行
   useTabs: false,
   // 在语句末尾打印分号
-  semi: false,
+  semi: true,
   // 使用单引号而不是双引号
   singleQuote: true,
   // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"

src/layout/navBars/breadcrumb/breadcrumb.vue

@@ -1,30 +1,37 @@
 <template>
-	<div v-if="isShowBreadcrumb" class="layout-navbars-breadcrumb">
-		<SvgIcon
-			class="layout-navbars-breadcrumb-icon"
-			:name="themeConfig.isCollapse ? 'ele-Expand' : 'ele-Fold'"
-			:size="16"
-			@click="onThemeConfigChange"
-		/>
-		<el-breadcrumb class="layout-navbars-breadcrumb-hide">
-			<transition-group name="breadcrumb">
-				<el-breadcrumb-item v-for="(v, k) in state.breadcrumbList" :key="!v.meta.tagsViewName ? v.meta.title : v.meta.tagsViewName">
-					<span v-if="k === state.breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
-						<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
-						<div v-if="!v.meta.tagsViewName">{{ $t(v.meta.title) }}</div>
-						<div v-else>{{ v.meta.tagsViewName }}</div>
-					</span>
-					<a v-else @click.prevent="onBreadcrumbClick(v)">
-						<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ $t(v.meta.title) }}
-					</a>
-				</el-breadcrumb-item>
-			</transition-group>
-		</el-breadcrumb>
-	</div>
+  <div v-if="isShowBreadcrumb" class="layout-navbars-breadcrumb">
+    <SvgIcon
+      class="layout-navbars-breadcrumb-icon"
+      :name="themeConfig.isCollapse ? 'ele-Expand' : 'ele-Fold'"
+      :size="16"
+      @click="onThemeConfigChange" />
+    <el-breadcrumb class="layout-navbars-breadcrumb-hide">
+      <transition-group name="breadcrumb">
+        <el-breadcrumb-item
+          v-for="(v, k) in state.breadcrumbList"
+          :key="!v.meta.tagsViewName ? v.meta.title : v.meta.tagsViewName">
+          <span v-if="k === state.breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
+            <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
+            <!--<div v-if="!v.meta.tagsViewName">{{ $t(v.meta.title) }}</div>-->
+            <div>{{ v.meta.tagsViewName ? v.meta.tagsViewName : v.meta.title }}</div>
+          </span>
+          <!--<a v-else @click.prevent="onBreadcrumbClick(v)">-->
+          <!--  <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />-->
+          <!--  {{ $t(v.meta.title) }}-->
+          <!--</a>-->
+          <!-- 移除了上面的点击事件 -->
+          <a v-else>
+            <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
+            {{ $t(v.meta.title) }}
+          </a>
+        </el-breadcrumb-item>
+      </transition-group>
+    </el-breadcrumb>
+  </div>
 </template>
 
 <script setup lang="ts" name="layoutBreadcrumb">
-import { reactive, computed, onMounted } from 'vue';
+import { reactive, computed, onMounted, watch } from 'vue';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 import { Local } from '/@/utils/storage';
 import other from '/@/utils/other';
@@ -40,107 +47,127 @@ const { routesList } = storeToRefs(stores);
 const route = useRoute();
 const router = useRouter();
 const state = reactive<BreadcrumbState>({
-	breadcrumbList: [],
-	routeSplit: [],
-	routeSplitFirst: '',
-	routeSplitIndex: 1,
+  breadcrumbList: [],
+  routeSplit: [],
+  routeSplitFirst: '',
+  routeSplitIndex: 1,
 });
 
 // 动态设置经典、横向布局不显示
 const isShowBreadcrumb = computed(() => {
-	initRouteSplit(route.path);
-	const { layout, isBreadcrumb } = themeConfig.value;
-	if (layout === 'classic' || layout === 'transverse') return false;
-	else return isBreadcrumb ? true : false;
+  initRouteSplit(route.path);
+  const { layout, isBreadcrumb } = themeConfig.value;
+  if (layout === 'classic' || layout === 'transverse') return false;
+  else return isBreadcrumb ? true : false;
 });
 // 面包屑点击时
 const onBreadcrumbClick = (v: RouteItem) => {
-	const { redirect, path } = v;
-	if (redirect) router.push(redirect);
-	else router.push(path);
+  const { redirect, path } = v;
+  if (redirect) router.push(redirect);
+  else router.push(path);
 };
 // 展开/收起左侧菜单点击
 const onThemeConfigChange = () => {
-	themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
-	setLocalThemeConfig();
+  themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
+  setLocalThemeConfig();
 };
 // 存储布局配置
 const setLocalThemeConfig = () => {
-	Local.remove('themeConfig');
-	Local.set('themeConfig', themeConfig.value);
+  Local.remove('themeConfig');
+  Local.set('themeConfig', themeConfig.value);
 };
 // 处理面包屑数据
 const getBreadcrumbList = (arr: RouteItems) => {
-	arr.forEach((item: RouteItem) => {
-		state.routeSplit.forEach((v: string, k: number, arrs: string[]) => {
-			if (state.routeSplitFirst === item.path) {
-				state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
-				state.breadcrumbList.push(item);
-				state.routeSplitIndex++;
-				if (item.children) getBreadcrumbList(item.children);
-			}
-		});
-	});
+  arr.forEach((item: RouteItem) => {
+    state.routeSplit.forEach((v: string, k: number, arrs: string[]) => {
+      if (state.routeSplitFirst === item.path) {
+        state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
+        state.breadcrumbList.push(item);
+        state.routeSplitIndex++;
+        if (item.children) getBreadcrumbList(item.children);
+      }
+    });
+  });
 };
 // 当前路由字符串切割成数组，并删除第一项空内容
 const initRouteSplit = (path: string) => {
-	if (!themeConfig.value.isBreadcrumb) return false;
-	state.breadcrumbList = [routesList.value[0]];
-	state.routeSplit = path.split('/');
-	state.routeSplit.shift();
-	state.routeSplitFirst = `/${state.routeSplit[0]}`;
-	state.routeSplitIndex = 1;
-	getBreadcrumbList(routesList.value);
-	if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
-	if (state.breadcrumbList.length > 0)
-		state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(<RouteToFrom>route);
+  // console.log('path', path);
+  // console.log('state', state);
+  if (!themeConfig.value.isBreadcrumb) return false;
+  state.breadcrumbList = [routesList.value[0]];
+  state.routeSplit = path.split('/');
+  state.routeSplit.shift();
+  state.routeSplitFirst = `/${state.routeSplit[0]}`;
+  state.routeSplitIndex = 1;
+  getBreadcrumbList(routesList.value);
+  if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
+  if (state.breadcrumbList.length > 0)
+    state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(<RouteToFrom>route);
 };
+
 // 页面加载时
 onMounted(() => {
-	initRouteSplit(route.path);
+  initRouteSplit(route.path);
 });
 // 路由更新时
-onBeforeRouteUpdate((to) => {
-	initRouteSplit(to.path);
-});
+// onBeforeRouteUpdate((to) => {
+//   setTimeout(() => {
+//     initRouteSplit(to.path);
+//   }, 100);
+//   console.log('route', route.path);
+// });
+watch(
+  () => route.path,
+  () => {
+    initRouteSplit(route.path);
+  },
+  { deep: true }
+);
 </script>
 
 <style scoped lang="scss">
 .layout-navbars-breadcrumb {
-	flex: 1;
-	height: inherit;
-	display: flex;
-	align-items: center;
-	.layout-navbars-breadcrumb-icon {
-		cursor: pointer;
-		font-size: 18px;
-		color: var(--next-bg-topBarColor);
-		height: 100%;
-		width: 40px;
-		opacity: 0.8;
-		&:hover {
-			opacity: 1;
-		}
-	}
-	.layout-navbars-breadcrumb-span {
-		display: flex;
-		opacity: 0.7;
-		color: var(--next-bg-topBarColor);
-	}
-	.layout-navbars-breadcrumb-iconfont {
-		font-size: 14px;
-		margin-right: 5px;
-	}
-	:deep(.el-breadcrumb__separator) {
-		opacity: 0.7;
-		color: var(--next-bg-topBarColor);
-	}
-	:deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
-		font-weight: unset !important;
-		color: var(--next-bg-topBarColor);
-		&:hover {
-			color: var(--el-color-primary) !important;
-		}
-	}
+  flex: 1;
+  height: inherit;
+  display: flex;
+  align-items: center;
+
+  .layout-navbars-breadcrumb-icon {
+    cursor: pointer;
+    font-size: 18px;
+    color: var(--next-bg-topBarColor);
+    height: 100%;
+    width: 40px;
+    opacity: 0.8;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .layout-navbars-breadcrumb-span {
+    display: flex;
+    opacity: 0.7;
+    color: var(--next-bg-topBarColor);
+  }
+
+  .layout-navbars-breadcrumb-iconfont {
+    font-size: 14px;
+    margin-right: 5px;
+  }
+
+  :deep(.el-breadcrumb__separator) {
+    opacity: 0.7;
+    color: var(--next-bg-topBarColor);
+  }
+
+  :deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
+    font-weight: unset !important;
+    color: var(--next-bg-topBarColor);
+
+    &:hover {
+      color: var(--el-color-primary) !important;
+    }
+  }
 }
 </style>

src/views/adManage/sb/campaigns/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue'
+import { inject, onMounted, ref, watch } from 'vue'
 import { FsPage, useFs } from '@fast-crud/fast-crud'
 import { createCrudOptions } from './crud'
 import { useShopInfo } from '/@/stores/shopInfo'
@@ -17,9 +17,12 @@ const shopInfo = useShopInfo()
 const publicData = usePublicData()
 const { dateRange } = storeToRefs(publicData)
 const { profile } = storeToRefs(shopInfo)
+const filterItem = inject('filterItem')
+
 const queryParams = ref({
   profileId: profile.value.profile_id,
   dateRange,
+  filterItem
 })
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 const router = useRouter()

src/views/adManage/sb/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import { Ref, onBeforeMount, provide, ref } from 'vue'
+import { Ref, onBeforeMount, provide, ref, watch } from 'vue'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
 import { usePublicData } from '/@/stores/publicData'
 import { GetAllPortfolios } from '/@/views/adManage/portfolios/api'
@@ -16,14 +16,16 @@ const portfolios: Ref<Portfolio[]> = ref([])
 const { dateRange } = storeToRefs(publicData)
 provide('dateRange', dateRange)
 
-const tabActiveName = ref('Campaigns')
-const tabsComponents: any = {
-  Campaigns,
-  Keywords,
-  Targets,
-  SearchTerm,
-  Placement,
+const searchItem = ref('')
+const filterItem = ref('')
+provide('filterItem', filterItem)
+
+// 防止搜索框内容变化时，搜索框内容不更新
+function handleSearchChange() {
+  filterItem.value = searchItem.value
 }
+
+const tabActiveName = ref('Campaigns')
 const tabs = [
   { label: '广告活动', name: 'Campaigns' },
   { label: '关键词', name: 'Keywords' },
@@ -31,14 +33,12 @@ const tabs = [
   { label: '搜索词', name: 'SearchTerm' },
   { label: '广告位', name: 'Placement' },
 ]
-
-const searchItem = ref('')
-const filterItem = ref('')
-provide('searchItem', searchItem)
-
-// 防止搜索框内容变化时，搜索框内容不更新
-function handleSearchChange() {
-  searchItem.value = filterItem.value
+const tabsComponents: any = {
+  Campaigns,
+  Keywords,
+  Targets,
+  SearchTerm,
+  Placement,
 }
 
 onBeforeMount(async () => {
@@ -50,7 +50,7 @@ onBeforeMount(async () => {
 <template>
   <div class="asj-container">
     <div class="public-search">
-      <el-input v-model="filterItem" @change="handleSearchChange" style="width: 500px" placeholder="请输入搜索内容"></el-input>
+      <el-input v-model="searchItem" @change="handleSearchChange" style="width: 500px" placeholder="请输入搜索内容"></el-input>
       <DateRangePicker v-model="dateRange"></DateRangePicker>
       <el-select
         v-model="selectedPortfolios"

src/views/adManage/sp/campaigns/index.vue

@@ -1,60 +1,60 @@
 <script lang="ts" setup>
-import { inject, onMounted, ref, watch } from 'vue'
-import { FsPage, useFs } from '@fast-crud/fast-crud'
-import { createCrudOptions } from './crud'
-import { useShopInfo } from '/@/stores/shopInfo'
-import { usePublicData } from '/@/stores/publicData'
-import { storeToRefs } from 'pinia'
-import { useRouter } from 'vue-router'
-import AdStructChart from './chartComponents/adStruct.vue'
-import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
-import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
-import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
-import DataCompare from '/@/components/dataCompare/index.vue'
-import emitter from '../../../../utils/emitter'
+import { inject, onMounted, ref, watch } from 'vue';
+import { FsPage, useFs } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
+import { useShopInfo } from '/@/stores/shopInfo';
+import { usePublicData } from '/@/stores/publicData';
+import { storeToRefs } from 'pinia';
+import { useRouter } from 'vue-router';
+import AdStructChart from './chartComponents/adStruct.vue';
+import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue';
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api';
+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js';
+import DataCompare from '/@/components/dataCompare/index.vue';
+import emitter from '/@/utils/emitter';
 
 // emitter.on('PopoverFilter-allSkus', (data: any) => {
 //   searchItem.value = data.allSkus.value
 //   searchType.value = data.searchType.value
 // })
 
-const searchItem = inject('topSearchItem')
-const searchType = inject('searchType')
-const filterItem = inject('searchItem')
+const searchItem = inject('topSearchItem');
+const searchType = inject('searchType');
+const filterItem = inject('searchItem');
 
-const tabActiveName = ref('dataTendency')
-const shopInfo = useShopInfo()
-const publicData = usePublicData()
-const { dateRange } = storeToRefs(publicData)
-const { profile } = storeToRefs(shopInfo)
+const tabActiveName = ref('dataTendency');
+const shopInfo = useShopInfo();
+const publicData = usePublicData();
+const { dateRange } = storeToRefs(publicData);
+const { profile } = storeToRefs(shopInfo);
 const queryParams = ref({
   profileId: profile.value.profile_id,
   dateRange,
   searchItem,
   searchType,
   filterItem,
-})
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
-const router = useRouter()
-const showCompare = ref(false)
+});
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams });
+const router = useRouter();
+const showCompare = ref(false);
 const jumpGroup = (row: any) => {
   router.push({
     name: 'SpCampaignDetail',
     query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
-  })
-}
+  });
+};
 
 onMounted(async () => {
-  crudExpose.doRefresh()
-})
+  crudExpose.doRefresh();
+});
 
 watch(
   queryParams,
   async () => {
-    crudExpose.doRefresh()
+    crudExpose.doRefresh();
   },
   { deep: true }
-)
+);
 </script>
 
 <template>
@@ -92,12 +92,12 @@ watch(
       <template #cell_MissedImpressions="scope">
         {{ scope.row.MissedImpressionsLower ?? '0' }} ~ {{ scope.row.MissedImpressionsUpper ?? '0' }}
       </template>
-      <template #cell_MissedClicks="scope"
-        >{{ scope.row.MissedClicksLower ?? '0' }} ~ {{ scope.row.MissedClicksUpper ?? '0' }}</template
-      >
-      <template #cell_MissedSales="scope"
-        >{{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }}</template
-      >
+      <template #cell_MissedClicks="scope">
+        {{ scope.row.MissedClicksLower ?? '0' }} ~ {{ scope.row.MissedClicksUpper ?? '0' }}
+      </template>
+      <template #cell_MissedSales="scope">
+        {{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }}
+      </template>
 
       <template v-for="field of Object.keys(BaseColumn)" #[`cell_${field}`]="scope">
         <DataCompare

src/views/adManage/sp/index.vue

@@ -1,51 +1,51 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { onBeforeMount, provide, Ref, ref } from 'vue'
-import TopFilter from './components/TopFilter.vue'
-import AdvertisedProducts from './advertisedProducts/index.vue'
-import Campaigns from './campaigns/index.vue'
-import Keywords from './keywords/index.vue'
-import Placement from './placement/index.vue'
-import PurchasedOtherProducts from './purchasedOtherProducts/index.vue'
-import SearchTerm from './searchTerm/index.vue'
-import Targets from './targets/index.vue'
-import DateRangePicker from '/@/components/DateRangePicker/index.vue'
-import { usePublicData } from '/@/stores/publicData'
-import { useShopInfo } from '/@/stores/shopInfo'
-import { GetAllPortfolios } from '/@/views/adManage/portfolios/api'
-import emitter from '/@/utils/emitter'
+import { storeToRefs } from 'pinia';
+import { onBeforeMount, provide, Ref, ref } from 'vue';
+import TopFilter from './components/TopFilter.vue';
+import AdvertisedProducts from './advertisedProducts/index.vue';
+import Campaigns from './campaigns/index.vue';
+import Keywords from './keywords/index.vue';
+import Placement from './placement/index.vue';
+import PurchasedOtherProducts from './purchasedOtherProducts/index.vue';
+import SearchTerm from './searchTerm/index.vue';
+import Targets from './targets/index.vue';
+import DateRangePicker from '/@/components/DateRangePicker/index.vue';
+import { usePublicData } from '/@/stores/publicData';
+import { useShopInfo } from '/@/stores/shopInfo';
+import { GetAllPortfolios } from '/@/views/adManage/portfolios/api';
+import emitter from '/@/utils/emitter';
 
 // const shopInfo = useShopInfo()
-const publicData = usePublicData()
-const selectedPortfolios: Ref<string[]> = ref([])
-const portfolios: Ref<Portfolio[]> = ref([])
-const { dateRange } = storeToRefs(publicData)
-provide('dateRange', dateRange)
+const publicData = usePublicData();
+const selectedPortfolios: Ref<string[]> = ref([]);
+const portfolios: Ref<Portfolio[]> = ref([]);
+const { dateRange } = storeToRefs(publicData);
+provide('dateRange', dateRange);
 
-const shopInfo = useShopInfo()
-const { profile } = storeToRefs(shopInfo)
-provide('profile', profile)
+const shopInfo = useShopInfo();
+const { profile } = storeToRefs(shopInfo);
+provide('profile', profile);
 
-const searchItem = ref('')
-const filterItem = ref('')
-provide('searchItem', searchItem)
+const searchItem = ref('');
+const filterItem = ref('');
+provide('searchItem', searchItem);
 
 // 防止搜索框内容变化时，搜索框内容不更新
 function handleSearchChange() {
-  searchItem.value = filterItem.value
+  searchItem.value = filterItem.value;
 }
 
 // 提供给PopoverFilter组件的搜索内容
 emitter.on('PopoverFilter-allSkus', (data: any) => {
-  topSearchItem.value = data.allSkus.value
-  searchType.value = data.searchType.value
-})
-const topSearchItem = ref([])
-const searchType = ref('')
-provide('topSearchItem', topSearchItem)
-provide('searchType', searchType)
+  topSearchItem.value = data.allSkus.value;
+  searchType.value = data.searchType.value;
+});
+const topSearchItem = ref([]);
+const searchType = ref('');
+provide('topSearchItem', topSearchItem);
+provide('searchType', searchType);
 
-const tabActiveName = ref('Campaigns')
+const tabActiveName = ref('Campaigns');
 const tabs = [
   { label: '广告活动', name: 'Campaigns' },
   { label: '关键词投放', name: 'Keywords' },
@@ -54,7 +54,7 @@ const tabs = [
   { label: '购买的其他商品', name: 'PurchasedOtherProducts' },
   { label: '搜索词', name: 'SearchTerm' },
   { label: '广告位', name: 'Placement' },
-]
+];
 const tabsComponents: any = {
   Campaigns,
   Keywords,
@@ -63,12 +63,12 @@ const tabsComponents: any = {
   PurchasedOtherProducts,
   SearchTerm,
   Placement,
-}
+};
 
 onBeforeMount(async () => {
-  const resp: APIResponseData = await GetAllPortfolios()
-  portfolios.value = resp.data
-})
+  const resp: APIResponseData = await GetAllPortfolios();
+  portfolios.value = resp.data;
+});
 </script>
 
 <template>
@@ -85,7 +85,7 @@ onBeforeMount(async () => {
         collapse-tags
         collapse-tags-tooltip
         :max-collapse-tags="3"
-        disabled="true">
+        :disabled="true">
         <el-option v-for="info of portfolios" :label="info.name" :value="info.portfolioId"></el-option>
       </el-select>
       <DateRangePicker v-model="dateRange"></DateRangePicker>

src/views/demo/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import * as ww from '@wecom/jssdk'
-import { WeComLogin } from './api'
+import * as ww from '@wecom/jssdk';
+import { WeComLogin } from './api';
 
 // const txt = defineModel()
 
@@ -17,24 +17,24 @@ function createWXQRCode() {
       redirect_type: 'callback',
     },
     onCheckWeComLogin({ isWeComLogin }) {
-      console.log(isWeComLogin)
+      console.log(isWeComLogin);
     },
     onLoginSuccess({ code }) {
       // console.log({ code })
-      handleWeComLogin({ code: code, state: 'Wechat' })
+      handleWeComLogin({ code: code, state: 'Wechat' });
     },
     onLoginFail(err) {
-      console.log(err)
+      console.log(err);
     },
-  })
+  });
 }
 
 async function handleWeComLogin(query) {
   try {
-    const res = await WeComLogin(query)
-    console.log('res', res)
+    const res = await WeComLogin(query);
+    console.log('res', res);
   } catch (error) {
-    console.log('error:', error)
+    console.log('error:', error);
   }
 }
 </script>