Skip to content

G
graducationWeb_vant
Commit 6f098013 by liying
Options

2.8号提交

parent 3fdbbef3
Showing with 1350 additions and 141 deletions
package.json
...@@ -9,11 +9,15 @@ ...@@ -9,11 +9,15 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@nutui/nutui": "^4.2.9",
"amfe-flexible": "^2.2.1", "amfe-flexible": "^2.2.1",
"axios": "^1.6.7", "axios": "^1.6.7",
"vant": "^4.8.3", "vant": "^4.8.3",
"vant-green": "^1.0.44",
"vue": "^3.3.11", "vue": "^3.3.11",
"vue-router": "^4.2.5" "vue-router": "^4.2.5",
"vuex": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^4.5.2", "@vitejs/plugin-vue": "^4.5.2",
......
src/App.vue
<template> <template>
<router-view></router-view> <router-view></router-view>
</template> </template>
<script setup> <script setup>
import { ref, reactive} from "vue"; import { ref, reactive} from "vue";
</script> </script>
<style scoped> <style scoped>
......
src/api/my-account.js
export const baseURL="https://meituan.thexxdd.cn/apie" export const baseURL="http://localhost:8056/employee"
\ No newline at end of file \ No newline at end of file
src/api/request.js
...@@ -7,12 +7,13 @@ const http=axios.create({ ...@@ -7,12 +7,13 @@ const http=axios.create({
}); });
//请求拦截器 //请求拦截器
http.interceptors.request.use((config)=>{ http.interceptors.request.use((config)=>{
// config.headers.token=""
return config; return config;
}); });
//响应拦截器 //响应拦截器
http.interceptors.response.use((response)=>{ http.interceptors.response.use((res)=>{
return response.data; return res.data;
}); });
export default{ export default{
...@@ -20,6 +21,6 @@ export default{ ...@@ -20,6 +21,6 @@ export default{
return http.get(url,{params}); return http.get(url,{params});
}, },
post(url,data){ post(url,data){
returnhttp.post(url,data); return http.post(url,data);
}, },
} }
\ No newline at end of file
src/assets/logo.png
src/assets/logo.png

9.41 KB | W: | H:

src/assets/logo.png

38.6 KB | W: | H:

src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/components/HelloWorld.vue deleted 100644 → 0
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Install
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
in your IDE for a better DX
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
src/components/carouselChart.vue 0 → 100644
<template>
<div class="swiper-container">
<van-swipe :autoplay="3000" :show-indicators="true" indicator-color="white" :loop="true">
<van-swipe-item v-for="(item, index) in swiperItems" :key="index">
<img :src="item" alt="" style="width: 100%;" />
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
import { ref } from 'vue';
import { Swipe, SwipeItem } from 'vant';
// 但是在使用本地图片时，你需要使用 require 或者 import 的方式引入本地图片。
import lun3Image from "@/assets/t3.png"
import lun1Image from "@/assets/t1.png"
import lun2Image from "@/assets/t2.png"
import lun4Image from "@/assets/t4.png"
export default {
components: {
VanSwipe: Swipe,
VanSwipeItem: SwipeItem,
},
setup() {
// 这里可以替换为你的图片地址
const swiperItems = ref([
lun3Image,
lun1Image,
lun2Image,
lun4Image,
]);
return {
swiperItems,
};
},
};
</script>
<style scoped>
.swiper-container {
width: 100%;
overflow: hidden;
height: 400px; /* 设置轮播图高度 */
}
</style>
\ No newline at end of file
src/components/dinbu/index.vue 0 → 100644
<template>
<div class="top-bar">
<!-- 左侧地区下拉选择框 -->
<div class="dropdown-container">
<div class="selected" @click="toggleDropdown">
{{ selectedArea || '地区' }}
<span class="arrow" :class="{ rotated: isDropdownOpen }">&#9660;</span>
</div>
<transition name="fade">
<div v-if="isDropdownOpen" class="options">
<div
v-for="area in areas"
:key="area.value"
@click="selectArea(area)"
>
{{ area.label }}
</div>
</div>
</transition>
</div>
<!-- 中间地区搜索栏 -->
<div class="search-container">
<van-search
v-model="searchKeyword"
clearable
:show-action="showAction"
placeholder="请输入搜索关键词"
@search="onSearch"
@cancel="onCancel"
@focus="onFocus"
@clear="clearSearch"
/>
</div>
<van-popover v-model:show="showPopover" theme="dark" :actions="actions">
<template #reference>
<!-- 右侧+图标栏 -->
<div class="add-icon" @click="showAddPopup">
<span>&#43;</span>
</div>
</template>
</van-popover>
</div>
</template>
<script>
import {ref} from 'vue';
export default {
setup() {
const showPopover = ref(false);
const actions = [
{ text: '扫一扫' },
{ text: '版本切换' },
];
return {
actions,
showPopover,
};
},
data() {
return {
isDropdownOpen: false,
selectedArea: null,
areas: [
{ label: '杭州市', value: 'area1' },
{ label: '武汉市', value: 'area2' },
{ label: '岳阳市', value: 'area3' },
// 可以根据需要添加更多地区选项
],
searchKeyword: '',
};
},
methods: {
toggleDropdown() {
this.isDropdownOpen = !this.isDropdownOpen;
},
selectArea(area) {
this.selectedArea = area.label;
this.isDropdownOpen = false;
},
showAddPopup() {
// 处理+图标点击事件
},
},
};
</script>
<style scoped>
.top-bar {
display: flex;
justify-content: space-between;
padding: 16px;
font-size: 30px;
background-color: #f7f7f7;
}
.dropdown-container {
position: relative;
width: 150px;
height: 100px;
background-color: #f1f3f5;
}
.selected {
padding: 10px;
border: 0px solid #ccc;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
height: 85px;
background-color: #f0f3f6;
}
.arrow {
margin-left: 8px;
}
.rotated {
transform: rotate(180deg);
}
.options {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #a85959;
border: 1px solid #ccc;
border-top: none;
z-index: 1;
}
.options div {
padding: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.options div:hover {
background-color: #f5f5f5;
}
.search-container {
flex: 1;
margin: 0 16px;
}
.search-container input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
}
.add-icon {
padding: 10px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
</style>
src/components/recommend.vue 0 → 100644
<template>
<div class="custom-card">
<!-- Card 的内容，包含 Grid 展示四个图片 -->
<div class="card-header">
<!-- 左侧文字 -->
<div class="card-title">推荐机构</div>
<!-- 右侧文字 -->
<div class="card-more">更多</div>
</div>
<!-- Card 的内容，包含 Grid 展示四个图片 -->
<div class="grid-container">
<div v-for="(item, index) in gridItems" :key="index" class="grid-item">
<!-- 这里可以放置图片和文字 -->
<img :src="item.image" alt="" class="grid-image" />
<div class="grid-item-title">{{ item.title }}</div>
</div>
</div>
</div>
</template>
<script>
import y1Image from "@/assets/yanglao/y1.png"
import y2Image from "@/assets/yanglao/y2.jpeg"
import y3Image from "@/assets/yanglao/y3.png"
import y4Image from "@/assets/yanglao/y4.png"
import y5Image from "@/assets/yanglao/y5.png"
export default {
data() {
return {
gridItems: [
{ title: '机构1', image: y1Image },
{ title: '机构2', image: y2Image },
{ title: '机构3', image: y3Image },
{ title: '机构4', image: y4Image },
],
};
},
};
</script>
<style scoped>
/* 卡片样式 */
.custom-card {
border: 1px solid #ebedf0;
border-radius: 8px;
overflow: hidden;
margin: 10px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 卡片头部样式（推荐机构和更多并排） */
.card-header {
display: flex;
justify-content: space-between;
background-color: #f5f5f5;
}
/* 卡片标题样式 */
.card-title {
font-size: 16px;
font-weight: bold;
padding: 10px;
}
/* 更多文字样式 */
.card-more {
text-align: right;
font-size: 16px;
padding: 10px;
color: #007aff;
}
/* 网格容器样式 */
.grid-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
}
/* 网格项样式 */
.grid-item {
width: calc(50% - 10px); /* 两列，考虑间距 */
margin-bottom: 20px;
padding: 10px;
box-sizing: border-box;
}
/* 图片样式 */
.grid-image {
width: 100%;
height: 250px;
border-radius: 8px;
}
/* 网格项标题样式 */
.grid-item-title {
text-align: center;
padding: 10px;
font-size: 14px;
}
</style>
\ No newline at end of file
src/components/service.vue 0 → 100644
<template>
<div class="custom-card">
<!-- Card 的内容，包含 Grid 展示四个图片 -->
<div class="card-header">
<!-- 左侧文字 -->
<div class="card-title">热门服务</div>
<!-- 右侧文字 -->
<div class="card-more">更多</div>
</div>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
>
<template #tags>
<van-tag plain type="primary">标签</van-tag>
<van-tag plain type="primary">标签</van-tag>
</template>
<template #footer>
<van-button size="mini">按钮</van-button>
<van-button size="mini">按钮</van-button>
</template>
</van-card>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
>
<template #tags>
<van-tag plain type="primary">标签</van-tag>
<van-tag plain type="primary">标签</van-tag>
</template>
<template #footer>
<van-button size="mini">按钮</van-button>
<van-button size="mini">按钮</van-button>
</template>
</van-card>
</div>
</template>
<script>
import lun1Image from "@/assets/lun1.png";
</script>
<style scoped>
/* 卡片样式 */
.custom-card {
border: 1px solid #ebedf0;
border-radius: 8px;
overflow: hidden;
margin: 10px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 卡片头部样式（推荐机构和更多并排） */
.card-header {
display: flex;
justify-content: space-between;
background-color: #f5f5f5;
}
/* 卡片标题样式 */
.card-title {
font-size: 16px;
font-weight: bold;
padding: 10px;
}
/* 更多文字样式 */
.card-more {
text-align: right;
font-size: 16px;
padding: 10px;
color: #007aff;
}
</style>
src/components/tabBar/index.vue
<template> <template>
<div>
<van-tabbar v-model="activeName" route active-color="#f7e087" inactive-color="#a5a29e"> <!-- 菜单栏 -->
<van-tabbar-item to="/" icon="home-o" >首页</van-tabbar-item> <van-tabbar v-model="activeName" class="custom-tabbar" route active-color="#f7e087" inactive-color="#a5a29e">
<van-tabbar-item to="/found" icon="search" >发现</van-tabbar-item> <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
<van-tabbar-item to="/publish" icon="friends-o" >写游记</van-tabbar-item> <van-tabbar-item icon="apps-o" to="/found">服务产品</van-tabbar-item>
<van-tabbar-item to="/mine" icon="setting-o" >我的</van-tabbar-item> <van-tabbar-item icon="shopping-cart-o" to="/publish">地图</van-tabbar-item>
</van-tabbar> <van-tabbar-item icon="user-o" to="/mine">我的</van-tabbar-item>
</template> </van-tabbar>
<script setup> <!-- 中间二维码按钮 -->
import { ref, reactive} from "vue"; <div class="qrcode-button" @click="showQrcode">
const activeName = ref(0); <img src="@/assets/qr.png" alt="Qrcode" />
</div>
</script> </div>
</template>
<style scoped>
<script>
</style> import { ref } from 'vue';
\ No newline at end of file import { Tabbar, Tab } from 'vant';
const activeName = ref(0);
export default {
components: {
VanTabbar: Tabbar,
VanTab: Tab,
},
data() {
return {
active: '/',
};
},
methods: {
showQrcode() {
// 处理点击按钮后显示二维码的逻辑
console.log('显示二维码');
},
},
};
</script>
<style>
.custom-tabbar {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;;
}
.qrcode-button {
position: fixed;
left: 50%;
bottom: 60px; /* 调整按钮距离底部的距离 */
transform: translateX(-50%);
cursor: pointer;
z-index: 2;
}
.qrcode-button img {
width: 88px; /* 调整二维码图片大小 */
height: 88px; /* 调整二维码图片大小 */
border-radius: 50%;
}
</style>
src/main.js
...@@ -2,9 +2,12 @@ import { createApp } from 'vue' ...@@ -2,9 +2,12 @@ import { createApp } from 'vue'
// import './style.css' // import './style.css'
import App from './App.vue' import App from './App.vue'
import 'amfe-flexible' import 'amfe-flexible'
import Login from "./page/login.vue"
//1.引入组件 //1.引入组件
import { Button,Field,CellGroup,Tabbar, TabbarItem,Search} from "vant" import {Pagination, Image,Icon,SwipeCell, Form, Popover,Grid,Card,GridItem,Button,Field,CellGroup,Tabbar, TabbarItem,Search,Cell, PasswordInput,DropdownMenu, DropdownItem,Tab, Tabs } from "vant"
import { Navbar } from '@nutui/nutui';
import '@nutui/nutui/dist/style.css';
//2.引入样式 //2.引入样式
import "vant/lib/index.css" import "vant/lib/index.css"
...@@ -14,7 +17,23 @@ import router from "@/router/index.js" ...@@ -14,7 +17,23 @@ import router from "@/router/index.js"
// createApp(App).mount('#app') // createApp(App).mount('#app')
const app = createApp(App) const app = createApp(App)
app.component("Login",Login)
//3.注册使用组件 //3.注册使用组件
app.use(Tab)
app.use(Tabs)
app.use(Navbar)
app.use(Image)
app.use(Cell)
app.use(Icon)
app.use(Pagination)
app.use(SwipeCell)
app.use(SwipeCell)
app.use(DropdownMenu)
app.use(DropdownItem)
app.use(Grid)
app.use(GridItem)
app.use(Card)
app.use(Form)
app.use(Button) app.use(Button)
app.use(Field) app.use(Field)
app.use(CellGroup) app.use(CellGroup)
...@@ -22,5 +41,6 @@ app.use(router) ...@@ -22,5 +41,6 @@ app.use(router)
app.use(Tabbar) app.use(Tabbar)
app.use(TabbarItem) app.use(TabbarItem)
app.use(Search) app.use(Search)
app.use(Popover)
app.mount("#app") app.mount("#app")
src/page/found/found.vue
<template> <template>
<p>目的地</p> <!--顶部导航栏-->
<tabBar></tabBar> <dinbu></dinbu>
</template>
<script setup> <!--下拉选项-->
import { ref, reactive} from "vue"; <van-dropdown-menu active-color="#ee0a24">
import tabBar from "@/components/tabBar/index.vue"; <van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</script> <van-dropdown-item v-model="value3" :options="option3" />
<van-dropdown-item v-model="value4" :options="option4" />
<style scoped> </van-dropdown-menu>
</style> <van-swipe-cell>
\ No newline at end of file <van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
<template #prev-text>
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow" />
</template>
<template #page="{ text }">{{ text }}</template>
</van-pagination>
<br><br>
<tabBar></tabBar>
</template>
<script setup>
import { ref, reactive } from "vue";
import tabBar from "@/components/tabBar/index.vue";
import dinbu from "@/components/dinbu/index.vue";
import card1 from "@/components/card1.vue";
import service from '@/components/service.vue'
const value1 = ref(0);
const value2 = ref('a');
const value3 = ref('a');
const value4 = ref('a');
const option1 = [
{ text: '综合排序', value: 0 },
{ text: 'xxxxxx', value: 1 },
{ text: 'xxxxxx', value: 2 },
];
const option2 = [
{ text: '分类', value: 'a' },
{ text: 'xxxxxx', value: 'b' },
{ text: 'xxxxxx', value: 'c' },
];
const option3 = [
{ text: '区县选择', value: 'a' },
{ text: 'xxxxxx', value: 'b' },
{ text: 'xxxxxx', value: 'c' },
];
const option4 = [
{ text: '好评度', value: 'a' },
{ text: 'xxxxxx', value: 'b' },
{ text: 'xxxxxx', value: 'c' },
];
const currentPage = ref(1);
</script>
<style scoped>
.goods-card {
margin: 0;
background-color: white;
}
.delete-button {
height: 100%;
}
</style>
\ No newline at end of file
src/page/index/index.vue
<template> <template>
<van-search <!--顶部导航栏-->
v-model="value" <dinbu></dinbu>
:show-action="showAction"
placeholder="请输入搜索关键词" <!--轮播图-->
@search="onSearch" <carouselChart></carouselChart>
@cancel="onCancel"
@focus="onFocus"
/> <!-- 中部菜单 -->
<p>首页</p> <van-grid :column-num="4">
<van-grid-item v-for="(item, index) in menuItems" :key="index" :icon="item.icon" :text="item.text" />
<tabBar></tabBar> </van-grid>
</template>
<!--推荐机构展示-->
<script setup> <recommend></recommend>
import { ref, reactive, onMounted} from "vue";
import tabBar from "@/components/tabBar/index.vue"; <!--热门服务-->
import http from "@/api/request"; <service></service>
<card1></card1>
<card1></card1>
onMounted((res)=>{
let result=http.get("/recomm_travel").catch((err)=>{ <tabBar></tabBar>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import tabBar from "@/components/tabBar/index.vue";
import http from "@/api/request";
import dinbu from "@/components/dinbu/index.vue";
import carouselChart from "../../components/carouselChart.vue";
import recommend from "../../components/recommend.vue";
import service from '@/components/service.vue'
import card1 from "../../components/card1.vue";
import s1Image from "@/assets/fuwu/s1.png"
import s2Image from "@/assets/fuwu/s2.png"
import s3Image from "@/assets/fuwu/s3.png"
import s4Image from "@/assets/fuwu/s4.png"
const keywords = ref("");
//
// const gridArr=ref([])
const recommendArr = ref();
onMounted(async () => {
let result = await http
.post("/login", { username: "admin", password: "123456" })
.catch((err) => {
console.log(err); console.log(err);
}); });
console.log(result)
}); recommendArr.value = result.data;
});
</script> // gridArr.value=result.data.category_nav
<style scoped>
</style>
\ No newline at end of file const menuItems = [
{ icon: s4Image ,text: '找机构' },
{ icon: s3Image, text: '找服务' },
{ icon: s2Image, text: '标题3' },
{ icon: s1Image , text: '标题4' },
];
</script>
<style scoped></style>
src/page/login.vue 0 → 100644
<!-- src/components/Login.vue -->
<template>
<div class="login-container">
<img class="logo" src="@/assets/logo.png" alt="Logo" />
<van-form class="login-form" @submit="onSubmit" ref="loginForm">
<van-field v-model="username" label="用户名" placeholder="请输入用户名" required />
<van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required />
<div class="extra-links">
<router-link to="/forgot-password" class="link">忘记密码？</router-link>
<router-link to="/register" class="link">注册账号</router-link>
</div>
<van-button type="primary" native-type="submit" class="login-button" block>
登录
</van-button>
</van-form>
</div>
</template>
<script>
import { ref } from 'vue';
import 'vant/lib/index.css';
import { Form, Button, Field } from 'vant';
import {useRouter} from 'vue-router';
export default {
setup() {
const router = useRouter();
const username = ref('');
const password = ref('');
const onSubmit = async () => {
try {
// 模拟登录请求（实际中替换为真实的登录逻辑）
// const response = await fakeLogin();
// 如果登录成功，可以导航到下一个页面
console.log('登录成功:');
// 例子：导航到主页
router.push('/');
} catch (error) {
// 处理登录错误
console.error('登录失败:', error);
}
};
const fakeLogin = () => {
// 模拟登录请求（实际中替换为真实的登录逻辑）
return new Promise((resolve) => {
setTimeout(() => {
resolve({ userId: 123, username: username.value });
}, 1000); // 模拟延迟
});
};
return {
username,
password,
onSubmit,
};
},
};
</script>
<style scoped>
/* 添加组件特定的样式 */
/* 添加组件特定的样式 */
.login-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: url("@/assets/background.jpg") center center/cover no-repeat; /* 使用图片作为背景 */
}
.logo {
width: 100px;
height: 100px;
margin-bottom: 20px;
border-radius: 50%;
transition: transform 0.3s ease-in-out;
}
.logo:hover {
transform: rotate(360deg);
}
.login-form {
width: 80%;
max-width: 600px;
background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out;
}
.login-form:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.extra-links {
margin-top: 10px;
display: flex;
justify-content: space-between;
color: #888;
}
.link {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.link:hover {
color: #0056b3;
}
.login-button {
margin-top: 20px;
transition: background-color 0.3s ease-in-out;
}
.login-button:hover {
background-color: #4CAF50;
}
</style>
src/page/mine/mine.vue
<template> <template>
<p>我的</p> <div class="my-page">
<tabBar></tabBar> <!-- 头部信息 -->
</template> <div class="header">
<!-- 头像、昵称、标签等个人信息 -->
<script setup> <div class="user-info">
import { ref, reactive} from "vue"; <van-image class="avatar" :src="yourAvatarUrl" />
import tabBar from "@/components/tabBar/index.vue"; <div class="info-text">
<div class="nickname">{{ nickname }}</div>
</script> <div class="tag">快乐老人</div>
<div class="description">详细描述信息</div>
<style scoped> </div>
</div>
</style> <!-- 右侧的 > 符号 -->
\ No newline at end of file <div class="arrow">&gt;</div>
</div>
<myOrder></myOrder>
<div class="organization-section">
<!-- 菜单列表 -->
<van-cell-group>
<!-- 我的预约-->
<van-cell
title="我的预约"
is-link
@click="goToMyOrders" class="organization-cell"
>
<template #icon>
<van-icon name="todo-list-o" class="icon" />
</template>
</van-cell>
<!-- 我的钱包 -->
<van-cell
title="我的钱包"
is-link
@click="goToMyWallet" class="organization-cell "
>
<template #icon>
<van-icon name="balance-o" class="icon" />
</template>
</van-cell>
<!-- 我的健康 -->
<van-cell
title="我的健康"
is-link
@click="goToMemberCenter" class="organization-cell "
>
<template #icon>
<van-icon name="like-o" class="icon" />
</template>
</van-cell>
<!-- 我的活动 -->
<van-cell
title="我的活动"
is-link
@click="goToSettings" class="organization-cell "
>
<template #icon>
<van-icon name="point-gift-o" class="icon" />
</template>
</van-cell>
<!-- 我的机构 -->
<van-cell
title="我的机构"
is-link
@click="goToSettings" class="organization-cell "
>
<template #icon>
<van-icon name="newspaper-o" class="icon" />
</template>
</van-cell>
<!-- 我的亲友 -->
<van-cell
title="我的亲友"
is-link
@click="goToSettings" class="organization-cell "
>
<template #icon>
<van-icon name="friends-o" class="icon" />
</template>
</van-cell>
<!-- 系统设置 -->
<van-cell
title="系统设置"
is-link
@click="goToSettings" class="organization-cell "
>
<template #icon>
<van-icon name="setting-o" class="icon" />
</template>
</van-cell>
<!-- ... 其他菜单项 -->
</van-cell-group>
</div>
<!-- 底部退出登录按钮 -->
<div class="logout-button">
<van-button type="default" @click="logout">退出登录</van-button>
</div>
</div>
<tabBar></tabBar>
</template>
<script setup>
import { ref, reactive } from "vue";
import tabBar from "@/components/tabBar/index.vue";
import myOrder from '@/components/order/myOrder.vue'
const yourAvatarUrl = ref('https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg');
const nickname = ref('Your Nickname');
function goToMyOrders() {
// 处理跳转到我的订单页面
}
function goToMyWallet() {
// 处理跳转到我的钱包页面
}
function goToMemberCenter() {
// 处理跳转到会员中心页面
}
function goToSettings() {
// 处理跳转到设置页面
}
function logout() {
// 处理退出登录逻辑
}
</script>
<style scoped>
.my-page {
background-color: white;
padding-top: env(safe-area-inset-top); /* 适配 iPhone X 及以上的刘海屏 */
}
.header {
background-color: #00BAAD;
color: #fff;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
height: 180px;
}
.user-info {
display: flex;
align-items: center;
}
.avatar {
width: 90px;
height: 90px;
border-radius: 50%;
margin-right: 16px;
}
.info-text {
display: flex;
flex-direction: column;
}
.nickname {
font-size: 24px;
font-weight: bold;
}
.tag {
margin-top: 4px;
background-color: #f0f3f6;
color: #333;
padding: 4px 8px;
border-radius: 12px;
font-size: 13px;
width: 60px;
display: inline-block;
}
.description {
margin-top: 4px;
font-size: 14px;
color: #f0f3f6;
}
.arrow {
font-size: 24px;
}
.organization-section {
margin-top: 16px;
}
.organization-cell {
display: flex;
align-items: center;
justify-content: space-between;
}
.icon {
margin-right: 8px; /* 调整图标和文字之间的右边距 */
}
.logout-button {
margin-top: 20px;
padding: 16px;
text-align: center;
}
</style>
src/page/publish/publish.vue
<template> <template>
<p>发布</p> <div>
<tabBar></tabBar> <!-- 定义一个输入框用于搜索位置 -->
</template> <van-search v-model="searchKeyword" placeholder="搜索位置" @search="searchLocation" />
<script setup> <!-- 地图容器 -->
import { ref, reactive} from "vue"; <div id="amap" style="height: 80vh;"></div>
import tabBar from "@/components/tabBar/index.vue";
<!-- 定义搜索结果列表容器 -->
</script> <div id="panel"></div>
</div>
<style scoped> <tabBar></tabBar>
</template>
</style>
\ No newline at end of file <script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { Search } from 'vant';
import AMapLoader from '@amap/amap-jsapi-loader';
import tabBar from "@/components/tabBar/index.vue";
const center = ref([116.397428, 39.90923]); // 地图中心坐标
const zoom = ref(13); // 地图缩放级别
const apiKey = '69f3058fc3e75700391f94ba06904d67';
const searchKeyword = ref('');
let map;
// 加载高德地图
const loadAMap = async () => {
try {
const AMapAPI = await AMapLoader.load({
key: apiKey,
version: '2.0',
plugins: ['AMap.Geolocation', 'AMap.MarkerClusterer'],
});
console.log('AMap API:', AMapAPI);
// 初始化地图
map = new AMap.Map('amap', {
center: center.value,
zoom: zoom.value,
zooms: [3, 18], // 设置缩放级别范围
zoomEnable: true, // 开启地图缩放
resizeEnable: true, // 是否监控地图容器尺寸变化
});
// 添加定位插件
map.plugin('AMap.Geolocation', function () {
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0,
showMarker: true,
showCircle: true,
panToLocation: true,
});
// 获取当前位置
geolocation.getCurrentPosition(function (status, result) {
if (status === 'complete') {
const { lng, lat } = result.position;
center.value = [lng, lat];
map.setCenter(center.value);
} else {
console.error('Failed to get current position:', result);
}
});
map.addControl(geolocation);
});
// 添加标记
const marker = new AMap.Marker({
position: center.value,
title: '这里是标记点',
});
marker.setMap(map);
} catch (error) {
console.error('Failed to load AMap:', error);
}
};
// 搜索位置
const searchLocation = () => {
if (!searchKeyword.value) return;
AMapLoader.load({
key: apiKey,
version: '2.0',
plugins: ['AMap.PlaceSearch'],
}).then((AMap) => {
const placeSearch = new AMap.PlaceSearch({
pageSize: 5, // 每页显示结果数量
pageIndex: 1, // 页码
city: '全国', // 全国范围搜索
citylimit: true, // 是否强制限制在当前城市
map: map, // 展现结果的地图实例
panel: 'panel', // 结果列表的HTML容器id
});
// 关键字搜索
placeSearch.search(searchKeyword.value);
});
};
// 在组件挂载前加载地图
onMounted(() => {
loadAMap();
});
// 在组件销毁前卸载地图
onBeforeUnmount(() => {
map && map.destroy();
});
</script>
<style scoped>
/* 根据实际需求调整样式 */
#amap {
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 10px;
}
/* 定义搜索结果列表样式 */
#panel {
position: absolute;
top: 100px;
left: 10px;
max-width: 300px;
background-color: #fff;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
</style>
src/page/register.vue 0 → 100644
<!-- src/views/Register.vue -->
<template>
<div class="register-container">
<img class="logo" src="@/assets/logo.png" alt="Logo" />
<van-form class="register-form" @submit="onSubmit" ref="registerForm">
<van-field v-model="username" label="用户名" placeholder="请输入用户名" required />
<van-field v-model="email" type="email" label="邮箱" placeholder="请输入邮箱" required />
<van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required />
<van-field v-model="confirmPassword" type="password" label="确认密码" placeholder="请确认密码" required />
<van-button type="primary" native-type="submit" class="register-button" block>
注册
</van-button>
</van-form>
</div>
</template>
<script>
import { ref } from 'vue';
import 'vant/lib/index.css';
import { Form, Button, Field } from 'vant';
export default {
setup() {
const username = ref('');
const email = ref('');
const password = ref('');
const confirmPassword = ref('');
const onSubmit = async () => {
try {
// 模拟注册请求（实际中替换为真实的注册逻辑）
const response = await fakeRegister();
// 如果注册成功，可以导航到登录页面或其他页面
console.log('注册成功:', response);
// 例子：导航到登录页面
this.$router.push('/login');
} catch (error) {
// 处理注册错误
console.error('注册失败:', error);
}
};
const fakeRegister = () => {
// 模拟注册请求（实际中替换为真实的注册逻辑）
return new Promise((resolve) => {
setTimeout(() => {
resolve({ userId: 456, username: username.value, email: email.value });
}, 1000); // 模拟延迟
});
};
return {
username,
email,
password,
confirmPassword,
onSubmit,
};
},
};
</script>
<style scoped>
/* 添加组件特定的样式 */
.register-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: url("@/assets/background.jpg") center center/cover no-repeat;
}
.logo {
width: 100px;
height: 100px;
margin-bottom: 20px;
border-radius: 50%;
transition: transform 0.3s ease-in-out;
}
.logo:hover {
transform: rotate(360deg);
}
.register-form {
width: 80%;
max-width: 600px;
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out;
}
.register-form:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.register-button {
margin-top: 20px;
transition: background-color 0.3s ease-in-out;
}
.register-button:hover {
background-color: #4CAF50;
}
</style>
\ No newline at end of file
src/router/index.js
...@@ -21,6 +21,28 @@ const routes = [ ...@@ -21,6 +21,28 @@ const routes = [
name:"mine", name:"mine",
component:()=>import("@/page/mine/mine.vue") component:()=>import("@/page/mine/mine.vue")
}, },
{
path:"/login",
name:"login",
component:()=>import("@/page/login.vue")
},
{
path:"/register",
name:"register",
component:()=>import("@/page/register.vue")
},
{
path:"/forgot-password",
name:"forgot-password",
component:()=>import("@/page/register.vue")
},
{
path:"/orders",
name:"orders",
component:()=>import("@/page/mine/orders.vue"),
props: (route) => ({ status: route.query.status }),
},
]; ];
......
vite.config.js
...@@ -9,6 +9,10 @@ console.log(pathResolve,"111") ...@@ -9,6 +9,10 @@ console.log(pathResolve,"111")
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
// server:{
// host: '192.168.43.92',
// port: 8001
// },
resolve:{ resolve:{
alias:[{find:"@",replacement:pathResolve("src")}] alias:[{find:"@",replacement:pathResolve("src")}]
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment