diff --git a/README.md b/README.md index fe09ed1..1511959 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,5 @@ -# uml +# Vue 3 + Vite +This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` - - diff --git a/package.json b/package.json index 699536d..a48a135 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "axios": "1.2.1", "element-plus": "2.2.19", "pinia": "2.0.27", - "pinia-plugin-persist": "1.0.0", + "pinia-plugin-persist": "^1.0.0", "vant": "4.0.0", "vue": "^3.4.37", "vue-router": "4" diff --git a/public/logo.png b/public/logo.png deleted file mode 100644 index 20a2c57..0000000 Binary files a/public/logo.png and /dev/null differ diff --git a/src/assets/user.png b/src/assets/user.png new file mode 100644 index 0000000..610886b Binary files /dev/null and b/src/assets/user.png differ diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 546ebbc..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,43 +0,0 @@ - - - - - diff --git a/src/main.js b/src/main.js index a8fb35a..8dd3a1f 100644 --- a/src/main.js +++ b/src/main.js @@ -2,13 +2,15 @@ import { createApp } from 'vue' import './style.css' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' -//import App from './view/Regiter.vue' +//import App from './components/App.vue' import App from './App.vue' import router from './router' -import { PiniaVuePlugin, createPinia } from 'pinia' +import { PiniaVuePlugin,createPinia } from 'pinia' +import piniaPluginPersist from 'pinia-plugin-persist' const app=createApp(App) app.use(ElementPlus) app.use(router) const pinia=createPinia() +pinia.use(piniaPluginPersist) app.use(pinia) app.mount('#app') diff --git a/src/router.js b/src/router.js index 65ea83c..9e421c3 100644 --- a/src/router.js +++ b/src/router.js @@ -1,54 +1,133 @@ -import { createRouter,createWebHashHistory } from "vue-router"; +import { createRouter, createWebHashHistory } from "vue-router"; import { userStore } from "./store"; import { storeToRefs } from "pinia"; const router = createRouter({ - history:createWebHashHistory(), - routes:[{ - path:'/', - redirect:'login' - }, + history: createWebHashHistory(), + routes: [ + { + path: '/', + redirect: 'login' + }, + { + path: '/login', + name: 'Login', + component: () => import('./view/Login.vue'), + meta: { requiresAuth: false } // 不需要登录 + }, + { + path: '/register', + name: 'Register', + component: () => import('./view/Register.vue'), + meta: { requiresAuth: false } // 不需要登录 + }, + { + path: '/User', + name: 'User', + component: () => import("./view/user/Index.vue"), + redirect: "/User/Head", + children: [ + { + path: 'Head', + name: 'Head', + component: () => import("./view/user/Home.vue"), + meta: { requiresAuth: true } + }, + { + path: 'userProfile', + name: 'userProfile', + component: () => import("./view/user/userProfile.vue"), + meta: { requiresAuth: true } + }, + { + path: 'OrderManagement', + name: 'OrderManagement', + component: () => import("./view/user/OrderManagement.vue"), + meta: { requiresAuth: true } + }, + { + path: 'ExpressForm', + name: 'ExpressForm', + component: () => import("./view/user/ExpressForm.vue"), + meta: { requiresAuth: true } + }, + { + path: 'Address', + name: 'Address', + component: () => import("./view/user/Address.vue"), + meta: { requiresAuth: true } + }, + { + path: 'ShipmentQuery', + name: 'ShipmentQuery', + component: () => import("./view/user/ShipmentQuery.vue"), + meta: { requiresAuth: true } + }, + { + path: 'CourierComplaint', + name: 'CourierComplaint', + component: () => import("./view/user/CourierComplaint.vue"), + meta: { requiresAuth: true } + }, + ] + }, { - path:'/login', - name:'Login', - component:()=>import('./view/Login.vue') - }, - { - path:'/User', - name:'User', - component:()=>import("./view/user/index.vue"), - redirect:"/User/myInfo", - children:[ + path: '/Courier', + name: 'Courier', + component: () => import("./view/courier/index.vue"), + redirect: "/Courier/Home", + children: [ + { + path: 'Home', + name: 'Home', + component: () => import("./view/courier/Home.vue"), + meta: { requiresAuth: true }, + }, + { + path: 'orderProcessing', + name: 'orderProcessing', + component: () => import("./view/courier/OrderProcessing.vue"), + meta: { requiresAuth: true }, + }, { - path:'myInfo', - component:()=>import('./view/user/MyInfo.vue') + path: 'deliveryTracking', + name: 'deliveryTracking', + component: () => import("./view/courier/DeliveryTracking.vue"), + meta: { requiresAuth: true }, }, { - path:"expressList", - component:()=>import('./view/user/ExpressList.vue') + path: 'orderHistory', + name: 'orderHistory', + component: () => import("./view/courier/OrderHistory.vue"), + meta: { requiresAuth: true }, }, { - path:"expressForm", - component:()=>import('./view/user/ExpressForm.vue') + path: 'feedback', + name: 'feedback', + component: () => import("./view/courier/Feedback.vue"), + meta: { requiresAuth: true }, } ] } - ] -}) -router.beforeEach((to,from,next)=>{ - const store=userStore() - const {loginState}=storeToRefs(store) - console.log("路由守卫：",loginState.value) - if(to.name=="Login"){ - next() - }else{ - if(loginState.value){ - next() - }else{ - next({ - name:"Login" - }) - } - } -}) -export default router \ No newline at end of file + ] +}); + +router.beforeEach((to, from, next) => { + const store = userStore(); + const { loginState } = storeToRefs(store); + console.log("路由守卫：", loginState.value); + + // 如果路由的 meta.requiresAuth 为 false，直接允许访问 + if (to.meta.requiresAuth === false) { + next(); + } else { + // 否则检查登录状态 + if (loginState.value) { + next(); + } else { + next({ name: "Login" }); + } + } +}); + +export default router; diff --git a/src/store/index.js b/src/store/index.js index 9c32866..10b8319 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,15 +1,26 @@ -import { defineStore } from "pinia"; +import { + defineStore +} from "pinia"; -export const userStore = defineStore('storeId',{ - state:()=>{ - return{ - loginState:false +export const userStore = defineStore('storeId', { + state: () => { + return { + loginState: false } }, - getters:{}, - actions:{ - setLoginState(state){ - this.loginState=state + getters: {}, + actions: { + setLoginState(state) { + this.loginState = state } + }, + persist: { + enabled: true, // 开启数据缓存 + strategies: [{ + key: 'storeId', // 当前store的id + storage: localStorage, // 存储方式 + paths: ['loginState'] // 指定要持久化的字段 + }] } + }) \ No newline at end of file diff --git a/src/store/user.js b/src/store/user.js new file mode 100644 index 0000000..2dbc061 --- /dev/null +++ b/src/store/user.js @@ -0,0 +1,26 @@ +import { defineStore } from 'pinia'; + +export const useUserStore = defineStore('user', { + state: () => ({ + username: '用户', + email: 'user@example.com', + gender: '', + birthdate: new Date(), + phone: '', + selectedRegion: [], + }), + actions: { + updateProfile(profile) { + this.username = profile.username; + this.email = profile.email; + this.gender = profile.gender; + this.birthdate = profile.birthdate; + this.phone = profile.phone; + this.selectedRegion = profile.selectedRegion; + }, + }, + persist: { + key: 'user-profile', // 存储的键名 + storage: localStorage, // 使用 localStorage 持久化 + }, +}); diff --git a/src/stores/ageStore.js b/src/stores/ageStore.js deleted file mode 100644 index c3c2b2d..0000000 --- a/src/stores/ageStore.js +++ /dev/null @@ -1,19 +0,0 @@ -// stores/ageStore.js -import { defineStore } from 'pinia' - -export const useAgeStore = defineStore('ageStore', { - state: () => ({ - age: 20 // 设置初始年龄为20 - }), - actions: { - incrementAge() { - this.age++ - } - }, - persist: { - enabled: true, - strategies: [ - { storage: localStorage, paths: ['age'] } // 将age字段持久化到localStorage - ] - } -}) diff --git a/src/view/Login.vue b/src/view/Login.vue index 703b1e0..ba73efc 100644 --- a/src/view/Login.vue +++ b/src/view/Login.vue @@ -1,102 +1,191 @@ \ No newline at end of file diff --git a/src/view/Register.vue b/src/view/Register.vue new file mode 100644 index 0000000..5647a47 --- /dev/null +++ b/src/view/Register.vue @@ -0,0 +1,178 @@ + + + + + diff --git a/src/view/Regiter.vue b/src/view/Regiter.vue deleted file mode 100644 index a46f092..0000000 --- a/src/view/Regiter.vue +++ /dev/null @@ -1,88 +0,0 @@ - - - \ No newline at end of file diff --git a/src/view/courier/DeliveryTracking.vue b/src/view/courier/DeliveryTracking.vue new file mode 100644 index 0000000..f855e10 --- /dev/null +++ b/src/view/courier/DeliveryTracking.vue @@ -0,0 +1,162 @@ + + + + + diff --git a/src/view/courier/Feedback.vue b/src/view/courier/Feedback.vue new file mode 100644 index 0000000..806ff60 --- /dev/null +++ b/src/view/courier/Feedback.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/src/view/courier/Home.vue b/src/view/courier/Home.vue new file mode 100644 index 0000000..dfdd6e0 --- /dev/null +++ b/src/view/courier/Home.vue @@ -0,0 +1,111 @@ + + + + + diff --git a/src/view/courier/Index.vue b/src/view/courier/Index.vue new file mode 100644 index 0000000..18e4600 --- /dev/null +++ b/src/view/courier/Index.vue @@ -0,0 +1,183 @@ + + + + + diff --git a/src/view/courier/OrderHistory.vue b/src/view/courier/OrderHistory.vue new file mode 100644 index 0000000..2e3593b --- /dev/null +++ b/src/view/courier/OrderHistory.vue @@ -0,0 +1,283 @@ + + + + + diff --git a/src/view/courier/OrderProcessing.vue b/src/view/courier/OrderProcessing.vue new file mode 100644 index 0000000..2a48644 --- /dev/null +++ b/src/view/courier/OrderProcessing.vue @@ -0,0 +1,192 @@ + + + + + diff --git a/src/view/user/Address.vue b/src/view/user/Address.vue new file mode 100644 index 0000000..03a50c9 --- /dev/null +++ b/src/view/user/Address.vue @@ -0,0 +1,193 @@ + + + + + diff --git a/src/view/user/CourierComplaint.vue b/src/view/user/CourierComplaint.vue new file mode 100644 index 0000000..d9736f8 --- /dev/null +++ b/src/view/user/CourierComplaint.vue @@ -0,0 +1,105 @@ + + + + + diff --git a/src/view/user/ExpressForm.vue b/src/view/user/ExpressForm.vue index a911e4b..29c01fe 100644 --- a/src/view/user/ExpressForm.vue +++ b/src/view/user/ExpressForm.vue @@ -1,203 +1,241 @@ + diff --git a/src/view/user/ExpressList.vue b/src/view/user/ExpressList.vue deleted file mode 100644 index 6b16741..0000000 --- a/src/view/user/ExpressList.vue +++ /dev/null @@ -1,153 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/view/user/Home.vue b/src/view/user/Home.vue new file mode 100644 index 0000000..e3b5270 --- /dev/null +++ b/src/view/user/Home.vue @@ -0,0 +1,142 @@ + + + + + diff --git a/src/view/user/Index.vue b/src/view/user/Index.vue index 57d1223..8094f7b 100644 --- a/src/view/user/Index.vue +++ b/src/view/user/Index.vue @@ -1,82 +1,77 @@ - - \ No newline at end of file + .user-controls { + display: flex; + align-items: center; + } + diff --git a/src/view/user/MyInfo.vue b/src/view/user/MyInfo.vue deleted file mode 100644 index 16b9e89..0000000 --- a/src/view/user/MyInfo.vue +++ /dev/null @@ -1,143 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/view/user/OrderManagement.vue b/src/view/user/OrderManagement.vue new file mode 100644 index 0000000..ef9c162 --- /dev/null +++ b/src/view/user/OrderManagement.vue @@ -0,0 +1,240 @@ + + + + + \ No newline at end of file diff --git a/src/view/user/ShipmentQuery.vue b/src/view/user/ShipmentQuery.vue new file mode 100644 index 0000000..c4dae5c --- /dev/null +++ b/src/view/user/ShipmentQuery.vue @@ -0,0 +1,100 @@ + + + + + diff --git a/src/view/user/userProfile.vue b/src/view/user/userProfile.vue new file mode 100644 index 0000000..2c6389d --- /dev/null +++ b/src/view/user/userProfile.vue @@ -0,0 +1,176 @@ + + + + + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index dacd5b9..bfc8dd1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -691,9 +691,9 @@ picocolors@^1.0.1: resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1" integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew== -pinia-plugin-persist@1.0.0: +pinia-plugin-persist@^1.0.0: version "1.0.0" - resolved "https://registry.npmmirror.com/pinia-plugin-persist/-/pinia-plugin-persist-1.0.0.tgz#fc696f225527f30bd5955109fafadd43c725e888" + resolved "https://registry.yarnpkg.com/pinia-plugin-persist/-/pinia-plugin-persist-1.0.0.tgz#fc696f225527f30bd5955109fafadd43c725e888" integrity sha512-M4hBBd8fz/GgNmUPaaUsC29y1M09lqbXrMAHcusVoU8xlQi1TqgkWnnhvMikZwr7Le/hVyMx8KUcumGGrR6GVw== dependencies: vue-demi "^0.12.1"