Compare commits
No commits in common. 'master' and 'develop' have entirely different histories.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 475 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 945 KiB |
|
Before Width: | Height: | Size: 210 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 574 KiB After Width: | Height: | Size: 667 KiB |
|
Before Width: | Height: | Size: 730 KiB |
|
Before Width: | Height: | Size: 388 KiB |
|
Before Width: | Height: | Size: 249 KiB |
|
Before Width: | Height: | Size: 543 KiB |
|
Before Width: | Height: | Size: 632 KiB |
|
Before Width: | Height: | Size: 36 KiB |
@ -1,2 +0,0 @@
|
||||
[LocalizedFileNames]
|
||||
ÐèÇóÆ¥Åä (1).png=@ÐèÇóÆ¥Åä (1),0
|
||||
|
Before Width: | Height: | Size: 745 KiB |
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 760 KiB |
|
Before Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 445 KiB |
|
Before Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 41 KiB |
@ -1,13 +0,0 @@
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = crlf
|
||||
indent_size = 4
|
||||
indent_style = space
|
||||
insert_final_newline = false
|
||||
tab_width = 4
|
||||
|
||||
|
||||
[*.vue]
|
||||
indent_size = 2
|
||||
tab_width = 2
|
||||
ij_vue_indent_children_of_top_level = template, script, style
|
||||
@ -1,30 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
@ -1,29 +0,0 @@
|
||||
# walktofree
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
@ -1,5 +0,0 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,27 +0,0 @@
|
||||
{
|
||||
"name": "walktofree",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"@vuepic/vue-datepicker": "^8.6.0",
|
||||
"axios": "^1.6.8",
|
||||
"echarts": "^5.5.1",
|
||||
"element-china-area-data": "^6.1.0",
|
||||
"element-plus": "^2.7.3",
|
||||
"sass": "^1.77.6",
|
||||
"vue": "^3.4.27",
|
||||
"vue-router": "^4.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vue/cli-service": "^5.0.8",
|
||||
"vite": "^5.2.8"
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 4.2 KiB |
@ -1,17 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 208 KiB |
@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +0,0 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const baseURL = 'http://192.168.243.35:9000'
|
||||
|
||||
export const login = (data) => {
|
||||
return axios.post(`${baseURL}/Login/login`, data)
|
||||
}
|
||||
|
||||
export const register = (data) => {
|
||||
return axios.post(`${baseURL}/Login/register`, data)
|
||||
}
|
||||
@ -1,86 +0,0 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 276 B |
@ -1,35 +0,0 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<label for="user-input"></label>
|
||||
<input type="text" id="user-input" v-model="userInput" placeholder="请输入">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInput: '', // 初始化为空字符串
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,140 +0,0 @@
|
||||
<template>
|
||||
<div class="layout-container">
|
||||
<div class="header" :style="{ backgroundColor: headerColor, height: headerHeight}">
|
||||
<div class="header-content">
|
||||
<div class="main-title">FreeToGo 自由同行-众包导游</div>
|
||||
<h1 class="sub-title">{{ title }}</h1> <!-- 一级标题 -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 导航栏使用 position: fixed 以确保它固定在页面的最左侧 -->
|
||||
<nav class="navbar" :style="{ backgroundColor: headerColor, width: navWidth, position: 'fixed', top: '80px', height: 'calc(100vh - 80px)', left: '0' }">
|
||||
<ul>
|
||||
<li v-for="(link, index) in links" :key="index">
|
||||
<router-link :to="link.path" class="nav-link">{{ link.name }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- 内容区域使用 margin-left 来保证不被导航栏覆盖 -->
|
||||
<div class="content" :style="{ marginLeft: navWidth, paddingTop: headerHeight }">
|
||||
<slot></slot> <!-- 插槽用于插入不同页面的主体内容 -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Layout',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '页面标题'
|
||||
},
|
||||
links: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
headerColor: {
|
||||
type: String,
|
||||
default: 'gray' // 你可以设置任何有效的CSS颜色值
|
||||
},
|
||||
navWidth: {
|
||||
type: String,
|
||||
default: '200px' // 导航栏的宽度
|
||||
},
|
||||
headerHeight: {
|
||||
type: String,
|
||||
default: '80px' // 标题栏的高度
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:root {
|
||||
--header-height: 80px;
|
||||
--nav-width: 200px;
|
||||
}
|
||||
|
||||
.layout-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
background-image: url('../data/picture/loginBackground.jpg'); /* 替换为标题栏背景图片的URL */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--header-height);
|
||||
}
|
||||
|
||||
.main-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: var(--header-height);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: var(--nav-width);
|
||||
z-index: 5;
|
||||
padding: 10px 0;
|
||||
list-style-type: none;
|
||||
overflow-y: auto;
|
||||
background-image: url('../data/picture/loginBackground.jpg'); /* 替换为导航栏背景图片的URL */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.navbar li {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 5px 15px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link.router-link-active {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
margin-left: var(--nav-width);
|
||||
padding-top: var(--header-height);
|
||||
background-image: url('../data/picture/mainBackground.jpg'); /* 替换为内容区域背景图片的URL */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<div class="footer-nav">
|
||||
<div class="button-with-icon" @click="gotohome()">
|
||||
<el-icon><House /></el-icon>
|
||||
<span>首页</span>
|
||||
</div>
|
||||
<div class="button-with-icon" @click="gotomessage()()">
|
||||
<el-icon><ChatDotSquare /></el-icon>
|
||||
<span>消息</span>
|
||||
</div>
|
||||
<div class="button-with-icon" @click="gotomine()">
|
||||
<el-icon><User /></el-icon>
|
||||
<span>我的</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Home',
|
||||
methods: {
|
||||
gotohome() {
|
||||
this.$router.push('/home');
|
||||
},
|
||||
gotomessage() {
|
||||
this.$router.push('/message');
|
||||
},
|
||||
gotomine() {
|
||||
this.$router.push('/mine');
|
||||
},
|
||||
gotoSearchPage() {
|
||||
this.$router.push('/searchPage');
|
||||
},
|
||||
gotoAddDemandPage() {
|
||||
this.$router.push('/addDemandPage');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.footer-nav {
|
||||
/* 定义底部导航的样式 */
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 10px;
|
||||
background-color: #f5f5f5; /* 示例背景色 */
|
||||
}
|
||||
|
||||
.button-with-icon {
|
||||
/* 定义按钮的样式 */
|
||||
flex: 1;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
background-color: #d5d5d5;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-with-icon:hover {
|
||||
background-color: #aaaaaa;
|
||||
}
|
||||
</style>
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-carousel :interval="4000" arrow="always">
|
||||
<el-carousel-item v-for="(item, index) in imagePaths" :key="index">
|
||||
<img :src="item" alt = "描述图像的文本">
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const imagePaths = ref([
|
||||
'https://dimg04.c-ctrip.com/images/0102p12000828jmogCF2E_C_1600_1200.jpg',
|
||||
'https://pic.kuaizhan.com/g3/b7/18/7a16-bad5-4d28-b5aa-571710c674cb36',
|
||||
'https://img.shetu66.com/2023/07/11/1689058469100908.png'
|
||||
]);
|
||||
|
||||
return {
|
||||
imagePaths
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||
<path
|
||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@ -1,19 +0,0 @@
|
||||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
class="iconify iconify--mdi"
|
||||
width="24"
|
||||
height="24"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
@ -1,45 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watchEffect } from 'vue'
|
||||
import { format } from 'date-fns'
|
||||
const startDateValue = ref(format(new Date(), 'yyyy-MM-dd'))
|
||||
const endDateValue = ref(format(new Date(), 'yyyy-MM-dd'))
|
||||
watchEffect(() => {
|
||||
console.log('startDateValue:', startDateValue.value)
|
||||
console.log('endDateValue:', endDateValue.value)
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<VueDatePicker
|
||||
placeholder="请选择预计出发日期"
|
||||
:min-date="new Date()"
|
||||
format="yyyy-MM-dd"
|
||||
v-model="startDateValue" />
|
||||
<VueDatePicker
|
||||
placeholder="请选择预计返回日期"
|
||||
:min-date="new Date()"
|
||||
format="yyyy-MM-dd"
|
||||
v-model="endDateValue" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watchEffect } from 'vue'
|
||||
import { format } from 'date-fns'
|
||||
const startDateValue = ref(format(new Date(), 'yyyy-MM-dd'))
|
||||
const endDateValue = ref(format(new Date(), 'yyyy-MM-dd'))
|
||||
watchEffect(() => {
|
||||
console.log('startDateValue:', startDateValue.value)
|
||||
console.log('endDateValue:', endDateValue.value)
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<VueDatePicker
|
||||
placeholder="请选择预计出发日期"
|
||||
:min-date="new Date()"
|
||||
format="yyyy-MM-dd"
|
||||
v-model="startDateValue" />
|
||||
<VueDatePicker
|
||||
placeholder="请选择预计返回日期"
|
||||
:min-date="new Date()"
|
||||
format="yyyy-MM-dd"
|
||||
v-model="endDateValue" />
|
||||
</template>
|
||||
@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<div style="height:100vh;width:100%;">
|
||||
<!-- 标题栏 -->
|
||||
<div class="header" style="height: 11.11%;">
|
||||
<h1>FreeToGo 自由同行-众包导游</h1>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<aside class="sidebar" style="position: absolute; top: 11.11%; height: 88.89%;">
|
||||
<!-- ...导航栏的其余部分... -->
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<div class="main-content" style="margin-left: 11.11%; height: 88.88%;">
|
||||
<!-- 你的主要内容 -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineComponent, ref, onMounted, nextTick } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
// 导航栏的链接数据和逻辑
|
||||
const links = ref([
|
||||
{ to: '/home', text: '首页' },
|
||||
{ to: '/mine', text: '个人信息' },
|
||||
{ to: '/addDemand', text: '添加出行' },
|
||||
{ to: '/order', text: '历史订单' },
|
||||
]);
|
||||
|
||||
const route = useRoute();
|
||||
const activeLink = ref(route.path);
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
activeLink.value = route.path;
|
||||
});
|
||||
});
|
||||
|
||||
function isActive(path) {
|
||||
return path === activeLink.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
background-color: #13202d;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
/* ...其余样式... */
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #000000;
|
||||
width: 11.11%; /* 根据页面布局调整 */
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
/* ...其余样式... */
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* ...其余样式... */
|
||||
|
||||
.main-content {
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
left: 11.11%; /* 导航栏宽度 */
|
||||
width: 88.89%; /* 减去导航栏宽度 */
|
||||
/* ...其余样式... */
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +0,0 @@
|
||||
export type AreaList = {
|
||||
code: string;
|
||||
level: number;
|
||||
name: string;
|
||||
areaList: AreaList[];
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 787 KiB |
|
Before Width: | Height: | Size: 223 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 406 KiB |
|
Before Width: | Height: | Size: 4.4 MiB |
|
Before Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 266 KiB |
|
Before Width: | Height: | Size: 923 KiB |
|
Before Width: | Height: | Size: 188 KiB |
@ -1,18 +0,0 @@
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import ElementPlus from 'element-plus';
|
||||
import 'element-plus/theme-chalk/index.css';
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
import '@vuepic/vue-datepicker/dist/main.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
|
||||
|
||||
const app = createApp(App);
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
app.use(ElementPlus);
|
||||
app.use(router);
|
||||
app.component('VueDatePicker', VueDatePicker);
|
||||
app.mount('#app');
|
||||
@ -1,167 +0,0 @@
|
||||
<template>
|
||||
<div style="height:100vh;width:100%;">
|
||||
<el-container class="fullScreen">
|
||||
<el-header class="header"><h1>FreeToGo 自由同行-众包导游</h1></el-header>
|
||||
<el-container>
|
||||
<el-aside width="200px" class="nav">
|
||||
<ul>
|
||||
<li>
|
||||
<RouterLink to="/markdown" active-class="active">MD编辑器</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/tree" active-class="active">树状图</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/svg" active-class="active">SVG</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/todo" active-class="active">TodoMVC</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/list" active-class="active">动效列表</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/blur" active-class="active">模糊提示框</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<!-- 左边2/3的上容器 -->
|
||||
<div class="container-style">上容器1</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<!-- 左边2/3的下容器 -->
|
||||
<div class="container-style">下容器2</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<!-- 右边1/3的容器 -->
|
||||
<div class="container-style">右边容器3</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0
|
||||
}
|
||||
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #13202d;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-color: #2b3642;
|
||||
width: 100px;
|
||||
height: 95vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
padding: 1rem;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav li a {
|
||||
display: block;
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.nav li a:hover, .active {
|
||||
background-color: #8bb9ed;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.el-aside {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fullScreen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.el-header, .el-aside, .el-main {
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,146 +0,0 @@
|
||||
<template>
|
||||
<Layout :title="title" :links="computedLinks">
|
||||
<div class="user-feedback">
|
||||
<!-- 输入评价 -->
|
||||
<div class="feedback-input">
|
||||
<h2>行程评价</h2>
|
||||
<form>
|
||||
<textarea id="ebody" v-model.trim="evaluation.ebody" rows="4" cols="50"></textarea>
|
||||
<button type="submit" @click="send">发布评价</button>
|
||||
</form>
|
||||
</div>
|
||||
<el-space direction="vertical">
|
||||
<el-row>
|
||||
<el-text>星级评价</el-text>
|
||||
<el-rate class="ml-1"
|
||||
v-model="evaluation.satisfaction"
|
||||
:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
|
||||
show-text
|
||||
@change="handleRateChange"
|
||||
clearable />
|
||||
</el-row>
|
||||
</el-space>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Layout from '../components/Layout.vue';
|
||||
|
||||
export default {
|
||||
props: ['orderId'],
|
||||
components: {
|
||||
Layout,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ebody: '',
|
||||
satisfaction:'',
|
||||
did:'',
|
||||
evaluation: {}, // 添加一个用于存储评价信息的变量
|
||||
phone: sessionStorage.getItem('phone') || '',
|
||||
title: '行程评价',
|
||||
links: [{ name: '首页', path: '/home' }, { name: '个人信息', path: '/mine' }, { name: '添加出行', path: '/addDemandPage' },{ name: '历史出行', path: '/demandList' }],
|
||||
user: {
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
computedLinks() {
|
||||
// 根据用户角色返回不同的链接数组
|
||||
return this.user.membertype === true
|
||||
? this.links.concat([{ name: '服务发布', path: '/addServe' },{ name: '导游记录', path: '/serverList' }])
|
||||
: this.links.concat([{name:'注册导游',path:'/registerGuide'}]);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
send() {
|
||||
axios.post('/serve/evaluate/addEvaluation', {
|
||||
did: this.orderId,
|
||||
satisfaction: this.evaluation.satisfaction,
|
||||
ebody: this.evaluation.ebody,
|
||||
}, {
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(response => {
|
||||
// 处理成功发送评价的情况
|
||||
location.reload();
|
||||
}).catch(error => {
|
||||
// 处理发送评价失败的情况
|
||||
console.error('评价发送失败', error);
|
||||
});
|
||||
},
|
||||
fetchEvaluation() {
|
||||
axios.get(`/serve/users/getByPhone?phone=${this.phone}`)
|
||||
.then(response => {
|
||||
this.user = response.data
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user:', error);
|
||||
});
|
||||
axios.get(`/serve/evaluate/getEvaluation?eid=${this.orderId}`)
|
||||
.then(response => {
|
||||
this.evaluation = response.data;// 将获取到的评价信息存储到 evaluation 变量中
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取评价信息失败', error);
|
||||
});
|
||||
},
|
||||
handleRateChange(satisfaction) {
|
||||
this.evaluation.satisfaction = satisfaction; // 更新星级值
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchEvaluation(); // 在组件挂载时调用 fetchEvaluation 方法获取评价信息
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-feedback {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.feedback-input {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #28a7a3;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: #007bff;
|
||||
color: #003f3f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.submitted-feedback {
|
||||
border-top: 1px solid #a6cfee;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.feedback-item {
|
||||
background-color: #abd4ee;
|
||||
border: 1px solid #c2f1fb;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.feedback-item p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +0,0 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<div class="item-manager">
|
||||
<el-button type="primary" @click="add">Add Item</el-button>
|
||||
<el-button type="danger" @click="onDelete">Delete Item</el-button>
|
||||
<el-scrollbar class="custom-scrollbar" max-height="800px">
|
||||
<div v-for="(item, index) in count" :key="index" class="item-container">
|
||||
<p class="scrollbar-demo-item">{{ item }}</p>
|
||||
</div>
|
||||
<div v-for="review in reviews" :key="review.id" class="review-container">
|
||||
<p class="scrollbar-demo-item">{{ review.content }}</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.scrollbar-demo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
.item-manager {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.custom-scrollbar {
|
||||
width: 100%; /* 根据需要调整滚动条容器的宽度 */
|
||||
border-radius: 8px; /* 添加圆角 */
|
||||
overflow: auto; /* 确保滚动条出现 */
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
|
||||
}
|
||||
|
||||
.scrollbar-demo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
margin: 10px;
|
||||
padding: 0 15px; /* 添加内边距 */
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
transition: background-color 0.3s ease; /* 添加背景色过渡效果 */
|
||||
}
|
||||
|
||||
.item-container,
|
||||
.review-container {
|
||||
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
|
||||
const count = ref(3)
|
||||
const reviews = ref([
|
||||
{ id: 1, content: 'Great product!' },
|
||||
{ id: 2, content: 'Fast shipping!' },
|
||||
{ id: 3, content: 'Excellent customer service!' }
|
||||
])
|
||||
|
||||
const add = () => {
|
||||
count.value++
|
||||
}
|
||||
const onDelete = () => {
|
||||
if (count.value > 0) {
|
||||
count.value--
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,191 +0,0 @@
|
||||
<template>
|
||||
<Layout :title="title" :links="computedLinks">
|
||||
<!-- 将flex-direction改为row以实现水平排列 -->
|
||||
<div class="main-content" :style="{ display: 'flex', flexDirection: 'row' }">
|
||||
<div class="left-container" :style="{ flex: '3', height: 'calc(100vh - 20px)' }">
|
||||
<h2>全国城市旅游热力图</h2>
|
||||
<MapComponent></MapComponent>
|
||||
</div>
|
||||
|
||||
<div class="right-container" :style="{ flex: '1', height: '100vh', marginLeft: '20px' }">
|
||||
<h1>排行榜</h1>
|
||||
<div class="ranking-container">
|
||||
<div v-for="(item, index) in rankingList" :key="index" class="ranking-item">
|
||||
<span class="ranking-number">{{ index + 1 }}.</span>
|
||||
<span class="city-name">{{ item.city }}</span>
|
||||
<span class="visitors-count">{{ item.visitors }}人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Layout from '../components/Layout.vue'; // 确保路径正确
|
||||
import MapComponent from '../components/map.vue';
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: 'HomePage',
|
||||
components: {
|
||||
Layout,
|
||||
MapComponent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: sessionStorage.getItem('phone') || '',
|
||||
title: '首页',
|
||||
links: [{ name: '首页', path: '/home' }, { name: '个人信息', path: '/mine' }, { name: '添加出行', path: '/addDemandPage' },{ name: '历史出行', path: '/demandList' }],
|
||||
user: {
|
||||
},
|
||||
rankingList: [
|
||||
{ city: '广东', visitors: 3 },
|
||||
{ city: '湖南', visitors: 2 },
|
||||
// ...其他城市数据
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
computedLinks() {
|
||||
// 根据用户角色返回不同的链接数组
|
||||
return this.user.membertype === true
|
||||
? this.links.concat([{ name: '服务发布', path: '/addServe' },{ name: '导游记录', path: '/serverList' }])
|
||||
: this.links.concat([{name:'注册导游',path:'/registerGuide'}]);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchUser(this.phone);
|
||||
},
|
||||
methods: {
|
||||
fetchUser(phone) {
|
||||
// 从后端 API 请求
|
||||
axios.get(`/serve/users/getByPhone?phone=${phone}`)
|
||||
.then(response => {
|
||||
this.user = response.data
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user:', error);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 整体页面样式 */
|
||||
.main-content {
|
||||
height: calc(100vh - 80px);
|
||||
padding: 20px;
|
||||
transition: background-color 0.3s; /* 过渡效果 */
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 左侧容器样式 */
|
||||
.left-container {
|
||||
flex: 3;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
transition: box-shadow 0.3s, transform 0.3s; /* 过渡效果 */
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 右侧容器样式 */
|
||||
.right-container {
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
transition: box-shadow 0.3s, transform 0.3s; /* 过渡效果 */
|
||||
}
|
||||
|
||||
/* 排行榜容器样式 */
|
||||
.ranking-container {
|
||||
width: 100%;
|
||||
border: 1px solid #666c6e;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
background-color: #abd4ee;
|
||||
transition: background-color 0.3s; /* 过渡效果 */
|
||||
}
|
||||
|
||||
/* 排行榜项样式 */
|
||||
.ranking-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #28a7a3;
|
||||
transition: background-color 0.3s, transform 0.3s; /* 过渡效果 */
|
||||
}
|
||||
|
||||
.ranking-item:hover {
|
||||
background-color: #e0e2e3;
|
||||
transform: scale(1.02); /* 放大效果 */
|
||||
}
|
||||
|
||||
/* 排行榜序号样式 */
|
||||
.ranking-number {
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
color: #333;
|
||||
transition: color 0.3s; /* 过渡效果 */
|
||||
}
|
||||
|
||||
/* 城市名称样式 */
|
||||
.city-name {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
transition: color 0.3s; /* 过渡效果 */
|
||||
}
|
||||
|
||||
/* 游客数量样式 */
|
||||
.visitors-count {
|
||||
margin-left: 5px;
|
||||
color: #666;
|
||||
transition: color 0.3s; /* 过渡效果 */
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
h1, h2 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
transition: color 0.3s; /* 过渡效果 */
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
.links {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.link {
|
||||
margin-left: 10px;
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s, transform 0.3s; /* 过渡效果 */
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: #0056b3;
|
||||
transform: scale(1.1); /* 放大效果 */
|
||||
}
|
||||
|
||||
/* 页面滚动特效 */
|
||||
.main-content.scrolled {
|
||||
background-color: #e5e5e5; /* 滚动后的背景色 */
|
||||
}
|
||||
|
||||
.left-container.scrolled,
|
||||
.right-container.scrolled {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 滚动后的阴影效果 */
|
||||
transform: translateY(-10px); /* 滚动后的位移效果 */
|
||||
}
|
||||
|
||||
/* 使用JavaScript监听滚动事件来添加.scrolled类 */
|
||||
</style>
|
||||
@ -1,264 +0,0 @@
|
||||
<template>
|
||||
<Layout :title="title" :links="computedLinks">
|
||||
<div class="form-container">
|
||||
<form class="order-form">
|
||||
<div class="content-section">
|
||||
<h1><i class="fas fa-map-marker-alt"></i> 订单详情</h1>
|
||||
<p class="trip-info">目的地: {{ list.city }}</p>
|
||||
<p class="trip-info">开始时间: {{ list.departureDate }}</p>
|
||||
<p class="trip-info">结束时间: {{ list.endDate }}</p>
|
||||
<p class="trip-info">创建时间: {{ list.createTime }}</p>
|
||||
<p class="trip-info">订单号: {{ list.did }}</p>
|
||||
<p class="trip-info">备注: {{ list.message }}</p>
|
||||
<p class="status-info">
|
||||
当前状态:
|
||||
<span v-if="list.status === 0" class="matching">匹配中</span>
|
||||
<span v-else-if="list.status === 1" class="processing">处理中</span> <!-- 修改了状态文本以区分状态1 -->
|
||||
<span v-else-if="list.status === 2" class="success">匹配成功</span>
|
||||
<span v-else-if="list.status === 3" class="completed">已完成</span>
|
||||
<span v-else class="unknown">未知状态</span>
|
||||
</p>
|
||||
|
||||
<div v-if="list.status === 0 || list.status === 1">
|
||||
<button class="action-button" @click="goToMatchDetail(orderId)">匹配导游</button>
|
||||
<button class="action-button" @click="goToDemandMatched(orderId)">导游申请</button>
|
||||
<button class="action-button cancel-button" @click="cancelTrip(orderId)">取消行程</button>
|
||||
</div>
|
||||
|
||||
<div v-if="list.status === 2">
|
||||
<button class="action-button cancel-button" @click="cancel(orderId)">取消出行</button>
|
||||
<button class="action-button complete-button" @click="over(orderId)">行程完成</button>
|
||||
</div>
|
||||
|
||||
<div v-if="list.status === 3">
|
||||
<button class="action-button" @click="goToEvaluateTrip(orderId)">行程评价</button>
|
||||
<button class="action-button cancel-button" @click="deleteOrder(orderId)">删除订单</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 基本布局和间距 */
|
||||
.content-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.trip-info {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 标题和图标样式 */
|
||||
h1 {
|
||||
font-size: 36px; /* or any size you prefer */
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.action-button {
|
||||
background-color: #007bff;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.cancel-button, .delete-button {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.cancel-button:hover, .delete-button:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
.complete-button {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.complete-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
/* 状态文本样式 */
|
||||
.status-info span {
|
||||
margin-right: 15px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.matching {
|
||||
background-color: #ffc107;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.processing {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.completed {
|
||||
background-color: #17a2b8;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.unknown {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 放大字体 */
|
||||
.content-section, .trip-info, .status-info span, .action-button {
|
||||
font-size: 18px;
|
||||
}
|
||||
.content-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start; /* align items at the start (top) */
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: 50%;
|
||||
margin: 0 auto; /* Center the container horizontally */
|
||||
background-color: #fff; /* White background color */
|
||||
padding: 20px; /* Add some padding around the form */
|
||||
}
|
||||
|
||||
.order-form {
|
||||
width: 100%; /* Make the form occupy 100% of the container's width */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Layout from '../components/Layout.vue';
|
||||
|
||||
export default {
|
||||
props: ['orderId'],
|
||||
components: {
|
||||
Layout,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: sessionStorage.getItem('phone') || '',
|
||||
list: [],
|
||||
title: '订单详情',
|
||||
links: [{ name: '首页', path: '/home' }, { name: '个人信息', path: '/mine' }, { name: '添加出行', path: '/addDemandPage' },{ name: '历史出行', path: '/demandList' }],
|
||||
user: {
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
computedLinks() {
|
||||
// 根据用户角色返回不同的链接数组
|
||||
return this.user.membertype === true
|
||||
? this.links.concat([{ name: '服务发布', path: '/addServe' },{ name: '导游记录', path: '/serverList' }])
|
||||
: this.links.concat([{name:'注册导游',path:'/registerGuide'}]);
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
// 在组件创建后立即发送请求
|
||||
axios.get(`/serve/SendDemand/demand?did=${this.orderId}`)
|
||||
.then(response => {
|
||||
this.list = response.data
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user:', error);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
goToMatchDetail(orderId) {
|
||||
this.$router.push({ name: 'MatchDetail', params: { orderId } });
|
||||
},
|
||||
goToDemandMatched(orderId) {
|
||||
this.$router.push({ name: 'DemandMatched', params: { orderId } });
|
||||
},
|
||||
goToEvaluateTrip(orderId) {
|
||||
this.$router.push({ name: 'Evaluation', params: { orderId } });
|
||||
},
|
||||
cancel(orderId) {
|
||||
const did = parseInt(this.orderId, 10);
|
||||
axios.post(`/serve/DemandMatch/refuse`,{did:did})
|
||||
.then(response => {
|
||||
if(response.data == 1){
|
||||
alert('取消成功');
|
||||
location.reload();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user:', error);
|
||||
});
|
||||
},
|
||||
cancelTrip(orderId) {
|
||||
const did = parseInt(this.orderId, 10);
|
||||
axios.post(`/serve/demands/delbyid`,{did:did})
|
||||
.then(response => {
|
||||
if(response.data == 1){
|
||||
alert('取消成功');
|
||||
this.$router.push('/demandlist');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user:', error);
|
||||
});
|
||||
},
|
||||
over(orderId) {
|
||||
const did = parseInt(this.orderId, 10);
|
||||
axios.post(`/serve/DemandMatch/finish`,{did:did})
|
||||
.then(response => {
|
||||
if(response.data == 1){
|
||||
location.reload();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user:', error);
|
||||
});
|
||||
},
|
||||
deleteOrder(orderId) {
|
||||
const did = parseInt(this.orderId, 10);
|
||||
axios.post(`/serve/DemandMatch/delete`,{did:did})
|
||||
.then(response => {
|
||||
if(response.data == 1){
|
||||
alert('删除成功');
|
||||
this.$router.push('/demandlist');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user:', error);
|
||||
});
|
||||
},
|
||||
returnList() {
|
||||
this.$router.push('/demandlist');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,220 +0,0 @@
|
||||
<template>
|
||||
<Layout :title="title" class="title" :links="computedLinks">
|
||||
<div class="container">
|
||||
<div class="form-group">
|
||||
<label for="experience">有无相关经历:</label>
|
||||
<!-- 单选按钮组使用flex布局在同一行显示并居中 -->
|
||||
<div class="radio-group">
|
||||
<div class="radio-label">
|
||||
<input type="radio" id="has-experience-yes" value="true" v-model="registerToGuide.re" required>
|
||||
<label for="has-experience-yes">有</label>
|
||||
</div>
|
||||
<div class="radio-label">
|
||||
<input type="radio" id="has-experience-no" value="false" v-model="registerToGuide.re">
|
||||
<label for="has-experience-no">无</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="rsd">居住地区:</label>
|
||||
<input type="text" id="rsd" v-model="registerToGuide.rsd">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="familiar-area">熟悉区域:</label>
|
||||
<textarea id="familiar-area" v-model="registerToGuide.fa"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="syns">个人简介:</label>
|
||||
<textarea id="syns" v-model="registerToGuide.syns"></textarea>
|
||||
</div>
|
||||
<button @click="Submit()">提交申请</button>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Layout from '../components/Layout.vue'
|
||||
|
||||
export default {
|
||||
name: 'ApplyGuide',
|
||||
data() {
|
||||
return {
|
||||
phone: sessionStorage.getItem('phone') || '',
|
||||
title: '导游资格申请',
|
||||
links: [{ name: '首页', path: '/home' }, { name: '个人信息', path: '/mine' }, { name: '添加出行', path: '/addDemandPage' }, { name: '历史出行', path: '/demandList' }],
|
||||
user: {
|
||||
role: 'member',
|
||||
},
|
||||
registerToGuide: {
|
||||
uid: 0,
|
||||
re: '',
|
||||
rsd: '',
|
||||
fa: '',
|
||||
syns: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
computedLinks() {
|
||||
return this.user.role === 'admin'
|
||||
? this.links.concat([{ name: '服务发布', path: '/addServe' }, { name: '导游记录', path: '/serveList' }])
|
||||
: this.links.concat([{ name: '注册导游', path: '/registerGuide' }]);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchUser(this.phone);
|
||||
},
|
||||
methods: {
|
||||
fetchUser(phone) {
|
||||
axios.get(`/serve/users/getByPhone?phone=${phone}`)
|
||||
.then(response => {
|
||||
this.user = response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user:', error);
|
||||
});
|
||||
},
|
||||
Submit() {
|
||||
axios.get(`/serve/users/getUid?phone=${this.phone}`)
|
||||
.then(response => {
|
||||
this.registerToGuide.uid = response.data;
|
||||
axios.post(`/serve/users/registerToGuide`, { registerToGuide: this.registerToGuide })
|
||||
.then(response => {
|
||||
if (response.data == 1) {
|
||||
alert("申请成功!");
|
||||
this.$router.push('/addServe');
|
||||
} else {
|
||||
alert("申请未通过!");
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error posting registration:', error);
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user UID:', error);
|
||||
});
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Layout,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
/* 页面基础样式 */
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 表单容器样式 */
|
||||
form {
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 表单组样式 */
|
||||
.form-group {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 单选按钮组样式 */
|
||||
.radio-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between; /* 使得单选按钮平均分布在父元素中 */
|
||||
width: 10%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 单选按钮样式 */
|
||||
.radio-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 15px; /* 单选按钮之间的间距 */
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* 输入框、文本区域样式 */
|
||||
input[type="text"],
|
||||
textarea {
|
||||
width: 60%;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 5px; /* 调整输入框与标题的间距 */
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
button {
|
||||
width: 30%;
|
||||
padding: 10px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-top: 20px;
|
||||
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
label {
|
||||
font-weight: bold; /* 标题加粗 */
|
||||
font-size: 18px; /* 放大标题字体 */
|
||||
margin-bottom: 10px; /* 标题与输入框之间的间距 */
|
||||
}
|
||||
|
||||
/* 表单组样式调整 */
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;/* 标题和输入框左对齐 */
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 单选按钮组样式调整 */
|
||||
.radio-group {
|
||||
width: 40%; /* 根据需要调整宽度 */
|
||||
justify-content: space-around; /* 单选按钮均匀分布 */
|
||||
}
|
||||
|
||||
/* 悬停效果、选中效果和错误信息样式保持不变 */
|
||||
</style>
|
||||
@ -1,153 +0,0 @@
|
||||
<template>
|
||||
<Layout :title="title" :links="computedLinks">
|
||||
<h1>订单</h1>
|
||||
<div class="server-details">
|
||||
<h2>订单详情</h2>
|
||||
<p>目的地: {{ list.city }}</p>
|
||||
<p>开始时间: {{ list.departureDate }}</p>
|
||||
<p>结束时间: {{ list.endDate }}</p>
|
||||
<p>创建时间: {{ list.createTime }}</p>
|
||||
<p>备注: {{ list.message }}</p>
|
||||
<p>当前状态:
|
||||
<span v-if="list.status === 0">匹配中</span>
|
||||
<span v-else-if="list.status === 1">匹配中</span>
|
||||
<span v-else-if="list.status === 2">匹配成功</span>
|
||||
<span v-else-if="list.status === 3">已完成</span>
|
||||
<span v-else>未知状态</span>
|
||||
</p>
|
||||
<div>
|
||||
<button v-if="list.status === 0" @click="goToServerMatch(serverId)">查看详情</button>
|
||||
<button v-if="list.status === 1" @click="goToServerMatch(serverId)">查看详情</button>
|
||||
</div>
|
||||
<div>
|
||||
<button v-if="list.status === 0" @click="goToServerMatched(serverId)">查看申请</button>
|
||||
<button v-if="list.status === 1" @click="goToServerMatched(serverId)">查看申请</button>
|
||||
</div>
|
||||
<div>
|
||||
<button v-if="list.status === 0" @click="cancelTrip(serverId)">取消服务</button>
|
||||
<button v-if="list.status === 1" @click="cancelTrip(serverId)">取消服务</button>
|
||||
</div>
|
||||
<div>
|
||||
<button v-if="list.status === 2" @click="cancel(serverId)">取消服务</button>
|
||||
</div>
|
||||
<div>
|
||||
<button v-if="list.status === 3" @click="deleteOrder(serverId)">删除订单</button>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.returnList {
|
||||
/* 定义返回按钮的样式 */
|
||||
position: fixed; /* 使按钮位置固定 */
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
margin: 0;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #ccc;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.returnList:hover {
|
||||
background-color: #aaaaaa;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Layout from '../components/Layout.vue'
|
||||
|
||||
export default {
|
||||
props: ['serverId'],
|
||||
components: {
|
||||
Layout,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: sessionStorage.getItem('phone') || '',
|
||||
list: [],
|
||||
title: '订单详情',
|
||||
links: [{ name: '首页', path: '/home' }, { name: '个人信息', path: '/mine' }, { name: '添加出行', path: '/addDemandPage' },{ name: '历史出行', path: '/demandList' }],
|
||||
user: {
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
computedLinks() {
|
||||
// 根据用户角色返回不同的链接数组
|
||||
return this.user.membertype === true
|
||||
? this.links.concat([{ name: '服务发布', path: '/addServe' },{ name: '导游记录', path: '/serverList' }])
|
||||
: this.links.concat([{name:'注册导游',path:'/registerGuide'}]);
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
// 在组件创建后立即发送请求
|
||||
axios.get(`/serve/users/getByPhone?phone=${this.phone}`)
|
||||
.then(response => {
|
||||
this.user = response.data
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user:', error);
|
||||
});
|
||||
axios.get(`/serve/guideService/findbyid?gid=${this.serverId}`)
|
||||
.then(response => {
|
||||
this.list = response.data
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user:', error);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
goToServerMatch(serverId) {
|
||||
this.$router.push({ name: 'ServerMatch', params: { serverId } });
|
||||
},
|
||||
goToServerMatched(serverId) {
|
||||
this.$router.push({ name: 'ServerMatched', params: { serverId } });
|
||||
},
|
||||
cancel(serverId) {
|
||||
const gid = parseInt(this.serverId, 10);
|
||||
axios.post(`/serve/GuideMatch/refuse`,{gid:gid})
|
||||
.then(response => {
|
||||
if(response.data == 1){
|
||||
alert('取消成功');
|
||||
location.reload();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user:', error);
|
||||
});
|
||||
},
|
||||
cancelTrip(serverId) {
|
||||
const gid = parseInt(this.serverId, 10);
|
||||
axios.post(`/serve/guideService/delbyid`,{gid:gid})
|
||||
.then(response => {
|
||||
if(response.data == 1){
|
||||
alert('取消成功');
|
||||
this.$router.push('/serverList')
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user:', error);
|
||||
});
|
||||
},
|
||||
deleteOrder(serverId) {
|
||||
const gid = parseInt(this.serverId, 10);
|
||||
axios.post(`/serve/GuideMatch/delete`,{gid:gid})
|
||||
.then(response => {
|
||||
if(response.data == 1){
|
||||
alert('删除成功');
|
||||
this.$router.push('/serverList')
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching user:', error);
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,128 +0,0 @@
|
||||
<template>
|
||||
<Layout :title="title" :links="computedLinks">
|
||||
<div class="order-container">
|
||||
<div
|
||||
v-for="(list, index) in lists"
|
||||
:key="list.gid"
|
||||
class="order-card"
|
||||
@click="goToServerDetails(list.gid)"
|
||||
>
|
||||
<div class="order-header">
|
||||
<h3>{{ list.city }}</h3>
|
||||
</div>
|
||||
<div class="order-body">
|
||||
<p>开始时间: {{ list.departureDate }}</p>
|
||||
<p>结束时间: {{ list.endDate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Layout from '../components/Layout.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Layout
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
phone: sessionStorage.getItem('phone') || '',
|
||||
lists: [],
|
||||
title: '导游记录',
|
||||
links: [{ name: '首页', path: '/home' }, { name: '个人信息', path: '/mine' }, { name: '添加出行', path: '/addDemandPage' },{ name: '历史出行', path: '/demandList' }],
|
||||
user: {
|
||||
},
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
// 在组件创建后立即发送请求
|
||||
try {
|
||||
const response = await axios.get(`/serve/SendGuideService/sendAllGuideService?phone=${this.phone}`);
|
||||
this.lists = response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching guide services:', error.response || error.message);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.get(`/serve/users/getByPhone?phone=${this.phone}`);
|
||||
this.user = response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching user data:', error.response || error.message);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
computedLinks() {
|
||||
// 根据用户角色返回不同的链接数组
|
||||
return this.user.membertype === true
|
||||
? this.links.concat([{ name: '服务发布', path: '/addServe' },{ name: '导游记录', path: '/serverList' }])
|
||||
: this.links.concat([{name:'注册导游',path:'/registerGuide'}]);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToServerDetails(serverId) {
|
||||
this.$router.push({ name: 'ServerDetail', params: { serverId } });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.trip-info p {
|
||||
margin: 8px 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 订单容器样式 */
|
||||
.order-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 订单卡片样式 */
|
||||
.order-card {
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
width: calc(33% - 40px);
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.order-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 订单头部和内容样式 */
|
||||
.order-header h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 20px;
|
||||
color: #007BFF;
|
||||
}
|
||||
|
||||
.order-body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.order-card {
|
||||
width: calc(50% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.order-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue