组件按需加载

This commit is contained in:
A1300399510 2023-07-13 17:34:25 +08:00
parent 348057a649
commit a626223e64
10 changed files with 97 additions and 110 deletions

File diff suppressed because one or more lines are too long

View File

@ -51,7 +51,6 @@
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { ElLoading } from 'element-plus'
const { proxy } = getCurrentInstance()
const router = useRouter()
@ -84,11 +83,11 @@ onMounted(() => {
})
async function init() {
loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
})
// loading = ElLoading.service({
// lock: true,
// text: 'Loading',
// background: 'rgba(0, 0, 0, 0.7)',
// })
// if (identityList.value > 0) return
proxy.$post("/tenement/pc/api/publish/checkidentity").then(res => {
@ -99,7 +98,7 @@ async function init() {
isintermediary.value = data.isintermediary
if (data['ispopup'] == 0) overallJump()
}).finally(() => {
loading.close()
// loading.close()
})
}
@ -124,7 +123,7 @@ let choiceItem = (key) => {
let overallJump = () => {
choicePopState.value = false
console.log("11",identityKey.value);
console.log("11", identityKey.value);
router.push(`/edit?intermediary=${identityKey.value}`)
}

View File

@ -1,7 +1,8 @@
<template>
<header class="container-header flexflex">
<nav class="header-nav flexacenter">
<div class="header-nav-item" :class="{ pitch: index == 3 }" v-for="(item, index) in navList" :key="index">{{ item }}</div>
<a class="header-nav-item" :class="{ pitch: item['key'] == 'fang' }" v-for="(item, index) in nav" :key="index"
:href="item.url" target="_blank">{{ item.name }}</a>
<img class="header-nav-item header-user-img" :src="user.avatar">
</nav>
<div class="logo-box flexacenter">
@ -10,13 +11,8 @@
</div>
<div class="header-bj-box"></div>
<nav class="nav-box flexflex" v-if="!isNoTabList">
<div class="nav-list wid1200 flexflex">
<!-- <<<<<<< HEAD
<div class="nav-item flexcenter" :class="{ pitch: item['name'] == '我的' }" v-for="item in tabList"
:key="item">{{ item.name }}</div>
======= -->
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in tabList"
:key="i">
<el-badge :value="12">
@ -26,24 +22,27 @@
</el-badge>
</div>
<!-- >>>>>>> origin/main -->
</div>
</nav>
</header>
</template>
<script setup>
import { useStore } from 'vuex'
import { toRefs } from 'vue';
//
const props = defineProps({
isNoTabList: {
type: Boolean,
default: false
},
user: Object,
// user: Object,
});
const navList = ["寄托首页", "论坛", "Offer榜", "港校租房", "院校库", "兑换店", "搜索", "招生官", "中外合办院校"]
const store = useStore();
const { user, nav } = toRefs(store.state);
// const navList = ["", "", "Offer", "", "", "", "", "", ""]
const tabList = [{
name: '首页',

View File

@ -2,25 +2,67 @@ import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
// import ElementPlus from 'element-plus'
// import { ElButton, ElInput } from 'element-plus'
import {
ElButton,
ElInput,
ElSelect,
ElOption,
ElLoading,
ElCheckbox,
ElCheckboxGroup,
ElCarousel,
ElCarouselItem,
ElBadge,
ElDropdown,
ElPopover,
// 其他需要的组件
} from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import 'element-plus/dist/index.css'
import 'element-plus/lib/locale/lang/zh-cn'
import 'element-plus/theme-chalk/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import api from "./utils/api";
//引入封装Axios请求
import Axios from '@/utils/axios';
const app = createApp(App)
api.index().then(res => {
if (res.code === 200) {
store.state.seachTypeData = res.data.combination
store.state.indexData = res.data
store.state.ListSelectBtn = res.data.recommendedTab
console.log(store.state.seachTypeData)
}
})
app.use(store).use(router).use(Axios).use(ElementPlus, {
locale: zhCn
}).mount('#app')
api.index().then(res => {
if (res.code === 200) {
store.state.seachTypeData = res.data.combination
store.state.indexData = res.data
store.state.ListSelectBtn = res.data.recommendedTab
store.state.user = res.data.user
store.state.nav = res.data.nav
console.log(store.state.seachTypeData)
}
})
const app = createApp(App)
app.use(ElButton)
app.use(ElInput)
app.use(ElSelect)
app.use(ElOption)
app.use(ElLoading)
app.use(ElCheckbox)
app.use(ElCheckboxGroup)
app.use(ElCarousel)
app.use(ElCarouselItem)
app.use(ElBadge)
app.use(ElDropdown)
app.use(ElPopover)
app.use(store).use(router).use(Axios).mount('#app')
// app.use(store).use(router).use(Axios).use(ElementPlus, {
// locale: zhCn
// }).mount('#app')

View File

@ -51,14 +51,10 @@ const router = createRouter({
router.beforeEach((to, from, next) => {
console.log(to);
next()
let meta = to['meta'] || {}
let title = meta['title']
console.log("title", title);
if (title) setSeoTitle(title)
})
export default router

View File

@ -5,6 +5,8 @@ export default createStore({
seachTypeData:[],
indexData:[],
ListSelectBtn:[],
user:{},
nav:[],
},
getters: {

View File

@ -1,15 +1,14 @@
import axios from 'axios';
import QS from 'qs';
import router from '../router/index'
import { redirectToExternalWebsite } from '@/utils/util.js'
import { goTologin } from '@/utils/util.js'
//qs.stringify()是将对象 序列化成URL的形式以&进行拼接
// let protocol = window.location.protocol; //协议
// let host = window.location.host; //主机
// axios.defaults.baseURL = protocol + "//" + host;
axios.defaults.baseURL = 'https://app.gter.net'
// axios.defaults.baseURL = '/index'
// axios.defaults.emulateJSON = true
// axios.defaults.withCredentials = true
axios.defaults.emulateJSON = true
axios.defaults.withCredentials = true
axios.interceptors.request.use( //响应拦截
async config => {
@ -39,18 +38,18 @@ axios.interceptors.response.use(
switch (error.response.status) {
// 401: 未登录
case 401:
console.log("401");
goTologin()
console.log("401");
break
// 403 token过期
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
// router.push('/login')
redirectToExternalWebsite()
break
// 404请求不存在
case 404:
break;
// 其他错误,直接抛出错误提示
// 其他错误,直接抛出错误提示
default:
}
return Promise.reject(error.response);
@ -90,8 +89,8 @@ const $post = (url, params) => {
}
//下面是vue3必须加的vue2不需要只需要暴露出去getpost方法就可以
export default {
get:$get,
post:$post,
get: $get,
post: $post,
install: (app) => {
app.config.globalProperties['$get'] = $get;
app.config.globalProperties['$post'] = $post;

View File

@ -3,13 +3,21 @@ function setSeoTitle(title) {
}
function redirectToExternalWebsite(url) {
console.log(url, "url");
const link = document.createElement('a');
link.href = url;
link.target = '_blank';
// link.target = '_blank';
link.click();
}
// 跳转登录
function goTologin() {
let url = encodeURIComponent(location.href);
redirectToExternalWebsite(`https://passport.gter.net/?referer=${url}`);
}
module.exports = {
setSeoTitle,
redirectToExternalWebsite,
goTologin,
}

View File

@ -673,23 +673,6 @@ import { setSeoTitle } from '@/utils/util.js'
export default {
name: 'ZufangEdit',
metaInfo() {
return {
title: 'My Page Title',
meta: [
{
name: 'description',
content: 'This is a description of my page'
}
],
link: [
{
rel: 'canonical',
href: 'https://example.com/my-page'
}
]
}
},
data() {
return {
value: '',
@ -773,36 +756,6 @@ export default {
}
},
computed: {
//
judgeClassNameType() {
return function (item) {
let isPitch = ''
let typeData = this.typeData
let type = this.info.type
for (const key in typeData) {
typeData[key]['data'].forEach(element => {
if (element['key'] == type) isPitch = 'pitch'
})
}
return isPitch
}
},
// //
// judgeGenderCohabitantsShow() {
// /
// / return function (field) {
// console.log("info", this, this.info);
// // let type = this.info['type']
// // let intermediary = this.intermediary
// // if (intermediary != 6 || field != 'gender') return true
// // if (type >>> 0 == 1 && field == 'gender') return true
// return false
// }
// },
},
mounted() {
// 访URL
const queryString = window.location.search;
@ -824,9 +777,6 @@ export default {
userBox,
},
methods: {
updateMap(evtModel) {
console.log("evtModel", evtModel);
},
require(url) {
return require(url)
@ -970,7 +920,7 @@ export default {
setSeoTitle(title)
console.log();
}).finally(() => {
}).catch(err => { }).finally(err => {
this.loading.close()
})

View File

@ -2,6 +2,7 @@ const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
productionSourceMap: false,
// publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
publicPath: '/',
configureWebpack: {
@ -50,7 +51,9 @@ module.exports = defineConfig({
}
}
}
}
},
})