|
|
|
|
@ -1,119 +0,0 @@
|
|
|
|
|
<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>
|
