parent
dece352494
commit
420c9925aa
@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<label for="user-input"></label>
|
||||||
|
<input type="text" id="user-input" v-model="userInput" placeholder="请输入">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
userInput: '', // 初始化为空字符串
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -1,87 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="item">
|
|
||||||
<i>
|
|
||||||
<slot name="icon"></slot>
|
|
||||||
</i>
|
|
||||||
<div class="details">
|
|
||||||
<h3>
|
|
||||||
<slot name="heading"></slot>
|
|
||||||
</h3>
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.item {
|
|
||||||
margin-top: 2rem;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
place-content: center;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
color: var(--color-heading);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.item {
|
|
||||||
margin-top: 0;
|
|
||||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
top: calc(50% - 25px);
|
|
||||||
left: -26px;
|
|
||||||
position: absolute;
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
background: var(--color-background);
|
|
||||||
border-radius: 8px;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:before {
|
|
||||||
content: ' ';
|
|
||||||
border-left: 1px solid var(--color-border);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: calc(50% + 25px);
|
|
||||||
height: calc(50% - 25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:after {
|
|
||||||
content: ' ';
|
|
||||||
border-left: 1px solid var(--color-border);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: calc(50% + 25px);
|
|
||||||
height: calc(50% - 25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:first-of-type:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:last-of-type:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -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>
|
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<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;
|
||||||
|
} </style>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
export type AreaList = {
|
||||||
|
code: string;
|
||||||
|
level: number;
|
||||||
|
name: string;
|
||||||
|
areaList: AreaList[];
|
||||||
|
};
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 787 KiB |
@ -1,9 +1,13 @@
|
|||||||
import { createApp } from 'vue';
|
import { createApp } from 'vue';
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import router from './router';
|
import router from './router';
|
||||||
|
import ElementPlus from 'element-plus';
|
||||||
|
import 'element-plus/theme-chalk/index.css';
|
||||||
|
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||||
|
import '@vuepic/vue-datepicker/dist/main.css'
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
app.use(ElementPlus);
|
||||||
app.use(router);
|
app.use(router);
|
||||||
|
app.component('VueDatePicker', VueDatePicker);
|
||||||
app.mount('#app');
|
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>
|
|
||||||
@ -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://106.52.218.118:12607/users/pupdate`,{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><h2>发布需求</h2></div>
|
||||||
|
<div class="addDemand-container">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<VueDatePicker
|
||||||
|
placeholder="请选择出行时间"
|
||||||
|
range
|
||||||
|
:min-date="new Date()"
|
||||||
|
format="yyyy-MM-dd"
|
||||||
|
:width="280"
|
||||||
|
v-model="rangeValue" />
|
||||||
|
</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 #00ff00;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue