Merge branch 'master' of bdgit.educoder.net:mwxbgi697/softegg

master
zhanglinhao 1 year ago
commit 8e77ed74cb

@ -0,0 +1,119 @@
<script lang="ts" setup>
import { ref, onBeforeMount, watch, watchEffect } from 'vue'
import axios from 'axios'
import { ElSelect, ElOption } from 'element-plus'
import { AreaList } from '../components/types'
import { format, addDays } from 'date-fns'
import Return from '../components/return.vue'
const province = ref('')
const city = ref('')
const area = ref('')
const remark = ref('')
const provinceList = ref<AreaList[]>([])
const cityList = ref<AreaList[]>([])
const areaList = ref<AreaList[]>([])
const rangeValue = ref<string[]>([format(new Date(), 'yyyy-MM-dd'), format(addDays(new Date(), 1), 'yyyy-MM-dd')])
// JSON
const getProvinceList = async () => {
const res = await axios.get<AreaList[]>('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')
provinceList.value = res.data
console.log(provinceList.value)
}
const publish = () => {
//
if(city.value!=''){
axios.post(`http://192.168.243.35:9000/SendGuideService/register`,{phone:sessionStorage.getItem('phone') || '',city:city.value,time:rangeValue.value,remark:remark.value})
.then(response => {
alert("发布成功")
})
.catch(error => {
console.error('发布失败', error);
});}
else{
alert("请输入目的地")
}
};
onBeforeMount(async()=>{
getProvinceList()
})
watchEffect(() => {
console.log('rangeValue:', rangeValue.value)
})
//
watch(province, (newValue, oldValue) => {
const matchedProvince = provinceList.value.find(item => item.name === newValue)
if (matchedProvince) {
cityList.value = matchedProvince.areaList
city.value = '' //
areaList.value = [] //
console.log(cityList.value)
}
})
//
watch(city, (newValue, oldValue) => {
const matchedCity = cityList.value.find(item => item.name === newValue)
if (matchedCity) {
areaList.value = matchedCity.areaList
area.value = '' //
console.log(areaList.value)
}
})
</script>
<template>
<div>
<Return></Return>
</div>
<div><h1>导游服务</h1></div>
<div class="addServe-container">
<h3>选择导游城市</h3>
<div style="display: flex;">
<p style="color: red;">*</p>
<el-select v-model="province" clearable placeholder="省份">
<el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.name" />
</el-select>
<el-select v-model="city" clearable placeholder="城市">
<el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.name" />
</el-select>
<!--<el-select v-model="area" clearable placeholder="Select">
<el-option v-for="item in areaList" :key="item.code" :label="item.name" :value="item.name" />
</el-select>-->
</div>
<h3>选择导游时间</h3>
<div>
<VueDatePicker
placeholder="请选择出行时间"
range
:min-date="new Date()"
format="yyyy-MM-dd"
:width="280"
v-model="rangeValue" />
</div>
<h3>添加备注信息</h3>
<div>
<label for="user-input">备注信息:</label>
<input type="text" id="remark" v-model="remark" placeholder="">
</div>
<el-button type="primary" @click="publish"style="margin-top: 20px;">发布</el-button>
</div>
</template>
<style>
.addServe-container {
max-width: 400px;
margin: 0 auto;
padding: 30px;
border: 1px solid #000000;
border-radius: 5px;
text-align: center;
}
</style>

@ -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

@ -1,30 +1,23 @@
# Logs
logs
*.log
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
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
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo

@ -0,0 +1,43 @@
## GoEasy Websocket Vue3 HelloWorld示例运行步骤
### 免费获取appkey
1. 访问[GoEasy官网](https://www.goeasy.io)进行注册
2. 登陆后,创建一个应用
3. 进入应用详情即可看到自己的appkey
### 替换appkey
打开main.js找到初始化GoEasy的地方将appkey替换成您应用的common key
### 运行步骤
将目录切换到helloworld/web-vue3/
##### 安装依赖
node版本要求16及以上
```
npm ci
```
##### 运行服务
```
npm run serve
```
### 体验
建议可以同时运行在多个浏览器窗口,体验多个客户端之间互动。
### 体验服务端发送
可以用Postman或curl发送消息到GoEasy体验服务端发送消息到客户端。
````shell
curl -X POST https://rest-hz.goeasy.io/v2/pubsub/publish \
-H "Content-Type: application/json" \
-d "{
'appkey':'您的appkey',
'channel':'my_channel',
'content':'Hello, GoEasy!'
}"
````

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

File diff suppressed because it is too large Load Diff

@ -0,0 +1,25 @@
{
"name": "web",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.8.3",
"goeasy": "^2.12.4",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-service": "~5.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 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>

@ -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,32 @@
<script>
export default {
name: 'return',
methods: {
gotohome() {
this.$router.push('/home');
},
}
}
</script>
<template>
<div class="return">
<button class="return-button" @click="gotohome()"></button>
</div>
</template>
<style>.return-button {
/* 定义返回按钮的样式 */
position: fixed; /* 使按钮位置固定 */
top: 10px;
left: 10px;
margin: 0;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #ccc;
color: #333;
cursor: pointer;
.return-button:hover {
background-color: #aaaaaa;
}
} </style>

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

@ -0,0 +1,127 @@
<template>
<div class="chat-container">
<div class="chat">
<h2 class="title">聊天室</h2>
<div class="chat-box">
<div v-for="(message, index) in messages" :key="index" class="message">
<span class="sender">{{ message.sender }}</span>
<span class="content">{{ message.content }}</span>
</div>
</div>
<div class="input">
<input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息...">
<button @click="sendMessage"></button>
</div>
</div>
</div>
<div><NavigationBar /></div>
</template>
<script>
import axios from 'axios';
import NavigationBar from '../components/NavigationBar.vue';
export default {
data() {
return {
messages: [],
newMessage: '',
};
},
components: {
NavigationBar
},
methods: {
async fetchMessages() {
try {
const response = await axios.get('http://example.com/messages');
this.messages = response.data;
} catch (error) {
console.error('Error fetching messages:', error);
}
},
async sendMessage() {
try {
await axios.post('http://example.com/messages', {
content: this.newMessage,
sender: 'Me', // You can replace 'Me' with the sender's name
});
this.newMessage = ''; // Clear the input field after sending
// You might want to fetch messages again here to update the UI with the latest messages
} catch (error) {
console.error('Error sending message:', error);
}
},
// WebSocket logic to receive messages
setupWebSocket() {
const ws = new WebSocket('ws://example.com/socket');
ws.onmessage = (event) => {
const message = JSON.parse(event.data);
this.messages.push(message);
};
},
},
created() {
this.fetchMessages(); // Fetch messages when the component is created
this.setupWebSocket(); // Setup WebSocket connection
},
};
</script>
<style>
.chat-container {
max-width: 600px;
margin: 0 auto;
}
.chat {
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
height: 100%; /* Ensure the chat box takes up the entire height */
}
.title {
margin-top: 0;
}
.chat-box {
flex: 1; /* Allow the chat box to grow and take up remaining space */
max-height: 300px;
overflow-y: auto;
}
.message {
margin-bottom: 10px;
}
.input {
display: flex;
margin-top: 10px;
}
.input input {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.input button {
padding: 8px 15px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
margin-left: 10px;
}
.input button:hover {
background-color: #0056b3;
}
</style>

@ -0,0 +1,75 @@
<template>
<div class="return">
<button class="returnList" @click="returnList()"></button>
</div>
<div>
<h1>订单列表</h1>
<div
v-for="(list, index) in lists"
:key="lists.orderId"
class="order-box"
@click="goToOrderDetails(list.did)"
>
<p>目的地: {{ list.city }}</p>
<p>开始时间: {{ list.departureDate }}</p>
<p>结束时间: {{ list.endDate }}</p>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
phone: sessionStorage.getItem('phone') || '',
lists: [],
};
},
async created() {
//
axios.get(`http://192.168.243.35:9000/SendDemand/sendAllDemands?phone=${this.phone}`)
.then(response => {
this.lists = response.data
})
.catch(error => {
console.error('Error fetching user:', error);
});
},
methods: {
goToOrderDetails(orderId) {
this.$router.push({ name: 'OrderDetails', params: { orderId } });
},
returnList() {
this.$router.push('/mine');
}
}
};
</script>
<style scoped>
.order-box {
/* 样式代码,用于美化订单盒子 */
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
.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>

@ -0,0 +1,93 @@
<template>
<div>
<h2>订单号: {{ orderId }}</h2>
<div v-for="(service, index) in services" :key="service.gid" class="service-box">
<div class="service-info">
<p class="nickname">{{ service.nickname }}</p>
<p class="end-date">{{ service.endDate }}</p>
</div>
<button class="send-button" @click="sendServiceId(service.gid)"></button>
</div>
</div>
</template>
<style scoped>
/* 为按钮添加一些样式 */
.send-button {
display: block;
margin-left: auto; /* 将按钮推到右侧 */
margin-top: 10px; /* 顶部添加一些间距 */
padding: 5px 10px; /* 内边距 */
border: none; /* 移除边框 */
border-radius: 4px; /* 添加圆角 */
background-color: #4CAF50; /* 背景色 */
color: white; /* 文字颜色 */
cursor: pointer; /* 鼠标悬停时显示小手 */
transition: background-color 0.3s ease; /* 添加背景色过渡效果 */
}
.send-button:hover {
background-color: #45a049; /* 鼠标悬停时改变背景色 */
}
/* 为服务信息盒子添加样式 */
.service-box {
border: 1px solid #ccc;
padding: 15px;
margin-bottom: 15px;
background-color: #fff; /* 添加背景色 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
border-radius: 5px; /* 添加圆角 */
}
/* 为昵称和结束日期添加样式 */
.service-info {
display: flex;
justify-content: space-between; /* 内容两端对齐 */
align-items: center; /* 内容垂直居中 */
}
.nickname, .end-date {
margin: 0; /* 移除默认的外边距 */
}
</style>
<script>
import axios from 'axios';
export default {
props: ['orderId'],
data() {
return {
services: []
};
},
methods: {
async sendServiceId(gid) {
try {
// APIgiddidPOST
const orderIdAsInt = parseInt(this.orderId, 10);
const gidAsInt = parseInt(gid, 10);
const response = await axios.post('http://192.168.243.35:9000/DemandMatch/match', { did:orderIdAsInt,gid:gidAsInt});
alert('已向导游发送确认信息');
} catch (error) {
console.error('Error sending service ID and order ID:', error);
}
}
},
async created() {
//
axios.get(`http://192.168.243.35:9000/DemandMatch/register?did=${this.orderId}`)
.then(response => {
this.services = response.data
})
.catch(error => {
console.error('Error fetching user:', error);
});
},
};
</script>

@ -0,0 +1,161 @@
<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>
.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>
import axios from 'axios';
export default {
props: ['orderId'],
data() {
return {
ebody: '',
satisfaction:'',
did:'',
evaluation: {}, //
};
},
methods: {
send() {
axios.post('http://192.168.243.35:9000/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(`http://192.168.243.35:9000/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,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>

@ -1,25 +1,57 @@
<template>
<div class="login-container-bg">
<div class="login-header">
<h1>自由同行</h1>
</div>
<div class="login-container">
<h1>登录页面</h1>
<h2>登录</h2>
<form @submit.prevent="login" class="login-form">
<label for="username">用户名</label>
<input type="text" id="username" v-model="username" class="input-field">
<el-icon><User /></el-icon>
<label for="phone">手机号</label>
<input type="text" id="phone" v-model="phone" class="input-field"placeholder="世界这么大出去看看吧">
<br>
<el-icon><Lock /></el-icon>
<label for="password">密码</label>
<input type="password" id="password" v-model="password" class="input-field">
<input type="password" id="password" v-model="password" class="input-field"placeholder="世界这么大出去看看吧">
<br>
<button type="submit" class="submit-button">登录</button>
<button @click="goToRegister" class="register-button">注册</button>
</form>
</div>
</div>
</template>
<style scoped>
.login-header {
/* 根据需要调整标题的样式 */
text-align: center; /* 让标题居中对齐(如果水平宽度足够的话) */
margin-bottom: 20px; /* 根据需要调整标题与登录盒子之间的距离 */
}
.login-container-bg {
/* 为这个容器设置背景图片 */
background-image: url('../data/picture/loginBackground.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh; /* 根据需要设置高度,可以是视口高度 */
display: flex;
flex-direction: column; /* 如果需要垂直堆叠,默认如此 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.login-header h1 {
color: #000000;
}
.login-form label {
color: white;
}
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #28a7a3;
border: 1px solid #000000;
border-radius: 5px;
text-align: center;
}
@ -56,18 +88,18 @@ import axios from "axios";
export default {
data() {
return {
username: '',
phone: '',
password: ''
}
},
methods: {
login() {
console.log("用户名:", this.username);
console.log("手机号:", this.phone);
console.log("密码:", this.password);
axios.post('http://192.168.254.35:8080/Login/login', {
axios.post('http://192.168.243.35:9000/Login/login', {
//
username: this.username,
phone: this.phone,
password: this.password
}, {
// cookie
@ -78,8 +110,8 @@ export default {
}
})
.then(response => {
// status
if (response.data == 1) {
sessionStorage.setItem('phone', this.phone);
//
this.$router.push('/home');
}
@ -89,8 +121,14 @@ export default {
else if(response.data == 3){
alert('登录失败:账号未注册');
}
else if(response.data == 0) {
alert('登录失败:未知原因');
else if(response.data == 6) {
alert('登录失败:未输入账号密码');
}
else if(response.data == 7) {
alert('登录失败:未输入账号');
}
else if(response.data == 8) {
alert('登录失败:未输入密码');
}
else {
alert('登录失败:未知原因');

@ -0,0 +1,113 @@
<template>
<div class="payment">
<h2>支付订单</h2>
<div class="order-summary">
<p>订单金额: {{ orderAmount }} </p>
</div>
<div class="payment-form">
<label for="cardNumber">银行卡号</label>
<input type="text" id="cardNumber" v-model.trim="cardNumber" placeholder="请输入银行卡号">
<label for="expiry">到期日期</label>
<input type="text" id="expiry" v-model.trim="expiry" placeholder="MM/YY">
<label for="cvv">CVV</label>
<input type="text" id="cvv" v-model.trim="cvv" placeholder="请输入CVV">
<button @click="submitPayment" :disabled="loading">支付</button>
<p v-if="error" class="error-message">{{ error }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
orderAmount: 100, // 100
cardNumber: '',
expiry: '',
cvv: '',
loading: false,
error: ''
};
},
methods: {
submitPayment() {
//
this.loading = true;
const paymentData = {
cardNumber: this.cardNumber,
expiry: this.expiry,
cvv: this.cvv,
amount: this.orderAmount
};
// '/api/payment'
fetch('/api/payment', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(paymentData)
})
.then(response => {
if (!response.ok) {
throw new Error('支付失败,请稍后重试。');
}
return response.json();
})
.then(data => {
//
console.log('支付成功:', data);
this.error = '';
})
.catch(error => {
//
console.error('支付失败:', error.message);
this.error = error.message;
})
.finally(() => {
this.loading = false;
});
}
}
};
</script>
<style scoped>
.payment {
max-width: 600px;
margin: 0 auto;
}
.order-summary {
margin-bottom: 20px;
}
label {
font-weight: bold;
}
input {
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 16px;
font-size: 16px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.error-message {
color: #dc3545;
}
</style>

@ -0,0 +1,145 @@
<template>
<div class="register-container-wrapper">
<div class="register-container">
<h1>注册</h1>
<form @submit.prevent="register" class="register-form">
<label for="phone">手机号</label>
<input type="phone" id="phone" v-model="phone" class="input-field">
<br>
<label for="password">密码</label>
<input type="password" id="password" v-model="password" class="input-field">
<br>
<label for="name">姓名</label>
<input type="name" id="name" v-model="name" class="input-field">
<br>
<label for="IDcard">身份证号</label>
<input type="IDcard" id="IDcard" v-model="IDcard" class="input-field">
<br>
<label for="nickname">昵称</label>
<input type="nickname" id="nickname" v-model="nickname" class="input-field">
<br>
<button type="submit" class="submit-button">注册</button>
<button class="returnLogin-button" @click="gotoLogin()"></button>
</form>
</div>
</div>
</template>
<style scoped>
.register-container-wrapper {
/* 为这个容器设置背景图片 */
background-image: url('../data/picture/loginBackground.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh; /* 根据需要设置高度,可以是视口高度 */
display: flex;
justify-content: center;
align-items: center; /* 垂直居中 */
}
.register-container {
max-width: 400px;
margin: 0 auto;
padding: 30px;
border: 1px solid #000000;
border-radius: 5px;
text-align: center;
}
.input-field {
margin: 10px 0;
padding: 5px;
width: 100%;
}
.submit-button {
padding: 10px 20px;
background-color: #28a7a3;
color: #abd4ee;
border: none;
border-radius: 5px;
cursor: pointer;
}
.returnLogin-button {
padding: 10px 20px;
background-color: #ff6347; /* 例如,设置为红色 */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px; /* 可以添加一些上边距来分隔按钮 */
}
</style>
<script>
import { register } from '../api/auth'
import axios from "axios";
export default {
data() {
return {
phone: '',
password: '',
name:'',
nickname:'',
IDcard:''
}
},
methods: {
register() {
console.log("", this.phone);
console.log("密码:", this.password);
console.log("姓名:",this.name);
console.log("身份证号:",this.IDcard);
console.log("昵称:",this.nickname);
axios.post(`http://192.168.243.35:9000/Login/register`, {
//
phone: this.phone,
password: this.password,
name:this.name,
IDCard:this.IDcard,
nickname:this.nickname
}, {
// cookie
withCredentials: true,
// JSON
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
if(response.data == 5){
alert("注册成功");
this.$router.push('/login');
}else if(response.data == 4){
alert("该账号已注册")
}else if(response.data == 9){
alert("身份证错误")
}else if (response.data == 11){
alert("手机号错误")
}else if (response.data == 12){
alert("密码过于简单请输入8位以上密码")
}else if (response.data == 13){
alert("请输入真实姓名")
}else{
alert("未知错误")
}
})
.catch(error => {
console.error(error)
//
alert("网络或服务器错误");
})
},
gotoLogin(){
this.$router.push('/login');
},
}
}
</script>

@ -0,0 +1,116 @@
<template>
<div class="security-verification">
<h2>安全验证</h2>
<!-- 身份证号验证 -->
<div class="verification-item">
<label for="idCard">身份证号</label>
<input type="text" id="idCard" v-model.trim="idCard" placeholder="请输入身份证号">
<button @click="verifyIdCard" :disabled="loading">验证</button>
<p v-if="idCardValid" class="valid-message"></p>
<p v-else-if="idCard !== ''" class="invalid-message">请输入有效的身份证号</p>
</div>
<!-- 银行卡号验证 -->
<div class="verification-item">
<label for="bankCard">银行卡号</label>
<input type="text" id="bankCard" v-model.trim="bankCard" placeholder="请输入银行卡号">
<button @click="verifyBankCard" :disabled="loading">验证</button>
<p v-if="bankCardValid" class="valid-message"></p>
<p v-else-if="bankCard !== ''" class="invalid-message">请输入有效的银行卡号</p>
</div>
<p v-if="error" class="error-message">{{ error }}</p>
</div>
</template>
<script>
export default {
data() {
return {
idCard: '',
idCardValid: false,
bankCard: '',
bankCardValid: false,
loading: false,
error: ''
};
},
methods: {
verifyIdCard() {
this.loading = true;
//
setTimeout(() => {
if (/^\d{17}[\dXx]$/.test(this.idCard)) {
this.idCardValid = true;
this.error = '';
} else {
this.idCardValid = false;
this.error = '请输入有效的身份证号!';
}
this.loading = false;
}, 1000); // 1
},
verifyBankCard() {
this.loading = true;
//
setTimeout(() => {
if (/^\d{16,19}$/.test(this.bankCard)) {
this.bankCardValid = true;
this.error = '';
} else {
this.bankCardValid = false;
this.error = '请输入有效的银行卡号!';
}
this.loading = false;
}, 1000); // 1
}
}
};
</script>
<style scoped>
.security-verification {
max-width: 600px;
margin: 0 auto;
}
.verification-item {
margin-bottom: 20px;
}
label {
font-weight: bold;
}
input {
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 16px;
font-size: 16px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.valid-message {
color: #28a745;
}
.invalid-message {
color: #dc3545;
}
.error-message {
color: #dc3545;
}
</style>

@ -0,0 +1,114 @@
<script lang="ts" setup>
import { ref, onBeforeMount, watch, watchEffect } from 'vue'
import axios from 'axios'
import { ElSelect, ElOption } from 'element-plus'
import { AreaList } from '../components/types'
import { format, addDays } from 'date-fns'
import Return from '../components/return.vue'
const province = ref('')
const city = ref('')
const area = ref('')
const remark = ref('')
const provinceList = ref<AreaList[]>([])
const cityList = ref<AreaList[]>([])
const areaList = ref<AreaList[]>([])
const rangeValue = ref<string[]>([format(new Date(), 'yyyy-MM-dd'), format(addDays(new Date(), 1), 'yyyy-MM-dd')])
// JSON
const getProvinceList = async () => {
const res = await axios.get<AreaList[]>('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')
provinceList.value = res.data
console.log(provinceList.value)
}
const publish = () => {
//
if(city.value!=''){
axios.post(`http://192.168.243.35:9000/SendDemand/register`,{phone:sessionStorage.getItem('phone') || '',city:city.value,time:rangeValue.value,remark:remark.value})
.then(response => {
alert("发布成功")
})
.catch(error => {
console.error('发布失败', error);
});}
else{
alert("请输入目的地")
}
};
onBeforeMount(async()=>{
getProvinceList()
})
watchEffect(() => {
console.log('rangeValue:', rangeValue.value)
})
//
watch(province, (newValue, oldValue) => {
const matchedProvince = provinceList.value.find(item => item.name === newValue)
if (matchedProvince) {
cityList.value = matchedProvince.areaList
city.value = '' //
areaList.value = [] //
console.log(cityList.value)
}
})
//
watch(city, (newValue, oldValue) => {
const matchedCity = cityList.value.find(item => item.name === newValue)
if (matchedCity) {
areaList.value = matchedCity.areaList
area.value = '' //
console.log(areaList.value)
}
})
</script>
<template>
<div>
<Return></Return>
</div>
<div><h1>发布出行规划</h1></div>
<div class="addDemand-container">
<div><h3>选择出行城市</h3></div>
<div style="display: flex;">
<p style="color: red;">*</p>
<el-select v-model="province" clearable placeholder="省份">
<el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.name" />
</el-select>
<el-select v-model="city" clearable placeholder="城市">
<el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.name" />
</el-select>
</div>
<div><h3>选择出行时间</h3></div>
<div>
<VueDatePicker
placeholder="请选择出行时间"
range
:min-date="new Date()"
format="yyyy-MM-dd"
:width="280"
v-model="rangeValue" />
</div>
<div><h3>填写备注信息</h3></div>
<div>
<label for="user-input">备注信息:</label>
<input type="text" id="remark" v-model="remark" placeholder="">
</div>
<el-button type="primary" @click="publish"></el-button>
</div>
</template>
<style>
.addDemand-container {
max-width: 400px;
margin: 0 auto;
padding: 30px;
border: 1px solid #000000;
border-radius: 5px;
text-align: center;
}
</style>

@ -0,0 +1,119 @@
<script lang="ts" setup>
import { ref, onBeforeMount, watch, watchEffect } from 'vue'
import axios from 'axios'
import { ElSelect, ElOption } from 'element-plus'
import { AreaList } from '../components/types'
import { format, addDays } from 'date-fns'
import Return from '../components/return.vue'
const province = ref('')
const city = ref('')
const area = ref('')
const remark = ref('')
const provinceList = ref<AreaList[]>([])
const cityList = ref<AreaList[]>([])
const areaList = ref<AreaList[]>([])
const rangeValue = ref<string[]>([format(new Date(), 'yyyy-MM-dd'), format(addDays(new Date(), 1), 'yyyy-MM-dd')])
// JSON
const getProvinceList = async () => {
const res = await axios.get<AreaList[]>('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')
provinceList.value = res.data
console.log(provinceList.value)
}
const publish = () => {
//
if(city.value!=''){
axios.post(`http://192.168.243.35:9000/SendGuideService/register`,{phone:sessionStorage.getItem('phone') || '',city:city.value,time:rangeValue.value,remark:remark.value})
.then(response => {
alert("发布成功")
})
.catch(error => {
console.error('发布失败', error);
});}
else{
alert("请输入目的地")
}
};
onBeforeMount(async()=>{
getProvinceList()
})
watchEffect(() => {
console.log('rangeValue:', rangeValue.value)
})
//
watch(province, (newValue, oldValue) => {
const matchedProvince = provinceList.value.find(item => item.name === newValue)
if (matchedProvince) {
cityList.value = matchedProvince.areaList
city.value = '' //
areaList.value = [] //
console.log(cityList.value)
}
})
//
watch(city, (newValue, oldValue) => {
const matchedCity = cityList.value.find(item => item.name === newValue)
if (matchedCity) {
areaList.value = matchedCity.areaList
area.value = '' //
console.log(areaList.value)
}
})
</script>
<template>
<div>
<Return></Return>
</div>
<div><h1>导游服务</h1></div>
<div class="addServe-container">
<h3>选择导游城市</h3>
<div style="display: flex;">
<p style="color: red;">*</p>
<el-select v-model="province" clearable placeholder="省份">
<el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.name" />
</el-select>
<el-select v-model="city" clearable placeholder="城市">
<el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.name" />
</el-select>
<!--<el-select v-model="area" clearable placeholder="Select">
<el-option v-for="item in areaList" :key="item.code" :label="item.name" :value="item.name" />
</el-select>-->
</div>
<h3>选择导游时间</h3>
<div>
<VueDatePicker
placeholder="请选择出行时间"
range
:min-date="new Date()"
format="yyyy-MM-dd"
:width="280"
v-model="rangeValue" />
</div>
<h3>添加备注信息</h3>
<div>
<label for="user-input">备注信息:</label>
<input type="text" id="remark" v-model="remark" placeholder="">
</div>
<el-button type="primary" @click="publish"style="margin-top: 20px;">发布</el-button>
</div>
</template>
<style>
.addServe-container {
max-width: 400px;
margin: 0 auto;
padding: 30px;
border: 1px solid #000000;
border-radius: 5px;
text-align: center;
}
</style>

@ -0,0 +1,119 @@
<template>
<div class="profile-edit">
<h2>修改个人信息</h2>
<form @submit.prevent="updateProfile">
<div>
<label for="nickname">昵称</label>
<input type="text" id="nickname" v-model="userInfo.nickname" class="input-field">
</div>
<div>
<label for="email">邮箱</label>
<input type="email" id="email" v-model="userInfo.email" class="input-field">
</div>
<div>
<label for="phone">手机号</label>
<input type="tel" id="phone" v-model="userInfo.phone" class="input-field">
</div>
<div>
<label for="password">密码</label>
<input type="password" id="password" v-model="userInfo.password" class="input-field">
</div>
<button type="submit">保存</button>
</form>
<div v-if="message" class="message">{{ message }}</div>
</div>
</template>
<script>
export default {
data() {
return {
userInfo: {
nickname: '',
email: '',
phone: sessionStorage.getItem('phone') || '',
password: '',
},
message: '',
};
},
mounted() {
this.fetchUser(this.phone);
},
methods: {
fetchUser(phone) {
// API
axios.get(`http://192.168.243.35:9000/users/getByPhone?phone=${phone}`)
.then(response => {
this.user = response.data
})
.catch(error => {
console.error('Error fetching user:', error);
});
},
updateProfile() {
//
//
//
this.message = '个人信息更新成功!';
//
this.userInfo = {
nickname: '',
email: '',
phone: '',
password: '',
};
//
setTimeout(() => {
this.message = '';
}, 2000);
//
// this.message = '';
},
},
};
</script>
<style scoped>
.profile-edit {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.input-field {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
display: inline-block;
padding: 5px 10px;
margin-top: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.message {
color: #333;
margin-top: 10px;
text-align: center;
}
</style>

@ -0,0 +1,248 @@
<script setup>
// request
import {
getBaseUrl,
requestUtil
} from '../../utils/requestUtil.js';
Page({
/**
* 页面的初始数据
*/
data: {
baseUrl: '',
cart:[],
address:{},
totalPrice:0,
totalNum:0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const baseUrl=getBaseUrl();
this.setData({
baseUrl
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log("show")
const address=wx.getStorageSync('address');
let cart=wx.getStorageSync('cart')||[];
//
cart=cart.filter(v=>v.checked);
let totalPrice=0;
let totalNum=0;
cart.forEach(v=>{
totalPrice+=v.num*v.price;
totalNum+=v.num;
})
this.setData({
cart,
address,
totalNum,
totalPrice
})
}
})
</script>
<template>
<!-- 收货地址 开始 -->
<view class="revice_address_row">
<view class="user_info">
<view class="user_info_item">{{address.provinceName+address.cityName+address.countyName}}</view>
<view class="user_info_item user_info_detail">{{address.detailInfo}}</view>
<text class="user_info_item" decode="{{true}}">{{address.userName}}&nbsp;&nbsp;{{address.telNumber}}</text>
</view>
</view>
<!-- 收货地址 结束 -->
<!-- 购物车清单 开始 -->
<view class="cart_content">
<view class="cart_main">
<view class="cart_item"
wx:for="{{cart}}"
wx:key="id"
>
<!-- 商品图片 开始 -->
<navigator class="cart_img_warp" url="/pages/product_detail/index?id={{item.id}}">
<image mode="widthFix" src="{{baseUrl+'/image/product/'+item.proPic}}"></image>
</navigator>
<!-- 商品图片 结束 -->
<!-- 商品信息 开始 -->
<view class="cart_info_warp">
<navigator url="/pages/product_detail/index?id={{item.id}}">
<view class="goods_name">{{item.name}}</view>
</navigator>
<view class="goods_price_warp">
<view class="goods_price">¥ {{item.price}}</view>
<view class="cart_num_tool">
<view class="goods_num">×{{item.num}}</view>
</view>
</view>
</view>
<!-- 商品信息 结束 -->
</view>
</view>
</view>
<!-- 购物车清单 结束 -->
<!-- 底部工具类 开始 -->
<view class="footer_tool">
<!-- 总价格 开始 -->
<view class="total_price_wrap">
<view class="total_price">
{{totalNum}}合计<text class="total_price_text" decode="{{true}}">&nbsp;¥ {{totalPrice}}</text>
</view>
</view>
<!-- 总价格 结束 -->
<!-- 结算 开始 -->
<view class="order_pay_wrap" bindtap="handlePay">
去付款
</view>
<!-- 结算 结束 -->
</view>
<!-- 底部工具类 结束 -->
</template>
<style scoped>
page{
padding-bottom: 70rpx;
}
.revice_address_row{
border-bottom: 1rpx dotted gray;
padding: 20rpx;
.user_info{
.user_info_item{
margin-top: 10rpx;
}
.user_info_detail{
font-size: 20px;
font-weight: bolder;
margin-bottom: 10rpx;
}
}
}
.cart_content{
background-color: #F5F5F5;
.cart_main{
padding: 2rpx 10rpx 10rpx 10rpx;
.cart_item{
display: flex;
background-color: white;
border-radius: 10px;
margin: 20rpx;
padding-right: 20rpx;
.cart_img_warp{
flex:2;
display: flex;
justify-content: center;
align-items: center;
margin: 20rpx;
border-radius: 10px;
background-color: #F5F5F5;
image{
width: 80%;
}
}
.cart_info_warp{
flex:4;
display: flex;
flex-direction: column;
justify-content: space-around;
navigator{
.goods_name{
font-weight: bolder;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
.goods_price_warp{
display: flex;
justify-content: space-between;
.goods_price{
color:var(--themeColor);
font-size:34rpx;
}
.cart_num_tool{
display: flex;
.goods_num{
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
}
}
.footer_tool{
display: flex;
width: 100%;
height: 90rpx;
background-color: #fff;
border-top: 1px solid #ccc;
position: fixed;
bottom: 0;
left: 0;
padding-left: 30rpx;
.total_price_wrap{
flex:5;
display: flex;
align-items: center;
.total_price{
.total_price_text{
color:var(--themeColor);
font-size: 34rpx;
font-weight: bold;
}
}
}
.order_pay_wrap{
flex:3;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(90deg,#FF740B,#FE6227);
margin: 10rpx;
color:#fff;
font-weight: 600;
font-size: 32rpx;
border-radius: 20px;
}
}
</style>

@ -0,0 +1,68 @@
<template>
<div>订单号: {{ orderId }}</div>
<div v-for="(service, index) in services" :key="service.gid" class="service-box">
<p>{{ service.nickname }}</p>
<p>{{ service.endDate }}</p>
<!-- 添加一个按钮并绑定 click 事件处理器 sendServiceId -->
<button @click="sendServiceId(service.gid)"></button>
</div>
</template>
<script>
import axios from 'axios';
export default {
props: ['orderId'],
data() {
return {
services: []
};
},
methods: {
async sendServiceId(gid) {
try {
// APIgiddidPOST
const orderIdAsInt = parseInt(this.orderId, 10);
const gidAsInt = parseInt(gid, 10);
const response = await axios.post('http://192.168.243.35:9000/DemandMatch/confirmed', { did:orderIdAsInt,gid:gidAsInt});
alert('已同意');
} catch (error) {
console.error('Error sending service ID and order ID:', error);
}
}
},
async created() {
//
axios.get(`http://192.168.243.35:9000/DemandMatch/confirmedPage?did=${this.orderId}`)
.then(response => {
this.services = response.data
})
.catch(error => {
console.error('Error fetching user:', error);
});
},
};
</script>
<style scoped>
/* 样式代码,定义 .service-box 的样式 */
/* 为按钮添加一些样式 */
.service-box button {
margin-left: auto; /* 将按钮推到右侧 */
}
/* 为按钮添加一些样式 */
.service-box button {
margin-left: auto; /* 将按钮推到右侧 */
}
.service-box {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
/* 其他样式 */
}
</style>

@ -0,0 +1,146 @@
<script setup>
</script>
<template>
<view class="order">
<!-- 背景图片 -->
<view class="background">
<image src="../../static/background/background.jfif"></image>
</view>
<!-- 订单列表 -->
<view class="order_item" v-for="(item,index) in orderList" :key="item.supplier_order_id" @click="navToOrderDetail(item.supplier_order_id)">
<view class="shop"> <!-- 商铺名称 -->
<image src="../../static/order-icon/shop.png"></image>
<view class="shop_name">{{item.super_user_name}}</view>
</view>
<view class="order_info"> <!-- 商铺信息 -->
<view>联系电话{{item.super_phone}}</view>
<view>联系地址{{item.super_address}}</view>
<view>订单时间{{item.supplier_order_createdate | formatDate}}</view>
<view v-if="orderList[index].supplier_goods_price">{{item.supplier_goods_price}}</view>
<view v-if="orderList[index].supplier_goods_amount">{{item.supplier_goods_amount}}</view>
</view>
<view class="line"></view> <!-- 分割线 -->
</view>
</view>
</template>```
```javascript
<script>
export default {
data() {
return {
//
orderList: [],
}
},
methods: {
//
async getOrder() {
const res = await this.$myRequest({
url: '/order/getOrderBySupplierId',
method: 'POST',
data: JSON.stringify({
supplier_id: uni.getStorageSync('supplier_id')
})
})
this.orderList = res.data.data
//
for(let i=0;i<this.orderList.length;i++) {
//
let res2 = await this.$myRequest({
url: '/order/getSingleOrderBySupplierGoodsId',
method: 'POST',
data: JSON.stringify({
supplier_order_id: this.orderList[i].supplier_order_id
})
})
//
let orderDetail = res2.data.data
let order_all_price = 0
let order_all_amount = 0
for(let j=0;j<orderDetail.length;j++) {
order_all_price = order_all_price + orderDetail[j].supplier_goods_price * orderDetail[j].supplier_goods_amount
order_all_amount = order_all_amount + orderDetail[j].supplier_goods_amount
}
this.orderList[i].supplier_goods_price = order_all_price
this.orderList[i].supplier_goods_amount = order_all_amount
}
},
//
navToOrderDetail(supplier_order_id) {
uni.navigateTo({
url: '/pages/order/order-detail?supplier_order_id='+supplier_order_id
})
},
//
onPullDownRefresh() {
setTimeout(()=>{
this.getOrder(()=>{
uni.stopPullDownRefresh()
})
}, 500)
}
},
//
onLoad() {
//
this.getOrder()
}
}
</script>
<style lang="scss">
.order {
.background { //
image {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
}
.order_item {
background-color: white;
.shop { //
display: flex;
padding: 10rpx 30rpx 0 30rpx;
image { //
padding: 5rpx 15rpx 0 0;
width: 60rpx;
height: 60rpx;
}
.shop_name { //
font-size: 45rpx;
line-height: 70rpx;
}
}
.order_info { //
color: #555555;
padding: 0 30rpx 10rpx 30rpx;
font-size: 35rpx;
line-height: 60rpx;
}
.line { // 线
width: 750rpx;
height: 8rpx;
background: #eee;
}
}
}
</style>

@ -12,9 +12,6 @@
<button @click="toggleNicknameInput"></button>
</div>
<h1>{{ user.name }}</h1>
<p>身份证号{{user.IDCard}}</p>
<div v-if="showEmailInput">
<label for="email">邮箱</label>
@ -35,73 +32,28 @@
<p>手机号{{ user.phone }}</p>
<button @click="togglePhoneInput"></button>
</div>
<div><button @click="gotoDemandList"></button></div>
<div class="footer-nav">
<button @click="gotohome()"></button>
<button @click="gotomessage()"></button>
<button>我的</button>
</div>
<div v-if="user.membertype"><button @click="gotoServerList"></button></div>
<div><button @click="gotoLogin">退</button></div>
<div><NavigationBar /></div>
</div>
</template>
<style scoped>
/* 在这里添加样式 */
.profile {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.input-field {
margin-bottom: 10px;
}
button {
margin-top: 10px;
}
.home-container {
/* 添加你的样式 */
text-align: center;
padding: 20px;
/* 可能需要为内容添加一些底部空间以容纳底部导航 */
padding-bottom: 50px;
}
.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>
import axios from 'axios';
import NavigationBar from '../components/NavigationBar.vue';
export default {
props: ['phone'],
data() {
return {
user: {},
@ -109,24 +61,26 @@ export default {
showNicknameInput: false,
email: '',
showEmailInput: false,
phone: '',
phone:sessionStorage.getItem('phone') || '',
showPhoneInput: false,
IDCard: '',
idcard: '',
createtime: '',
status: 0,
reputation:60,
};
},
created() {
//
components: {
NavigationBar
},
mounted() {
this.fetchUser(this.phone);
},
methods: {
fetchUser(phone) {
// API
axios.get(`http://192.168.254.35:8080/users/getByPhone?phone=15616168609`)
axios.get(`http://192.168.243.35:9000/users/getByPhone?phone=${phone}`)
.then(response => {
alert(response.data);
this.user = response.data;
this.user = response.data
})
.catch(error => {
console.error('Error fetching user:', error);
@ -138,7 +92,8 @@ export default {
this.nickname = this.user.nickname;
},
updateNickname(){
axios.get(`http://192.168.254.35:8080/users/getByPhone?phone=15616168609`, { nickname: this.nickname })
this.user.nickname = this.nickname;
axios.post(`http://192.168.243.35:9000/users/Pupdate`,{user:this.user})
.then(response => {
this.user.nickname = this.nickname;
this.toggleNicknameInput(); //
@ -153,7 +108,8 @@ export default {
},
updateEmail() {
//
axios.get(`http://192.168.254.35:8080/users/getByPhone?phone=15616168609`, { email: this.email })
this.user.email = this.email;
axios.post(`http://192.168.243.35:9000/users/Pupdate`,{user:this.user})
.then(response => {
this.user.email = this.email;
this.toggleEmailInput(); //
@ -167,9 +123,10 @@ export default {
this.phone = this.user.phone;
},
updatePhone(){
axios.get(`http://192.168.254.35:8080/users/getByPhone?phone=15616168609`, { phone: this.phone })
this.user.phone = this.phone;
axios.post(`http://192.168.243.35:9000/users/Pupdate`,{user:this.user})
.then(response => {
alert(this.phone);
sessionStorage.setItem('phone', this.phone);
this.user.phone = this.phone;
this.togglePhoneInput(); //
})
@ -183,6 +140,17 @@ export default {
gotomessage() {
this.$router.push('/message');
},
gotoDemandList() {
this.$router.push('/demandlist');
},
gotoServerList() {
this.$router.push('/serverlist');
},
gotoLogin() {
this.$router.push('/login');
sessionStorage.setItem('phone', '');
},
}
};
</script>

@ -0,0 +1,188 @@
<template>
<div class="return">
<button class="returnList" @click="returnList()"></button>
</div>
<h1>订单</h1>
<div class="order-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 v-if="list.status === 0">
<div><button @click="goToMatchDetail(orderId)"></button></div>
<div><button @click="goToDemandMatched(orderId)"></button></div>
<div><button @click="cancelTrip(orderId)"></button></div>
</div>
<div v-if="list.status === 1">
<div><button @click="goToMatchDetail(orderId)"></button></div>
<div><button @click="goToDemandMatched(orderId)"></button></div>
<div><button @click="cancelTrip(orderId)"></button></div>
</div>
<div v-if="list.status === 2">
<div><button @click="cancel(orderId)"></button></div>
<div><button @click="over(orderId)"></button></div>
</div>
<div><button v-if="list.status === 3" @click="goToEvaluateTrip(orderId)"></button></div>
<div><button v-if="list.status === 3" @click="deleteOrder(orderId)"></button></div>
</div>
</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;
}
.order-details {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 20px;
background-color: #f5f5f5; /* 浅灰色背景 */
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
.order-details h2 {
margin-bottom: 20px; /* 增加标题与内容之间的间距 */
}
.order-details p {
margin-bottom: 10px; /* 增加段落之间的间距 */
}
.order-details button {
margin-right: 10px; /* 增加按钮之间的间距 */
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.order-details button:hover {
background-color: #ddd; /* 按钮点击时的背景色 */
}
/* 根据状态为按钮添加不同的样式 */
.order-details button.cancel {
background-color: #f44336; /* 红色背景,表示取消操作 */
color: white;
}
.order-details button.over {
background-color: #4CAF50; /* 绿色背景,表示完成操作 */
color: white;
}
</style>
<script>
import axios from 'axios';
export default {
props: ['orderId'],
data() {
return {
phone: sessionStorage.getItem('phone') || '',
list: [],
};
},
async created() {
//
axios.get(`http://192.168.243.35:9000/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(`http://192.168.243.35:9000/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(`http://192.168.243.35:9000/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(`http://192.168.243.35:9000/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(`http://192.168.243.35:9000/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,79 @@
<template>
<div>
<Return></Return>
</div>
<div>
<h1>平台导游资格申请</h1>
<form @submit.prevent="submitForm">
<div>
<label for="experience">有无相关经历:</label>
<input type="radio" id="has-experience-yes" value="true" v-model="registerToGuide.re" required>
<label for="has-experience-yes"></label>
<input type="radio" id="has-experience-no" value="false" v-model="registerToGuide.re">
<label for="has-experience-no"></label>
</div>
<div>
<label for="rsd">居住地区:</label>
<input type="text" id="rsd" v-model="registerToGuide.rsd">
</div>
<div>
<label for="familiar-area">熟悉区域:</label>
<textarea id="familiar-area" v-model="registerToGuide.fa"></textarea>
</div>
<div>
<label for="syns">个人简介:</label>
<textarea id="syns" v-model="registerToGuide.syns"></textarea>
</div>
<button @click="Submit()"></button>
</form>
</div>
</template>
<script>
import axios from 'axios';
import Return from '../components/return.vue'
export default {
data() {
return{
registerToGuide:{
uid:0,
re: '',
rsd: '',
fa: '',
syns: '',
},
};
},
methods:{
Submit(){
axios.get(`http://192.168.243.35:9000/users/getUid?phone=${sessionStorage.getItem('phone')}`)
.then(response => {
this.registerToGuide.uid = response.data
axios.post(`http://192.168.243.35:9000/users/registerToGuide`,{registerToGuide:this.registerToGuide})
.then(response => {
if(response.data == 1){
alert("申请成功!")
this.$router.push('/addServe')
}else{
alert("申请未通过!")
}
})
.catch(error => {
console.error('Error fetching user:', error);
});
})
.catch(error => {
console.error('Error fetching user:', error);
});
}
},
components:{
Return,
},
};
</script>
<style scoped>
/* 添加你的样式 */
</style>

@ -1,16 +1,23 @@
<script>
import Return from '../components/return.vue'
export default {
name: 'SearchPage',
components: {
Return
},
}
</script>
<template>
<div class="home-container">
<div class="return">
<button class="return-button" @click="gotohome()"></button>
<div>
<Return></Return>
</div>
<div class="search-container">
<input type="text" class="search-input" placeholder="世界这么大出去看看吧">
<button class="search-button" @click="search"></button>
</div>
</div>
</template>
<style scoped>
@ -49,20 +56,6 @@
background-color: #bbb;
}
.return-button {
/* 定义返回按钮的样式 */
position: fixed; /* 使按钮位置固定 */
top: 10px;
left: 10px;
margin: 0;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #ccc;
color: #333;
cursor: pointer;
}
.footer-nav button {
/* 定义按钮的样式 */
flex: 1;
@ -79,13 +72,3 @@
}
</style>
<script>
export default {
name: 'SearchPage',
methods: {
gotohome() {
this.$router.push('/home');
},
}
}
</script>

@ -0,0 +1,133 @@
<template>
<div class="return">
<button class="returnList" @click="returnList()"></button>
</div>
<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>
</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';
export default {
props: ['serverId'],
data() {
return {
phone: sessionStorage.getItem('phone') || '',
list: [],
};
},
async created() {
//
axios.get(`http://192.168.243.35:9000/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(`http://192.168.243.35:9000/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(`http://192.168.243.35:9000/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(`http://192.168.243.35:9000/GuideMatch/delete`,{gid:gid})
.then(response => {
if(response.data == 1){
alert('删除成功');
this.$router.push('/serverList')
}
})
.catch(error => {
console.error('Error fetching user:', error);
});
},
returnList() {
this.$router.push('/serverList');
}
}
};
</script>

@ -0,0 +1,75 @@
<template>
<div class="return">
<button class="returnList" @click="returnList()"></button>
</div>
<div>
<h1>订单列表</h1>
<div
v-for="(list, index) in lists"
:key="list.gid"
class="order-box"
@click="goToServerDetails(list.gid)"
>
<p>目的地: {{ list.city }}</p>
<p>开始时间: {{ list.departureDate }}</p>
<p>结束时间: {{ list.endDate }}</p>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
phone: sessionStorage.getItem('phone') || '',
lists: [],
};
},
async created() {
//
axios.get(`http://192.168.243.35:9000/SendGuideService/sendAllGuideService?phone=${this.phone}`)
.then(response => {
this.lists = response.data
})
.catch(error => {
console.error('Error fetching user:', error);
});
},
methods: {
goToServerDetails(serverId) {
this.$router.push({ name: 'ServerDetail', params: { serverId } });
},
returnList() {
this.$router.push('/mine');
}
}
};
</script>
<style scoped>
.order-box {
/* 样式代码,用于美化订单盒子 */
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
.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>

@ -0,0 +1,69 @@
<template>
<div>订单号: {{ serverId }}</div>
<div v-for="(service, index) in services" :key="service.gid" class="service-box">
<p>目的地:{{ service.city }}</p>
<p>开始时间:{{ service.departureDate }}</p>
<p>结束时间{{ service.endDate }}</p>
<!-- 添加一个按钮并绑定 click 事件处理器 sendServiceId -->
<button @click="sendServiceId(service.did)"></button>
</div>
</template>
<script>
import axios from 'axios';
export default {
props: ['serverId'],
data() {
return {
services: []
};
},
methods: {
async sendServiceId(did) {
try {
// APIgiddidPOST
const serverIdAsInt = parseInt(this.serverId, 10);
const didAsInt = parseInt(did, 10);
const response = await axios.post('http://192.168.243.35:9000/GuideMatch/match', { gid:serverIdAsInt,did:didAsInt});
alert('已向游客发送确认信息');
} catch (error) {
console.error('Error sending service ID and order ID:', error);
}
}
},
async created() {
//
axios.get(`http://192.168.243.35:9000/GuideMatch/register?gid=${this.serverId}`)
.then(response => {
this.services = response.data
})
.catch(error => {
console.error('Error fetching user:', error);
});
},
};
</script>
<style scoped>
/* 样式代码,定义 .service-box 的样式 */
/* 为按钮添加一些样式 */
.service-box button {
margin-left: auto; /* 将按钮推到右侧 */
}
/* 为按钮添加一些样式 */
.service-box button {
margin-left: auto; /* 将按钮推到右侧 */
}
.service-box {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
/* 其他样式 */
}
</style>

@ -0,0 +1,69 @@
<template>
<div>订单号: {{ serverId }}</div>
<div v-for="(service, index) in services" :key="service.gid" class="service-box">
<p>目的地:{{ service.city }}</p>
<p>开始时间:{{ service.departureDate }}</p>
<p>结束时间{{ service.endDate }}</p>
<!-- 添加一个按钮并绑定 click 事件处理器 sendServiceId -->
<button @click="sendServiceId(service.did)"></button>
</div>
</template>
<script>
import axios from 'axios';
export default {
props: ['serverId'],
data() {
return {
services: []
};
},
methods: {
async sendServiceId(did) {
try {
// APIgiddidPOST
const serverIdAsInt = parseInt(this.serverId, 10);
const didAsInt = parseInt(did, 10);
const response = await axios.post('http://192.168.243.35:9000/GuideMatch/confirmed', { gid:serverIdAsInt,did:didAsInt});
alert('已接单');
} catch (error) {
console.error('Error sending service ID and order ID:', error);
}
}
},
async created() {
//
axios.get(`http://192.168.243.35:9000/GuideMatch/register?gid=${this.serverId}`)
.then(response => {
this.services = response.data
})
.catch(error => {
console.error('Error fetching user:', error);
});
},
};
</script>
<style scoped>
/* 样式代码,定义 .service-box 的样式 */
/* 为按钮添加一些样式 */
.service-box button {
margin-left: auto; /* 将按钮推到右侧 */
}
/* 为按钮添加一些样式 */
.service-box button {
margin-left: auto; /* 将按钮推到右侧 */
}
.service-box {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
/* 其他样式 */
}
</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,657 @@
<script setup>
// JavaScript Document
window.onload = function(){
function $(param){
if(arguments[1] == true){
return document.querySelectorAll(param);
}else{
return document.querySelector(param);
}
}
var $box = $(".box");
var $box1 = $(".box-1 ul li",true);
var $box2 = $(".box-2 ul");
var $box3 = $(".box-3");
var $length = $box1.length;
var str = "";
for(var i =0;i<$length;i++){
if(i==0){
str +="<li class='on'>"+(i+1)+"</li>";
}else{
str += "<li>"+(i+1)+"</li>";
}
}
$box2.innerHTML = str;
var current = 0;
var timer;
timer = setInterval(go,4000);
function go(){
for(var j =0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
if($length == current){
current = 0;
}
$box1[current].style.display = "block";
$box2.children[current].className = "on";
current++;
}
for(var k=0;k<$length;k++){
$box1[k].onmouseover = function(){
clearInterval(timer);
}
$box1[k].onmouseout = function(){
timer = setInterval(go,4000);
}
}
for(var p=0;p<$box3.children.length;p++){
$box3.children[p].onmouseover = function(){
clearInterval(timer);
};
$box3.children[p].onmouseout = function(){
timer = setInterval(go,4000);
}
}
for(var u =0;u<$length;u++){
$box2.children[u].index = u;
$box2.children[u].onmouseover = function(){
clearInterval(timer);
for(var j=0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
this.className = "on";
$box1[this.index].style.display = "block";
current = this.index +1;
}
$box2.children[u].onmouseout = function(){
timer = setInterval(go,2000);
}
}
$box3.children[0].onclick = function(){
back();
}
$box3.children[1].onclick = function(){
go();
}
function back(){
for(var j =0;j<$length;j++){
$box1[j].style.display = "none";
$box2.children[j].className = "";
}
if(current == 0){
current = $length;
}
$box1[current-1].style.display = "block";
$box2.children[current-1].className = "on";
current--;
}
}
</script>
<template>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/js.js"></script>
<title>电影电视剧</title>
</head>
<body>
<div class="wrapin">
<header class="clearfix"> <a href="#" class="logo"><img src="images/logo.png"/></a>
<ul class="clearfix nav">
<li><a href="index.html">首页</a></li>
<li><a href="dianying.html">电影</a></li>
<li><a href="dianshiju.html">电视剧</a></li>
<li><a href="yingyuan.html">电影院</a></li>
</ul>
<div class="denglu"> <a href="login.html" class="dl">登录</a> <a href="zhuce.html" class="zc">注册</a> </div>
</header>
</div>
<div class="wrapin">
<div class="banner_con clearfix">
<div class="banner_box ">
<div class="box-1">
<ul>
<li><a href="#"><img src="images/banner_01.jpg"></img></a> </li>
<li><a href="#"><img src="images/banner_02.jpg"></img></a> </li>
<li><a href="#"><img src="images/banner_03.jpg"></img></a> </li>
</ul>
</div>
<div class="box-2">
<ul>
</ul>
</div>
<div class="box-3"> <span class="prev"> < </span> <span class="next"> > </span> </div>
</div>
</div>
<div class="con">
<div class="title">
<h2>电影院</h2>
</div>
<div class="about clearfix">
<div class="text">
<p>万达电影股份有限公司以下简称万达电影 股票代码002739.SZ隶属于万达集团2005万达电影院线成立2015年A股上市2017年正式更名为万达电影业务范围从产业链下游放映业务向上延伸至电影投资制作和发行及相关衍生业务全面覆盖电影产业链截至2020年12月31日万达电影在全球拥有影院1704家银幕17118块包含国内直营影城700家6099块银幕其中拥有44家杜比影院和370块IMAX银幕IMAX银幕数量全球领先 </p>
<a href="dyy1.html" class="btn">详情查看</a> <a href="dingpiao.html" class="btn2">订票</a>
</div>
<div class="pic"><img src="images/c1.jpg"/></div>
</div>
<div class="about clearfix">
<div class="text">
<p>太平洋电影城是四川省电影公司全资影城属太平洋电影院线旗下影院创立于1992年12月距今已23年历史累计票房收入2.3亿元接待观众超过2千余万影城成立以来先后投资三千余万元经数次装修改造使影城始终引领电影时尚潮流 地处最繁华的春熙路商圈核心位置 拥有18个豪华电影厅观众座席数2000多座是全国影厅最多节目最多场次最多人次最多的影城率先引进数字3D电影影厅内安装有世界顶级的英国杜比CP650(EX)数字处理器 美国JBL音响德国ISCO一体化镜头美国QSC数字功放DCA 6.1声道杜比数码立体声系统</p><a href="dyy2.html" class="btn">详情查看</a> <a href="dingpiao.html" class="btn2">订票</a>
</div>
<div class="pic"><img src="images/c2.jpg"/></div>
</div>
<div class="about clearfix">
<div class="text">
<p>百老汇电影中心有4间影院共640个座位还有1间叫Kubrick的书店售卖电影书籍及提供咖啡店服务该处是除了已结业的影艺戏院外香港少数播放非主流电影的戏院
2009年11月百老汇电影院(香港安乐影片有限公司)在北京开设了一家艺术影院MOMA百老汇电影中心这是北京第一座大型艺术影院坐落在地标性建筑群当代MOMA(当代万国城) MOMA百老汇电影中心拥有三个放映屏幕一个电影资料馆一家书店和一间咖啡厅</p>
<a href="dyy3.html" class="btn">详情查看</a> <a href="dingpiao.html" class="btn2">订票</a> </div>
<div class="pic"><img src="images/c3.jpg"/></div>
</div>
</div>
<div class="con">
<div class="title">
<h2>热门电影</h2>
<a href="dianying.html">查看更多</a> </div>
<ul class="game_list clearfix">
<li> <a href="dianying1.html" class="box">
<div class="pic"><img src="images/1.jpg"/></div>
<p>峰爆</p>
</a> </li>
<li> <a href="dianying2.html" class="box">
<div class="pic"><img src="images/2.jpg"/></div>
<p>困在时间的父亲</p>
</a> </li>
<li> <a href="dianying3.html" class="box">
<div class="pic"><img src="images/3.jpg"/></div>
<p>一级指控</p>
</a> </li>
<li> <a href="dianying4.html" class="box">
<div class="pic"><img src="images/4.jpg"/></div>
<p>寻龙诀</p>
</a> </li>
<li> <a href="dianying6.html" class="box">
<div class="pic"><img src="images/5.jpg"/></div>
<p>一曲倾情</p>
</a> </li>
</ul>
</div>
<div class="con">
<div class="title">
<h2>热门电视剧</h2>
<a href="dianshiju.html">查看更多</a> </div>
<ul class="game_list clearfix">
<li> <a href="dianshiju1.html" class="box">
<div class="pic"><img src="images/11.jpg"/></div>
<p> 加里森敢死队</p>
</a> </li>
<li> <a href="dianshiju2.html" class="box">
<div class="pic"><img src="images/22.jpg"/></div>
<p>情谜睡美人</p>
</a> </li>
<li> <a href="dianshiju3.html" class="box">
<div class="pic"><img src="images/33.jpg"/></div>
<p>双镜</p>
</a> </li>
<li> <a href="dianshiju4.html" class="box">
<div class="pic"><img src="images/44.jpg"/></div>
<p>突如其来的假期</p>
</a> </li>
<li> <a href="dianshiju5.html" class="box">
<div class="pic"><img src="images/55.png"/></div>
<p>奇妙博物馆</p>
</a> </li>
</ul>
</div>
<footer> 电影</footer>
</div>
</body>
</html>
</template>
<style scoped>
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
font-size: 14px;
background: #000;
background-size: auto;
color: #333;
position: relative;
}
img {
border: none;
}
a {
cursor: pointer;
color: #333;
text-decoration: none;
outline: none;
}
ul {
list-style-type: none;
}
em {
font-style: normal;
}
.lt {
float: left;
}
.rt {
float: right;
}
div.clear {
font: 0px Arial;
line-height: 0;
height: 0;
overflow: hidden;
clear: both;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.wrapin {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.logo {
display: block;
width:80px;
margin: 5px 0;
float: left;
padding-right:100px;
}
.logo img {
width: 100%;
}
header {
height: 80px;
padding: 0 15px
}
.nav {
float: left;
line-height: 80px;
}
.nav li {
display: inline-block;
width: 80px;
font-size: 18px;
text-align: center;
}
.nav li a {
color: #fff;
}
.denglu {
float: right;
color: #fff;
line-height: 80px;
}
.denglu a {
color: #fff;
font-size: 14px;
margin: 0 5px;
display: inline-block;
}
.banner {
width: 100%;
}
.banner img {
display: block;
width: 100%;
}
.banner_con {
margin: 20px 0; position:relative
}
.banner_box {
float: left;
width: 1200px;
height: 410px;
overflow: hidden;
position: relative;
}
.box-1 ul {
}
.box-1 ul li {
width: 100%;
height: 410px;
position: relative;
overflow: hidden;
}
.box-1 ul li img {
display: block;
width: 100%;
object-fit: cover;
height: 100%;
}
.box-1 ul li h2 {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
width: 100%;
background: rgba(125,125,120,.4);
text-indent: 2em;
padding-right: 500px;
font-size: 15px;
line-height: 40px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-weight: normal;
color: ghostwhite
}
.box-2 {
position: absolute;
right: 20px;
bottom: 14px;
}
.box-2 ul li {
float: left;
width: 12px;
height: 12px;
overflow: hidden;
margin: 0 5px;
border-radius: 50%;
background: rgba(0,0,0,0.5);
text-indent: 100px;
cursor: pointer;
}
.box-2 ul .on {
background: rgba(255,255,255,0.6);
}
.box-3 span {
position: absolute;
color: rgba(255,255,255,0.1);
background: rgba(255,255,255,0.1);
width: 50px;
height: 80px;
top: 50%;
font-family: "宋体";
line-height: 80px;
font-size: 60px;
margin-top: -40px;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.box-3 .prev {
left: 10px;
}
.box-3 .next {
right: 10px;
}
.box-3 span::selection {
background: transparent;
}
.box-3 span:hover {
background: rgba(255,255,255,.5);
color: rgba(255,255,255,1)
}
.banner_rt {
float: left;
width: 220px;
position:absolute;
top:0;
right:0;
height: 410px;
background: #0F161F;
padding: 10px;
box-sizing: border-box;
}
.banner_rt h2 {
padding-bottom: 5px;
color: #fff;
font-size: 18px;
}
.banner_rt li {
margin: 8px 0;
height: 110px;
border: 1px solid #ccc;
overflow: hidden;
}
.banner_rt img {
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.banner_rt img:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1); /*兼容-webkit-引擎浏览器*/
-moz-transform: scale(1.1);
}
.con {
margin-top: 20px;
background: #222;
padding: 15px;
}
.title {
color: #fff;
border-bottom: 1px solid #666;
margin: 15px 0;
position: relative;
}
.title h2 {
width: 180px;
font-weight: 600;
line-height: 40px;
font-size:24px;
border-bottom: none;
}
.title2 {
color: #fff;
margin: 15px 0;
}
.title2 h2 {
display: block;
padding: 0 15px;
text-align: center;
font-weight: 100;
line-height: 40px;
font-size: 18px;
border: 1px solid #fff;
}
.title a {
display: block;
font-size: 14px;
color: #ccc;
line-height: 40px;
position: absolute;
right: 0;
top: 0;
}
.game_list {
margin: 15px -15px;
}
.game_list li {
float: left;
width: 20%;
padding: 15px;
box-sizing: border-box;
}
.game_list li .box {
display: block;
background: #214575;
}
.game_list li .pic {
width: 100%;
height: 300px;
overflow: hidden;
}
.game_list li .pic img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.game_list li .pic img:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1); /*兼容-webkit-引擎浏览器*/
-moz-transform: scale(1.1);
}
.game_list li p {
line-height: 40px;
text-align: center;
color: #fff;
font-size: 16px;
}
footer {
background: #0F161F;
text-align: center;
line-height: 50px;
font-size: 16px;
color: #fff;
margin-top: 20px;
}
.about {
line-height: 26px;
color: #fff;
font-size: 14px;
}
.about .text {
float: left;
width: 68%;
padding-top:100px;
}
.btn{ background:#006699; display:inline-block; font-size:19px; width:120px; line-height:40px; color:#fff; text-align:center; margin-top:20px}
.btn2{ background:#CC6666; display:inline-block; font-size:19px; width:120px; line-height:40px; color:#fff; text-align:center; margin-top:20px}
.about .pic {
float: right;
width: 30%;
margin-top: 20px;
}
.about .pic img {
width: 100%;
}
.hm_vdo {
width: 800px;
margin: 30px auto;
display: block;
}
form {
color: #fff;
width: 400px;
display: block;
margin: 20px auto;
}
form h2 {
text-align: center;
font-size: 20px;
margin: 30px 0;
}
form .in {
display: block;
margin: 10px 0;
}
form .in p {
font-size: 16px;
margin-bottom: 10px;
}
form .in .phone {
width: 100%;
padding: 0 15px;
border: none;
box-sizing: border-box;
height: 40px;
border-radius: 5px;
background: #fff;
}
form .but {
width: 100%;
height: 40px;
color: #fff;
border: none;
border-radius: 5px;
background: #06c3ff;
margin: 20px 0;
}
form a {
display: block;
color: #eee;
font-size: 14px;
}
.details .pic {
float: left;
width: 15%;
height: 243px;
}
.details .pic img {
width: 100%;
height: 100%;
}
.details .text {
float: right;
width: 83%;
height: 243px;
color: #fff;
}
.details .text h2 {
font-size: 24px;
margin-bottom:30px;
}
.details .text p {
font-size: 16px;
line-height: 26px;
}
.txt{ color:#fff; line-height:30px;}
.txt p{ margin:10px 0}
.table_a {
font-size: 12px;
margin: 10px 0;
margin-top:40px;
}
.table_a td {
line-height: 26px;
}
.leix h4 {
font-size: 14px;
color: #fff;
font-weight: 100;
margin-bottom: 10px;
}
.leix a {
padding: 3px 8px;
margin-bottom: 5px;
margin-right: 5px;
background: #0e1e34;
color: #67c1f5;
display: inline-block;
}
</style>

@ -0,0 +1,58 @@
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 SearchPage from '../pages/searchPage.vue';
import Test from '../pages/test.vue'
import Communication from '../pages/Communication.vue'
import Pay from '../pages/Pay.vue';
import AddDemand from '../pages/addDemand.vue';
import DemandList from '../pages/DemandList.vue';
import Evaluation from '../pages/Evaluation.vue';
import SecurityVerification from '../pages/SecurityVerification.vue';
import RegisterGuide from '../pages/registerGuide.vue';
import AddServe from '../pages/addServe.vue';
import EvaluationList from '../pages/EvaluationList.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: '/searchPage', component: SearchPage },
{ path: '/addDemandPage', component: AddDemand },
{ path: '/test', component: Test },
{ path: '/message', component: Communication },
{ path: '/pay', component:Pay},
{ path: '/demandlist', name: 'DemandList', component:DemandList},
{ path: '/evaluation/:orderId',name: 'Evaluation', component:Evaluation,props: (route) => ({ orderId: route.params.orderId })},
{ path: '/SecurityVerification', component:SecurityVerification},
{ path: '/registerGuide', component:RegisterGuide},
{ path:'/addServe', component:AddServe},
{ path: '/evaluationList', component:EvaluationList},
{ 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,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,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,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"]
}

@ -1,21 +0,0 @@
{
"name": "walktofree",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.6.8",
"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"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

@ -1,19 +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;
}
</style>

@ -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>

@ -1,97 +0,0 @@
<template>
<div class="register-container">
<h1>注册页面</h1>
<form @submit.prevent="register" class="register-form">
<label for="username">用户名</label>
<input type="text" id="username" v-model="username" class="input-field">
<br>
<label for="password">密码</label>
<input type="password" id="password" v-model="password" class="input-field">
<br>
<button type="submit" class="submit-button">注册</button>
<button class="return-button" @click="gotoLogin()"></button>
</form>
</div>
</template>
<style scoped>
.register-container {
max-width: 400px;
margin: 0 auto;
padding: 30px;
border: 1px solid #cccc7b;
border-radius: 5px;
text-align: center;
}
.input-field {
margin: 10px 0;
padding: 5px;
width: 100%;
}
.submit-button {
padding: 10px 20px;
background-color: #28a7a3;
color: #abd4ee;
border: none;
border-radius: 5px;
cursor: pointer;
}
.return-button {
padding: 10px 20px;
background-color: #ff6347; /* 例如,设置为红色 */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px; /* 可以添加一些上边距来分隔按钮 */
}
</style>
<script>
import { register } from '../api/auth'
import axios from "axios";
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
register() {
console.log("用户名:", this.username);
console.log("密码:", this.password);
axios.post('http://192.168.254.35:8080/Login/register', {
//
username: this.username,
password: this.password
}, {
// cookie
withCredentials: true,
// JSON
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
console.log(response.data)
//
alert(response.data);
})
.catch(error => {
console.error(error)
//
alert(response.data);
})
},
gotoLogin(){
this.$router.push('/login');
},
}
}
</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,67 +0,0 @@
<template>
<div class="home-container">
<h1>消息页面</h1>
<!-- 在这里添加你的主页内容 -->
<div class="footer-nav">
<button @click="gotohome()"></button>
<button @click="gotomessage()"></button>
<button @click="gotomine()"></button>
</div>
</div>
</template>
<style scoped>
.home-container {
/* 添加你的样式 */
text-align: center;
padding: 20px;
/* 可能需要为内容添加一些底部空间以容纳底部导航 */
padding-bottom: 50px;
}
.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: 'Message',
methods: {
gotohome() {
this.$router.push('/home');
},
gotomessage() {
this.$router.push('/message');
},
gotomine() {
this.$router.push('/mine');
},
}
}
</script>

@ -1,339 +0,0 @@
<template>
<div class="mine">
<h2>个人主页</h2>
<h1>{{ user.name }}</h1>
<!-- <h1>用户姓名</h1>-->
<p>创建时间{{user.createtime}}</p>
<p>账号: {{ username }}</p>
<p>身份证号{{user.IDCard}}</p>
<div v-if="showEmailInput">
<label for="email">邮箱</label>
<input type="email" id="email" v-model="email" class="input-field">
<button @click="updateEmail"></button>
</div>
<div v-else>
<p>邮箱{{ user.email }}</p>
<button @click="toggleEmailInput"></button>
</div>
<div v-if="showPhoneInput">
<label for="PhoneNumber">手机号</label>
<input type="phone" id="phone" v-model="phone" class="input-field">
<button @click="updatePhone"></button>
</div>
<div v-else>
<p>手机号{{ user.phone }}</p>
<button @click="togglePhoneInput"></button>
</div>
<div class="footer-nav">
<button @click="gotohome()"></button>
<button @click="gotomessage()"></button>
<button>我的</button>
</div>
</div>
</template>
<style scoped>
.profile {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.input-field {
margin-bottom: 10px;
}
button {
margin-top: 10px;
}
.home-container {
/* 添加你的样式 */
text-align: center;
padding: 20px;
/* 可能需要为内容添加一些底部空间以容纳底部导航 */
padding-bottom: 50px;
}
.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>
import { ref, onMounted } from 'vue';
// 使AxiosHTTP
import axios from 'axios';
export default {
name: 'Mine',
props: ['username'],
setup(props) {
const user = ref({}); // 使refdata
const email = ref('');
const showEmailInput = ref(false);
const phone = ref('');
const showPhoneInput = ref(false);
// 使onMountedcreated
onMounted(() => {
fetchUser(props.username);
});
// fetchUser使Axios
async function fetchUser(username) {
try {
const response = await axios.get(`/api/users/${username}`);
user.value = response.data; // user
} catch (error) {
console.error('Error fetching user:', error);
}
}
//
function gotohome() {
router.push('/home');
}
function gotomessage() {
router.push('/message');
}
fetchUser(username) {
// API
axios.post(`http://192.168.254.35:8080/user/${username}`)
.then(response => {
this.user = response.data;
})
.catch(error => {
console.error('Error fetching user:', error);
});
},
toggleEmailInput() {
this.showEmailInput = !this.showEmailInput;
this.email = this.user.email;//
},
updateEmail() {
//
axios.put(`http://192.168.254.35:8080/user/${this.username}/email`, { email: this.email })
.then(response => {
alert(this.email);
this.user.email = this.email;
this.toggleEmailInput(); //
})
.catch(error => {
console.error('Error updating email:', error);
});
},
togglePhoneInput(){
this.showPhoneInput = !this.showPhoneInput;
this.phone = this.user.phone;
},
updatePhone(){
axios.put(`http://192.168.254.35:8080/user/${this.username}/phone`, { phone: this.phone })
.then(response => {
this.user.phone = this.phone;
this.togglePhoneInput(); //
})
.catch(error => {
console.error('Error updating phone:', error);
});
}
return {
user,
email,
showEmailInput,
phone,
showPhoneInput,
gotohome,
gotomessage,
};
},
};
</script>
<template>
<div class="mine">
<h2>个人主页</h2>
<h1>{{ user.name }}</h1>
<!-- <h1>用户姓名</h1>-->
<p>创建时间{{user.createtime}}</p>
<p>账号: {{ username }}</p>
<p>身份证号{{user.IDCard}}</p>
<div v-if="showEmailInput">
<label for="email">邮箱</label>
<input type="email" id="email" v-model="email" class="input-field">
<button @click="updateEmail"></button>
</div>
<div v-else>
<p>邮箱{{ user.email }}</p>
<button @click="toggleEmailInput"></button>
</div>
<div v-if="showPhoneInput">
<label for="PhoneNumber">手机号</label>
<input type="phone" id="phone" v-model="phone" class="input-field">
<button @click="updatePhone"></button>
</div>
<div v-else>
<p>手机号{{ user.phone }}</p>
<button @click="togglePhoneInput"></button>
</div>
<div class="footer-nav">
<button @click="gotohome()"></button>
<button @click="gotomessage()"></button>
<button>我的</button>
</div>
</div>
</template>
<style scoped>
.profile {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.input-field {
margin-bottom: 10px;
}
button {
margin-top: 10px;
}
.home-container {
/* 添加你的样式 */
text-align: center;
padding: 20px;
/* 可能需要为内容添加一些底部空间以容纳底部导航 */
padding-bottom: 50px;
}
.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: 'Mine',
props: ['username'],
data() {
return {
user: {}, //
email: '',
showEmailInput: false,
phone: '',
showPhoneInput: false,
};
},
created() {
this.fetchUser(this.username);
},
methods: {
gotohome() {
this.$router.push('/home');
},
gotomessage() {
this.$router.push('/message');
},
fetchUser(username) {
// API
axios.post(`http://192.168.254.35:8080/user/${username}`)
.then(response => {
this.user = response.data;
})
.catch(error => {
console.error('Error fetching user:', error);
});
},
toggleEmailInput() {
this.showEmailInput = !this.showEmailInput;
this.email = this.user.email;//
},
updateEmail() {
//
axios.put(`http://192.168.254.35:8080/user/${this.username}/email`, { email: this.email })
.then(response => {
this.user.email = this.email;
this.toggleEmailInput(); //
})
.catch(error => {
console.error('Error updating email:', error);
});
},
togglePhoneInput(){
this.showPhoneInput = !this.showPhoneInput;
this.phone = this.user.phone;
},
updatePhone(){
axios.put(`http://192.168.254.35:8080/user/${this.username}/phone`, { phone: this.phone })
.then(response => {
this.user.phone = this.phone;
this.togglePhoneInput(); //
})
.catch(error => {
console.error('Error updating phone:', error);
});
}
}
}
</script>

@ -1,9 +0,0 @@
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');

@ -1,40 +0,0 @@
<template>
<div class="home-container">
<h1>欢迎来到主页</h1>
<!-- 在这里添加你的主页内容 -->
</div>
</template>
<style scoped>
.home-container {
/* 添加你的样式 */
text-align: center;
padding: 20px;
}
</style>
<script>
export default {
name: 'Home'
}
</script>

@ -1,24 +0,0 @@
import { createWebHistory, createRouter } from 'vue-router';
import Login from '../components/Login.vue';
import Register from '../components/Register.vue';
import Home from '../components/HomePage.vue';
import Message from '../components/message.vue';
import Mine from '../components/mine.vue';
import SearchPage from '../components/searchPage.vue';
const routes = [
{ path: '/', redirect: '/login' }, // 重定向到/login路径
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '/home', component: Home },
{ path: '/message', component: Message },
{ path: '/mine', component: Mine },
{ path: '/searchPage', component: SearchPage },
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;

@ -1,17 +0,0 @@
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))
}
}
})
Loading…
Cancel
Save