Compare commits
81 Commits
fangxiaoti
...
master
| Author | SHA1 | Date |
|---|---|---|
 zhanglinhao
|
547b61315e | 1 year ago |
|
zhanglinhao
|
b6b7400b9b | 1 year ago |
|
zhanglinhao
|
91c51c5fbd | 1 year ago |
|
zhanglinhao
|
bbc5dc4227 | 1 year ago |
|
zhanglinhao
|
89c2fba28a | 1 year ago |
|
zhanglinhao
|
bfa49ec0eb | 1 year ago |
|
zhanglinhao
|
5fdb68fa9c | 1 year ago |
|
zhanglinhao
|
db3b54eac6 | 1 year ago |
 zcx
|
bbba1c5420 | 1 year ago |
|
zhanglinhao
|
79b858112b | 1 year ago |
|
zhanglinhao
|
c5a815b054 | 1 year ago |
|
zcx
|
5a799f95c5 | 1 year ago |
|
zhanglinhao
|
bb9bad6335 | 1 year ago |
|
zhanglinhao
|
02d678f8d8 | 1 year ago |
|
zcx
|
92ff810b93 | 1 year ago |
|
zcx
|
52baa344c5 | 1 year ago |
|
zhanglinhao
|
1a0d65c725 | 1 year ago |
|
zhanglinhao
|
f72a51e34f | 1 year ago |
 房孝庭
|
fbadcc2cae | 1 year ago |
|
房孝庭
|
2ee3d6f894 | 1 year ago |
|
zhanglinhao
|
7e6e07eb0e | 1 year ago |
|
房孝庭
|
4aebe6d916 | 1 year ago |
|
zcx
|
759274239b | 1 year ago |
|
zcx
|
2c6cf04da8 | 1 year ago |
|
zcx
|
5ebd78ff3c | 1 year ago |
|
zhanglinhao
|
642dceb244 | 1 year ago |
|
zhanglinhao
|
bf6cbe7dae | 1 year ago |
|
zhanglinhao
|
5ec51aafa9 | 1 year ago |
|
zhanglinhao
|
5ba00916b6 | 1 year ago |
|
zhanglinhao
|
e2014de19e | 1 year ago |
 wuyifan
|
70ce44ad44 | 1 year ago |
|
wuyifan
|
04bdb19ec9 | 1 year ago |
|
wuyifan
|
da67fe8884 | 1 year ago |
|
wuyifan
|
991b3c3b61 | 1 year ago |
|
wuyifan
|
346e939e4f | 1 year ago |
wuyifan
|
8299139603 | 1 year ago |
|
zhanglinhao
|
8b7bee7c1d | 1 year ago |
|
zhanglinhao
|
510d8db779 | 1 year ago |
|
zhanglinhao
|
f800550ada | 1 year ago |
|
zhanglinhao
|
383a9111cd | 1 year ago |
|
zhanglinhao
|
a2373dffb3 | 1 year ago |
|
房孝庭
|
d5bdc148e5 | 1 year ago |
|
房孝庭
|
79475227ad | 1 year ago |
|
wuyifan
|
7e69ad3848 | 1 year ago |
|
zhanglinhao
|
8fb4fbcccc | 1 year ago |
|
zhanglinhao
|
8e77ed74cb | 1 year ago |
|
zhanglinhao
|
512de5ad7d | 1 year ago |
|
房孝庭
|
6d63961541 | 1 year ago |
a3197878436@163.com
|
9eb3a3a341 | 1 year ago |
|
a3197878436@163.com
|
0fa783bd1b | 1 year ago |
|
a3197878436@163.com
|
6c75e5562f | 1 year ago |
|
a3197878436@163.com
|
3cdd46dd80 | 1 year ago |
|
a3197878436@163.com
|
28a36bb26c | 1 year ago |
|
a3197878436@163.com
|
93177199db | 1 year ago |
|
a3197878436@163.com
|
28c47a51ca | 1 year ago |
|
a3197878436@163.com
|
7feccda1d0 | 1 year ago |
|
15616168609
|
1d900ab370 | 1 year ago |
|
15616168609
|
a6db9c05d6 | 1 year ago |
|
15616168609
|
2d2aabcbc3 | 1 year ago |
|
mafc2zqui
|
3420b94b0c | 1 year ago |
|
mafc2zqui
|
3f53a7e490 | 1 year ago |
|
“fangxiaoting”
|
830dfe5e4a | 1 year ago |
|
“fangxiaoting”
|
bef6b8433e | 1 year ago |
|
“fangxiaoting”
|
a6cfa1b58f | 1 year ago |
|
“fangxiaoting”
|
11ca1b0560 | 1 year ago |
|
“fangxiaoting”
|
459b1e2d9d | 1 year ago |
|
“fangxiaoting”
|
b61e1370f7 | 1 year ago |
|
mafc2zqui
|
aa86338860 | 1 year ago |
|
“fangxiaoting”
|
78c8592922 | 1 year ago |
|
mafc2zqui
|
6cc844c2d6 | 1 year ago |
|
zhanglinhao
|
49bf7c57d7 | 1 year ago |
|
zhanglinhao
|
ad3e007dfa | 1 year ago |
|
zcx
|
98079dcf40 | 1 year ago |
|
mwxbgi697
|
80f92e6114 | 1 year ago |
|
mwxbgi697
|
9f984bcffb | 1 year ago |
|
mwxbgi697
|
191c450657 | 1 year ago |
|
mwxbgi697
|
fd52484673 | 1 year ago |
|
mwxbgi697
|
c3a76e62be | 1 year ago |
|
mwxbgi697
|
a35a1f82f7 | 1 year ago |
|
mwxbgi697
|
1d75cfe581 | 1 year ago |
|
mwxbgi697
|
f9889025cd | 1 year ago |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 475 KiB |
|
After Width: | Height: | Size: 945 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
Before Width: | Height: | Size: 810 KiB After Width: | Height: | Size: 574 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 543 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 632 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 190 KiB |
|
Before Width: | Height: | Size: 174 KiB |
|
Before Width: | Height: | Size: 166 KiB |
@ -0,0 +1,13 @@
|
||||
[*]
|
||||
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
|
||||
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,17 @@
|
||||
<!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>
|
||||
|
After Width: | Height: | Size: 208 KiB |
@ -1,6 +1,6 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const baseURL = '192.168.254.35:8080'
|
||||
const baseURL = 'http://192.168.243.35:9000'
|
||||
|
||||
export const login = (data) => {
|
||||
return axios.post(`${baseURL}/Login/login`, data)
|
||||
|
Before Width: | Height: | Size: 276 B After Width: | Height: | Size: 276 B |
@ -0,0 +1,16 @@
|
||||
<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>
|
||||
@ -0,0 +1,140 @@
|
||||
<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>
|
||||
@ -0,0 +1,67 @@
|
||||
<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>
|
||||
@ -0,0 +1,27 @@
|
||||
<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>
|
||||
@ -0,0 +1,45 @@
|
||||
<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>
|
||||
@ -0,0 +1,76 @@
|
||||
<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>
|
||||
@ -0,0 +1,6 @@
|
||||
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 After Width: | Height: | Size: 787 KiB |
|
After Width: | Height: | Size: 223 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 406 KiB |
|
After Width: | Height: | Size: 4.4 MiB |
|
After Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 266 KiB |
|
After Width: | Height: | Size: 923 KiB |
|
After Width: | Height: | Size: 188 KiB |
@ -0,0 +1,18 @@
|
||||
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');
|
||||
@ -0,0 +1,167 @@
|
||||
<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>
|
||||
@ -0,0 +1,146 @@
|
||||
<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>
|
||||
@ -0,0 +1,94 @@
|
||||
<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>
|
||||
@ -0,0 +1,191 @@
|
||||
<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>
|
||||
@ -0,0 +1,264 @@
|
||||
<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>
|
||||
@ -0,0 +1,220 @@
|
||||
<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>
|
||||
@ -0,0 +1,153 @@
|
||||
<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>
|
||||
@ -0,0 +1,128 @@
|
||||
<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>
|
||||
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="user-feedback">
|
||||
<!-- 输入评价 -->
|
||||
<div class="feedback-input">
|
||||
<h2>意见反馈</h2>
|
||||
<form>
|
||||
<textarea id="ebody" v-model.trim="ebody" rows="4" cols="50" placeholder="在这里输入您的使用意见"></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="satisfaction"
|
||||
:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
|
||||
show-text
|
||||
@change="handleRateChange"
|
||||
clearable />
|
||||
</el-row>
|
||||
</el-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {},
|
||||
eid: '',
|
||||
ebody: '',
|
||||
satisfaction:'',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
send() {
|
||||
axios.post('http://106.52.218.118:8081/evaluate/addEvaluation', {
|
||||
eid : 1,
|
||||
satisfaction :this.satisfaction,
|
||||
ebody :this.ebody,
|
||||
}, {
|
||||
// 配置跨域请求时携带 cookie
|
||||
withCredentials: true,
|
||||
// 设置请求头部为 JSON 格式
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
},
|
||||
handleRateChange(){
|
||||
this.satisfaction = satisfaction; // 更新星级值
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
||||
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">首页</h1>
|
||||
</div>
|
||||
<div class="carousel-container">
|
||||
<el-carousel :interval="4000" arrow="always" type="card">
|
||||
<el-carousel-item
|
||||
v-for="(item, index) in imagePaths"
|
||||
:key="index"
|
||||
:class="['carousel-item', index === Math.floor(imagePaths.length / 2) ? 'center-item' : '']"
|
||||
>
|
||||
<img :src="item" :alt="`Image ${index + 1}`" class="carousel-image">
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div class="search-container">
|
||||
<input type="text" class="search-input" placeholder="世界这么大出去看看吧">
|
||||
<button class="search-button" @click="gotoSearchPage()">搜索</button>
|
||||
</div>
|
||||
<div class="return">
|
||||
<button class="addDemand-button" @click="gotoAddDemandPage()">我要出行</button>
|
||||
<isRegisterGuide />
|
||||
</div>
|
||||
</div>
|
||||
<div><NavigationBar /></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import NavigationBar from '../components/NavigationBar.vue';
|
||||
import isRegisterGuide from '../components/isRegisterGuide.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NavigationBar,
|
||||
isRegisterGuide
|
||||
},
|
||||
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'
|
||||
]);
|
||||
const router = useRouter();
|
||||
// 假设你有一个跳转到搜索页面的方法
|
||||
function gotoSearchPage() {
|
||||
router.push('/searchPage');
|
||||
}
|
||||
function gotoAddDemandPage() {
|
||||
router.push('/addDemandPage');
|
||||
}
|
||||
|
||||
return {
|
||||
imagePaths,
|
||||
gotoSearchPage,
|
||||
gotoAddDemandPage
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh; /* 设置页面高度为视口高度 */
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 20px; /* 为标题添加下边距，与轮播图分隔开 */
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
/* 根据需要添加其他样式 */
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
/* 默认的轮播项样式 */
|
||||
width: 80%; /* 假设默认宽度是80% */
|
||||
margin: 0 auto; /* 水平居中 */
|
||||
}
|
||||
|
||||
.center-item {
|
||||
/* 居中的轮播项样式 */
|
||||
width: 100%; /* 居中的项宽度为100% */
|
||||
/* 可以添加其他样式，如高度、边框等 */
|
||||
}
|
||||
|
||||
.carousel-image {
|
||||
width: 100%; /* 图片宽度与轮播项宽度一致 */
|
||||
height: auto; /* 保持图片比例 */
|
||||
}
|
||||
|
||||
.search-container {
|
||||
margin-top: 20px;
|
||||
text-align: center; /* 让搜索框和按钮居中 */
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
width: 300px; /* 可选，设置输入框宽度 */
|
||||
}
|
||||
|
||||
.search-button {
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
background-color: #4CAF50; /* 绿色背景 */
|
||||
border: none;
|
||||
color: white; /* 白色文字 */
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.addDemand-button {
|
||||
/* 定义返回按钮的样式 */
|
||||
position: fixed; /* 使按钮位置固定 */
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
margin: 0;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #ccc;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.addDemand-button:hover {
|
||||
background-color: #aaaaaa;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 可以添加更多样式来进一步美化 */
|
||||
</style>
|
||||
@ -0,0 +1,48 @@
|
||||
import { createWebHistory, createRouter } from 'vue-router';
|
||||
import Login from '../pages/Login.vue';
|
||||
import Register from '../pages/Register.vue';
|
||||
import Home from '../pages/HomePage.vue';
|
||||
import Mine from '../pages/mine.vue';
|
||||
import Test from '../pages/test.vue'
|
||||
import AddDemand from '../pages/addDemand.vue';
|
||||
import DemandList from '../pages/DemandList.vue';
|
||||
import Evaluation from '../pages/Evaluation.vue';
|
||||
import RegisterGuide from '../pages/registerGuide.vue';
|
||||
import AddServe from '../pages/addServe.vue';
|
||||
import Order from '../pages/order.vue';
|
||||
import MatchDetail from'../pages/DemandMatch.vue'
|
||||
import ChangeInformation from'../pages/changeInformation.vue'
|
||||
import ServerList from'../pages/serverList.vue'
|
||||
import ServerDetail from'../pages/serverDetail.vue'
|
||||
import ServerMatch from'../pages/serverMatch.vue'
|
||||
import DemandMatched from'../pages/demandMatched.vue'
|
||||
import ServerMatched from'../pages/serverMatched.vue'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', redirect: '/login' }, // 重定向到/login路径
|
||||
{ path: '/login', component: Login },
|
||||
{ path: '/register', component: Register },
|
||||
{ path: '/home', component: Home },
|
||||
{ path: '/mine', component: Mine },
|
||||
{ path: '/addDemandPage', component: AddDemand },
|
||||
{ path: '/test', component: Test },
|
||||
{ path: '/demandlist', name: 'DemandList', component:DemandList},
|
||||
{ path: '/evaluation/:orderId',name: 'Evaluation', component:Evaluation,props: (route) => ({ orderId: route.params.orderId })},
|
||||
{ path: '/registerGuide', component:RegisterGuide},
|
||||
{ path:'/addServe', component:AddServe},
|
||||
{ path: '/order/:orderId', name: 'OrderDetails', component: Order, props: (route) => ({ orderId: route.params.orderId })},
|
||||
{ path: '/MatchDetail/:orderId', name: 'MatchDetail',component: MatchDetail,props: (route) => ({ orderId: route.params.orderId })},
|
||||
{ path: '/changeInformation', component:ChangeInformation},
|
||||
{ path: '/serverList', component:ServerList},
|
||||
{ path: '/serverDetail/:serverId', name: 'ServerDetail',component: ServerDetail,props: (route) => ({ serverId: route.params.serverId })},
|
||||
{ path: '/serverMatch/:serverId', name: 'ServerMatch',component: ServerMatch,props: (route) => ({ serverId: route.params.serverId })},
|
||||
{ path: '/DemandMatched/:orderId', name: 'DemandMatched',component: DemandMatched,props: (route) => ({ orderId: route.params.orderId })},
|
||||
{ path: '/ServerMatched/:serverId', name: 'ServerMatched',component: ServerMatched,props: (route) => ({ serverId: route.params.serverId })},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
});
|
||||
|
||||
export default router;
|
||||
@ -0,0 +1,25 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/serve': {
|
||||
target: 'http://192.168.205.145:8080', // 替换为您要代理到的目标地址
|
||||
changeOrigin: true, // 允许跨域
|
||||
rewrite: (path) => path.replace(/^\/serve/, '') // 重写路径
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,10 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true,
|
||||
publicPath: '/',
|
||||
//只有Https才能使用录音
|
||||
devServer : {
|
||||
https : true,
|
||||
port : 9008
|
||||
}
|
||||
})
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
@ -1,117 +0,0 @@
|
||||
<template>
|
||||
<div class="home-container">
|
||||
<h1>首页</h1>
|
||||
|
||||
<div class="search-container">
|
||||
<input type="text" class="search-input" placeholder="世界这么大出去看看吧">
|
||||
<button class="search-button" @click="gotoSearchPage()">搜索</button>
|
||||
</div>
|
||||
|
||||
<div class="image-container">
|
||||
<img src="../../photos/background.png" alt="图片描述" class="search-image">
|
||||
</div>
|
||||
|
||||
<div class="footer-nav">
|
||||
<button>首页</button>
|
||||
<button @click="gotomessage()">消息</button>
|
||||
<button @click="gotomine()">我的</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
/* 添加样式以定义图片的大小和位置 */
|
||||
.image-container {
|
||||
text-align: center; /* 或者根据你的需求来设置 */
|
||||
margin-top: 20px; /* 你可以根据需要调整这个值 */
|
||||
}
|
||||
|
||||
.home-container {
|
||||
/* 添加你的样式 */
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
/* 可能需要为内容添加一些底部空间以容纳底部导航 */
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
/* 定义搜索框容器的样式 */
|
||||
text-align: center;
|
||||
margin-bottom: 20px; /* 根据需要添加一些底部间距 */
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中（如果不需要完全居中，可以去掉这个）*/
|
||||
}
|
||||
|
||||
.search-input {
|
||||
/* 定义搜索框的样式 */
|
||||
flex: 1; /* 占据剩余空间 */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
/* 定义搜索按钮的样式 */
|
||||
margin-left: 10px; /* 与搜索框之间的间距 */
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #ccc;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
/* 搜索按钮点击时的样式 */
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
/* 定义底部导航的样式 */
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 10px;
|
||||
background-color: #f5f5f5; /* 示例背景色 */
|
||||
}
|
||||
|
||||
.footer-nav button {
|
||||
/* 定义按钮的样式 */
|
||||
flex: 1;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
background-color: #ccc;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer-nav button:hover {
|
||||
/* 按钮点击时的样式 */
|
||||
background-color: #bbb;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue