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

src%2F前端%2Fsrc%2Fpages/addServe.vue

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

src/前端/src/pages/changeInformation.vue

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