Skip to content

G
graducationWeb_vant
Commit 6f098013 by liying
Options

2.8号提交

parent 3fdbbef3
Showing with 1609 additions and 143 deletions
package-lock.json
......@@ -8,11 +8,15 @@
"name": "graducation",
"version": "0.0.0",
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@nutui/nutui": "^4.2.9",
"amfe-flexible": "^2.2.1",
"axios": "^1.6.7",
"vant": "^4.8.3",
"vant-green": "^1.0.44",
"vue": "^3.3.11",
"vue-router": "^4.2.5"
"vue-router": "^4.2.5",
"vuex": "^4.1.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.2",
......@@ -21,6 +25,11 @@
"vite": "^5.0.8"
}
},
"node_modules/@amap/amap-jsapi-loader": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
"integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
},
"node_modules/@babel/parser": {
"version": "7.23.9",
"resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.9.tgz",
......@@ -32,6 +41,17 @@
"node": ">=6.0.0"
}
},
"node_modules/@babel/runtime": {
"version": "7.23.9",
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.23.9.tgz",
"integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
"dependencies": {
"regenerator-runtime": "^0.14.0"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@esbuild/aix-ppc64": {
"version": "0.19.12",
"resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
......@@ -405,6 +425,29 @@
"resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
"node_modules/@nutui/icons-vue": {
"version": "0.1.1",
"resolved": "https://registry.npmmirror.com/@nutui/icons-vue/-/icons-vue-0.1.1.tgz",
"integrity": "sha512-ekn6R9GNHWNUcV4pxdhQzrI1g1VhZ5zknklXoUJrCzt0RkRRLU0bUXX3ouWT0sl0U3MNJClnXAzZe7iPAvgPtw=="
},
"node_modules/@nutui/nutui": {
"version": "4.2.9",
"resolved": "https://registry.npmmirror.com/@nutui/nutui/-/nutui-4.2.9.tgz",
"integrity": "sha512-vON3KDmA40LJBzGX9ptmQx9cP/wFrgKsB5KfY6nCa+CWNbqG9qy/VlIP4q1rZq0OwW4prj3607pJv8cawxQiQA==",
"dependencies": {
"@nutui/icons-vue": "^0.1.1",
"sass": "^1.50.0"
},
"peerDependencies": {
"unplugin-vue-components": ">=0.25.1",
"vue": "^3.0.0"
},
"peerDependenciesMeta": {
"unplugin-vue-components": {
"optional": true
}
}
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.9.6",
"resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.6.tgz",
......@@ -580,6 +623,11 @@
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"dev": true
},
"node_modules/@vant/icons": {
"version": "1.1.15",
"resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-1.1.15.tgz",
"integrity": "sha512-96tbJotfofrKpOrUGWKkiGLJsCFc0OX5pikWLW5yarD+EMhi0zCrQSDb95xGrp/HETAFm+nSTQu2e1zGsWN/7A=="
},
"node_modules/@vant/popperjs": {
"version": "1.3.0",
"resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
......@@ -606,6 +654,11 @@
"vue": "^3.2.25"
}
},
"node_modules/@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.4.0",
"resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
"integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA=="
},
"node_modules/@vue/compiler-core": {
"version": "3.4.15",
"resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.4.15.tgz",
......@@ -706,6 +759,18 @@
"resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
"integrity": "sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw=="
},
"node_modules/anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"dependencies": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
},
"engines": {
"node": ">= 8"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
......@@ -721,6 +786,45 @@
"proxy-from-env": "^1.1.0"
}
},
"node_modules/binary-extensions": {
"version": "2.2.0",
"resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"engines": {
"node": ">=8"
}
},
"node_modules/braces": {
"version": "3.0.2",
"resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dependencies": {
"fill-range": "^7.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.6.0"
},
"engines": {
"node": ">= 8.10.0"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
......@@ -796,6 +900,17 @@
"resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
},
"node_modules/fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dependencies": {
"to-regex-range": "^5.0.1"
},
"engines": {
"node": ">=8"
}
},
"node_modules/follow-redirects": {
"version": "1.15.5",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.5.tgz",
......@@ -826,7 +941,6 @@
"version": "2.3.3",
"resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"dev": true,
"hasInstallScript": true,
"optional": true,
"os": [
......@@ -836,6 +950,60 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/glob-parent": {
"version": "5.1.2",
"resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dependencies": {
"is-glob": "^4.0.1"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/immutable": {
"version": "4.3.5",
"resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.5.tgz",
"integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw=="
},
"node_modules/is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dependencies": {
"binary-extensions": "^2.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/is-extglob": {
"version": "2.1.1",
"resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/is-glob": {
"version": "4.0.3",
"resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"dependencies": {
"is-extglob": "^2.1.1"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/is-number": {
"version": "7.0.0",
"resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"engines": {
"node": ">=0.12.0"
}
},
"node_modules/magic-string": {
"version": "0.30.5",
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz",
......@@ -877,11 +1045,27 @@
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
},
"node_modules/picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"engines": {
"node": ">=8.6"
}
},
"node_modules/postcss": {
"version": "8.4.33",
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.33.tgz",
......@@ -909,6 +1093,22 @@
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dependencies": {
"picomatch": "^2.2.1"
},
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/regenerator-runtime": {
"version": "0.14.1",
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
},
"node_modules/rollup": {
"version": "4.9.6",
"resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.9.6.tgz",
......@@ -941,6 +1141,22 @@
"fsevents": "~2.3.2"
}
},
"node_modules/sass": {
"version": "1.70.0",
"resolved": "https://registry.npmmirror.com/sass/-/sass-1.70.0.tgz",
"integrity": "sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/source-map-js": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
......@@ -949,6 +1165,17 @@
"node": ">=0.10.0"
}
},
"node_modules/to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dependencies": {
"is-number": "^7.0.0"
},
"engines": {
"node": ">=8.0"
}
},
"node_modules/vant": {
"version": "4.8.3",
"resolved": "https://registry.npmmirror.com/vant/-/vant-4.8.3.tgz",
......@@ -962,6 +1189,20 @@
"vue": "^3.0.0"
}
},
"node_modules/vant-green": {
"version": "1.0.44",
"resolved": "https://registry.npmmirror.com/vant-green/-/vant-green-1.0.44.tgz",
"integrity": "sha512-px3WhS/fyxQsQqnjcTQnsT5vQBvYmTZwoXvotEPHoellmWT6ZeizAq5vsEyFcYsWrzUE+L4K+W84Qeha2mib+w==",
"dependencies": {
"@babel/runtime": "7.x",
"@vant/icons": "1.1.15",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"vue-lazyload": "1.2.3"
},
"peerDependencies": {
"vue": ">= 2.5.0"
}
},
"node_modules/vite": {
"version": "5.0.12",
"resolved": "https://registry.npmmirror.com/vite/-/vite-5.0.12.tgz",
......@@ -1034,6 +1275,11 @@
}
}
},
"node_modules/vue-lazyload": {
"version": "1.2.3",
"resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
"integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
},
"node_modules/vue-router": {
"version": "4.2.5",
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.5.tgz",
......@@ -1044,6 +1290,17 @@
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/vuex": {
"version": "4.1.0",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.1.0.tgz",
"integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
"dependencies": {
"@vue/devtools-api": "^6.0.0-beta.11"
},
"peerDependencies": {
"vue": "^3.2.0"
}
}
}
}
package.json
......@@ -9,11 +9,15 @@
"preview": "vite preview"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@nutui/nutui": "^4.2.9",
"amfe-flexible": "^2.2.1",
"axios": "^1.6.7",
"vant": "^4.8.3",
"vant-green": "^1.0.44",
"vue": "^3.3.11",
"vue-router": "^4.2.5"
"vue-router": "^4.2.5",
"vuex": "^4.1.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.2",
......
src/App.vue
<template>
<router-view></router-view>
</template>
<script setup>
import { ref, reactive} from "vue";
</script>
<style scoped>
......
src/api/my-account.js
export const baseURL="https://meituan.thexxdd.cn/apie"
\ No newline at end of file
export const baseURL="http://localhost:8056/employee"
\ No newline at end of file
src/api/request.js
......@@ -7,12 +7,13 @@ const http=axios.create({
});
//请求拦截器
http.interceptors.request.use((config)=>{
// config.headers.token=""
return config;
});
//响应拦截器
http.interceptors.response.use((response)=>{
return response.data;
http.interceptors.response.use((res)=>{
return res.data;
});
export default{
......@@ -20,6 +21,6 @@ export default{
return http.get(url,{params});
},
post(url,data){
returnhttp.post(url,data);
return http.post(url,data);
},
}
\ No newline at end of file
src/assets/logo.png
src/assets/logo.png

9.41 KB | W: | H:

src/assets/logo.png

38.6 KB | W: | H:

src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/components/HelloWorld.vue deleted 100644 → 0
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Install
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
in your IDE for a better DX
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
src/components/carouselChart.vue 0 → 100644
<template>
<div class="swiper-container">
<van-swipe :autoplay="3000" :show-indicators="true" indicator-color="white" :loop="true">
<van-swipe-item v-for="(item, index) in swiperItems" :key="index">
<img :src="item" alt="" style="width: 100%;" />
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
import { ref } from 'vue';
import { Swipe, SwipeItem } from 'vant';
// 但是在使用本地图片时，你需要使用 require 或者 import 的方式引入本地图片。
import lun3Image from "@/assets/t3.png"
import lun1Image from "@/assets/t1.png"
import lun2Image from "@/assets/t2.png"
import lun4Image from "@/assets/t4.png"
export default {
components: {
VanSwipe: Swipe,
VanSwipeItem: SwipeItem,
},
setup() {
// 这里可以替换为你的图片地址
const swiperItems = ref([
lun3Image,
lun1Image,
lun2Image,
lun4Image,
]);
return {
swiperItems,
};
},
};
</script>
<style scoped>
.swiper-container {
width: 100%;
overflow: hidden;
height: 400px; /* 设置轮播图高度 */
}
</style>
\ No newline at end of file
src/components/dinbu/index.vue 0 → 100644
<template>
<div class="top-bar">
<!-- 左侧地区下拉选择框 -->
<div class="dropdown-container">
<div class="selected" @click="toggleDropdown">
{{ selectedArea || '地区' }}
<span class="arrow" :class="{ rotated: isDropdownOpen }">&#9660;</span>
</div>
<transition name="fade">
<div v-if="isDropdownOpen" class="options">
<div
v-for="area in areas"
:key="area.value"
@click="selectArea(area)"
>
{{ area.label }}
</div>
</div>
</transition>
</div>
<!-- 中间地区搜索栏 -->
<div class="search-container">
<van-search
v-model="searchKeyword"
clearable
:show-action="showAction"
placeholder="请输入搜索关键词"
@search="onSearch"
@cancel="onCancel"
@focus="onFocus"
@clear="clearSearch"
/>
</div>
<van-popover v-model:show="showPopover" theme="dark" :actions="actions">
<template #reference>
<!-- 右侧+图标栏 -->
<div class="add-icon" @click="showAddPopup">
<span>&#43;</span>
</div>
</template>
</van-popover>
</div>
</template>
<script>
import {ref} from 'vue';
export default {
setup() {
const showPopover = ref(false);
const actions = [
{ text: '扫一扫' },
{ text: '版本切换' },
];
return {
actions,
showPopover,
};
},
data() {
return {
isDropdownOpen: false,
selectedArea: null,
areas: [
{ label: '杭州市', value: 'area1' },
{ label: '武汉市', value: 'area2' },
{ label: '岳阳市', value: 'area3' },
// 可以根据需要添加更多地区选项
],
searchKeyword: '',
};
},
methods: {
toggleDropdown() {
this.isDropdownOpen = !this.isDropdownOpen;
},
selectArea(area) {
this.selectedArea = area.label;
this.isDropdownOpen = false;
},
showAddPopup() {
// 处理+图标点击事件
},
},
};
</script>
<style scoped>
.top-bar {
display: flex;
justify-content: space-between;
padding: 16px;
font-size: 30px;
background-color: #f7f7f7;
}
.dropdown-container {
position: relative;
width: 150px;
height: 100px;
background-color: #f1f3f5;
}
.selected {
padding: 10px;
border: 0px solid #ccc;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
height: 85px;
background-color: #f0f3f6;
}
.arrow {
margin-left: 8px;
}
.rotated {
transform: rotate(180deg);
}
.options {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #a85959;
border: 1px solid #ccc;
border-top: none;
z-index: 1;
}
.options div {
padding: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.options div:hover {
background-color: #f5f5f5;
}
.search-container {
flex: 1;
margin: 0 16px;
}
.search-container input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
}
.add-icon {
padding: 10px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
</style>
src/components/recommend.vue 0 → 100644
<template>
<div class="custom-card">
<!-- Card 的内容，包含 Grid 展示四个图片 -->
<div class="card-header">
<!-- 左侧文字 -->
<div class="card-title">推荐机构</div>
<!-- 右侧文字 -->
<div class="card-more">更多</div>
</div>
<!-- Card 的内容，包含 Grid 展示四个图片 -->
<div class="grid-container">
<div v-for="(item, index) in gridItems" :key="index" class="grid-item">
<!-- 这里可以放置图片和文字 -->
<img :src="item.image" alt="" class="grid-image" />
<div class="grid-item-title">{{ item.title }}</div>
</div>
</div>
</div>
</template>
<script>
import y1Image from "@/assets/yanglao/y1.png"
import y2Image from "@/assets/yanglao/y2.jpeg"
import y3Image from "@/assets/yanglao/y3.png"
import y4Image from "@/assets/yanglao/y4.png"
import y5Image from "@/assets/yanglao/y5.png"
export default {
data() {
return {
gridItems: [
{ title: '机构1', image: y1Image },
{ title: '机构2', image: y2Image },
{ title: '机构3', image: y3Image },
{ title: '机构4', image: y4Image },
],
};
},
};
</script>
<style scoped>
/* 卡片样式 */
.custom-card {
border: 1px solid #ebedf0;
border-radius: 8px;
overflow: hidden;
margin: 10px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 卡片头部样式（推荐机构和更多并排） */
.card-header {
display: flex;
justify-content: space-between;
background-color: #f5f5f5;
}
/* 卡片标题样式 */
.card-title {
font-size: 16px;
font-weight: bold;
padding: 10px;
}
/* 更多文字样式 */
.card-more {
text-align: right;
font-size: 16px;
padding: 10px;
color: #007aff;
}
/* 网格容器样式 */
.grid-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
}
/* 网格项样式 */
.grid-item {
width: calc(50% - 10px); /* 两列，考虑间距 */
margin-bottom: 20px;
padding: 10px;
box-sizing: border-box;
}
/* 图片样式 */
.grid-image {
width: 100%;
height: 250px;
border-radius: 8px;
}
/* 网格项标题样式 */
.grid-item-title {
text-align: center;
padding: 10px;
font-size: 14px;
}
</style>
\ No newline at end of file
src/components/service.vue 0 → 100644
<template>
<div class="custom-card">
<!-- Card 的内容，包含 Grid 展示四个图片 -->
<div class="card-header">
<!-- 左侧文字 -->
<div class="card-title">热门服务</div>
<!-- 右侧文字 -->
<div class="card-more">更多</div>
</div>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
>
<template #tags>
<van-tag plain type="primary">标签</van-tag>
<van-tag plain type="primary">标签</van-tag>
</template>
<template #footer>
<van-button size="mini">按钮</van-button>
<van-button size="mini">按钮</van-button>
</template>
</van-card>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
>
<template #tags>
<van-tag plain type="primary">标签</van-tag>
<van-tag plain type="primary">标签</van-tag>
</template>
<template #footer>
<van-button size="mini">按钮</van-button>
<van-button size="mini">按钮</van-button>
</template>
</van-card>
</div>
</template>
<script>
import lun1Image from "@/assets/lun1.png";
</script>
<style scoped>
/* 卡片样式 */
.custom-card {
border: 1px solid #ebedf0;
border-radius: 8px;
overflow: hidden;
margin: 10px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 卡片头部样式（推荐机构和更多并排） */
.card-header {
display: flex;
justify-content: space-between;
background-color: #f5f5f5;
}
/* 卡片标题样式 */
.card-title {
font-size: 16px;
font-weight: bold;
padding: 10px;
}
/* 更多文字样式 */
.card-more {
text-align: right;
font-size: 16px;
padding: 10px;
color: #007aff;
}
</style>
src/components/tabBar/index.vue
<template>
<van-tabbar v-model="activeName" route active-color="#f7e087" inactive-color="#a5a29e">
<van-tabbar-item to="/" icon="home-o" >首页</van-tabbar-item>
<van-tabbar-item to="/found" icon="search" >发现</van-tabbar-item>
<van-tabbar-item to="/publish" icon="friends-o" >写游记</van-tabbar-item>
<van-tabbar-item to="/mine" icon="setting-o" >我的</van-tabbar-item>
</van-tabbar>
</template>
<script setup>
import { ref, reactive} from "vue";
const activeName = ref(0);
</script>
<style scoped>
</style>
\ No newline at end of file
<div>
<!-- 菜单栏 -->
<van-tabbar v-model="activeName" class="custom-tabbar" route active-color="#f7e087" inactive-color="#a5a29e">
<van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
<van-tabbar-item icon="apps-o" to="/found">服务产品</van-tabbar-item>
<van-tabbar-item icon="shopping-cart-o" to="/publish">地图</van-tabbar-item>
<van-tabbar-item icon="user-o" to="/mine">我的</van-tabbar-item>
</van-tabbar>
<!-- 中间二维码按钮 -->
<div class="qrcode-button" @click="showQrcode">
<img src="@/assets/qr.png" alt="Qrcode" />
</div>
</div>
</template>
<script>
import { ref } from 'vue';
import { Tabbar, Tab } from 'vant';
const activeName = ref(0);
export default {
components: {
VanTabbar: Tabbar,
VanTab: Tab,
},
data() {
return {
active: '/',
};
},
methods: {
showQrcode() {
// 处理点击按钮后显示二维码的逻辑
console.log('显示二维码');
},
},
};
</script>
<style>
.custom-tabbar {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;;
}
.qrcode-button {
position: fixed;
left: 50%;
bottom: 60px; /* 调整按钮距离底部的距离 */
transform: translateX(-50%);
cursor: pointer;
z-index: 2;
}
.qrcode-button img {
width: 88px; /* 调整二维码图片大小 */
height: 88px; /* 调整二维码图片大小 */
border-radius: 50%;
}
</style>
src/main.js
......@@ -2,9 +2,12 @@ import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import 'amfe-flexible'
import Login from "./page/login.vue"
//1.引入组件
import { Button,Field,CellGroup,Tabbar, TabbarItem,Search} from "vant"
import {Pagination, Image,Icon,SwipeCell, Form, Popover,Grid,Card,GridItem,Button,Field,CellGroup,Tabbar, TabbarItem,Search,Cell, PasswordInput,DropdownMenu, DropdownItem,Tab, Tabs } from "vant"
import { Navbar } from '@nutui/nutui';
import '@nutui/nutui/dist/style.css';
//2.引入样式
import "vant/lib/index.css"
......@@ -14,7 +17,23 @@ import router from "@/router/index.js"
// createApp(App).mount('#app')
const app = createApp(App)
app.component("Login",Login)
//3.注册使用组件
app.use(Tab)
app.use(Tabs)
app.use(Navbar)
app.use(Image)
app.use(Cell)
app.use(Icon)
app.use(Pagination)
app.use(SwipeCell)
app.use(SwipeCell)
app.use(DropdownMenu)
app.use(DropdownItem)
app.use(Grid)
app.use(GridItem)
app.use(Card)
app.use(Form)
app.use(Button)
app.use(Field)
app.use(CellGroup)
......@@ -22,5 +41,6 @@ app.use(router)
app.use(Tabbar)
app.use(TabbarItem)
app.use(Search)
app.use(Popover)
app.mount("#app")
src/page/found/found.vue
<template>
<p>目的地</p>
<tabBar></tabBar>
</template>
<script setup>
import { ref, reactive} from "vue";
import tabBar from "@/components/tabBar/index.vue";
</script>
<style scoped>
</style>
\ No newline at end of file
<!--顶部导航栏-->
<dinbu></dinbu>
<!--下拉选项-->
<van-dropdown-menu active-color="#ee0a24">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
<van-dropdown-item v-model="value3" :options="option3" />
<van-dropdown-item v-model="value4" :options="option4" />
</van-dropdown-menu>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
<template #prev-text>
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow" />
</template>
<template #page="{ text }">{{ text }}</template>
</van-pagination>
<br><br>
<tabBar></tabBar>
</template>
<script setup>
import { ref, reactive } from "vue";
import tabBar from "@/components/tabBar/index.vue";
import dinbu from "@/components/dinbu/index.vue";
import card1 from "@/components/card1.vue";
import service from '@/components/service.vue'
const value1 = ref(0);
const value2 = ref('a');
const value3 = ref('a');
const value4 = ref('a');
const option1 = [
{ text: '综合排序', value: 0 },
{ text: 'xxxxxx', value: 1 },
{ text: 'xxxxxx', value: 2 },
];
const option2 = [
{ text: '分类', value: 'a' },
{ text: 'xxxxxx', value: 'b' },
{ text: 'xxxxxx', value: 'c' },
];
const option3 = [
{ text: '区县选择', value: 'a' },
{ text: 'xxxxxx', value: 'b' },
{ text: 'xxxxxx', value: 'c' },
];
const option4 = [
{ text: '好评度', value: 'a' },
{ text: 'xxxxxx', value: 'b' },
{ text: 'xxxxxx', value: 'c' },
];
const currentPage = ref(1);
</script>
<style scoped>
.goods-card {
margin: 0;
background-color: white;
}
.delete-button {
height: 100%;
}
</style>
\ No newline at end of file
src/page/index/index.vue
<template>
<van-search
v-model="value"
:show-action="showAction"
placeholder="请输入搜索关键词"
@search="onSearch"
@cancel="onCancel"
@focus="onFocus"
/>
<p>首页</p>
<tabBar></tabBar>
</template>
<script setup>
import { ref, reactive, onMounted} from "vue";
import tabBar from "@/components/tabBar/index.vue";
import http from "@/api/request";
onMounted((res)=>{
let result=http.get("/recomm_travel").catch((err)=>{
<!--顶部导航栏-->
<dinbu></dinbu>
<!--轮播图-->
<carouselChart></carouselChart>
<!-- 中部菜单 -->
<van-grid :column-num="4">
<van-grid-item v-for="(item, index) in menuItems" :key="index" :icon="item.icon" :text="item.text" />
</van-grid>
<!--推荐机构展示-->
<recommend></recommend>
<!--热门服务-->
<service></service>
<card1></card1>
<card1></card1>
<tabBar></tabBar>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import tabBar from "@/components/tabBar/index.vue";
import http from "@/api/request";
import dinbu from "@/components/dinbu/index.vue";
import carouselChart from "../../components/carouselChart.vue";
import recommend from "../../components/recommend.vue";
import service from '@/components/service.vue'
import card1 from "../../components/card1.vue";
import s1Image from "@/assets/fuwu/s1.png"
import s2Image from "@/assets/fuwu/s2.png"
import s3Image from "@/assets/fuwu/s3.png"
import s4Image from "@/assets/fuwu/s4.png"
const keywords = ref("");
//
// const gridArr=ref([])
const recommendArr = ref();
onMounted(async () => {
let result = await http
.post("/login", { username: "admin", password: "123456" })
.catch((err) => {
console.log(err);
});
console.log(result)
});
</script>
<style scoped>
</style>
\ No newline at end of file
recommendArr.value = result.data;
});
// gridArr.value=result.data.category_nav
const menuItems = [
{ icon: s4Image ,text: '找机构' },
{ icon: s3Image, text: '找服务' },
{ icon: s2Image, text: '标题3' },
{ icon: s1Image , text: '标题4' },
];
</script>
<style scoped></style>
src/page/login.vue 0 → 100644
<!-- src/components/Login.vue -->
<template>
<div class="login-container">
<img class="logo" src="@/assets/logo.png" alt="Logo" />
<van-form class="login-form" @submit="onSubmit" ref="loginForm">
<van-field v-model="username" label="用户名" placeholder="请输入用户名" required />
<van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required />
<div class="extra-links">
<router-link to="/forgot-password" class="link">忘记密码？</router-link>
<router-link to="/register" class="link">注册账号</router-link>
</div>
<van-button type="primary" native-type="submit" class="login-button" block>
登录
</van-button>
</van-form>
</div>
</template>
<script>
import { ref } from 'vue';
import 'vant/lib/index.css';
import { Form, Button, Field } from 'vant';
import {useRouter} from 'vue-router';
export default {
setup() {
const router = useRouter();
const username = ref('');
const password = ref('');
const onSubmit = async () => {
try {
// 模拟登录请求（实际中替换为真实的登录逻辑）
// const response = await fakeLogin();
// 如果登录成功，可以导航到下一个页面
console.log('登录成功:');
// 例子：导航到主页
router.push('/');
} catch (error) {
// 处理登录错误
console.error('登录失败:', error);
}
};
const fakeLogin = () => {
// 模拟登录请求（实际中替换为真实的登录逻辑）
return new Promise((resolve) => {
setTimeout(() => {
resolve({ userId: 123, username: username.value });
}, 1000); // 模拟延迟
});
};
return {
username,
password,
onSubmit,
};
},
};
</script>
<style scoped>
/* 添加组件特定的样式 */
/* 添加组件特定的样式 */
.login-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: url("@/assets/background.jpg") center center/cover no-repeat; /* 使用图片作为背景 */
}
.logo {
width: 100px;
height: 100px;
margin-bottom: 20px;
border-radius: 50%;
transition: transform 0.3s ease-in-out;
}
.logo:hover {
transform: rotate(360deg);
}
.login-form {
width: 80%;
max-width: 600px;
background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out;
}
.login-form:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.extra-links {
margin-top: 10px;
display: flex;
justify-content: space-between;
color: #888;
}
.link {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.link:hover {
color: #0056b3;
}
.login-button {
margin-top: 20px;
transition: background-color 0.3s ease-in-out;
}
.login-button:hover {
background-color: #4CAF50;
}
</style>
src/page/mine/mine.vue
<template>
<p>我的</p>
<tabBar></tabBar>
</template>
<script setup>
import { ref, reactive} from "vue";
import tabBar from "@/components/tabBar/index.vue";
</script>
<style scoped>
</style>
\ No newline at end of file
<div class="my-page">
<!-- 头部信息 -->
<div class="header">
<!-- 头像、昵称、标签等个人信息 -->
<div class="user-info">
<van-image class="avatar" :src="yourAvatarUrl" />
<div class="info-text">
<div class="nickname">{{ nickname }}</div>
<div class="tag">快乐老人</div>
<div class="description">详细描述信息</div>
</div>
</div>
<!-- 右侧的 > 符号 -->
<div class="arrow">&gt;</div>
</div>
<myOrder></myOrder>
<div class="organization-section">
<!-- 菜单列表 -->
<van-cell-group>
<!-- 我的预约-->
<van-cell
title="我的预约"
is-link
@click="goToMyOrders" class="organization-cell"
>
<template #icon>
<van-icon name="todo-list-o" class="icon" />
</template>
</van-cell>
<!-- 我的钱包 -->
<van-cell
title="我的钱包"
is-link
@click="goToMyWallet" class="organization-cell "
>
<template #icon>
<van-icon name="balance-o" class="icon" />
</template>
</van-cell>
<!-- 我的健康 -->
<van-cell
title="我的健康"
is-link
@click="goToMemberCenter" class="organization-cell "
>
<template #icon>
<van-icon name="like-o" class="icon" />
</template>
</van-cell>
<!-- 我的活动 -->
<van-cell
title="我的活动"
is-link
@click="goToSettings" class="organization-cell "
>
<template #icon>
<van-icon name="point-gift-o" class="icon" />
</template>
</van-cell>
<!-- 我的机构 -->
<van-cell
title="我的机构"
is-link
@click="goToSettings" class="organization-cell "
>
<template #icon>
<van-icon name="newspaper-o" class="icon" />
</template>
</van-cell>
<!-- 我的亲友 -->
<van-cell
title="我的亲友"
is-link
@click="goToSettings" class="organization-cell "
>
<template #icon>
<van-icon name="friends-o" class="icon" />
</template>
</van-cell>
<!-- 系统设置 -->
<van-cell
title="系统设置"
is-link
@click="goToSettings" class="organization-cell "
>
<template #icon>
<van-icon name="setting-o" class="icon" />
</template>
</van-cell>
<!-- ... 其他菜单项 -->
</van-cell-group>
</div>
<!-- 底部退出登录按钮 -->
<div class="logout-button">
<van-button type="default" @click="logout">退出登录</van-button>
</div>
</div>
<tabBar></tabBar>
</template>
<script setup>
import { ref, reactive } from "vue";
import tabBar from "@/components/tabBar/index.vue";
import myOrder from '@/components/order/myOrder.vue'
const yourAvatarUrl = ref('https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg');
const nickname = ref('Your Nickname');
function goToMyOrders() {
// 处理跳转到我的订单页面
}
function goToMyWallet() {
// 处理跳转到我的钱包页面
}
function goToMemberCenter() {
// 处理跳转到会员中心页面
}
function goToSettings() {
// 处理跳转到设置页面
}
function logout() {
// 处理退出登录逻辑
}
</script>
<style scoped>
.my-page {
background-color: white;
padding-top: env(safe-area-inset-top); /* 适配 iPhone X 及以上的刘海屏 */
}
.header {
background-color: #00BAAD;
color: #fff;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
height: 180px;
}
.user-info {
display: flex;
align-items: center;
}
.avatar {
width: 90px;
height: 90px;
border-radius: 50%;
margin-right: 16px;
}
.info-text {
display: flex;
flex-direction: column;
}
.nickname {
font-size: 24px;
font-weight: bold;
}
.tag {
margin-top: 4px;
background-color: #f0f3f6;
color: #333;
padding: 4px 8px;
border-radius: 12px;
font-size: 13px;
width: 60px;
display: inline-block;
}
.description {
margin-top: 4px;
font-size: 14px;
color: #f0f3f6;
}
.arrow {
font-size: 24px;
}
.organization-section {
margin-top: 16px;
}
.organization-cell {
display: flex;
align-items: center;
justify-content: space-between;
}
.icon {
margin-right: 8px; /* 调整图标和文字之间的右边距 */
}
.logout-button {
margin-top: 20px;
padding: 16px;
text-align: center;
}
</style>
src/page/publish/publish.vue
<template>
<p>发布</p>
<tabBar></tabBar>
</template>
<script setup>
import { ref, reactive} from "vue";
import tabBar from "@/components/tabBar/index.vue";
</script>
<style scoped>
</style>
\ No newline at end of file
<div>
<!-- 定义一个输入框用于搜索位置 -->
<van-search v-model="searchKeyword" placeholder="搜索位置" @search="searchLocation" />
<!-- 地图容器 -->
<div id="amap" style="height: 80vh;"></div>
<!-- 定义搜索结果列表容器 -->
<div id="panel"></div>
</div>
<tabBar></tabBar>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { Search } from 'vant';
import AMapLoader from '@amap/amap-jsapi-loader';
import tabBar from "@/components/tabBar/index.vue";
const center = ref([116.397428, 39.90923]); // 地图中心坐标
const zoom = ref(13); // 地图缩放级别
const apiKey = '69f3058fc3e75700391f94ba06904d67';
const searchKeyword = ref('');
let map;
// 加载高德地图
const loadAMap = async () => {
try {
const AMapAPI = await AMapLoader.load({
key: apiKey,
version: '2.0',
plugins: ['AMap.Geolocation', 'AMap.MarkerClusterer'],
});
console.log('AMap API:', AMapAPI);
// 初始化地图
map = new AMap.Map('amap', {
center: center.value,
zoom: zoom.value,
zooms: [3, 18], // 设置缩放级别范围
zoomEnable: true, // 开启地图缩放
resizeEnable: true, // 是否监控地图容器尺寸变化
});
// 添加定位插件
map.plugin('AMap.Geolocation', function () {
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0,
showMarker: true,
showCircle: true,
panToLocation: true,
});
// 获取当前位置
geolocation.getCurrentPosition(function (status, result) {
if (status === 'complete') {
const { lng, lat } = result.position;
center.value = [lng, lat];
map.setCenter(center.value);
} else {
console.error('Failed to get current position:', result);
}
});
map.addControl(geolocation);
});
// 添加标记
const marker = new AMap.Marker({
position: center.value,
title: '这里是标记点',
});
marker.setMap(map);
} catch (error) {
console.error('Failed to load AMap:', error);
}
};
// 搜索位置
const searchLocation = () => {
if (!searchKeyword.value) return;
AMapLoader.load({
key: apiKey,
version: '2.0',
plugins: ['AMap.PlaceSearch'],
}).then((AMap) => {
const placeSearch = new AMap.PlaceSearch({
pageSize: 5, // 每页显示结果数量
pageIndex: 1, // 页码
city: '全国', // 全国范围搜索
citylimit: true, // 是否强制限制在当前城市
map: map, // 展现结果的地图实例
panel: 'panel', // 结果列表的HTML容器id
});
// 关键字搜索
placeSearch.search(searchKeyword.value);
});
};
// 在组件挂载前加载地图
onMounted(() => {
loadAMap();
});
// 在组件销毁前卸载地图
onBeforeUnmount(() => {
map && map.destroy();
});
</script>
<style scoped>
/* 根据实际需求调整样式 */
#amap {
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 10px;
}
/* 定义搜索结果列表样式 */
#panel {
position: absolute;
top: 100px;
left: 10px;
max-width: 300px;
background-color: #fff;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
</style>
src/page/register.vue 0 → 100644
<!-- src/views/Register.vue -->
<template>
<div class="register-container">
<img class="logo" src="@/assets/logo.png" alt="Logo" />
<van-form class="register-form" @submit="onSubmit" ref="registerForm">
<van-field v-model="username" label="用户名" placeholder="请输入用户名" required />
<van-field v-model="email" type="email" label="邮箱" placeholder="请输入邮箱" required />
<van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required />
<van-field v-model="confirmPassword" type="password" label="确认密码" placeholder="请确认密码" required />
<van-button type="primary" native-type="submit" class="register-button" block>
注册
</van-button>
</van-form>
</div>
</template>
<script>
import { ref } from 'vue';
import 'vant/lib/index.css';
import { Form, Button, Field } from 'vant';
export default {
setup() {
const username = ref('');
const email = ref('');
const password = ref('');
const confirmPassword = ref('');
const onSubmit = async () => {
try {
// 模拟注册请求（实际中替换为真实的注册逻辑）
const response = await fakeRegister();
// 如果注册成功，可以导航到登录页面或其他页面
console.log('注册成功:', response);
// 例子：导航到登录页面
this.$router.push('/login');
} catch (error) {
// 处理注册错误
console.error('注册失败:', error);
}
};
const fakeRegister = () => {
// 模拟注册请求（实际中替换为真实的注册逻辑）
return new Promise((resolve) => {
setTimeout(() => {
resolve({ userId: 456, username: username.value, email: email.value });
}, 1000); // 模拟延迟
});
};
return {
username,
email,
password,
confirmPassword,
onSubmit,
};
},
};
</script>
<style scoped>
/* 添加组件特定的样式 */
.register-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: url("@/assets/background.jpg") center center/cover no-repeat;
}
.logo {
width: 100px;
height: 100px;
margin-bottom: 20px;
border-radius: 50%;
transition: transform 0.3s ease-in-out;
}
.logo:hover {
transform: rotate(360deg);
}
.register-form {
width: 80%;
max-width: 600px;
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out;
}
.register-form:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.register-button {
margin-top: 20px;
transition: background-color 0.3s ease-in-out;
}
.register-button:hover {
background-color: #4CAF50;
}
</style>
\ No newline at end of file
src/router/index.js
......@@ -21,6 +21,28 @@ const routes = [
name:"mine",
component:()=>import("@/page/mine/mine.vue")
},
{
path:"/login",
name:"login",
component:()=>import("@/page/login.vue")
},
{
path:"/register",
name:"register",
component:()=>import("@/page/register.vue")
},
{
path:"/forgot-password",
name:"forgot-password",
component:()=>import("@/page/register.vue")
},
{
path:"/orders",
name:"orders",
component:()=>import("@/page/mine/orders.vue"),
props: (route) => ({ status: route.query.status }),
},
];
......
vite.config.js
......@@ -9,6 +9,10 @@ console.log(pathResolve,"111")
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// server:{
// host: '192.168.43.92',
// port: 8001
// },
resolve:{
alias:[{find:"@",replacement:pathResolve("src")}]
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment